-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
348 lines (334 loc) · 11.6 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative - Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/88337ba8f3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
<!-- Skip Link -->
<a href="#main-content" class="skip-link">Skip to main content.</a>
<!-- HEADER BEGINS -->
<header class="index-header">
<nav class="header-nav wrapper">
<a class="creative-logo" href="./index.html">
<h1>Creative</h1>
</a>
<label class="menu-button" for="toggle">
<!-- Hiding hamburger icon to replace with three individual lines. -->
<!-- <i class="fa-solid fa-bars hamburger-menu" title="Open Navigation Menu"></i> -->
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</label>
<input type="checkbox" id="toggle" name="toggle" />
<ul class="mobile-menu">
<li>
<a class="active-link" href="./index.html">Home</a>
</li>
<li>
<a href="./pages/blog.html">Blog</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="#">Shop</a>
</li>
<li>
<a href="./pages/contact.html">Contact</a>
</li>
<li>
<button type="button" class="soc-med-button search-button">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</li>
<li>
<button type="button" class="soc-med-button shop-bag">
<i class="fa-solid fa-bag-shopping"></i>
<p class="cart-number">2</p>
</button>
</li>
</ul><!-- End of .mobile-menu -->
<ul class="home-menu">
<li>
<a class="active-link" href="./index.html">Home</a>
</li>
<li>
<a href="./pages/blog.html">Blog</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
</ul><!-- End of .home-menu -->
<ul class="shop-menu">
<li>
<a href="#">Shop</a>
</li>
<li>
<a href="./pages/contact.html">Contact</a>
</li>
<li>
<button type="button" class="search-button soc-med-button">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</li>
<li>
<button type="button" class="shop-bag soc-med-button">
<i class="fa-solid fa-bag-shopping"></i>
<p class="cart-number">2</p>
</button>
</li>
</ul><!-- End of .shop-menu -->
</nav><!-- End of .header-nav .wrapper -->
<span class="vertical-line" aria-hidden="true"></span>
</header>
<!-- HEADER ENDS -->
<!-- MAIN BEGINS -->
<main id="main-content">
<!-- SECTION ONE - BRANDING - BEGINS -->
<section class="section-branding">
<div class="wrapper section-container">
<div class="desk-img-container">
<img class="desk-img" src="./assets/home-2.jpeg"
alt="Minimalist desk scene with calendar, computer and plant.">
<img class="circular-text" src="./assets/home-circle-text.png" alt="Branding and website pros.">
</div>
<div class="branding-text-container">
<div class="container-branding">
<a href="#">
<h2>Branding</h2>
</a>
<p>Venture first mover advantage incubator metrics focus backing business-to-consumer.</p>
</div> <!-- End of .branding-flexbox -->
<div class="container-design-develop">
<a href="#">
<h2>Design & Develop</h2>
</a>
<p>Venture first mover advantage incubator metrics focus backing business-to-consumer.</p>
</div> <!-- End of .development-flexbox -->
</div><!-- End of .branding-text-container -->
</div><!-- End of .wrapper .section-container -->
</section>
<!-- SECTION ONE - BRANDING - ENDS -->
<!-- SECTION TWO - CIRCLE GALLERY - BEGINS -->
<section class="section-gallery wrapper">
<!-- Left scroll icon -->
<button class="soc-med-button">
<i class="fa-solid fa-angle-left left-scroll-icon"></i>
</button>
<div class="container-circle-gallery">
<img class="magazine-img" src="./assets/home-3.jpeg"
alt="Magazine layout sheets spread neatly across a table.">
<p>Ecosystem iPad disruptive social media low hanging fruit stealth launch party handshake market
branding. Pitch agile development business plan stealth channels prototype masss market product
management value proposition startup strategy. Product management early adopters user experience
metrics advisor gamification responsive web design hackathon termsheet backing series. </p>
</div>
<!-- Right scroll icon -->
<button class="soc-med-button">
<i class="fa-solid fa-angle-right right-scroll-icon"></i>
</button>
</section>
<!-- SECTION TWO - CIRCLE GALLERY - ENDS -->
<!-- SECTION THREE - ICON GALLERY - BEGINS -->
<section class="section-icon-gallery">
<div class="icon-gallery-container">
<ul class="icon-gallery-list">
<li>
<button class="icon-gallery-button">
<i class="fa-sharp fa-solid fa-wand-magic-sparkles"></i>
</button>
<div class="gallery-text-container">
<h2>Unique Design</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low
hanging fruit
burn.</p>
</div>
</li>
<li>
<button class="icon-gallery-button">
<i class="fa-solid fa-map-pin"></i>
</button>
<div class="gallery-text-container">
<h2>Seo Marketing</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low
hanging fruit
burn.</p>
</div>
</li>
<li>
<button class="icon-gallery-button">
<i class="fa-solid fa-display"></i>
</button>
<div class="gallery-text-container">
<h2>Retina Ready</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low
hanging
fruit
burn.</p>
</div>
</li>
<li>
<button class="icon-gallery-button">
<i class="fa-solid fa-bag-shopping"></i>
</button>
<div class="gallery-text-container">
<h2>Ecommerce Ready</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low
hanging
fruit
burn.</p>
</div>
</li>
<li>
<button class="icon-gallery-button">
<i class="fa-solid fa-sliders"></i>
</button>
<div class="gallery-text-container">
<h2>Advanced Options</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low
hanging
fruit
burn.</p>
</div>
</li>
<li>
<button class="icon-gallery-button">
<i class="fa-solid fa-face-smile"></i>
</button>
<div class="gallery-text-container">
<h2>Customizable</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low
hanging
fruit
burn.</p>
</div>
</li>
</ul><!-- End of .icon-gallery-list -->
</div><!-- End of .icon-gallery-container -->
</section>
<!-- SECTION THREE - ICON GALLERY - ENDS -->
<!-- SECTION FOUR - TEAM - BEGINS -->
<section class="section-team">
<span class="vertical-line-two" aria-hidden="true"></span>
<div class="wrapper">
<h2>Meet Our Team</h2>
<div class="container-meet-our-team">
<div class="container-team-players">
<h3>Team Players</h3>
<p>Pitch client interaction ownership disruptive leverage prototype conversion. Deployment
validation gen-z disruptive paradigm shift church rate niche market graphical user
interface.
</p>
</div> <!-- End of .container-team-players -->
<div class="container-team-img">
<a href="#"><img src="./assets/home-5.jpeg"
alt="Professional headshot of a man in grey vest with orange tie."></a>
</div>
<div class="container-team-img">
<a href="#"><img src="./assets/home-6.jpeg"
alt="Professional headshot of a woman with a short blond pixie haircut."></a>
</div>
<div class="container-team-img">
<a href="#"><img src="./assets/home-7.jpeg"
alt="Headshot of a woman with long brown hair and a tattoo on her shoulder."></a>
</div>
<div class="container-team-img">
<a href="#"><img src="./assets/home-8.jpeg" alt="Headshot of a man in a black t-shirt."></a>
</div>
<div class="container-team-img">
<a href="#"><img src="./assets/home-9.jpeg"
alt="Casual headshot of a woman wearing a pink apron over her sweatshirt."></a>
</div>
<div class="container-work-with-us">
<a class="anchor-box" href="#">
<h3>Want to Work with us?</h3>
</a>
</div>
</div><!-- End of .container-meet-our-team -->
</div><!-- End of .wrapper -->
</section>
<!-- SECTION FOUR - TEAM - ENDS -->
<!-- SECTION FIVE - DROP A LINE - BEGINS -->
<section class="section-drop-a-line">
<div class="container-drop-a-line">
<h2>Drop Us a Line</h2>
<p>Pitch client interaction ownership disruptive leverage prototype conversion. Deployment
validation gen-z disruptive paradigm shift church rate niche market graphical user interface.</p>
<a class="portfolio-link" href="#">View Portfolio</a>
</div>
<div class="container-drop-img">
<img src="./assets/home-10.jpeg" alt="Birds eye view of a desktop with an iphone and file folder.">
</div>
</section>
<!-- SECTION FIVE - DROP A LINE - ENDS -->
</main>
<!-- FOOTER BEGINS -->
<footer>
<div class="footer-container wrapper">
<!-- Contact Us Container -->
<div class="contact-us-container">
<h4>Contact Us</h4>
<p>6591 Orchard Street, NY 10002, United States</p>
<p>Email: <a href="mailto:email-address-here">
[email protected]</a></p>
<p>Phone 01: <a href="tel:phone-number"> +00 (9) 123 3456 789</a></p>
<p>Phone 02:<a href="tel:phone-number"> +00 (9) 123 3456 789</a></p>
<p>Fax: <a href="fax:fax-number">+00 (9)
<div class="footer-icon-container">
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
</div><!-- End of .footer-icon-container-->
</div><!-- End of .contact-us-container-->
<!-- Recent Posts Container -->
<div class="recent-posts-container">
<h4>Recent Posts</h4>
<ul>
<li>
<a>Conversion hackathon partner</a>
</li>
<li>
<a>Network channels entrepreneur</a>
</li>
<li>
<a>Return on investment creative</a>
</li>
<li>
<a>Assets interaction design venture</a>
</li>
<li>
<a>Infographic learning curve</a>
</li>
</ul>
</div><!-- End of .recent-posts-container-->
<!-- Twitter Container -->
<div class="twitter-container">
<h4>Twitter Widget</h4>
<form action="#" method="post" class="footer-form" name="footer-form">
<label for="user-email">Signup for emails and notifications below.</label>
<div class="email-container">
<input type="email" name="user-email" id="user-email" placeholder="Enter your email">
<button type="submit" class="email-submit-button"><i
class="fa-solid fa-right-long"></i></button>
</div>
</form>
</div> <!-- End of .twitter-container-->
</div><!-- End of .footer-container-->
<div class="creative-container">
<a href="./index.html">
<p>Creative Agency</p>
</a>
</div>
</footer>
<script src="./script.js"></script>
</body>
</html>