forked from zero-to-mastery/travel-guide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index8.html
149 lines (125 loc) · 4.32 KB
/
index8.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<title>Travel Guide</title>
<!-- BOOTSTRAP -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
>
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
<!-- inline style for testing purposes -->
<style>
body {
color: #112;
}
header {
margin-bottom: 40px;
padding-top: 40px;
background: #52ABB2;
}
header h1 {
color: #EEE;
}
h2 {
padding-bottom: 10px;
border-bottom: 2px solid #eee;
color: #FF842E;
text-align: center;
font-family: 'Carter One', cursive;
font-size: 24px;
}
p {
text-align: center;
}
footer {
margin-top: 80px;
padding: 40px;
background: #444;
color: #eee;
text-align: center;
}
.jumbotron {
margin: 0;
padding: 40px;
}
.jumbotron h1 {
text-align: center;
color: #FF842E;
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<h1>Travel Guide</h1>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1 class="display-4">Let the Adventure Begin!</h1>
<p class="lead">
Travel around the world with ease.
</p>
<hr class="my-4">
<p>
Sign up to Travel Guide and simplify the way you travel.
</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Sign up - it's free!</a>
</p>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>The Best Way to Travel</h2>
<p>Level up by knowing where you're going <em>before</em> you get there.</p>
</div>
<div class="col-md-4">
<h2>It's Free</h2>
<p>That's right! It's absolutely free.</p>
</div>
<div class="col-md-4">
<h2>It's Always With You</h2>
<p>Access Travel Guide wherever you are... whenever you are!</p>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row">
<div class="col">
Travel Guide © 2018
</div>
</div>
</div>
</footer>
<!-- BOOTSTRAP -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>