Skip to content

Commit 56b2746

Browse files
daviskamaudaviskamau
authored
sass
1 parent 1e5984e commit 56b2746

40 files changed

+24450
-0
lines changed

Diff for: ‎Template-02/contact.html

+201
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<link rel="stylesheet" href="css/font-awesome.css" />
12+
<link rel="stylesheet" href="css/bootstrap.css" />
13+
<link rel="stylesheet" href="css/styles.css" />
14+
<link rel="icon" href="images/favicon.png" />
15+
<title>Free E-Book | Start Your Own Blog</title>
16+
</head>
17+
<body>
18+
<!-- Navigation -->
19+
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
20+
<div class="container">
21+
<a href="index.html" class="navbar-brand">
22+
<img src="images/logo.png" alt="" width="225" />
23+
</a>
24+
<button
25+
class="navbar-toggler"
26+
type="button"
27+
data-bs-toggle="collapse"
28+
data-bs-target="#navbarNavDropdown"
29+
>
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
<div class="collapse navbar-collapse" id="navbarNavDropdown">
33+
<ul class="navbar-nav ms-auto">
34+
<li class="nav-item">
35+
<a href="index.html" class="nav-link fw-semibold">Home</a>
36+
</li>
37+
<li class="nav-item">
38+
<a href="#details" class="nav-link fw-semibold">Details</a>
39+
</li>
40+
<li class="nav-item">
41+
<a
42+
href="contact.html"
43+
class="nav-link btn btn-outline-light fw-semibold px-4 mx-4"
44+
>Contact</a
45+
>
46+
</li>
47+
</ul>
48+
</div>
49+
</div>
50+
</nav>
51+
52+
<!-- Header -->
53+
<header class="header">
54+
<!-- Hero -->
55+
<div class="hero text-white pt-7 pb-4">
56+
<div class="container-xl">
57+
<div class="row">
58+
<div class="col-12">
59+
<h1>Contact Information</h1>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
<svg
65+
class="frame-decoration"
66+
data-name="Layer 2"
67+
xmlns="http://www.w3.org/2000/svg"
68+
preserveAspectRatio="none"
69+
viewBox="0 0 1920 192.275"
70+
>
71+
<defs>
72+
<style>
73+
.cls-1 {
74+
fill: #f3f6f9;
75+
}
76+
</style>
77+
</defs>
78+
<title>frame-decoration</title>
79+
<path
80+
class="cls-1"
81+
d="M0,158.755s63.9,52.163,179.472,50.736c121.494-1.5,185.839-49.738,305.984-49.733,109.21,0,181.491,51.733,300.537,50.233,123.941-1.562,225.214-50.126,390.43-50.374,123.821-.185,353.982,58.374,458.976,56.373,217.907-4.153,284.6-57.236,284.6-57.236V351.03H0V158.755Z"
82+
transform="translate(0 -158.755)"
83+
/>
84+
</svg>
85+
</header>
86+
87+
<!-- Contact Form -->
88+
<section class="contact bg-light pb-4">
89+
<div class="container">
90+
<div class="row">
91+
<div class="col-12">
92+
<form action="https://formspree.io/f/mrgvnzvq" method="POST">
93+
<div class="mb-3">
94+
<input
95+
type="text"
96+
class="form-control form-control-lg"
97+
name="name"
98+
placeholder="Name"
99+
/>
100+
</div>
101+
<div class="mb-3">
102+
<input
103+
type="email"
104+
class="form-control form-control-lg"
105+
name="email"
106+
placeholder="Email"
107+
/>
108+
</div>
109+
<div class="mb-3">
110+
<textarea
111+
class="form-control form-control-lg"
112+
name="message"
113+
rows="6"
114+
placeholder="Message"
115+
></textarea>
116+
</div>
117+
<div class="d-grid">
118+
<button type="submit" class="btn btn-primary text-white mt-3">
119+
Submit
120+
</button>
121+
</div>
122+
</form>
123+
</div>
124+
</div>
125+
</div>
126+
</section>
127+
128+
<!-- Map -->
129+
<section class="location my-5">
130+
<div class="container">
131+
<div class="row">
132+
<div class="col-10 offset-1">
133+
<h3>Our Location</h3>
134+
<p class="mb-4">
135+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid
136+
deserunt recusandae iure officiis quia saepe at velit ad eum
137+
tenetur magnam, nihil voluptate sit totam ut reiciendis iusto
138+
harum doloribus.
139+
</p>
140+
<div class="map">
141+
<iframe
142+
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1241.5303553091994!2d-0.14076024298621118!3d51.51210217963597!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604d502268421%3A0x6a7d62889992f993!2sRegent+St%2C+Soho%2C+London+W1B+5TH%2C+UK!5e0!3m2!1sen!2sro!4v1476174541049"
143+
allowfullscreen
144+
></iframe>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
</section>
150+
151+
<!-- Social -->
152+
<section class="social text-bg-dark py-6 overflow-hidden">
153+
<div class="container">
154+
<div class="row">
155+
<div class="col-md-6 offset-md-3 text-center fs-4">
156+
<p>
157+
Stay connected and join our vibrant community. For any inquiries
158+
or assistance, feel free to reach out to us
159+
</p>
160+
<div class="social-icons d-flex justify-content-center gap-4">
161+
<i class="fab fa-facebook fa-2x"></i>
162+
<i class="fab fa-twitter fa-2x"></i>
163+
<i class="fab fa-instagram fa-2x"></i>
164+
<i class="fab fa-linkedin fa-2x"></i>
165+
<i class="fab fa-pinterest fa-2x"></i>
166+
</div>
167+
</div>
168+
</div>
169+
</div>
170+
</section>
171+
172+
<!-- Footer -->
173+
<footer class="border-top border-primary bg-dark text-white py-4">
174+
<div class="container">
175+
<div class="row">
176+
<div class="col-md-8">
177+
<ul class="nav">
178+
<li class="nav-item">
179+
<a href="index.html" class="nav-link link-light">Home</a>
180+
</li>
181+
<li class="nav-item">
182+
<a href="#details" class="nav-link link-light">Details</a>
183+
</li>
184+
<li class="nav-item">
185+
<a href="contact.html" class="nav-link link-light">Contact</a>
186+
</li>
187+
</ul>
188+
</div>
189+
<div class="col-md-4">
190+
<p class="text-end d-none d-md-block">
191+
Copyright &copy; Blog Mastery 2023
192+
</p>
193+
</div>
194+
</div>
195+
</div>
196+
</footer>
197+
198+
<script src="js/bootstrap.bundle.min.js"></script>
199+
<script src="js/script.js"></script>
200+
</body>
201+
</html>

0 commit comments

Comments
 (0)