forked from vishantrathi/woolconnect
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
137 lines (121 loc) · 5.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="contact.css">
<link rel="stylesheet" href="navbar.css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- Navbar Section -->
<nav class="navbar">
<div class="navcontainer">
<!-- Logo -->
<a href="#" class="logo">
<img src="./images/DALL·E 2023-09-11 20.54.30 - Make exact like this image.png" alt="logo" height="50" width="50" />
</a>
<!-- Login and SignUp Buttons -->
<div class="auth-buttons" style="display: flex; gap: 10px; margin-left: 20px;">
<a href="Log in.html" class="auth-button">Login</a>
<a href="signup.html" class="auth-button">SignUp</a>
</div>
<!-- Navbar Toggle Button for Mobile -->
<button class="nav-toggle" id="nav-toggle">☰</button>
<!-- Navbar Links -->
<ul class="nav-links" id="nav-links" style="margin-left: auto;">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="active">Contact Doctor</a></li>
<li><a href="demand.html">Demand</a></li>
<li><a href="Privacy policy.html">Privacy Policy</a></li>
<li><a href="Trems and service.html">Terms and Services</a></li>
<li><a href="contributors/contributor.html">Contributors</a></li>
</ul>
</div>
</nav>
<header>
<h1>Contact Us</h1>
</header>
<main>
<form action="submit_contact.php" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<div class="tooltip">Please enter your full name here.</div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<div class="tooltip">Please enter a valid email like [email protected].</div>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<div class="tooltip">Please enter your phone number(10 digits).</div>
</div>
<div class="form-group">
<label for="Gender of animal">Gender of Animal:</label>
<select id="gender" name="gender">
<option value="Select a option">Select a option</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<div class="tooltip">Please select your Gender here.</div>
</div>
<div class="form-group">
<textarea id="problem" name="problem" rows="6" required placeholder="Please describe your problem here..."></textarea>
<div class="tooltip">Feel free to describe your message in detail.</div>
</div>
<div class="form-group">
<button class="submit" type="submit">Submit</button>
</div>
</form>
</main>
<footer>
<p>© 2023 Wool Connect. All Rights Reserved</p>
</footer>
</div>
<button id="scrollBtn" title="Go to top">
<i class="fa-solid fa-arrow-up fa-lg"></i>
</button>
<script>
const toggleButton = document.getElementById("nav-toggle");
const navLinks = document.getElementById("nav-links");
toggleButton.addEventListener("click", () => {
navLinks.classList.toggle("active");
});
// Get the button element
const scrollBtn = document.getElementById('scrollBtn');
// Show the button when the user scrolls down 20px from the top
window.onscroll = function () {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollBtn.style.display = "block";
} else {
scrollBtn.style.display = "none";
}
};
// Scroll to the top of the page when the button is clicked
scrollBtn.onclick = function () {
window.scrollTo({
top: 0,
behavior: "smooth"
});
};
</script>
</body>
</html>