Scribd
Upload
25 views14 pages

020,021(WTLAss3)

Assignment

Uploaded by

sana amir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views14 pages

020,021(WTLAss3)

Assignment

Uploaded by

sana amir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

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 &nbsp;|| &nbsp;Address: 123 Main St, City &nbsp;|| &nbsp; Email:
info@example.com&nbsp; </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>info@example.com</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 &nbsp;|| &nbsp;Address: 123 Main St, City &nbsp;|| &nbsp; Email:
info@example.com&nbsp; </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 &nbsp;|| &nbsp;Address: 123 Main St, City &nbsp;|| &nbsp; Email:
info@example.com&nbsp; </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 &nbsp;|| &nbsp;Address: 123 Main St,
City &nbsp;|| &nbsp; Email: info@example.com&nbsp;</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>info@example.com</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:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy