<!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>
<!-- Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Custom Styles for Kul Qora va Oq Theme */
body {
background-color: #000; /* Black background for the page */
color: #fff; /* White text */
font-family: Arial, sans-serif;
}
#contact {
background-color: #222; /* Dark gray background for the form container */
padding: 50px 20px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#contact h2 {
font-size: 36px;
color: #fff; /* White text for the heading */
margin-bottom: 20px;
}
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff; /* White background for the form */
border-radius: 10px;
color: #000; /* Black text inside the form */
}
form label {
font-size: 18px;
color: #333;
}
form input, form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
form textarea {
height: 150px;
resize: vertical;
}
form button {
background-color: #000; /* Black button */
color: white;
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: #333; /* Dark gray hover effect */
}
/* Responsive Styles */
@media (max-width: 768px) {
#contact {
padding: 30px 15px;
}
form {
padding: 15px;
}
form button {
font-size: 16px;
padding: 12px 25px;
}
}
</style>
</head>
<body>
<section id="contact" class="container my-5">
<h2 class="text-center mb-4">Contact Us</h2>
<form>
<!-- Name input -->
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<!-- Email input -->
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<!-- Message textarea -->
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" placeholder="Enter your message" rows="5"></textarea>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-block">Send Message</button>
</form>
</section>
<!-- Bootstrap JS and dependencies -->
<script src="./script.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
👍1
const form = document.querySelector('form');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const messageInput = document.querySelector('#message');
form.addEventListener('submit', function (e) {
if (nameInput.value.trim() === '') {
alert('Please enter your name.');
return;
}
if (emailInput.value.trim() === '') {
alert('Please enter your email.');
return;
}
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(emailInput.value.trim())) {
alert('Please enter a valid email address.');
return;
}
if (messageInput.value.trim() === '') {
alert('Please enter your message.');
return;
}
alert('Message sent successfully!');
form.reset();
});const timers = document.querySelectorAll(".timer");
const item = document.querySelector(".item");
window.addEventListener("scroll", function luboy() {
console.log(this.scrollY + 2 * item.clientHeight);
console.log(item.offsetTop);
timers.forEach((time) => {
function rec(i = 0) {
time.innerHTML = i;
i++;
let count = +time.getAttribute("count");
if (i <= count) {
setTimeout(() => {
rec(i);
}, 10);
}
}
rec();
});
this.window.removeEventListener('scroll', luboy)
});btn.onclick = () => {
root.style.setProperty("--color',gold")
localStorage.setItem('color', 'gold')
}
btn.ondblclick = () => {
root.style.setProperty("--color',green")
localStorage.setItem('color', 'green')
}
})
root.style.setProperty('--color', localStorage.getItem("color"))function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
const firstPerson = new Person("Fotima", "Nishonova")
const secondPerson = new Person("Zuhra", "Nishonova")
console.log(firstPerson);
console.log(secondPerson);
coding with ☕️
function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName } const firstPerson = new Person("Fotima", "Nishonova") const secondPerson = new Person("Zuhra", "Nishonova") console.log(firstPerson); console.log(secondPerson);
Function Contructor Obyekt qaytradi
this.hello = function() {
console.log(`Hello ${this.firstName} ${this.lastName} `); firstPerson.hello()
secondPerson.hello()function hello() {
console.log("Salom, dunyo!");
}
hello(); // Funksiyani chaqirish