-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
195 lines (190 loc) · 8.7 KB
/
about.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<link rel="stylesheet" href="./assets/stylesheets/style.css">
<script src="https://kit.fontawesome.com/3fe1f58858.js"></script>
</head>
<body>
<header>
<nav class="nav-bar wrapper flex-between">
<h3 class="logo">Camping</h3>
<label class="ham" for="toggle">
<i class="fas fa-bars"></i>
</label>
<input id="toggle" type="checkbox" name="" value="" />
<div class="menu flex-between">
<a href="index.html" class="menu-link">Home</a>
<a id="active" href="#" class="menu-link">About</a>
<div class="dropdown">
<a href="#" class="menu-link drop-btn">More Info<i class="fas fa-arrow-down drop-arrow"></i></a>
<div class="dropdown-content">
<a href="features.html">Features</a>
<a href="gallery.html">Gallery</a>
<a href="services.html">Services</a>
</div>
</div>
<a href="contact.html" class="menu-link">Contact</a>
</div>
</nav>
</header>
<div class="hero">
<div class="wrapper">
<div class="padding"></div>
</div>
</div>
<!-- Main Section -->
<div class="wrapper">
<div class="sec1 padding">
<h2 class="text-center">Explore The World With Us.</h2>
<div class="grid-col3 grid-col1 sec1-grid">
<div class="text-center">
<i class="fas fa-bus main_icon"></i>
<h5>Sit Amet Mattis</h5>
<p>
Integer sit amet mattis quam, sit amet ultricies velit.
Praesent ullamcorper dui turpis.
</p>
</div>
<div class="text-center">
<i class="fas fa-car main_icon"></i>
<h5>Ultricies Velit</h5>
<p>
Integer sit amet mattis quam, sit amet ultricies velit.
Praesent ullamcorper dui turpis.
</p>
</div>
<div class="text-center">
<i class="fas fa-rocket main_icon"></i>
<h5>Amet Mattis Quam</h5>
<p>
Integer sit amet mattis quam, sit amet ultricies velit.
Praesent ullamcorper dui turpis.
</p>
</div>
</div>
</div>
<div class="sec2 padding grid-col2 grid-col1">
<div class="sec2-img-div">
<img src="./assets/media/img1.jpg" alt="">
</div>
<div class="sec2-text">
<div class="text-left">
<i class="fas fa-plane main_icon"></i>
<h5>Ultricies Velit</h5>
<p>
Integer sit amet mattis quam, sit amet ultricies velit.
Praesent ullamcorper dui turpis.
</p>
</div>
<div class="text-left">
<i class="fas fa-rocket main_icon"></i>
<h5>Mattis Quam</h5>
<p>
Integer sit amet mattis quam, sit amet ultricies velit.
Praesent ullamcorper dui turpis.
</p>
</div>
</div>
</div>
</div>
<div class="sec3 padding">
<div class="wrapper grid-col4 grid-col1">
<div class="part1 text-center">
<i class="fas fa-briefcase main_icon"></i>
<h2>12</h2>
<p>Years Of Experience</p>
</div>
<div class="part1 text-center">
<i class="fas fa-user main_icon"></i>
<h2>120</h2>
<p>Our Agents</p>
</div>
<div class="part1 text-center">
<i class="fas fa-smile main_icon"></i>
<h2>1280</h2>
<p>Happy Customers</p>
</div>
<div class="part1 text-center">
<i class="fas fa-users main_icon"></i>
<h2>10200</h2>
<p>Clients</p>
</div>
</div>
</div>
<div class="wrapper">
<div class="sec4 padding">
<h2 class="text-center">Our Travel Agents</h2>
<div class="grid-col3 grid-col1 sec4-grid">
<div class="text-center">
<img src="./assets/media/team.jpg" alt="">
<h5>Jason Donoghue</h5>
<p>
Lorem Ipsum has been the industry's standard since the 1500s.
</p>
</div>
<div class="text-center">
<img src="./assets/media/team1.jpg" alt="">
<h5>Mariana Noe</h5>
<p>
Lorem Ipsum has been the industry's standard since the 1500s.
</p>
</div>
<div class="text-center">
<img src="./assets/media/team2.jpg" alt="">
<h5>Daniel Doe</h5>
<p>
Lorem Ipsum has been the industry's standard since the 1500s.
</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="wrapper flex-between footer-div">
<address>
<h4>Address</h4>
<p>
Address : 1234 lock, Charlotte, North <br> Carolina, United States
</p>
<p>Phone: +12 534894364</p>
<p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
<p>Fax: +12 534894364</p>
</address>
<div>
<h4>Quick Links</h4>
<p><a href="#">Home</a></p>
<p><a href="#">About</a></p>
<p><a href="#">Services</a></p>
<p><a href="#">Gallery</a></p>
<p><a href="#">Contact</a></p>
</div>
<div>
<h4>Newsletter</h4>
<p>
By subscribing to our mailing list you will <br>
always get latest news and updates <br>
from us.
</p>
<input type="text" placeholder="Enter Your email...">
</div>
</div>
</footer>
<div class="lower-footer text-center">
<div class="flex-between wrapper">
<p>
© 2018 Camping. All rights reserved | Design by W3layouts.
</p>
<div class="footer-icon">
<i class="fab fa-facebook-square f_icon fb"></i>
<i class="fab fa-twitter f_icon twitter"></i>
<i class="fab fa-google-plus-g f_icon google"></i>
<i class="far fa-futbol f_icon futbol"></i>
</div>
</div>
</div>
</body>
</html>