-
Notifications
You must be signed in to change notification settings - Fork 0
/
4-index.html
132 lines (125 loc) · 5.74 KB
/
4-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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Headphones</title>
<meta name="description" content="Design from scratch" />
<link rel="icon" type="image/x-icon" href="./images/favicon.ico" />
<link rel="icon" type="image/png" href="./images/favicon.png" />
<link rel="stylesheet" href="4-styles.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./holberton_school-icon/style.css" />
</head>
<body>
<!-- Header -->
<header>
<h2><a href=""><img src="./images/logo_headphones.png" alt="Headphones logo" width="160px"></a></h2>
<input type="checkbox" id="menu-btn" class="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav>
<li><a href="#">What we do</a></li>
<li><a href="#">Our results</a></li>
<li><a href="#">Contact us</a></li>
</nav>
</header>
<!-- Hero -->
<section class="hero">
<div class="background-image"></div>
<h1 class="hero-title">Lorem ipsum dolor sit amet consectetur</h1>
<h2 class="hero-subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
<a href="" class="button">Call to action</a>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, illum ab aliquid saepe quasi quia delectus. Cumque, repellat consequatur assumenda dolorum corrupti quasi officia nam numquam reprehenderit animi, incidunt architecto? Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
</section>
<!-- Description -->
<section class="description">
<h3 class="title">What we do...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem doloremque tempora harum corporis mollitia quod aspernatur, recusandae, atque, nemo commodi quam natus? Atque dignissimos modi voluptate dolores aut cum tenetur?</p>
<hr>
<ul class="columns">
<li>
<i class="fa fa-soundcloud"></i>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</li>
<li>
<i class="fa fa-film"></i>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</li>
<li>
<i class="fa fa-music"></i>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</li>
<li>
<i class="fa fa-assistive-listening-systems"></i>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
</ul>
</section>
<!-- Results -->
<section class="results">
<h3 class="title">Our results speak for themselves</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur explicabo ducimus alias quaerat nulla quidem. Sit, aspernatur ad facilis quos harum fugiat cum minus quisquam ex nam, asperiores, fugit eaque. Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<hr>
<div class="columns">
<div class="poly">
<p class="number">+2%</p>
<p class="subtitle">Lorem ipsum dolor</p>
</div>
<div class="poly">
<p class="number">+2%</p>
<p class="subtitle">Lorem ipsum dolor</p>
</div>
<div class="poly">
<p class="number">+2%</p>
<p class="subtitle">Lorem ipsum dolor</p>
</div>
<div class="poly">
<p class="number">+2%</p>
<p class="subtitle">Lorem ipsum dolor</p>
</div>
</div>
</section>
<!-- Contact -->
<section class="contact">
<h3 class="title">Contact us</h3>
<form action="#" method="POST">
<div class="form-group">
<div class="form-field">
<input type="text" name="name" id="name" placeholder="Name" pattern="[A-Za-zÀ-ž\s]{3,}" maxlength="35" autocomplete="on" required>
</div>
</div>
<div class="form-group">
<div class="form-field">
<span class="form-field-container">
<input type="email" name="email" id="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" maxlength="55" autocomplete="on" required>
</span>
</div>
</div>
<div class="form-group">
<div class="form-field">
<input type="text" name="comment" id="comment" placeholder="Your message" pattern="[A-Za-zÀ-ž\s]{4,}" maxlength="75" autocomplete="on" required>
</div>
</div>
<div class="form-group">
<a href="" class="button">Call to action</a>
</div>
</form>
</section>
<!-- Footer -->
<footer class="footer">
<div class="items">
<a href=""><img src="./images/logo_headphones.png" alt="Headphones logo" width="160px"></a>
<ul>
<li><a href="#" class="btn-secondary"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="btn-secondary"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="btn-secondary"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p class="copy">© headphones 2020</p>
</footer>
</body>
</html>