forked from AltCampus/camping1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfeatures.html
174 lines (153 loc) · 6.76 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Camping</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Font Family -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8bc5acd820.js"></script>
<!-- CSS -->
<link href="assets/stylesheets/style.css" rel="stylesheet" />
</head>
<body>
<div class="banner-container">
<!-- Header -->
<header class="header">
<nav class="nav flex-between">
<h1 class="logo">
<a href="index.html">Camping</a>
</h1>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop">
<ul class="links flex-between">
<li class="nav-item"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="about.html">About</a></li>
<li class="nav-item">
<input type="checkbox" id="drop2">
<label for="drop2">More Info <i class="fa fa-angle-down"></i></label>
<ul class="sub-links">
<li class="nav-item"><a class="active" href="features.html">Features</a></li>
<li class="nav-item"><a href="gallery.html">Gallery</a></li>
<li class="nav-item"><a href="services.html">Services</a></li>
</ul>
</li>
<li class="nav-item"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</div>
<main>
<!-- EXPLORE/ABOUT SECTION (Tejas) -->
<section class="wrapper explore-section">
<!-- PART 1 -->
<div class="text-center">
<h2>Our Features</h2>
</div>
<div class="grid-col-3 explore-grid">
<!-- Line 1 -->
<div class="text-center">
<i class="fas fa-bus"></i>
<h4>Sit Amet Mattis</h4>
<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"></i>
<h4>Ultricies Velit</h4>
<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"></i>
<h4>Amet Mattis Quam</h4>
<p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
</div>
<!-- Line 2 -->
<div class="text-center">
<i class="fas fa-car"></i>
<h4>Ultricies Velit</h4>
<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"></i>
<h4>Amet Mattis Quam</h4>
<p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
</div>
<div class="text-center">
<i class="fas fa-bus"></i>
<h4>Sit Amet Mattis</h4>
<p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
</div>
</div>
<!-- PART 2 -->
<div class="grid-col-2 explore-grid explore-grid-part2-c">
<div>
<img class="img-responsive" src="assets/media/img1.jpg">
</div>
<div class="explore-grid-part2">
<div>
<i class="fas fa-plane"></i>
<h4>Ultricies Velit</h4>
<p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
</div>
<div>
<i class="fas fa-rocket"></i>
<h4>Mattis Quam</h4>
<p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<div class="wrapper">
<div class="grid-col-3">
<div class="footer-item">
<h3 class="footer-heading">Address</h3>
<ul class="footer-list footer-address">
<li>Address : 1234 lock, Charlotte, North<br>Carolina, United States</li>
<li>Phone : +12 534894364</li>
<li><a href="mailto:info@example.com">Email : info@example.com</a></li>
<li>Fax : +12 534894364</li>
</ul>
</div>
<div class="footer-item">
<h3 class="footer-heading">Quick Links</h3>
<ul class="footer-list footer-links">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="footer-item">
<h3 class="footer-heading">Newsletter</h3>
<p class="footer-newsletter">
By subscribing to our mailing list you will always get latest news and updates from us.
</p>
<div class="flex-center footer-input">
<input type="email" placeholder="Enter your email..">
<!--
--><button><i class="far fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
</footer>
<section class="footer-bottom">
<div class="wrapper flex-between">
<p>© 2018 Camping. All rights reserved | Design by W3layouts.</p>
<nav class="footer-nav">
<ul class="footer-links flex-between">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-google-plus-g"></i></li>
<li><i class="fab fa-dribbble"></i></li>
</ul>
</nav>
</div>
</section>
</body>
</html>