-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path4-index.html
123 lines (123 loc) · 5.19 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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holberton School - Headphones Company</title>
<link rel="stylesheet" href="4-styles.css">
<link rel="icon" href="./images/favicon.ico">
</head>
<body>
<!-- Hero Section -->
<section class="header">
<div class="content">
<div class="heading">
<div class="heading-menu-icon">
<div></div>
<div></div>
<div></div>
</div>
<div class="heading-logo">
<img src="./images/favicon.png" alt="">
<p class="logo-text">Headphones</p>
</div>
<div class="heading-menu">
<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>
</div>
<div class="heading-main">
<h1>Lorem ipsum dolor set amet lorem ipsum</h1>
<h2>Lorem ipsum dolor set amet lorem ipsum dolor set</h2>
<br><br>
<button>Call to Action</button>
<br><br><br><br>
<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>
</div>
</section>
<!-- What We Do -->
<section class="content what">
<h1>What we do...</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="cards">
<div>
<span></span>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
<span></span>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
<span></span>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>
<span></span>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</section>
<!-- Our Result -->
<section class="result">
<div class="content">
<h1 class="result-title">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="cards">
<div class="result-cards">
<h1>+2%</h1>
<p>Lorem ipsum dolor</p>
</div>
<div class="result-cards">
<h1>+2%</h1>
<p>Lorem ipsum dolor</p>
</div>
<div class="result-cards">
<h1>+2%</h1>
<p>Lorem ipsum dolor</p>
</div>
<div class="result-cards">
<h1>+2%</h1>
<p>Lorem ipsum dolor</p>
</div>
</div>
</div>
</section>
<!-- Contact us -->
<section class="content contact">
<h1>Contact us</h1>
<form action="">
<input type="text" placeholder="Name"><br>
<input type="email" placeholder="Email"><br>
<input type="text" placeholder="Your message"><br>
<button type="submit">Call to action</button>
</form>
</section>
<!-- Footer -->
<footer class="footer">
<section class="content footer-content">
<div class="heading footer-mobile">
<div class="heading-logo">
<img src="./images/favicon.png" alt="">
<p class="logo-text">Headphones</p>
</div>
<div class="heading-menu footer-links">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<p class="copyright">©headphones 2020</p>
</section>
</footer>
</body>
</html>