-
Notifications
You must be signed in to change notification settings - Fork 0
/
2-index.html
193 lines (165 loc) · 18.4 KB
/
2-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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="2-styles.css">
<link rel="stylesheet" href="font/webfontkit-source-sans-pro/fontsheet.css">
<title>Headphones</title>
</head>
<body>
<!-- Hero Section -->
<section class="hero-section">
<div class="container">
<!-- Header -->
<header>
<div class="header-container">
<div class="header-logo">
<a href="#">
<img src="images/logo_headphones.png" alt="">
</a>
</div>
<nav class="navbar">
<ul>
<li class="nav-item">
<a href="#What-we-do">what we do</a>
</li>
<li class="nav-item">
<a href="#our-results">our results</a>
</li>
<li class="nav-item">
<a href="#">contact us</a>
</li>
</ul>
</nav>
</div>
<div class="mobile-header-container">
<div class="dropdown-menu">
<input type="checkbox" class="dp-toggler">
<div class="dropdown-icon">
<div class="rec rec-01"></div>
<div class="rec rec-02"></div>
<div class="rec rec-03"></div>
</div>
<nav class="dropdown-nav">
<ul>
<li class="nav-item">
<a href="#What-we-do">what we do</a>
</li>
<li class="nav-item">
<a href="#">our results</a>
</li>
<li class="nav-item">
<a href="#">contact us</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="hero-body">
<div class="hero-header">
<h1>Lorem ipsum dolor set amet lorem ipsum</h1>
<p>Lorem ipsum dolor set amet lorem ipsum dolor set</p>
</div>
<!-- cta-btn = call-to-action button -->
<button type="submit" class="btn cta-btn">CALL TO ACTION</button>
<div class="hero-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</section>
<main>
<!-- What We Do -->
<section class="wwd-section" id="What-we-do">
<div class="container">
<div class="wwd-container">
<div class="wwd-body">
<h2>What we do...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="wwd-icons">
<div class="wwd-sound">
<div class="wwd-ic ic-01">
<svg width="95" height="66" viewBox="0 0 95 66" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M40.9092 2.1213C40.9092 0.961501 41.8494 0.0213013 43.0092 0.0213013C44.169 0.0213013 45.1092 0.961501 45.1092 2.1213V63.2784C45.1092 64.4382 44.169 65.3784 43.0092 65.3784C41.8494 65.3784 40.9092 64.4382 40.9092 63.2784V2.1213ZM34.8276 14.5764C33.6678 14.5764 32.7276 15.5166 32.7276 16.6764V48.7236C32.7276 49.8834 33.6678 50.8236 34.8276 50.8236C35.9874 50.8236 36.9276 49.8834 36.9276 48.7236V16.6764C36.9276 15.5166 35.9874 14.5764 34.8276 14.5764ZM24.5454 22.8189C24.5454 21.6591 25.4856 20.7189 26.6454 20.7189C27.8055 20.7189 28.7454 21.6588 28.7454 22.8189V42.5814C28.7454 43.7412 27.8052 44.6814 26.6454 44.6814C25.4856 44.6814 24.5454 43.7412 24.5454 42.5814V22.8189ZM18.4638 24.1905C17.304 24.1905 16.3638 25.1307 16.3638 26.2905V39.1095C16.3638 40.2693 17.304 41.2095 18.4638 41.2095C19.6236 41.2095 20.5638 40.2693 20.5638 39.1095V26.2905C20.5638 25.1307 19.6236 24.1905 18.4638 24.1905ZM0 29.2284C0 28.0686 0.9402 27.1284 2.1 27.1284C3.2598 27.1284 4.2 28.0683 4.2 29.2284V36.1719C4.2 37.3317 3.2598 38.2719 2.1 38.2719C0.9402 38.2719 0 37.3317 0 36.1719V29.2284ZM8.1819 29.2284C8.1819 28.0686 9.1221 27.1284 10.2819 27.1284C11.442 27.1284 12.3819 28.0683 12.3819 29.2284V36.1719C12.3819 37.3317 11.4417 38.2719 10.2819 38.2719C9.1221 38.2719 8.1819 37.3317 8.1819 36.1719V29.2284ZM51.1911 5.229C50.0313 5.229 49.0911 6.1692 49.0911 7.329V58.071C49.0911 59.2308 50.0313 60.171 51.1911 60.171C52.3509 60.171 53.2911 59.2308 53.2911 58.071V7.329C53.2911 6.1689 52.3509 5.229 51.1911 5.229ZM57.2727 17.7444C57.2727 16.5846 58.2129 15.6444 59.3727 15.6444C60.5325 15.6444 61.4727 16.5846 61.4727 17.7444V47.6553C61.4727 48.8151 60.5325 49.7553 59.3727 49.7553C58.2129 49.7553 57.2727 48.8151 57.2727 47.6553V17.7444ZM67.5549 21.9201C66.3951 21.9201 65.4549 22.8603 65.4549 24.0201V41.3793C65.4549 42.5391 66.3951 43.4793 67.5549 43.4793C68.7147 43.4793 69.6549 42.5391 69.6549 41.3793V24.0201C69.6549 22.8603 68.7147 21.9201 67.5549 21.9201ZM73.6368 26.6913C73.6368 25.5315 74.577 24.5913 75.7368 24.5913C76.8966 24.5913 77.8368 25.5315 77.8368 26.6913V38.709C77.8368 39.8688 76.8966 40.809 75.7368 40.809C74.577 40.809 73.6368 39.8688 73.6368 38.709V26.6913ZM83.9184 27.1284C82.7586 27.1284 81.8184 28.0686 81.8184 29.2284V36.1719C81.8184 37.3317 82.7586 38.2719 83.9184 38.2719C85.0782 38.2719 86.0184 37.3317 86.0184 36.1719V29.2284C86.0184 28.0683 85.0782 27.1284 83.9184 27.1284ZM90 29.2284C90 28.0686 90.9402 27.1284 92.1 27.1284C93.2598 27.1284 94.2 28.0683 94.2 29.2284V36.1719C94.2 37.3317 93.2598 38.2719 92.1 38.2719C90.9402 38.2719 90 37.3317 90 36.1719V29.2284Z" fill="#FF6565" />
</svg>
</div>
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="wwd-video">
<div class="wwd-ic ic-02">
<svg width="68" height="77" viewBox="0 0 68 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M66.0885 31.0014H14.9127L64.0676 16.7619C64.4496 16.6512 64.7719 16.3928 64.9641 16.0447C65.1562 15.6961 65.202 15.2859 65.0912 14.9039L62.5189 6.02402C61.4912 2.47734 58.1889 0 54.4881 0C53.7082 0 52.9312 0.110742 52.1777 0.328711L6.02636 13.698C3.89179 14.3162 2.12285 15.7354 1.04414 17.693C-0.0339876 19.6506 -0.287113 21.9047 0.331051 24.0387L2.84414 32.7141V68.4521C2.84414 73.0553 6.58886 76.8 11.1914 76.8H29.216C30.0445 76.8 30.716 76.1285 30.716 75.3C30.716 74.4715 30.0445 73.8 29.216 73.8H11.192C8.24297 73.8 5.84414 71.4012 5.84414 68.4521V48.0393H13.5287H13.5322H13.5352H25.282H25.2855H25.2891H37.0359H37.0395H37.043H48.7898H48.7934H48.7963H64.5885V68.4521C64.5885 71.4012 62.1896 73.8 59.2406 73.8H41.216C40.3881 73.8 39.716 74.4715 39.716 75.3C39.716 76.1285 40.3881 76.8 41.216 76.8H59.2406C63.8438 76.8 67.5885 73.0553 67.5885 68.4521V32.5014C67.5885 31.6728 66.917 31.0014 66.0885 31.0014ZM39.6387 45.0393L46.0119 34.0014H54.3012L47.9285 45.0393H39.6387ZM34.258 34.0014L27.8848 45.0393H36.1746L42.5473 34.0014H34.258ZM16.1314 45.0393L22.5041 34.0014H30.7939L24.4207 45.0393H16.1314ZM11.0361 15.3703L21.7084 25.6207C21.7828 25.6922 21.849 25.7701 21.9053 25.8521L29.9016 23.5359L19.2293 13.2855C19.1543 13.2135 19.0887 13.1361 19.0324 13.0541L11.0361 15.3703ZM41.8084 6.74473L52.4807 16.9951L44.4844 19.3113C44.4281 19.2293 44.3625 19.1514 44.2875 19.0799L33.6152 8.82949L41.6115 6.51328C41.6678 6.59531 41.7334 6.67266 41.8084 6.74473ZM41.1908 20.2652L30.5186 10.0154C30.4441 9.94336 30.3785 9.86543 30.3217 9.78398L22.3254 12.1002L32.9977 22.3506C33.0727 22.4221 33.1383 22.5 33.1945 22.582L41.1908 20.2652ZM53.0127 3.21035C53.4943 3.0709 53.9906 3 54.4881 3C56.8617 3 58.9787 4.58672 59.6373 6.85898L61.7924 14.2975L55.7742 16.0406C55.7174 15.9586 55.6518 15.8812 55.5768 15.8092L44.9051 5.55937L53.0127 3.21035ZM6.86132 16.5797C5.49609 16.9752 4.36347 17.8846 3.67207 19.1402C2.98066 20.3965 2.81718 21.8396 3.21269 23.2043L5.36777 30.6428L18.6117 26.8061L7.93945 16.5557C7.86504 16.4842 7.79941 16.4062 7.74257 16.3242L6.86132 16.5797ZM5.84414 34.0014H19.04L12.6674 45.0393H5.84414V34.0014ZM57.7652 34.0014L51.3926 45.0393H64.5885V34.0014H57.7652ZM44.8383 59.468C45.3023 59.7357 45.5883 60.2309 45.5883 60.767C45.5883 61.3031 45.3023 61.7982 44.8383 62.066L31.66 69.6738C31.4279 69.808 31.1689 69.8754 30.91 69.8754C30.651 69.8754 30.392 69.808 30.16 69.6738C29.6959 69.4061 29.41 68.9109 29.41 68.3754V53.1586C29.41 52.6225 29.6959 52.1273 30.16 51.8596C30.624 51.5918 31.1959 51.5918 31.66 51.8596L44.8383 59.468ZM32.41 55.7566V65.7773L41.0883 60.767L32.41 55.7566ZM33.716 75.3C33.716 74.4738 34.3898 73.8 35.216 73.8C36.0428 73.8 36.716 74.4738 36.716 75.3C36.716 76.1262 36.0428 76.8 35.216 76.8C34.3898 76.8 33.716 76.1262 33.716 75.3Z" fill="#FF6565" />
</svg>
</div>
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="wwd-music">
<div class="wwd-ic ic-03">
<svg width="52" height="58" viewBox="0 0 52 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.66 1.62192V12.6139V12.6259V39.3019C51.66 41.4019 50.616 43.3339 48.72 44.7619C46.956 46.0819 44.652 46.8139 42.204 46.8139C39.756 46.8139 37.452 46.0819 35.688 44.7619C33.792 43.3339 32.748 41.4019 32.748 39.3019C32.748 37.2019 33.792 35.2699 35.688 33.8419C37.452 32.5219 39.768 31.7899 42.204 31.7899C44.508 31.7899 46.704 32.4379 48.42 33.6259V14.8339L18.912 24.2179V49.7539C18.912 51.8539 17.868 53.7859 15.972 55.2139C14.208 56.5339 11.904 57.2659 9.456 57.2659C7.008 57.2659 4.704 56.5339 2.94 55.2139C1.044 53.7859 0 51.8539 0 49.7539C0 47.6539 1.044 45.7219 2.94 44.2939C4.704 42.9739 7.02 42.2419 9.456 42.2419C11.76 42.2419 13.956 42.8899 15.672 44.0779V23.0419V23.0299V12.0259C15.672 11.3179 16.128 10.6939 16.8 10.4779L49.548 0.0739189C50.04 -0.0820811 50.58 0.0139189 51 0.313919C51.408 0.613919 51.66 1.10592 51.66 1.62192ZM3.24 49.7539C3.24 52.0699 6.084 54.0259 9.456 54.0259C12.828 54.0259 15.672 52.0819 15.672 49.7539C15.672 47.4379 12.828 45.4819 9.456 45.4819C6.084 45.4819 3.24 47.4379 3.24 49.7539ZM18.912 20.8099V13.2019L48.42 3.82992V11.4379L18.912 20.8099ZM36 39.3019C36 41.6179 38.844 43.5739 42.216 43.5739C45.576 43.5739 48.42 41.6179 48.432 39.3019C48.432 36.9859 45.588 35.0299 42.216 35.0299C38.844 35.0299 36 36.9859 36 39.3019Z" fill="#FF6565" />
</svg>
</div>
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="wwd-hearing">
<div class="wwd-ic ic-04">
<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.8039 0.000459243C45.5602 0.0374905 50.9649 2.21483 55.0223 6.13171C59.0948 10.0636 61.3706 15.3201 61.4297 20.9334C61.5066 28.2098 57.8011 34.9256 51.518 38.8969C48.9788 40.5019 47.678 43.4217 48.2822 46.1625C48.5006 47.1548 48.5953 48.1772 48.5634 49.2009C48.465 52.3481 47.1619 55.3331 44.8941 57.6061C42.6389 59.8669 39.6295 61.2197 36.4209 61.4151C36.1495 61.432 35.8781 61.44 35.6077 61.44C32.1614 61.44 28.8431 60.1069 26.3981 57.7158C23.7441 55.1198 22.6444 51.292 23.2177 46.6453C24.2803 38.0358 23.3044 31.7245 19.8497 24.8611C18.2124 21.6075 17.8341 18.2691 18.7556 15.2067C20.0592 10.8764 22.8291 6.98765 26.5552 4.25671C30.3966 1.4414 34.973 -0.0295408 39.8039 0.000459243ZM45.4219 40.6411C46.2938 38.6836 47.7366 37.028 49.5942 35.8537C54.8147 32.5542 57.8934 26.9906 57.8302 20.9714C57.7814 16.3294 55.8961 11.9789 52.522 8.72155C49.133 5.45015 44.6081 3.6314 39.7809 3.60046C35.7347 3.5803 31.8966 4.80562 28.6833 7.16062C25.5839 9.43171 23.2824 12.6581 22.2033 16.2445C21.3806 18.9778 22.2178 21.5587 23.0653 23.2425C27.7842 32.617 27.5967 40.5567 26.7909 47.0864C26.3541 50.6259 27.0689 53.3362 28.9153 55.1419C30.8264 57.0108 33.4809 57.9872 36.202 57.8217C38.5308 57.6801 40.7128 56.7005 42.3455 55.0636C43.965 53.4403 44.8955 51.3183 44.9649 49.0884C44.9878 48.3628 44.9208 47.6386 44.7666 46.9373C44.3011 44.8251 44.528 42.6483 45.4219 40.6411ZM39.6567 8.52468C32.5017 8.52468 26.6803 14.1905 26.6803 21.1547V21.1758C26.6803 21.743 26.948 22.2773 27.4022 22.6172C27.8564 22.957 28.4442 23.0625 28.9884 22.9026C30.0361 22.5947 31.2347 22.7034 32.1952 23.1937C33.6258 23.925 34.5202 25.4512 34.4203 26.9916C34.3209 28.5155 33.2536 29.9189 31.7639 30.4833C30.8344 30.8358 30.3666 31.875 30.7186 32.8045C30.9914 33.5241 31.6758 33.967 32.4024 33.967C32.6142 33.967 32.8298 33.9291 33.0398 33.8498C35.8252 32.7942 37.8234 30.1322 38.0124 27.225C38.2045 24.2714 36.5245 21.3633 33.8325 19.988C32.8078 19.4644 31.6683 19.177 30.517 19.1339C31.4723 15.1247 35.2078 12.1247 39.6567 12.1247C44.827 12.1247 49.0331 16.1756 49.0331 21.1547C49.0331 22.1489 49.8394 22.9547 50.8331 22.9547C51.8274 22.9547 52.6336 22.1489 52.6336 21.1547C52.6336 14.1905 46.8122 8.52468 39.6567 8.52468ZM11.13 24.9787C11.8214 24.2648 12.9614 24.247 13.6749 24.9384C17.1563 28.3116 19.0734 32.8073 19.0734 37.5975C19.0734 42.3876 17.1563 46.8834 13.6753 50.2566C13.3256 50.5955 12.8738 50.7642 12.4228 50.7642C11.9527 50.7642 11.483 50.5809 11.13 50.2167C10.4381 49.5028 10.4559 48.3633 11.1699 47.6714C13.9453 44.9822 15.4734 41.4047 15.4734 37.5975C15.4734 33.7908 13.9453 30.2133 11.1699 27.5241C10.4559 26.8322 10.4381 25.6926 11.13 24.9787ZM0.5311 33.7992C-0.1739 34.4995 -0.17765 35.6395 0.523132 36.3445C1.09407 36.9192 1.09407 37.8544 0.523132 38.4291C-0.17765 39.1341 -0.1739 40.2736 0.5311 40.9744C0.882194 41.3236 1.3411 41.4975 1.80001 41.4975C2.26266 41.4975 2.72532 41.3203 3.07688 40.9664C5.03813 38.9925 5.03813 35.7811 3.07688 33.8072C2.3761 33.1022 1.23657 33.0984 0.5311 33.7992ZM5.86923 30.0764C6.56063 29.3625 7.70016 29.3442 8.41454 30.0361C10.4953 32.0526 11.6414 34.7381 11.6414 37.5975C11.6414 40.4573 10.4953 43.1428 8.41454 45.1594C8.06485 45.4978 7.61298 45.6665 7.16204 45.6665C6.69141 45.6665 6.22219 45.4833 5.86923 45.1191C5.17735 44.4051 5.19516 43.2656 5.90907 42.5737C7.28438 41.2416 8.04141 39.4744 8.04141 37.5975C8.04141 35.7211 7.28438 33.9539 5.90907 32.6217C5.19516 31.9298 5.17735 30.7903 5.86923 30.0764Z" fill="#FF6565" />
</svg>
</div>
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Results -->
<section class="results-section" id="our-results">
<div class="container">
<div class="results-container">
<div class="results-body">
<h2>Our results speak for themselves</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="results-icons">
<div class="results-pent">
<img class="res-pent res-pent-01" src="images/pentagone.png" alt="pentagone-shape">
<div class="res-text">
<p>+2%</p>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="results-pent">
<img class="res-pent res-pent-02" src="images/pentagone.png" alt="pentagone-shape">
<div class="res-text">
<p>+2%</p>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="results-pent">
<img class="res-pent res-pent-03" src="images/pentagone.png" alt="pentagone-shape">
<div class="res-text">
<p>+2%</p>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="results-pent">
<img class="res-pent res-pent-04" src="images/pentagone.png" alt="pentagone-shape">
<div class="res-text">
<p>+2%</p>
<p>Lorem ipsum dolor</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>