Comsats University Islamabad Attock
Campus
Department of Computer Science
Lab Assignment no: 03
Course title: WebTechnologies
Submitted by:
Nimbra bibi(Fa21-bse-020)
Wasifa Kanwal(Fa21-bse-021)
Submitted to: Mam Faiza Khan
Date: 29th Nov. 2024
Project Tile: Online grocery shopping website
Index page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Online Shop</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- Top Bar with Contact Info -->
<div class="top-bar">
<p>Phone: +123-456-7890 || Address: 123 Main St, City || Email:
[email protected] </p>
</div>
<!-- Header Section -->
<header>
<div class="logo"><img src="assets/logo (2).png" alt="Logo"></div>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="conatct.html">Contact</a></li>
</ul>
</nav>
<!-- Sign Up Button -->
<div class="sign-up">
<a href="signup.html" class="sign-up-button" style="color: #28a745;;">Sign Up</a>
</div>
<div class="icons">
<a href="#"><img src="https://img.icons8.com/ios/50/000000/search--v1.png" alt="Search"></a>
<a href="conatct.html"><img src="https://img.icons8.com/ios/50/000000/contact-card.png"
alt="Contact"></a>
<a href="cart.html"><img src="https://img.icons8.com/ios/50/000000/shopping-cart--v1.png"
alt="Cart"></a>
</div>
</header>
<!-- Slider Section -->
<div class="slider">
<div class="slide"><img src="assets/slide/veg.jfif" alt="Slide 1"></div>
<div class="slide"><img src="assets/slide/cak.jfif" alt="Slide 2"></div>
<div class="slide"><img src="assets/slide/drink.jfif" alt="Slide 3"></div>
<div class="controls">
<button id="playBtn" class="control-btn">
<span class="material-icons">play_arrow</span>
</button>
<button id="pauseBtn" class="control-btn">
<span class="material-icons">pause</span>
</button>
</div>
</div>
<!-- Newest Arrival Section -->
<section class="new-arrivals">
<h2>Newest Arrivals</h2>
<div class="product-row">
<div class="product-card">
<img src="assets\shop\product-07\04.jpg" alt="Horlicks">
<p>Horlicks</p>
</div>
<div class="product-card">
<img src="assets/shop/product-02/01.webp" alt="Dates">
<p>Dates</p>
</div>
<div class="product-card">
<img src="assets/shop/product-06/04.jpg" alt="Choclate">
<p>Choclate</p>
</div>
</div>
</section>
<!-- Best Selling Section -->
<section class="best-selling">
<h2>Best Selling</h2>
<div class="product-row">
<div class="product-card">
<img src="assets\shop\product-02\03.webp" alt="Best Selling 1">
<p>Ajwa Khajoor</p>
</div>
<div class="product-card">
<img src="assets/shop/product-05/01.webp" alt="Best Selling 2">
<p>Dove Soap</p>
</div>
<div class="product-card">
<img src="assets/shop/product-06/01.jpeg" alt="Best Selling 3">
<p>Choclate</p>
</div>
</div>
</section>
<!-- Address and Information Section -->
<section class="info-section">
<div class="info-column">
<img src="assets/logo (2).png" alt="Logo" class="footer-logo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quo voluptatum officiis
amet laborum cum quod totam, consequatur earum suscipit?</p>
</div>
<div class="info-column">
<h4>Featured</h4>
<ul>
<li>Home & Cleaning</li>
<li>Beauty Products</li>
<li>Kitchen Appliances</li>
<li>Health Products</li>
</ul>
</div>
<div class="info-column">
<h4>Our Policies</h4>
<ul>
<li>Privacy Policy</li>
<li>Shipping Policy</li>
<li>Return Policy</li>
<li>Refund Policy</li>
</ul>
</div>
<div class="info-column">
<h4>Contact Us</h4>
<p>+92 034-567890</p>
<p>
[email protected]</p>
<p>Attock 1216</p>
<div class="social-icons">
<a href="#"><img src="https://img.icons8.com/ios/30/000000/facebook-new.png"
alt="Facebook"></a>
<a href="#"><img src="https://img.icons8.com/ios/30/000000/instagram-new.png"
alt="Instagram"></a>
<a href="#"><img src="https://img.icons8.com/ios/30/000000/twitter.png" alt="Twitter"></a>
</div>
</div>
</section>
<!-- Footer Section -->
<footer>
<p>© 2024 MyShop. All rights reserved.</p>
</footer>
</body>
</html>
Output:
Sign up:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up - My Online Shop</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Top Bar with Contact Info -->
<div class="top-bar">
<p>Phone: +123-456-7890 || Address: 123 Main St, City || Email:
[email protected] </p>
</div>
<!-- Header Section -->
<header>
<div class="logo"><img src="assets/logo (2).png" alt="Logo"></div>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="icons">
<a href="#"><img src="https://img.icons8.com/ios/50/000000/search--v1.png" alt="Search"></a>
<a href="contact.html"><img src="https://img.icons8.com/ios/50/000000/contact-card.png"
alt="Contact"></a>
<a href="cart.html"><img src="https://img.icons8.com/ios/50/000000/shopping-cart--v1.png"
alt="Cart"></a>
</div>
</header>
<!-- Sign Up Section -->
<section class="sign-up-section">
<h2>Create an Account</h2>
<form class="sign-up-form" id="signUpForm">
<!-- Demographic Information -->
<fieldset>
<div class="form-group">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" required>
</div>
<div class="form-group">
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" min="0" required>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select id="gender" required>
<option value="" disabled selected>Select your gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="income-range">Income Range:</label>
<select id="income-range" required>
<option value="" disabled selected>Select your income range</option>
<option value="below-20k">Below Rs20,000</option>
<option value="20k-50k">Rs20,000 - Rs50,000</option>
<option value="50k-100k">Rs50,000 - Rs100,000</option>
<option value="above-100k">Above Rs100,000</option>
</select>
</div>
</fieldset>
<!-- Behavioral Information -->
<fieldset>
<div class="form-group">
<label for="shopping-frequency">Shopping Frequency:</label>
<select id="shopping-frequency" required>
<option value="" disabled selected>Select frequency</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="annually">Annually</option>
</select>
</div>
<div class="form-group">
<label for="location">Location:</label>
<input type="text" id="location" required>
</div>
</fieldset>
<!-- Psychographic Information -->
<fieldset>
<div class="form-group">
<label for="interests">Interests (comma-separated):</label>
<input type="text" id="interests" placeholder="e.g., Cooking, Fitness ,Health">
</div>
<div class="form-group">
<label for="lifestyle">Lifestyle Choices:</label>
<select id="lifestyle">
<option value="" disabled selected>Select your lifestyle</option>
<option value="bakery">Bakery Products</option>
<option value="vegetarian">Vegetarian</option>
<option value="health-conscious">Health-conscious</option>
<option value="junk-food">Junk Food</option>
<option value="none">None</option>
</select>
</div>
<div class="form-group">
<label for="dietary-restrictions">Dietary Restrictions:</label>
<input type="text" id="dietary-restrictions" placeholder="e.g., Gluten-free, Nut
allergy">
</div>
</fieldset>
<!-- Account Information -->
<fieldset>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" required>
</div>
<div class="form-group">
<button type="submit" class="submit-button">Sign Up</button>
<p>If you already have an account, click <span style="text-decoration:underline; color:
rgb(35, 35, 133);"><a href="signin.html">Sign In</a></span></p>
</div>
</fieldset>
</form>
</section>
<!-- Footer Section -->
<footer>
<p>© 2024 MyShop. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Output:
Signin:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In - My Online Shop</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Top Bar with Contact Info -->
<div class="top-bar">
<p>Phone: +123-456-7890 || Address: 123 Main St, City || Email:
[email protected] </p>
</div>
<!-- Header Section -->
<header>
<div class="logo"><img src="assets/logo (2).png" alt="Logo"></div>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="icons">
<a href="#"><img src="https://img.icons8.com/ios/50/000000/search--v1.png" alt="Search"></a>
<a href="contact.html"><img src="https://img.icons8.com/ios/50/000000/contact-card.png"
alt="Contact"></a>
<a href="cart.html"><img src="https://img.icons8.com/ios/50/000000/shopping-cart--v1.png"
alt="Cart"></a>
</div>
</header>
<!-- Sign In Section -->
<section class="sign-in-section">
<h2>Sign In</h2>
<form class="sign-in-form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" required>
</div>
<div class="form-group">
<button type="submit" class="submit-button">Sign In</button>
</div>
</form>
</section>
<!-- Footer Section -->
<footer>
<p>© 2024 MyShop. All rights reserved.</p>
</footer>
</body>
</html>
Output:
Contact Us :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Contact Us - My Online Shop</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Top Bar with Contact Info -->
<div class="top-bar">
<p>Phone: +123-456-7890 || Address: 123 Main St,
City || Email:
[email protected] </p>
</div>
<!-- Header Section -->
<header>
<div class="logo"><img src="assets/logo (2).png"
alt="Logo"></div>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="icons">
<a href="#"><img
src="https://img.icons8.com/ios/50/000000/search--v1.png"
alt="Search"></a>
<a href="conatct.html"><img
src="https://img.icons8.com/ios/50/000000/contact-card.png"
alt="Contact"></a>
<a href="cart.html"><img
src="https://img.icons8.com/ios/50/000000/shopping-cart--v1.png"
alt="Cart"></a>
</div>
</header>
<!-- Contact Section -->
<section class="contact-section">
<h2>Contact Us</h2>
<!-- Map Section -->
<div class="map-section">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26594.921354
012626!2d72.60579931083984!3d33.569866800000014!2m3!1f0!2f0!3f0!3m2!1i1
024!2i768!4f13.1!3m3!1m2!1s0x38df759c8e2df507%3A0x32b6ceeec0076f13!2sTa
qwa%20Mart%2C%20Fateh%20Jang!5e0!3m2!1sen!2s!4v1727367821727!5m2!1sen!2
s"
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy"></iframe>
</div>
<!-- Form Section -->
<div class="form-section">
<div class="form-column">
<form>
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-
name" required>
<label for="last-name">Last Name</label>
<input type="text" id="last-name" name="last-name"
required>
<label for="email">Email</label>
<input type="email" id="email" name="email"
required>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" required>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject"
required>
</form>
</div>
<div class="form-column">
<label for="message">Message</label>
<textarea id="message" name="message" rows="18 "
required></textarea>
<button class="send-message">Send Message</button>
</div>
</div>
</section>
<!-- Address and Information Section -->
<section class="info-section">
<div class="info-column">
<img src="assets/logo (2).png" alt="Logo" class="footer-
logo">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis quo voluptatum officiis amet laborum cum quod totam,
consequatur earum suscipit?</p>
</div>
<div class="info-column">
<h4>Featured</h4>
<ul>
<li>Home & Cleaning</li>
<li>Beauty Products</li>
<li>Kitchen Appliances</li>
<li>Health Products</li>
</ul>
</div>
<div class="info-column">
<h4>Our Policies</h4>
<ul>
<li>Privacy Policy</li>
<li>Shipping Policy</li>
<li>Return Policy</li>
<li>Refund Policy</li>
</ul>
</div>
<div class="info-column">
<h4>Contact Us</h4>
<p>+92 034-567890</p>
<p>
[email protected]</p>
<p>Attock 1216</p>
<div class="social-icons">
<a href="#"><img
src="https://img.icons8.com/ios/30/000000/facebook-new.png"
alt="Facebook"></a>
<a href="#"><img
src="https://img.icons8.com/ios/30/000000/instagram-new.png"
alt="Instagram"></a>
<a href="#"><img
src="https://img.icons8.com/ios/30/000000/twitter.png"
alt="Twitter"></a>
</div>
</div>
</section>
<!-- Footer Section -->
<footer>
<p>© 2024 MyShop. All rights reserved.</p>
</footer>
</body>
</html>
Output:
