-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (137 loc) · 7.09 KB
/
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Momentum</title>
<link rel="stylesheet" href="assets/stylesheet/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700" rel="stylesheet">
</head>
<body>
<header>
<div class="header__wrapper">
<nav class="header__nav">
<ul>
<li><a id="current" href="#">Home</a></li>
<li class="dropdown-parent"><a href="#"><i class="fas fa-angle-down fa-lg"></i>Dropdown</a>
<ul class="dropdown">
<li><a href="#">Option One</a></li>
<li><a href="#">Option Two</a></li>
<li><a href="#">Option Three</a></li>
<li class="parent__sub-dropdown"><a href="#">Submenu</a>
<ul class="sub-dropdown">
<li><a href="#">Option One</a></li>
<li><a href="#">Option Two</a></li>
<li><a href="#">Option Three</a></li>
<li><a href="#">Option Four</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Generic</a></li>
<li><a href="#">Elements</a></li>
</ul>
</nav>
<h1>
<a class="logo" href="#">Momentum <span>by Pixelarity</span></a>
</h1>
</div>
</header>
<main>
<section class="main__grid1">
<aside class="hero hero1">
<img class="main__grid__image" src="assets/media/images/pic01.jpg" alt="Highway">
<div class="main__grid__content">
<h1><a href="#">Sed dignissim feugiat lorem ipsum nullam et veroeros</a></h1>
<h2>Magna lorem tempus consequat</h2>
<button>Learn More</button>
</div>
</aside>
<aside class="hero hero2">
<img class="main__grid__image" src="assets/media/images/pic02.jpg" alt="Work">
<div class="main__grid__content">
<h2>Consequat aliquam lorem ipsum dolor sit amet</h2>
<button>Learn More</button>
</div>
</aside>
<aside class="hero hero3">
<img class="main__grid__image" src="assets/media/images/pic03.jpg" alt="Drive">
<div class="main__grid__content">
<h2>Malesuada et amet tempus nisl adipiscing lorem</h2>
<button>Learn More</button>
</div>
</aside>
</section>
<section>
<aside>
<h2>Sed lorem ipsum dolor amet feugiat et lorem ipsum nulla veroeros tempus magna</h2>
<p>Aenean ornare velit lacus varius enim ullamcorper interdum congue. Lorem ipsum dolor amet nullam sed etiam veroeros consequat. Curabitur sapien risus, commodo eget turpis convallis.</p>
<p>Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi amet massa lacinia egestas sapien risus, commodo. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. et netus et malesuada fames ac turpis egestas. Sed non lorem sit amet elit placerat maximus aliquam maximus risus. Donec eget ex magna. Interdum et malesuada fames lorem ipsum dolor.</p>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque lorem venenatis dolor imperdiet dolor mattis amet sagittis. Praesent rutrum sem diam, vitae egestas dolor enim auctor sit amet. Pellentesque leo mauris.</p>
</aside>
<aside>
<img src="assets/media/images/pic04.jpg" alt="Camera">
<h3>Etiam consequat veroeros</h3>
<p>Nunc et lorem mauris, fringilla in aliquam at, euismod in habitant morbi tristique senectus amet malesuada commodo lorem ipsum dolor amet.</p>
</aside>
<aside>
<img src="assets/media/images/pic05.jpg" alt="Headphones">
<h3>Imperdiet auctor mattis</h3>
<p>Nunc et lorem mauris, fringilla in aliquam at, euismod in habitant morbi tristique senectus amet malesuada commodo lorem ipsum dolor amet.</p>
</aside>
<aside>
<img src="assets/media/images/pic06.jpg" alt="Buildings">
<h3>Phasellus vitae lorem</h3>
<p>Nunc et lorem mauris, fringilla in aliquam at, euismod in habitant morbi tristique senectus amet malesuada commodo lorem ipsum dolor amet.</p>
</aside>
<aside>
<img src="assets/media/images/pic07.jpg" alt="Coffee">
<h3>Magna donec faucibus</h3>
<p>Nunc et lorem mauris, fringilla in aliquam at, euismod in habitant morbi tristique senectus amet malesuada commodo lorem ipsum dolor amet.</p>
</aside>
</section>
<section>
<aside>
<img src="assets/media/images/pic08.jpg" alt="Coffee">
<h2>Sed lorem ipsum dolor</h2>
<p>Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi amet massa lacinia egestas sapien risus mauris et risus lacus, blandit sit amet venenatis non, vitae dolor. et netus sed fames ac turpis egestas. Sed non lorem sit amet elit placerat.</p>
</aside>
</section>
<section>
<h2>Sapien mauris blandit?</h2>
<p>Lorem ipsum dolor mauris, consectetur id ipsum sit amet lorem sed amet consequat.</p>
<div>
<input type="text" placeholder="Your email address">
<button></button>
</div>
</section>
</main>
<footer>
<div>
<h4>Ipsum sed tristique</h4>
<p>Nunc et lorem mauris, fringilla in aliquam at, euismod in habitant morbi tristique senectus amet malesuada commodo lorem ipsum dolor amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi massa.</p>
<button>Learn More</button>
</div>
<div>
<h4>Get in touch</h4>
<div>
<ul>
<li><a class="fas fa-envelope" href="#"><span>[email protected]</span></a></li>
<li><a class="fab fa-twitter" href="#"><span>@untitled-tld</span></a></li>
<li><a class="fab fa-facebook-f" href="#"><span>facebook.com/untitled-tld<span></a></li>
<li><a class="fab fa-linkedin-in" href="#"><span>linkedin.com/untitled-tld</span></a></li>
<li><a class="fas fa-phone"><span>(000) 000-0000</span></a></li>
</ul>
<ul>
<li><a class="fas fa-map-marker-alt" href="#"><span>Untitled</span></a></li>
<li>
<address>Untitled Incorporated<br>1234 Fictional Avenue Suite 5432<br>Nashville, TN 00000-0000<br>United States </address>
<li>
</ul>
</div>
</div>
</footer>
</body>
</html>