-
Notifications
You must be signed in to change notification settings - Fork 0
/
1-index.html
66 lines (63 loc) · 2.93 KB
/
1-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
<!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="1-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>
</body>
</html>