const fantasy = document.querySelector(".fantasy"),
clouds = document.querySelectorAll(".cloud"),
boat = document.querySelector(".boat"),
title = document.querySelector(".title"),
img = document.querySelectorAll(".img"),
div = document.querySelector("div");
window.addEventListener("scroll", function (e) {
let y = window.scrollY;
boat.style.transform = `translateX(${y}px)`;
clouds.forEach((el) => {
let speed = el.getAttribute("speed");
el.style.transform = `translateX(${y * speed}px)`;
});
fantasy.style.objectPosition = `0 ${y / 5}%`;
});
const text = title.innerHTML;
title.innerHTML = "";
function type(i = 0) {
title.innerHTML += text[i];
i++;
setTimeout(() => {
if (i < text.length) {
type(i);
}
}, 50);
}
type();
div.addEventListener('mousemove', (e) => {
img.forEach(el => {
const speed = el.getAttribute('data-speed');
// X va Y ni markazdan farq qilib hisoblash
let x = (e.pageX - window.innerWidth / 2) * speed / 20;
let y = (e.pageY - window.innerHeight / 2) * speed / 10;
// Tasvirlarni harakatlantirish
el.style.transform = `translate(${x}px, ${y}px)`;
});
});<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Your Name</label>
<input type="text" id="name" placeholder="Enter your name">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email">
<label for="message">Message</label>
<textarea id="message" placeholder="Enter your message"></textarea>
<button type="submit">Send Message</button>
</form>
</section>
/* Contact Section */
#contact {
background-color: #f9f9f9;
padding: 50px 20px;
text-align: center;
border-radius: 10px;
}
#contact h2 {
font-size: 36px;
margin-bottom: 20px;
color: #333;
}
/* Form Styling */
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
form label {
display: block;
font-size: 18px;
margin: 10px 0 5px;
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: #5cb85c;
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: #4cae4c;
}
/* Responsive Styles */
/* Ekran o'lchami 1024px yoki kichikroq bo'lsa (planshetlar) */
@media (max-width: 1024px) {
#contact {
padding: 40px 15px;
}
#contact h2 {
font-size: 32px;
}
form {
padding: 15px;
}
form input, form textarea {
padding: 8px;
font-size: 14px;
}
form button {
font-size: 16px;
padding: 12px 25px;
}
}
/* Ekran o'lchami 768px yoki kichikroq bo'lsa (mobil telefonlar) */
@media (max-width: 768px) {
#contact {
padding: 30px 10px;
}
#contact h2 {
font-size: 28px;
}
form {
padding: 10px;
}
form input, form textarea {
padding: 8px;
font-size: 14px;
}
form button {
font-size: 14px;
padding: 10px 20px;
}
}
/* Ekran o'lchami 480px yoki kichikroq bo'lsa (mobil telefonlar) */
@media (max-width: 480px) {
#contact {
padding: 20px 5px;
}
#contact h2 {
font-size: 24px;
}
form {
padding: 10px;
}
form input, form textarea {
padding: 7px;
font-size: 13px;
}
form button {
font-size: 12px;
padding: 8px 18px;
}
}
// Formani olish
const form = document.querySelector('form');
const nameInput = document.querySelector('#name');
const emailInput = document.querySelector('#email');
const messageInput = document.querySelector('#message');
// Formani yuborishdan oldin validatsiya qilish
form.addEventListener('submit', function (e) {
e.preventDefault(); // Formani avtomatik yuborishni to'xtatish
// Bo'sh maydonlarni tekshirish
if (nameInput.value.trim() === '') {
alert('Please enter your name.');
return;
}
if (emailInput.value.trim() === '') {
alert('Please enter your email.');
return;
}
// Email formatini tekshirish
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;
}
// Agar barcha maydonlar to'liq bo'lsa, formani yuborish
alert('Message sent successfully!');
form.reset(); // Formani tozalash
});
<!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();
});