/
index.html
170 lines (163 loc) · 6.65 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
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Raleway:wght@400;500&family=Roboto+Condensed&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<!-- CSS FILES -->
<link rel="stylesheet" href="styles/cards.css">
<link rel="stylesheet" href="styles/buttons.css">
<link rel="stylesheet" href="styles/landing.css">
<link rel="stylesheet" href="styles/navbar.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/main.css">
<title>FreshAir</title>
</head>
<!-- BODY -->
<body>
<!-- NAVBAR -->
<nav>
<!-- HAMBURGER -->
<div class="menu-btn">
<div class="menu-btn__burger">
</div>
</div>
<ul class="ul-nav">
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li id="menu-gallery"><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
<!-- LANDING -->
<header class="fade-in">
<div class="slider-btn" id="slider-btn-left">
<span class="arrow" id="arrow-left"></span>
</div>
<div class="slider-image image-0">
<div class="content">
<h1 class="fade-in">FreshAir</h1>
<button class="btn fade-in" id="header-button">Explore</button>
</div>
</div>
<div class="slider-image image-1">
<div class="content">
<h1 class="fade-in">FreshAir</h1>
<button class="btn fade-in" id="header-button">Explore</button>
</div>
</div>
<div class="slider-image image-2">
<div class="content">
<h1 class="fade-in">FreshAir</h1>
<button class="btn fade-in" id="header-button">Explore</button>
</div>
</div>
<div class="slider-image image-3">
<div class="content">
<h1 class="fade-in">FreshAir</h1>
<button class="btn fade-in" id="header-button">Explore</button>
</div>
</div>
<div class="slider-btn" id="slider-btn-right">
<span class="arrow" id="arrow-right"></span class="arrow">
</div>
</header>
<div class="spacer">
</div>
<!-- MAIN -->
<!-- <div class="spacer"> -->
<main>
<article>
<div class="wrapper">
<h2>Hello, Nature</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum consequuntur molestiae sed <span>delectus</span>, saepe laboriosam repudiandae animi dolorum nulla facilis, ullam quasi quo unde, quaerat vitae esse adipisci repellat quae.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla architecto ullam vero quisquam, qui fugiat non, molestiae quaerat ipsum esse perspiciatis veniam, veritatis illum sed labore temporibus debitis aut magnam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod consequatur, nesciunt quam facilis laudantium reiciendis recusandae et facere quae minus officiis optio numquam? <span>Vel aspernatur neque fugiat, enim provident possimus!</span>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab molestias quia tempora. Porro eaque iusto aperiam deleniti cumque velit laudantium hic. Quae repudiandae autem iure nulla quia quisquam consectetur dolore!
</p>
<p>
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span> Quod consequatur, nesciunt quam facilis laudantium reiciendis recusandae et facere quae minus officiis optio numquam? Vel aspernatur neque fugiat, enim provident possimus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam error perspiciatis assumenda explicabo, facilis voluptatibus. Aliquid accusamus est recusandae odit eum molestiae quas, neque, natus similique voluptate at cum dignissimos?
</p>
</div>
</article>
</main>
<div class="spacer"></div>
<section class="cards">
<div class="card">
<img src="images/river.jpg" alt="">
<h2 class="card-heading">Riverrun</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi porro mollitia nesciunt iusto, aliquam maxime vel impedit quis aspernatur.
</p>
<a href="index.html" class="btn fade-in">Read More</a>
</div>
<div class="card">
<img src="images/beach.jpg" alt="">
<h2 class="card-heading">Beach Running</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi porro mollitia nesciunt iusto, aliquam maxime vel impedit quis aspernatur.
</p>
<a href="index.html" class="btn fade-in">Read More</a>
</div>
<div class="card">
<img src="images/winter.jpg" alt="">
<h2 class="card-heading">Winter is Coming</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi porro mollitia nesciunt iusto, aliquam maxime vel impedit quis aspernatur.
</p>
<a href="index.html" class="btn fade-in">Read More</a>
</div>
</section>
<!-- </div> -->
<aside>
</aside>
<!-- FOOTER -->
<footer>
<div class="footer-items">
<ul>
<li><a href="#">Documentation</a></li>
<li><a href="#">Guides</a></li>
<li><a href="#">Accessibility</a></li>
<li><a href="#">Take A Tour</a></li>
<li><a href="#">Having Issues?</a></li>
</ul>
</div>
<hr>
<p class="footer-para">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, culpa dicta maiores voluptatum dolor repellat blanditiis, eaque libero veniam corporis ad quae ratione aliquid sit quam alias aperiam, temporibus molestias.
</p>
<div class="footer-icons">
<!-- FACEBOOK -->
<a href="http://facebook.com" target="_blank">
<div id="facebook-icon"></div>
</a>
<!-- TWITTER -->
<a href="http://twitter.com">
<div id="twitter-icon"></div>
</a>
<!-- INSTAGRAM -->
<a href="http://instagram.com" target="_blank">
<div id="instagram-icon"></div>
</a>
<!-- MAIL -->
<a href="http://linkedin.com" target="_blank">
<div id="linkedin-icon"></div>
</a>
</div>
<div class="footer-copy">
<p>© 2020 Copyright: <span class="nv-logo">N&V</span></p>
</div>
</footer>
<!-- JAVASCRIPT -->
<script src="scripts/app.js"></script>
<script src="scripts/hamburger.js"></script>
<script src="scripts/slider.js"></script>
</body>
</html>