-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
145 lines (138 loc) · 6.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</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 href="about.html" 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 id="active" href="contact.html" class="menu-link">Contact</a>
</div>
</nav>
</header>
<div class="hero">
<div class="wrapper">
<div class="padding"></div>
</div>
</div>
<!-- Contact Main Section-Yash -->
<section>
<div class="wrapper text-center contact-heading">
<h2>Contact Us</h2>
<p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis. Vestibulum ante ipsum primis in faucibus orci luctus et<br> ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut rhoncus turpis sodales quis. Integer sit amet mattis quam.
</p>
</div>
</section>
<section>
<!-- Forms -->
<div class="wrapper">
<div class="wrapper2">
<form class="grid-col2 grid-col1">
<div>
<h3>Name</h3>
<div class="form-control">
<input type ="text" placeholder="Enter name">
</div>
</div>
<div>
<h3>Phone Number</h3>
<div class="form-control">
<input type="text" placeholder="Enter Phone no.">
</div>
</div>
</form>
<div class="grid-col2 grid-col1">
<div>
<h3>Email</h3>
<div class="form-control">
<input type="text" placeholder="Enter Email">
</div>
</div>
<div>
<h3>Subject</h3>
<div class="form-control">
<input type="text" placeholder="Subject">
</div>
</div>
</div>
<div>
<h3>How can we help?</h3>
<div class="form-control">
<textarea type="text" placeholder="Enter Your Message Here" class="Form-Help"></textarea>
</div>
</div>
</div>
<div class="wrapper2 flex-start">
<div class="btn">Submit</div>
</div>
<div class="wrapper2">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100940.1707377098!2d-122.50764050891712!3d37.757679275321934!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan+Francisco%2C+CA%2C+USA!5e0!3m2!1sen!2sin!4v1561467869713!5m2!1sen!2sin" width="600" height="450" frameborder="0" style="border:0" allowfullscreen class="map-embed"></iframe>
</div>
</div>
</section>
<!-- 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:[email protected]">[email protected]</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>