-
Notifications
You must be signed in to change notification settings - Fork 2
/
contact.html
147 lines (138 loc) · 6.47 KB
/
contact.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact</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 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 class="active" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</div>
<header></header>
<!-- Main- Form -->
<main>
<section class="wrapper">
<div class="contact-container">
<div class="contact-inner-container">
<div class="contact-text text-center">
<h3 class="contact-header">Contact Us</h3>
<p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui
turpis,Vestibulum
ante
ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut
rhoncus turpis
sodales quis.
Integer sit amet mattis quam.</p>
</div>
<!-- FORM -->
<form class="contact-form">
<div class="grid-col-2">
<div>
<label>Name</label>
<input class="form-control input-field" placeholder="Enter Name" type="text" />
<label>Email Please?</label>
<input class="form-control input-field" placeholder="Enter Email" type="email" />
</div>
<div>
<label>Phone No.</label>
<input class="form-control input-field" placeholder="Enter Phone No." type="text" />
<label>Subject</label>
<input class="form-control input-field" placeholder="Subject" type="text" />
</div>
</div>
<label>How Can We Help You?</label>
<textarea class="form-control" placeholder="Message" name="" id="" rows="7"></textarea>
<input type="submit" value="Submit" class="btn btn-secondary" />
</form>
<div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13503.446901516827!2d76.3565172!3d32.2079564!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x71ff0cae0784712d!2sAltCampus!5e0!3m2!1sen!2sin!4v1561455167343!5m2!1sen!2sin"
width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</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:[email protected]">Email : [email protected]</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>