-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcontact.html
111 lines (96 loc) · 6.77 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Zodiac Shop - contact </title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand fw-bold fst-italic" href="#">ZODIAC</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active fw-bolder fst-italic" aria-current="page" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bolder fst-italic" href="./about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle fw-bolder fst-italic" href="#menu" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Category
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item fw-bolder fst-italic" href="./shoes.html">Shoes</a></li>
<li><a class="dropdown-item fw-bolder fst-italic" href="./watches.html">Watches</a></li>
<li><a class="dropdown-item fw-bolder fst-italic" href="./accweies.html">Accessories</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item fw-bolder fst-italic" href="./feedback.html">Feedback form </a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link fw-bolder fst-italic" href="./contact.html">Contact Us </a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2 fw-bolder fst-italic" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-primary fw-bolder fst-italic" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<section>
<div class="container-fluid bg-light py-5">
<div class="col-md-6 m-auto text-center">
<h1 class="h1 fw-bold fst-italic">Contact Us</h1>
<p class="fw-bolder fst-italic">
Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae laudantium facilis cum fugit ad fuga maxime rem veritatis omnis soluta, inventore, dolore magni nemo sapiente? Rem quo provident veniam, suscipit, adipisci laborum nobis earum sapiente labore dicta beatae incidunt commodi? Atque eveniet veritatis reprehenderit quam minus nam omnis pariatur natus!
</p>
</div>
</div>
</section>
<section class="text-gray-600 body-font relative">
<div class="absolute inset-0 bg-gray-300">
<iframe width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" title="map" scrolling="no" src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed" style="filter: grayscale(1) contrast(1.2) opacity(0.4);"></iframe>
</div>
<div class="container px-5 py-24 mx-auto flex">
<div class="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
<h2 class="text-gray-900 text-lg mb-1 font-medium title-font"><i><b>Contact Us</b></i> </h2>
<p class="leading-relaxed mb-5 text-gray-600"><i><b>Post-ironic portland shabby chic echo park, banjo fashion axe Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi eos sequi corrupti aspernatur harum provident aliquam autem adipisci quaerat officiis. Asperiores dolores dolorem dicta tempore at officiis facere? Magnam deserunt repellat, labore eos eveniet doloremque ab quae nemo unde iste.</b></i></p>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600"><i><b>Email</b></i></label>
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-green-500 focus:ring-2 focus:ring-green-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative mb-4">
<label for="message" class="leading-7 text-sm text-gray-600"><i><b>Message</b></i>
<textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-green-500 focus:ring-2 focus:ring-green-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
</div>
<button class="text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded text-lg"><i><b>Let's Talk</b></i></button>
<p class="text-xs text-gray-500 mt-3"><i><b>Chicharrones blog helvetica normcore iceland tousled brook viral artisan. Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, perspiciatis!</b></i></p>
</div>
</div>
</section>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
-->
</body>
</html>