-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcontact.html
160 lines (146 loc) · 6.3 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
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="contact.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/81a23eb818.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar">
<div class="nav">
<i class="ri-menu-line toggle-button" id="toggle-button"></i>
<h3 class="name">We Care</h3>
<ul class="navlist" id="nav-list">
<li class="listItem nav-item "><a href="./index.html" class="about">Home</a></li>
<li class="listItem nav-item">
<a href="./About.html" class="about">About</a>
</li>
<li class="listItem nav-item">
<a href="./contact.html" class="active about">Contact</a>
</li>
<li class="listItem">
<a id="weHelp" class="about">We-Help</a>
<ul class="further" id="further">
<li class="listItem dropList" ><a href="./donation.html" class="about">We Donate</a></li>
<li class="listItem dropList"><a href="./BookCenter.html" class="about">Book Slot</a></li>
</ul>
</li>
<i class="ri-close-line close-button" id="close-button"></i>
</ul>
</div>
<button class="sign-in">Sign Up/Sign-in</button>
</div>
<header class="heading">
<div class="container">
<div class="box1">Contact Us</div>
<div class="box2">"We are always ready to serve you <br> and stand for you and reach to the crowd"</div>
</div>
</header>
<main class="main">
<div class="container2">
<h1>Our Address:</h1>
<h2>4,Baker Street <br> london-21101</h2>
<h1>Our E-mail address</h1>
<h2>[email protected]</h2>
</div>
<div class="instruct">Fill the form below to reach us</div>
<div class="form">
<form action="">
<input type="text" name="first" id="first" placeholder="First Name">
<input type="text" name="second" id="second" placeholder="Last Name"> <br>
<input type="text" name="address" id="address" placeholder="Address"> <br>
<input type="text" name="district" id="district" placeholder="District"> <br>
<select name="state" id="state">
<option value="select state">--select state--</option>
<option value="Ad">Andaman & Nicobar</option>
<option value="Ap">Andhra Pradesh</option>
<option value="Arn">Arunachal Pradesh</option>
<option value="Am">Assam</option>
<option value="bi">Bihar</option>
<option value="Ct">Chhattisgarh</option>
<option value="goa">Goa</option>
<option value="guj">Gujarat</option>
<option value="har">Haryana</option>
<option value="hp">Himachal Pradesh</option>
<option value="jK">Jammu & kashmir</option>
<option value="kr">Karnataka</option>
<option value="ker">Kerala</option>
<option value="mp">Madhya Pradesh</option>
<option value="mh">Maharashtra</option>
<option value="mn">Manipur</option>
<option value="mg">Meghalaya</option>
<option value="mizo">Mizoram</option>
<option value="ng">Nagaland</option>
<option value="odi">Odisha</option>
<option value="pu">Punjab</option>
<option value="rj">Rajasthan</option>
<option value="sk">Sikkim</option>
<option value="tn">Tamil Nadu</option>
<option value="tl">Telangana</option>
<option value="tri">Tripura</option>
<option value="up">Uttar Pradesh</option>
<option value="uk">Uttarakhand</option>
<option value="wb">West Bengal</option>
</select> <br>
<input type="email" name="email" id="email" placeholder="Email id"> <br>
<input type="number" name="phone" id="phone" placeholder="Phone No."><br>
<input type="submit" value="SUBMIT" id="SUBMIT" onmousedown="mouseDown()">
<input type="reset" value="RESET" name="RESET" id="RESET">
</form>
</div>
</main>
<footer>
<span class="fandq">FAQ</span>
<span class="socials">
<a href="https://www.facebook.com/" class="facebook"><i class="fab fa-facebook fa-2x"></i></a>
<a href="https://www.instagram.com/" class="insta"><i class="fab fa-instagram fa-2x"></i></a>
<a href="https://www.linkedin.com/" class="linked"><i class="fab fa-linkedin-in fa-2x"></i></a>
</span>
</footer>
</body>
<script>
function mouseDown(){
alert("You have successfully submitted your form.")
}
const toggleButton = document.getElementById("toggle-button");
const closeButton = document.getElementById("close-button");
const navList = document.getElementById("nav-list");
if(toggleButton)
{
toggleButton.addEventListener("click", ()=>{
navList.classList.add("show")
})
}
if(closeButton)
{
closeButton.addEventListener("click", ()=>{
navList.classList.remove("show");
})
}
const navItems = document.querySelectorAll(".navItem");
for(var i=0;i<navItems.length;i++)
{
navItems[i].addEventListener("click", ()=>{
navList.classList.remove("show");
})
}
const weHelpButton= document.getElementById("weHelp");
weHelpButton.addEventListener("click", ()=>{
const furtherOption= document.getElementById("further");
furtherOption.classList.add("showDrop");
});
const navItem_1 = document.querySelectorAll(".dropList");
for(var i=0;i<navItem_1.length;i++)
{
navItem_1[i].addEventListener("click", ()=>{
navList.classList.remove("show");
})
}
</script>
</html>