-
Notifications
You must be signed in to change notification settings - Fork 0
/
features.html
145 lines (141 loc) · 6.02 KB
/
features.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camping Project</title>
<link rel="stylesheet" href="./assets/stylesheets/style.css">
<script src="https://kit.fontawesome.com/3fe1f58858.js"></script>
</head>
<body>
<!--Header Navigation Menu-->
<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 href="about.html" class="menu-link">About</a>
<div class="dropdown">
<a href="#" class="menu-link drop-btn" id="active">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 -->
<main>
<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>
</main>
<!-- 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 footer1">
<p>
© 2018 Camping. All rights reserved | Design by W3layouts.
</p>
<div class="footer-icon">
<i class="fab fa-facebook-square f_icon"></i>
<i class="fab fa-twitter f_icon"></i>
<i class="fab fa-google-plus-g f_icon"></i>
<i class="far fa-futbol f_icon"></i>
</div>
</div>
</div>
</body>
</html>