1.RESUME BUILDER PROGRAM: Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale=1.0"> <title>Resume Builder</title> <link rel="stylesheet" href="style.css"> <style> .section - title{ color: grey; text - decoration: unset; } .highlight{ color:lightgreen; font - weight: bold; } .italic{ font - style:italic; } </style> </head> <body> <h1 style="color:lightblue;">Resume Builder</h1> <form action="/submit - resume" method="post"> <div> <label for="name" class="section - title">Personal Information</label><br> <label for="name" style="font - weight: bold;">Name:</label> <input type="text" id="name" name="name" required> </div> <div> <label for="education" class="section - title">Education</label><br> <label for="degree">Degree</label> <input type="text" id="degree" name="degree" required><br> <label for="school" style="color:violet;">school</label > <input type="text" id="school" name="school" required><br> <label for="year" class="italic"> Year of Graduvation:</label> <input type="text" id="year" name="year" required> </div> <div> <la bel for="experience" class="section - title">Work experience:</label><br> <label for="job - title" style="font - weight: bold;">Job title</label> <input type="text" id="job - title" name="job - title" required><br> <label for="company" class="highlight">company</label> <input type="text" id="company" name="company" required><br> <label for="years" class="italic">Years Worked:</label> <input type="text" id="years" name=" years" required> </div> <div> <label for="skills" class="section - title">skills</label><br> <label for="skills" style="color:blue; font - style: italic;">List Your Label skill</label> <textarea id="skills" n ame="skills" rows="4" cols="50" required></textarea> </div> <button type="submit">Submit</button> </form> </body> </html> Style.css body{ font - family: Arial,sans - serif; background - color: #333; margin:20px; padding:20px; } form{ background - color: #ffffff; padding:20px; border - radius: 10px; box - shadow: 0010px rgba(0,0,0,0.1); } label{ margin - top: 10px; display: inline - block; width: 150px; } input,textarea{ margin - top: 5px; margin - bottom: 10px; padding: 5px; width: 100%; border: 1px solid #ccc; border - radius: 5px; } button{ background - color: #f4f4f4f4; color:red; padding:10px 20px; border:ridge; border - radius: 5px; cursor:progress; font - size:bold; } button:hover{ background - color: blue; } OUTPUT: 2.ART GALLERY PROGRAM: ART.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF - 8" /> <meta name="viewport" content="width=device - width, initial - scale=1.0" /> <title>Simple Art Gallery</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Art Gallery</h1> </header> <main> <section id="gallery"> <div class="gallery - item" tabindex="0" onclick="openModal('img/art1.jpg')" onkeypress="openModalOnEnter(event, 'img/art1.jpg')"> <img src="img/art1.jpg" alt="Artwork1" /> </div> <div class="gallery - item" tabindex="0" onclick="openModal('img/art2.jpg')" onkeypress="openModalOnEnter(event, 'img/art2.jpg')"> <img src="img/art2.jpg" alt="Artwork2" /> </div> <div class="gallery - item" tabind ex="0" onclick="openModal('img/art3.jpg')" onkeypress="openModalOnEnter(event, 'img/art3.jpg')"> <img src="img/art3.jpg" alt="Artwork3" /> </div> <div class="gallery - item" tabindex="0" onclick="openModal('img/art4.jp g')" onkeypress="openModalOnEnter(event, 'img/art4.jpg')"> <img src="img/art4.jpg" alt="Artwork4" /> </div> </section> </main> <div id="modal" class="modal" onclick="closeModal()"> <img class="modal - content" id="modal - img"> </div> <script src="script.js"></script> </body> </html> Style.css body { font - family: Arial, sans - serif; margin: 0; padding: 0; background - color: #f4f4f4; } header{ background - color: #333; color: #fff; padding: 1rem; text - align: center; } label { background - color: #333; color: #fff; padding: 1rem; text - align: left; } main { padding: 20px; } #gallery { display: flex; flex - wrap: wrap; justify - content: space - around; } .gallery - item { margin: 10px; cursor: pointer; outline: none; } .gallery - item:hover img, .gallery - item:focus { border: 2px solid #f39c12; transform: scale(1.05); } .modal { display: none; position: fixed; z - index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background - color: rgba(0,0,0,0.8); display: flex; justify - content: center; align - items: center; } .modal - content { max - width: 90%; max - height: 90%; margin: auto; display: block; } Script.js function openModal(imagesrc){ var modal= document.getElementById("modal"); var modalImg= document.getElementById("modal - img"); modal.style.display="flex"; modalImg.src=imagesrc; } function closeModal(){ var modal=document.getElementById("modal"); modal.style.display="none" OUTPUT: 3.SHOPPING CART PROGRAM: Index.html <!DOCTYPE html> <html> <head> <title>Product Catalog</title> <style> body { font - family: Arial, sans - serif; margin: 0; padding: 0; background - color: #f9f9f9; color: #333; } header { background - color:gray; color: white; padding: 1em 0; text - align: center; font - size: 1.8e m; font - weight: bold; } nav { background - color: #333; padding: 0.5em 0; text - align: center; } nav a { color: white; margin: 0 15px; text - decoration: none; font - weight: bold; font - size: 1.1em; } nav a:hover { text - decoration: underline; } .container.catalog { display: flex; justify - content: center; gap: 2em; margin: 2em; flex - wrap: wrap; } .product { backgr ound: white; border - radius: 8px; box - shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 1em 2em; width: 180px; text - align: center; } .product h3 { margin: 0.5em 0; font - size: 1.4em; } .product p { font - size: 1.2em; margin: 0.3em 0 1em; color: #555; } button { background - color: gray; border: none; color: white; padding: 0.5em 1em; border - radius: 4px; cursor: pointer; font - size: 1em; transition: background - color 0.3s ease; } button:hover { background - color: gray; } </style> </head> <body> <header>Product Catalog</header> <nav> <a href="register.html">Register</a> <a href="login.html">Login</a> <a href ="cart.html">Cart</a> </nav> <div class="container catalog"> <div class="product"> <h3>Apple</h3> <p>₹100</p> <button onclick="addToCart('Apple', 100)">Add to Cart</button> </div> <div class="product"> <h3>Banana</h3> <p>₹60</p> <button onclick="addToCart('Banana', 60)">Add to Cart</button> </div> </div> <script> if (!localStorage.getItem('loggedin')) { alert('Please login first.'); window.location.href = 'login.html'; } function addToCart(name, price) { let cart = J SON.parse(localStorage.getItem('cart')) || []; cart.push({ name, price }); localStorage.setItem('cart', JSON.stringify(cart)); alert(name + ' added to cart!'); } </script> </body> </html> R egister.html <!DOCTYPE html> <html> <head> <title>Register</title> <style> body { font - family: Arial, sans - serif; background - color: #f4f6f8; margin: 0; padding: 0; color: #333; } header { background - color: gray; color: white; padding: 1.2em 0; text - align: center; font - size: 1.8em; font - weight: bold; } nav { background - color: #333; padding: 0.6em 0; text - align: center; } nav a { color: white; margin: 0 15px; text - decoration: none; font - weight: bold; font - size: 1.1em; } nav a:hover { text - decoration: underline; } .container { display: flex; justify - content: center; margin: 3em 0; } .form - box { background: white; padding: 2em 3em; border - radius: 8px; box - shadow: 0 3px 8px rgba(0,0,0,0.1); width: 300px; text - align: center; } input[type="text"], input[type="password"] { width: 100%; padding: 0.6em; margin: 1em 0; border: 1px solid #ccc; border - radius: 4px; font - size: 1em; box - sizing: border - box; } button { width: 100%; background - color:gray; border: none; color: white ; padding: 0.7em 0; border - radius: 4px; font - size: 1.1em; cursor: pointer; transition: background - color 0.3s ease; } button:hover { background - color:gray; } </style> </head> <body> <header>Register Page</header> <nav> <a href="login.html">Login</a> <a href="index.html">Catalog</a> <a href="cart.html">Cart</a> </nav> <div class="container"> <div class="form - box"> <input type="text" id="reguser" placeholder="Username"> <input type="pass word" id="regpass" placeholder="Password"> <button onclick="register()">Register</button> </div> </div> <script> function register() { const u = document.getElementById('reguser').value.trim(); const p = document.getElementById('regpass').value. trim(); if (u && p) { if (localStorage.getItem('user_' + u)) { alert('Username already exists! Please choose another.'); return; } localStorage.setItem('user_' + u, p); alert('Registered successfully! You can now login.'); window.location.href = 'login.html'; } else { alert('Please fill all fields.'); } } </script> </body> </html> L ogin.html <!DOCTYPE html> <html> <head> <title>Login</title> <style> body { font - family: Arial, sans - serif; background - color: #f1f2f6; margin: 0; padding: 0; color: #333; } header { background - color:gray; color: white; padding: 1.2em 0; text - align: center; font - size: 1.8em; font - weight: bold; } nav { background - color: gray; padding: 0.6em 0; text - align: center; } nav a { color: white; margin: 0 15px; text - decoration: none; font - weight: bold; font - size: 1.1em; } nav a:hover { text - decoration: underline; } .container { display: flex; justify - content: center; margin: 3em 0; } .form - box { background: white; padding: 2em 3em; border - radius: 8px; box - shadow: 0 3px 8px r gba(0,0,0,0.1); width: 300px; text - align: center; } input[type="text"], input[type="password"] { width: 100%; padding: 0.6em; margin: 1em 0; border: 1px solid #ccc; border - radius: 4px; font - size: 1em; box - sizing: border - box; } button { width: 100%; background - color:gray; border: none; color: white; padding: 0.7em 0; border - radius: 4px; font - size: 1.1em; cursor: pointer; transition: bac kground - color 0.3s ease; } button:hover { background - color: gray; } </style> </head> <body> <header>Login Page</header> <nav> <a href="register.html">Register</a> <a href="index.html">Catalog</a> <a href="cart.html">Cart</a> </nav> <div class="container"> <div class="form - box"> <input type="text" id="username" placeholder="Username"> <input type="password" id="password" placeholder="Password"> <button onclick="login()">Login</button> </div> </div> <script> fun ction login() { const u = document.getElementById('username').value.trim(); const p = document.getElementById('password').value.trim(); const storedPass = localStorage.getItem('user_' + u); if (storedPass && storedPass === p) { localStorage.set Item('loggedin', u); alert('Login Successful!'); window.location.href = 'index.html'; } else { alert('Invalid username or password. Please register first.'); } } </script> </body> </html> C art.html <!DOCTYPE html> <html> <head> <title>Your Cart</title> <style> body { font - family: Arial, sans - serif; background - color: #e9ecef; margin: 0; padding: 0; color: #333; } header { background - color: gray; color: white; padding: 1.2em 0; text - align: center; font - size: 1.8em; font - weight: bold; } nav { background - color: #333; padding: 0.6em 0; text - align: center; } nav a { color: white; margin: 0 15px; text - decoration: none; font - weight: bold; font - size: 1.1em; } nav a:hover { text - decoration: underline; } .container.cart { max - width: 600px; background: white; margin: 2em auto; padding: 2em; border - radius: 8px; box - shadow: 0 4px 10px rgba(0,0,0,0.1); } .cart - item { border - bottom: 1px solid #ddd; padding: 1em 0; } .cart - item h3 { margin: 0 0 0.3em 0; font - size: 1.3em; } .cart - item p { margin: 0; color: #555; } .cart - item strong { font - size: 1.4em; } button { display: inline - block; margin - top: 1.5em; background - color:gray; border: none; color: white; padding: 0.7em 2em; border - radius: 4px; font - size: 1.1em; cursor: pointer; transition: background - color 0.3s ease; } button:hover { background - color: gray; } </style> </head> <body> <header>Your Cart</heade r> <nav> <a href="index.html">Catalog</a> <a href="login.html">Login</a> </nav> <div class="container cart" id="cart - items"></div> <div style="text - align:center;"> <button onclick="logout()">Purchase & Logout</button> </div> <script> if (! localStorage.getItem('loggedin')) { alert('Please login to view your cart.'); window.location.href = 'login.html'; } function loadCart() { let cart = JSON.parse(localStorage.getItem('cart')) || []; let container = document.getElementById('cart - ite ms'); let total = 0; container.innerHTML = ''; if (cart.length === 0) { container.innerHTML = "<p>Your cart is empty.</p>"; return; } cart.forEach(item => { total += item.price; container.innerHTML += ` <div class="cart - it em"> <h3>${item.name}</h3> <p>Price: ₹${item.price}</p> </div>`; }); container.innerHTML += ` <div class="cart - item"> <strong>Total: ₹${total}</strong> </div>`; } function logout() { alert('Thank you for your purchase!'); localStorage.removeItem('cart'); localStorage.removeItem('loggedin'); window.location.href = 'login.html'; } loadCart(); </script> </body> </html>