Scribd Logo
Upload

Welcome to Scribd!

  • Web 1

    Uploaded by

    rathna
    6 views10 pages
    f1

    Original Title

    web 1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    f1

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    6 views10 pages

    Web 1

    Uploaded by

    rathna
    f1

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 10

    Sri Saru Kumar S

    953622205046

    WEB ESSENTIALS
    ASSIGNMENT – 1
    44. Designing a webpage for a mobile shop that showcases mobile phones along with
    their prices and includes zoom-in and zoom-out functionality for all views of mobile
    images
    Index.html:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Shop</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
    </head>
    <body>
    <header>
    <h1>Mobile Shop</h1>
    <nav>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
    </nav>
    </header>
    <main>
    <section id="products">
    <h2>Our Mobile Phones</h2>
    <div class="product-container">
    <div class="product">
    Sri Saru Kumar S
    953622205046

    <div class="image-container">
    <img src="1.jpg" alt="Mobile 1" class="zoom">
    </div>
    <div class="details">
    <h3>Mobile 1</h3>
    <p>Price: $499</p>

    <button class="add-to-cart">Add to Cart</button>


    <button class="buy-now">Buy Now</button>
    </div>
    </div>

    <div class="product">
    <div class="image-container">
    <img src="2.jpg" alt="Mobile 2" class="zoom">
    </div>
    <div class="details">
    <h3>Mobile 2</h3>
    <p>Price: $699</p>

    <button class="add-to-cart">Add to Cart</button>


    <button class="buy-now">Buy Now</button>
    </div>
    </div>

    <div class="product">
    <div class="image-container">
    <img src="3.jpg" alt="Mobile 3" class="zoom">
    </div>
    <div class="details">
    Sri Saru Kumar S
    953622205046

    <h3>Mobile 3</h3>
    <p>Price: $799</p>

    <button class="add-to-cart">Add to Cart</button>


    <button class="buy-now">Buy Now</button>
    </div>
    </div>

    <div class="product">
    <div class="image-container">
    <img src="4.jpg" alt="Mobile 4" class="zoom">
    </div>
    <div class="details">
    <h3>Mobile 4</h3>
    <p>Price: $599</p>

    <button class="add-to-cart">Add to Cart</button>


    <button class="buy-now">Buy Now</button>
    </div>
    </div>

    <div class="product">
    <div class="image-container">
    <img src="5.png" alt="Mobile 5" class="zoom">
    </div>
    <div class="details">
    <h3>Mobile 5</h3>
    <p>Price: $899</p>

    <button class="add-to-cart">Add to Cart</button>


    Sri Saru Kumar S
    953622205046

    <button class="buy-now">Buy Now</button>


    </div>
    </div>

    <div class="product">
    <div class="image-container">
    <img src="6.jpg" alt="Mobile 6" class="zoom">
    </div>
    <div class="details">
    <h3>Mobile 6</h3>
    <p>Price: $749</p>

    <button class="add-to-cart">Add to Cart</button>


    <button class="buy-now">Buy Now</button>
    </div>
    </div>

    <div class="product">
    <div class="image-container">
    <img src="7.jpg" alt="Mobile 7" class="zoom">
    </div>
    <div class="details">
    <h3>Mobile 7</h3>
    <p>Price: $999</p>

    <button class="add-to-cart">Add to Cart</button>


    <button class="buy-now">Buy Now</button>
    </div>
    </div>
    </div>
    Sri Saru Kumar S
    953622205046

    </section>
    </main>
    <footer>
    <p>Contact us: contact@mobileshop.com</p>
    <p>Follow us on social media: <a href="#">Facebook</a>, <a
    href="#">Twitter</a></p>
    </footer>
    </body>
    </html>
    Styles.css:
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    }

    header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
    }

    header nav ul {
    list-style-type: none;
    padding: 0;
    }

    header nav ul li {
    display: inline;
    margin: 0 10px;
    Sri Saru Kumar S
    953622205046

    header nav ul li a {
    color: white;
    text-decoration: none;
    }

    main {
    padding: 20px;
    }

    #products {
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 0;
    }

    .product-container {
    display: inline-flex;
    }

    .product {
    display: inline-block;
    margin-right: 20px;
    width: 250px; /* Adjusted the width to be more mobile-friendly */
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    vertical-align: top; /* Ensures all products are aligned at the top */
    Sri Saru Kumar S
    953622205046

    .image-container {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    overflow: hidden;
    }

    .image-container img {
    width: 100%;
    transition: transform 0.2s;
    }

    .image-container img.zoom:hover {
    transform: scale(2);
    }

    .details {
    text-align: left; /* Changed to left-align for better readability */
    margin-top: 10px;
    overflow-wrap: break-word; /* Ensures text stays within the box */
    }

    button {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: none;
    background-color: #28a745;
    Sri Saru Kumar S
    953622205046

    color: white;
    cursor: pointer;
    font-size: 16px;
    }

    button:hover {
    background-color: #218838;
    }

    .buy-now {
    background-color: #007bff;
    }

    .buy-now:hover {
    background-color: #0056b3;
    }

    footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
    }
    Script.js:
    document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('.zoom');
    Sri Saru Kumar S
    953622205046

    images.forEach(image => {
    image.addEventListener('mouseover', function() {
    image.style.transform = 'scale(2)';
    });

    image.addEventListener('mouseout', function() {
    image.style.transform = 'scale(1)';
    });
    });

    const buyNowButtons = document.querySelectorAll('.buy-now');

    buyNowButtons.forEach(button => {
    button.addEventListener('click', function() {
    alert('Purchase successful!');
    });
    });
    });
    Output:
    Sri Saru Kumar S
    953622205046

    You might also like