-
Notifications
You must be signed in to change notification settings - Fork 0
/
3-index.html
114 lines (114 loc) · 6.39 KB
/
3-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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Headphones</title>
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="3-styles.css">
</head>
<body>
<section class="hero">
<nav class="header">
<div class="wrapper header_container">
<input type="checkbox" id="open-menu">
<label for="open-menu" class="nav-icon">
<div class="bar-icon"></div>
</label>
<a href=""><img src="./images/logo_headphones.png" class="logo" alt="logo_headphones"></a>
<ul class="nav-list">
<li class="nav-item"><a href="#what"><b>what we do</b></a></li>
<li class="nav-item"><a href="#results"><b>our results</b></a></li>
<li class="nav-item"><a href="#contact"><b>contact us</b></a></li>
</ul>
</div>
</nav>
<div class="wrapper">
<h1 class="hero-1">Lorem ipsum dolor set amet lorem ipsum</h1>
<p class="hero-2">Lorem ipsum dolor set amet lorem ipsum dolor set</p>
<button class="btn btn-color btn-shadow">CALL TO ACTION</button>
<p class="hero-3">
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>
</section>
<!-- WHAT WE DO -->
<section class="tasks" id="what">
<div class="wrapper">
<h2 class="tasks-title">What we do…</h2>
<p class="tasks-detail">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="tasks_container">
<section class="tasks-column">
<span class="icon holberton_school-icon-ic_sound"></span>
<h3 class="column-title">Lorem ipsum</h3>
<p class="column-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="tasks-column">
<span class="icon holberton_school-icon-ic_video"></span>
<h3 class="column-title">Lorem ipsum</h3>
<p class="column-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="tasks-column">
<span class="icon holberton_school-icon-ic_music"></span>
<h3 class="column-title">Lorem ipsum</h3>
<p class="column-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="tasks-column">
<span class="icon holberton_school-icon-ic_hearing"></span>
<h3 class="column-title">Lorem ipsum</h3>
<p class="column-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</div>
</div>
</section>
<!-- OUR RESULTS -->
<section class="results" id="results">
<div class="wrapper">
<h2 class="results-title">Our results speak for themselves</h2>
<p class="results-detail">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="results_container">
<section class="result-column">
<div class="column-pentagone">
<span>+2%</span><p>Lorem ipsum dolor</p>
</div>
</section>
<section class="result-column">
<div class="column-pentagone">
<span>+2%</span><p>Lorem ipsum dolor</p>
</div>
</section>
<section class="result-column">
<div class="column-pentagone">
<span>+2%</span><p>Lorem ipsum dolor</p>
</div>
</section>
<section class="result-column">
<div class="column-pentagone">
<span>+2%</span><p>Lorem ipsum dolor</p>
</div>
</section>
</div>
</div>
</section>
<!-- CONTACT US -->
<div class="wrapper-contact">
<div class="contact" id="contact">
<form class="contact-form" action="submit">
<h2 class="contact-title">Contact Us</h2>
<label class="contact-label"><input type="text" placeholder="Name">
</label>
<label class="contact-label"><input type="text" placeholder="Email">
</label>
<label class="contact-label"><input type="text" placeholder="Your Message">
</label>
<button class="btn btn-color">CALL TO ACTION</button>
</form>
</div>
</div>
</body>
</html>