-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
276 lines (250 loc) · 14.7 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
<!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">
<meta name="description" content="This is the description of my website" />
<title>Creative</title>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
<header class="home-header">
<div class="wrapper">
<nav class="header-nav">
<button class="hamburger" aria-label="view page's navigation links" id="myMenuId">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<ul class="nav-links mobile menu-pop-out" id="myListId">
<li><a href="#" class="home" aria-label="Click to reach home page">home</a></li>
<li><a href="/blog.html" class="blog-link" aria-label="Click to reach blog page">blog</a></li>
<li><a href="#" class="portfolio-link" aria-label="Click to go to portfolio page">portfolio</a></li>
<li class="dissapearing special-mobile"><a href="#" class="shop" aria-label="click to go to shopping cart">shop</a></li>
<li class="dissapearing special-mobile"><a href="/contact.html" class="contact-link" aria-label="Click to go to contact page">contact</a></li>
</ul>
<h1 class="logo">creative</h1>
<ul class="nav-links">
<li class="mobile right"><a href="#" class="shop" aria-label="Click to go to shopping cart">shop</a></li>
<li class="mobile right"><a href="/contact.html" class="contact-link" aria-label="Click to go to shopping cart">contact</a></li>
<li>
<button aria-label="search for products">
<i class="fas fa-search"></i>
</button>
</li>
<li>
<button aria-label="view your shopping cart">
<i class="fas fa-shopping-bag"></i>
</button>
</li>
</ul>
</nav>
</div> <!-- .wrapper ends -->
</header> <!-- Header ends -->
<!-- Main Begins -->
<main>
<section class="intro">
<div class="wrapper">
<div class="intro-img-container">
<img src="./assets/home-2.jpeg" alt="A white room with a wooden table and a desktop computer on it with a flower beside it and a calender on the wall">
<div class="absolute-container">
<img class="img-overlay" src="./assets/home-circle-text.png" alt="Text reads, Branding and Website Pros">
</div>
</div>
<div class="flex-container">
<div class="intro-text">
<h2>branding</h2>
<p>Venture first mover advantage incubator metrics focus backing business-to-consumer.</p>
</div>
<div class="intro-text">
<h2>Design & Develop</h2>
<p>Venture first mover advantage incubator metrics focus backing business-to-consumer.</p>
</div>
</div>
</div> <!-- .wrapper ends -->
</section> <!-- .intro section ends -->
<div class="wrapper">
<section class="gallery">
<div class="gallery-container">
<button class="left-arrow" aria-label="content to the left">
<i class="fas fa-angle-left"></i>
</button>
<img src="./assets/home-3.jpeg" alt="paper outline of website layout with text on left side and shirtless man on grey background on the right">
<p class="gallery-text">Ecosystem iPad disruptive social media low hanging fruit stealth launch party handshake market branding. Pitch agile development business plan stealth channels prototype mass 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 class="dots-menu">
<button class="dot" aria-label="first content"></button>
<button class="dot" aria-label="second content"></button>
<button class="dot" aria-label="third content"></button>
</div>
<button class="right-arrow" aria-label="content to the right">
<i class="fas fa-angle-right"></i>
</button>
</div>
</section> <!-- .gallery section ends -->
</div> <!-- .wrapper ends -->
<section class="products">
<div class="wrapper">
<div class="products-spacer">
<ul class="products-container">
<li class="product">
<div class="border">
<i class="fas fa-magic"></i>
</div>
<div class="descriptor">
<h2>unique design</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low hanging fruit burn.</p>
</div>
</li>
<li class="product">
<div class="border">
<i class="fas fa-map-pin"></i>
</div>
<div class="descriptor">
<h2>seo marketing</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low hanging fruit burn.</p>
</div>
</li>
<li class="product">
<div class="border">
<i class="fas fa-desktop"></i>
</div>
<div class="descriptor">
<h2>retina ready</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low hanging fruit burn.</p>
</div>
</li>
<li class="product">
<div class="border">
<i class="fas fa-shopping-bag"></i>
</div>
<div class="descriptor">
<h2>ecommerce ready</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low hanging fruit burn.</p>
</div>
</li>
<li class="product">
<div class="border">
<i class="fas fa-sliders-h"></i>
</div>
<div class="descriptor">
<h2>advanced options</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low hanging fruit burn.</p>
</div>
</li>
<li class="product">
<div class="border">
<i class="fas fa-smile"></i>
</div>
<div class="descriptor">
<h2>customizable</h2>
<p>Twitter validation first mover advantage advisor angel investor beta churn rate low hanging fruit burn.</p>
</div>
</li>
</ul>
</div> <!-- .spacer ends -->
</div> <!-- .wrapper ends -->
</section> <!-- .products ends -->
<section class="team">
<div class="wrapper">
<h2 class="h2-title">meet our team</h2>
<ul class="team-container">
<li class="team-players">
<div class="players-wrapper">
<h2>Team Players</h2>
<p>Pitch client interaction design ownership disruptive leverage prototype conversion. Deployment validation gen-z disruptive paradigm shift churn rate niche market graphical user interface.</p>
</div> <!-- .players-wrapper ends -->
</li>
<li>
<img src="./assets/home-5.jpeg" alt="man in formal suit and orange tie profile on grey background looking into the camera">
</li>
<li>
<img src="./assets/home-6.jpeg" alt="woman's left profile, looking into the camera wearing a patterned sweater with blurred background">
</li>
<li>
<img src="./assets/home-7.jpeg" alt="woman's front profile, having brown hair wearing a tank-top positioned in front of a brick wall">
</li>
<li>
<img src="./assets/home-8.jpeg" alt="man's front profile looking into the camera with a blurred out background, man is wearing a black shirt">
</li>
<li>
<img src="./assets/home-9.jpeg" alt="woman's front profile looking into the camera, wearing glasses and having her hair in a bun, background blurred behind her">
</li>
<li class="centered-text">
<h3>want to work with us !</h3>
</li>
</ul>
</div> <!-- .wrapper ends -->
</section> <!-- .team section ends -->
<section class="portfolio">
<div class="portfolio-container">
<h2>drop us a line</h2>
<p>Pitch client interaction design ownership disruptive leverage prototype conversion. Deployment validation gen-z disruptive paradigm shift churn rate niche market graphical user interface</p>
<button aria-label="go to portfolio">view portfolio</button>
</div>
<div class="img-container">
<img src="./assets/home-10.jpeg" alt="white table with phone on it turned on, a folder with files strewing out, and a coffee cup with a black lid">
</div>
</section> <!-- .portfolio section ends -->
</main> <!-- main ends -->
<footer>
<div class="wrapper">
<div class="flex-footer">
<section class="contact">
<h3>contact us</h3>
<address>
<ul>
<li>6591 Orchard Street, NY 10002, United States</li>
<li>Email: contact@onepro.co</li>
<li>Phone 01: +00 (9) 123 3456 789</li>
<li>Phone 02: +00 (9) 123 3456 788</li>
<li>Fax: +00 (9) 643 6543 898</li>
</ul>
</address>
<div class="social-icons">
<ul>
<li><a href="#" aria-label="link to socials">
<i class="fab fa-facebook-f"></i>
</a></li>
<li><a href="#" aria-label="link to socials">
<i class="fab fa-twitter"></i>
</a></li>
<li><a href="#" aria-label="link to socials">
<i class="fab fa-instagram"></i>
</a></li>
</ul>
</div>
</section> <!-- .contact section ends-->
<section class="recent-posts">
<h3>recent posts</h3>
<ul>
<li><a href="#" aria-label="link to blog">Conversion hackathon partner</a></li>
<li><a href="#" aria-label="link to blog">Network channels entrepreneur</a></li>
<li><a href="#" aria-label="link to blog">Return on investment creative</a></li>
<li><a href="#" aria-label="link to blog">Assets interaction design venture</a></li>
<li><a href="#" aria-label="link to blog">Infographic learning curve</a></li>
</ul>
</section> <!-- .recent-posts section ends -->
<section class="twitter-widget">
<h3>twitter widget</h3>
<form action="">
<h4>Signup for emails and notifications below.</h4>
<div class="button-input-styling">
<label for="userEmail" class="sr-only">Enter your email</label>
<input type="email" id="userEmail" placeholder="Enter your email">
<button type="submit" aria-label="form submit">
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
</form>
</section> <!-- .twitter-widget section ends -->
</div> <!-- .flex-footer ends here-->
<section class="banner">
<p>creative agency</p>
</section> <!-- .banner section ends -->
</div> <!-- .wrapper ends here -->
</footer>
<script src="./main.js"></script>
</body>
</html>