-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (89 loc) · 7.07 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
<title>Clear View Escapes</title>
<meta name="keywords" content="Travel planning, travel bundles, travel escapes, affordable travel">
<meta name="description" content="Your clarity. One trip away. We create soul restoring journeys that inspire you to be you.">
<link rel="stylesheet" href="temp/styles/styles.css">
</head>
<body>
<header>
<img src="assets/images/icons/clear-view-escapes.svg">
<a href="#" class="btn">Get in Touch</a>
<nav>
<ul>
<li><a href="#our-beginning">Our Beginning</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#testimonials">Testimonials</a></li>
</ul>
</nav>
</header>
<div class="large-hero">
<picture>
<source srcset="assets/images/hero--large.jpg 1920w, assets/images/hero--large-hi-dpi.jpg 3840w" media="(min-width:1380px)">
<source srcset="assets/images/hero--medium.jpg 1380w,assets/images/hero--medium-hi-dpi.jpg 2760w" media="(min-width:990px)">
<source srcset="assets/images/hero--small.jpg 990w, assets/images/hero--small-hi-dpi.jpg 1980w" media="(min-width:640px)">
<img srcset="assets/images/hero--smaller.jpg 640w, assets/images/hero--smaller-hi-dpi.jpg 1280w" alt="Coastal view of ocean and mountains" class="large-hero__image">
</picture>
<div class="large-hero__text-content">
<div class="wrapper">
<h1 class="large-hero__title">Your clarity.</h1>
<h2 class="large-hero__subtitle">One trip away.</h2>
<p class="large-hero__description">We create soul restoring journeys that inspire you to be you.</p>
<p><a href="#" class="btn btn--orange btn--large">Get Started Today</a></p>
</div>
</div>
</div>
<div id="our-beginning" class="page-section">
<div class="wrapper">
<h2>The first trip we planned was our own.</h2>
<h3>Ever since, we’ve been working to make travel better for everyone.</h3>
<img src="assets/images/first-trip.jpg" alt="Couple walking down a street.">
<img src="assets/images/our-start.jpg" alt="Our founder, Jane Doe">
<h2>Here’s how we got started…</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp or incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a href="#">quis nostrud exercitation</a> 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in <strong>reprehenderit in</strong> voluptate velit esse dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum velit esse cillum <strong>dolore eu fugiat.</strong></p>
</div>
</div>
<div id="features" class="page-section page-section--blue">
<div class="wrapper">
<img src="assets/images/icons/star.svg">
<h2>Our Features</h2>
<img src="assets/images/icons/rain.svg">
<h3>We’ll Watch the Weather</h3>
<p>Download our app and we’ll send you a notice if it’s about to rain in the next 20 minutes around your current location. A good rain can be refreshing, but sometimes you just want to stay dry.</p>
<img src="assets/images/icons/globe.svg">
<h3>Global Guides</h3>
<p>We’ve scoured the entire planet for the best retreats and beautiful vistas. If there’s a corner of the world you want to escape to we know the most scenic and inspiring locations.</p>
<img src="assets/images/icons/wifi.svg">
<h3>Wi-Fi Waypoints</h3>
<p>We only send you on trips to places we can personally vouch for as being amazing. Which means we’ve mapped out where local wi-fi spots are and marked them in our app’s map view.</p>
<img src="assets/images/icons/fire.svg">
<h3>Survival Kit</h3>
<p>Everytime you book an escape with us we send you a survival kit with the finest materials. The kit will allow you to setup a tent, start a fire, scratch your own back and lower your taxes.</p>
</div>
</div>
<div id="testimonials">
<img src="assets/images/icons/comment.svg">
<h2>Real Testimonials</h2>
<img src="assets/images/testimonial-jane.jpg">
<h3>Jane Doe</h3>
<h3>9 Time Escaper</h3>
<p>“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”</p>
<img src="assets/images/testimonial-john.jpg">
<h3>John Smith</h3>
<h3>4 Time Escaper</h3>
<p>“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur.”</p>
<img src="assets/images/testimonial-cat.jpg">
<h3>Cat McKitty</h3>
<h3>6 Time Escaper</h3>
<p>“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.”</p>
</div>
<footer>
<p>Copyright © 2016 Clear View Escapes. All rights reserved. <a href="#" class="btn btn--orange">Get in Touch</a></p>
</footer>
</body>
</html>