Shopping-Website-project

It is a watches shopping website made by using HTML,CSS,Javascript

->login.html

<title>Login Form</title> <style> button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .form-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }

input[type="email"], input[type="password"], input[type="tel"] { padding: 12px 20px;

margin: 8px 0; box-sizing: border-box; border: none; border-bottom: 2px solid #ccc; width: 100%; }

input[type="submit"] { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; width: 100%; }

input[type="submit"]:hover { background-color: #45a049; } .invalid { border: 2px solid red; } p { font-size:40px; color:blue; } </style>

Login Form

Email Password Phone Number Submit

<script> function validateForm() { var email = document.forms["loginForm"]["email"].value; var password = document.forms["loginForm"]["password"].value; var phone = document.forms["loginForm"]["phone"].value;

// Check if email, password, and phone are empty if (email == "" || password == "" || phone == "") { alert("Please fill in all fields."); return false; } // Check email syntax var emailRegex = /^\S+@\S+.\S+$/; if (!emailRegex.test(email)) { alert("Please enter a valid email address."); document.getElementById("email").classList.add("invalid"); return false; } // Check phone number syntax var phoneRegex = /^\d{10}$/; if (!phoneRegex.test(phone)) { alert("Please enter a valid phone number."); document.getElementById("phone").classList.add("invalid"); return false; } // Check password syntax var passwordRegex = /^(?=.\d)(?=.[a-z])(?=.[A-Z])(?=.[!@#$%^&])[0-9a-zA-Z!@#$%^&]{8,}$/; if (!passwordRegex.test(password)) { alert("Password must be at least 8 characters long and contain at least one special character,one uppercase letter, one lowercase letter, and one number."); document.getElementById("password").classList.add("invalid"); return false; } return true;

} </script>

->mainpg.html

<title> Home Page</title> <style> b { color:aquamarine; } a { font-size:25px; color:red; } pre { font-size:25px; color:brown; } p { font-size:50px; text-align:center; background-color:blue; color:yellow; } u { color:red; } </style>

Home Shipping Address Payment

Almedo Watches Shopping Website!

Go To shop!

Almedo Watches Online Shopping Store
Contact Details:
Mobile No:8895246212
E-mail:[email protected]

->home.html

<title> Home Page</title> <style> button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } h2 { color:brown; font-size:30px; } h1 { color:blue; font-size:30px; } pre { text-align:left;

} table { background-color:aquamarine; } b { background-color:linen; color:red; font-size:40px; margin-left:200px; } img { display: block; margin-left: auto; margin-right: auto; height:250px; width:250px; } a { font-size:40px; } h2 { text-align:center; color:purple; } </style>

Main Page

Welcome to the Online Almedo Watches Shopping Store

Select your watch

->address.html

<title> Shipping address</title> <style> h1 { color:yellow; background-color:blue; margin-left:100px; margin-right:100px; text-align:center; } h3 { color:purple; } a { font-size:30px; color:red; } </style> Go to Main page

Shipping Address

Name:


Address:


City:


State:


Pin Code:

Proceed for payment!

Submit <style> label { font-size:20px; }

p { font-size:25px; } #test { color:white; background-color:green; text-decoration: none; font-weight:normal; } span { font-weight:15px; }

->payment.html

<title>Payment</title> <style> h1 { color:yellow; background-color:blue; margin-left:100px; margin-right:100px; text-align:center; } h3 { color:purple; } </style>

Payment Details

Card Number:

Expiration Date: CVV:

Submit

<script> function alertify() { alert("Thanks for shopping,visit again!"); } function validateForm() { let pin = document.getElementById("pin"); let card = document.getElementById("card"); let expiration = document.getElementById("expiration"); let cvv = document.getElementById("cvv"); let valid = true; if (!zip.checkValidity()) { valid = false; alert("Please enter a valid 5-digit zip code."); } if (!card.checkValidity()) { valid = false; alert("Please enter a valid 16-digit card number."); } if (!expiration.checkValidity()) { valid = false; alert("Please enter a valid expiration date in the format MM/YYYY."); } if (!cvv.checkValidity()) { valid = false; alert("Please enter a valid 3-digit CVV code."); } return valid; } </script>

Company:Noise Model:Grey Noise Smart-Watch Price:5600/- Buy Now	Company:Titan Raga Model:Raga Viva Analog Dial Women's watch Price:3505/- Buy Now	Company:Titan Rado Model:Titan Analog Black Dial Men's Watch Price:5495/- Buy Now <style> #test { color:white; background-color:green; text-decoration: none; font-weight:normal; } </style>