-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (165 loc) · 7.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="holberton_school-icon/style.css">
</head>
<body>
<header>
<nav>
<img src="images/logo_headphones.png"
alt="Headphones Logo">
<div class="nav-links" id="navLinks">
<label for="menu-toggle" class="close-sidebar-button"
onclick="hideMenu()">
<svg class="x-icon" xmlns="http://www.w3.org/2000/svg"
fill="none" height="32px" viewBox="0 0 24 24"
width="32px" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18 18 6M6 6l12 12" />
</svg>
</label>
<ul>
<li><a href>what we do</a></li>
<li><a href>our results</a></li>
<li><a href>contact us</a></li>
</ul>
</div>
<label for="menu-toggle" class="open-sidebar-button"
onclick="showMenu()">
<svg class="menu-icon" xmlns="http://www.w3.org/2000/svg"
fill="none" height="32px" viewBox="0 0 24 24"
width="32px" stroke-width="1.5" stroke="currentColor"
class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</label>
</nav>
<div class="main-content">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing</h1>
<p class="sub-heading">Lorem ipsum dolor sit amet consectetur
adipisicing elit.
Iusto, tenetur recusandae</p>
<a class="main-content-btn" href="#">CALL TO ACTION</a>
<p class="description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Aperiam impedit <br> excepturi eaque, sequi quasi velit
minus, maiores fugiat ab corporis <br> repudiandae
dignissimos incidunt nam veritatis atque dolorem
asperiores esse dolores?</p>
</div>
</header>
<main>
<section class="what-we-do">
<div class="what-we-do-content">
<h1>What we do...</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aperiam quaerat doloribus eum vitae est dignissimos
neque aut, dicta cum quibusdam laboriosam expedita
pariatur amet repudiandae esse perspiciatis quos. Magni,
explicabo.</p>
</div>
<div class="with-icons">
<div class="icon">
<span class="holberton_school-icon-ic_sound"></span>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet,<br> consectetur,
adipisicing elit.</p>
</div>
<div class="icon">
<span class="holberton_school-icon-ic_video"></span>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet,<br> consectetur,
adipisicing elit.</p>
</div>
<div class="icon">
<span class="holberton_school-icon-ic_music"></span>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet,<br> consectetur,
adipisicing elit.</p>
</div>
<div class="icon">
<span class="holberton_school-icon-ic_hearing"></span>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet,<br> consectetur,
adipisicing elit.</p>
</div>
</section>
<section class="our-results">
<div class="our-results-content">
<h1>Our results speak for themselves</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Aperiam quaerat doloribus eum vitae est
dignissimos neque aut, dicta cum quibusdam
laboriosam
expedita pariatur amet repudiandae esse perspiciatis
quos. Magni, explicabo.</p>
</div>
<div class="results">
<div class="result">
<h2>+2%</h2>
<p>Lorem ipsum dolor </p>
</div>
<div class="result">
<h2>+2%</h2>
<p>Lorem ipsum dolor</p>
</div>
<div class="result">
<h2>+2%</h2>
<p>Lorem ipsum dolor </p>
</div>
<div class="result">
<h2>+2%</h2>
<p>Lorem ipsum dolor </p>
</div>
</div>
</section>
<section class="contact-us">
<div class="contact">
<h1>Contact us</h1>
<form action="#">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<textarea name="message" id="message" cols="30"
rows="10" placeholder="Your message"></textarea>
<a href="#" class="btn-submit">CALL TO ACTION</a>
</form>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footer-logo">
<img src="images/logo_headphones.png"
alt="Headphones Logo">
</div>
<div class="footer-social">
<a href="#"><span
class="holberton_school-icon-ic_facebook"></span></a>
<a href="#"><span
class="holberton_school-icon-ic_twitter"></span></a>
<a href="#"><span
class="holberton_school-icon-ic_instagram"></span></a>
</div>
</div>
<div class="copyright-info">
<p>© Headphones2020</p>
</div>
</footer>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}
</script>
</body>
</html>