-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path02-index.html
105 lines (101 loc) · 5.13 KB
/
02-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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Headphones</title>
<link rel="stylesheet" href="02-styles.css">
</head>
<body>
<header>
<div>
<a href="#">
<img src="images/logo_headphones.png" alt="logo">
</a>
<!-- Invisible checkbox -->
<input class="menu-btn" type="checkbox" id="menu-btn">
<!-- Label with an empty span -->
<label for="menu-btn" class="menu-icon">
<span class="navicon"></span>
<span class="navicon"></span>
<span class="navicon"></span>
</label>
<nav class="navbar-menu">
<ul class="nav">
<li class="nav-item"><a href="#">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>
<main>
<section class="hero">
<h2>Lorem ipsum dolor set amet lorem ipsum</h2>
<p>Lorem ipsum dolor set amet lorem ipsum dolor set</p>
<button class="btn" type="button">CALL TO ACTION</button>
<p class="paragraph">
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>
</section>
<!----What we do..." section---->
<section class="wwd">
<div class="wwd-title">
<h1>What we do....</h1>
<p>rem 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="container">
<div class="element-icon">
<span><img src="./images/sound-frecuency.png" alt="sound"></span>
<h4 class="element-title">Lorem ipsum</h4>
<h6 class="small-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
</div>
<div class="element-icon">
<span><img src="./images/video.png" alt="video"></span>
<h4 class="element-title">Lorem ipsum</h4>
<h6 class="small-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
</div>
<div class="element-icon">
<span><img src="./images/music.png" alt="music"></span>
<h4 class="element-title">Lorem ipsum</h4>
<h6 class="small-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
</div>
<div class="element-icon">
<span><img src="./images/hearing.png" alt="hearing"></span>
<h4 class="element-title">Lorem ipsum</h4>
<h6 class="small-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
</div>
</div>
</section>
<!----Our results speak for themselves----->
<section class="background-speak">
<div class="title-spe">
<h1>Our results speak for themselves</h1>
<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 class="container-spe">
<span><img src="./images/Polygon.png" alt="Polygon"></span>
<span><img src="./images/Polygon.png" alt="Polygon"></span>
<span><img src="./images/Polygon.png" alt="Polygon"></span>
<span><img src="./images/Polygon.png" alt="Polygon"></span>
</div>
</div>
</section>
<!--Contact us---->
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>