-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (120 loc) · 6.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html>
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toshca Williams - Code Louisville ~ Final Project</title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/tab.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="color:#fff;font-size:44px;">Template Library</h1>
<p style="color:#fff;">Start your project here</p>
<button>Browse</button><!-- Not linked -->
</div>
</div>
<div>
<!-- Responsive Tabbed Navigation and Body -->
<div class="tab-nav-container" id="grad-blue">
<div class="tab-row">
<a href="javascript:void(0)" onclick="openArchive(event, 'Home');" data-target="#home" class="media_node active section" data-toggle="tabajax">
<div class="tab-third tab-link active tab-hover-light-blue tab-padding">Home</div>
</a>
<a href="javascript:void(0)" onclick="openArchive(event, 'Library');">
<div class="tab-third tab-link tab-hover-light-blue tab-padding">Library</div>
</a>
<a href="javascript:void(0)" onclick="openArchive(event, 'Portfolio');">
<div class="tab-third tab-link tab-hover-light-blue tab-padding">Portfolio</div>
</a>
</div>
</div>
<div class="tab-container">
<div id="Home" class="tab-container archive">
<section class="flex-welcome tab-quarter">
<div style="flex-direction:column;">
<h1 style="color:#2B6791">Welcome</h1>
<p>We work across many groups from support to strategy. Start your project with one of our templates.</p>
<img src="https://www.dropbox.com/s/1zjmxulgm329b7p/project.png?raw=1" class="hide" align="center" height="450" />
</div>
</section>
<section class="flex-nav tab-threequarter">
<div class="flex-container" style="margin-bottom:50px;">
<div class="nav-block hover-shadow" onclick="openModal();currentSlide(1)">Campaign</div>
<div class="nav-block">Newsletter</div>
<div class="nav-block">Notice</div>
<div class="nav-block">Event</div>
</div>
</section>
<!-- Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div style="padding:20px;">
<h1>📧 Campaigns</h1>
<p>Defined: Email marketing campaigns can also be comprised of several rounds of messages meant to build familiarity and trust around a product or service. In the broadest sense, any email sent to a subscriber list of customers or prospects can be considered email marketing. ~icontact.com</p>
<p><a href="" style="font-size:16px;color:#aa005f;font-weight:bold" target="_blank">Let's start browsing <strong>→</strong></a> It won't take you anywhere but one day... in a galaxy</p>
<img src="https://www.dropbox.com/s/r0o1l9khw9r849z/shutterstock_353676692_emailcampaign.png?raw=1" class="full_img" width="800" />
</div>
</div>
</div>
</div>
<div id="Library" class="tab-container archive" style="display:none">
<!-- Image Gallery -->
<h1 style="color:#2B6791">Library</h1>
<p>Yep! This is where my library is going. I am thinking about doing a menu on the left, and either some anchors on the right or a slide show that has a download button. I need to think about it further. I'm not sure exactly how I want to lay this out but I will need a graphic, a description and a download button.</p>
<p>These images are not linked. I mean they click but they do not go anywhere yet, and these are certainly not templates so they are what I call placeholders, or fillers. Kind of like this text that I'm rambling.</p>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_fjords.jpg">
<img src="https://www.dropbox.com/s/3a18t4k8scif233/Desert.jpg?raw=1" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="https://www.dropbox.com/s/pfcjjp3fsutnlsd/Jellyfish.jpg?raw=1" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="https://www.dropbox.com/s/0lz1bd9asf0qpui/Koala.jpg?raw=1" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="https://www.dropbox.com/s/vitz84rxxb7cy34/Lighthouse.jpg?raw=1" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<!-- /Img Gall -->
</div>
<div id="Portfolio" class="tab-container archive" style="display:none">
<section class="flex-welcome tab-half responsive">
<h1 style="color:#2B6791">Portfolio</h1>
<p>As a designer, we always want to know how we are growing in our skills. Having a portfolio can showcase many things. In regards to email, there's a/b/c/d testing, subject line testing, live content implementation and much much more. I think for the portfolio, I am looking to have a lightbox layout as well, possibly slides, but the lightbox would include the template in multiple client package, history on the campaign and maybe even a comments blog. Decisions, decisions...</p>
</div>
<div class="flex-nav tab-half"><img class="full_img" width="200" /></div>
</div>
</div>
</div>
<div>
<footer class="footer">
<section style="">© Toshca Williams Final Code Louisville Project 2017</section>
</footer>
</div>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tab.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>