Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 13 views

    EXPERIMENT11

    Uploaded by

    rathna
    f3

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    EXPERIMENT11

    Uploaded by

    rathna
    13 views8 pages
    f3

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    f3

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    13 views8 pages

    EXPERIMENT11

    Uploaded by

    rathna
    f3

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 8

    Atheesh A

    953622205012

    EXPERIMENT -2
    DESIGN A RESPONSIVE WEBPAGE USING HTML5 AND CSS3

    Experiment2.html file:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Departmental Store</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <header>
    <nav>
    <ul>
    <li><a href="C:\Users\RIT\Desktop\home.html">Home</a></li>
    <li><a href="C:\Users\RIT\Desktop\products.html">Products</a></li>
    <li><a href="C:\Users\RIT\Desktop\about.html">About</a></li>
    </ul>
    </nav>
    </header>
    <div class="hero">
    <h1>Welcome to Our Departmental Store</h1>
    <p>Explore our wide range of products and find what you need.</p>
    </div>
    <footer>
    <p>&copy; 2024 Departmental Store</p>
    </footer>
    </body>
    Atheesh A
    953622205012

    </html>
    Products.html file:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Products</title>
    <link rel="stylesheet" href="styles.css">
    <style>
    .products {
    text-align: center;
    }

    .product {
    margin-bottom: 20px;
    }

    .product img {
    display: block;
    margin: 0 auto;
    }

    .product p {
    margin-bottom: 10px;
    }

    .buy-button {
    display: block;
    margin: 0 auto;
    Atheesh A
    953622205012

    background-color: green;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    }
    .buy-button:hover {
    background-color: darkgreen;
    }
    </style>
    </head>
    <body>
    <header>
    <nav>
    <ul>
    <li><a href=C:\Users\RIT\Desktop\home.html>Home</a></li>
    <li><a href="C:\Users\RIT\Desktop\products.html">Products</a></li>
    <li><a href="C:\Users\RIT\Desktop\about.html">About</a></li>
    </ul>
    </nav>
    </header>
    <div class="products">
    <h2>Our Products</h2> <!-- Centered heading -->
    <!-- Add your products here -->
    <div class="product">
    <img src="C:\Users\RIT\Downloads\download.jpg" alt="Product 1">
    <h3>Chocolate</h3>
    <p>this is very sweet</p>
    Atheesh A
    953622205012

    <button class="buy-button" onclick="buy()">BUY</button>


    </div>
    <div class="product">
    <img src="C:\Users\RIT\Downloads\image.jpg" alt="Product 2">
    <h3>Biscuit</h3>
    <p>this is very sweet</p>
    <button class="buy-button" onclick="buy()">BUY</button>
    </div>
    <!-- Add more products as needed -->
    </div>
    <footer>
    <p>&copy; 2024 Departmental Store</p>
    </footer>
    <script>
    function buy() {
    alert("Product added to cart!");
    }
    </script>
    </body>
    </html>
    About.html file:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    Atheesh A
    953622205012

    <header>
    <nav>
    <ul>
    <li><a href=C:\Users\RIT\Desktop\home.html>Home</a></li>
    <li><a href="C:\Users\RIT\Desktop\products.html">Products</a></li>
    <li><a href="C:\Users\RIT\Desktop\about.html">About</a></li>
    </ul>
    </nav>
    </header>
    <div class="about">
    <h2>About Us</h2>
    <p>Welcome to our departmental store. We have been serving our customers for
    many years, offering a wide range of products at affordable prices. Our mission is to
    provide high-quality products and exceptional customer service.
    In addition to retail products, department stores may offer additional services such
    as alterations, gift wrapping, personal shopping assistance, and in-store pickup for
    online orders.</p>
    </div>
    <footer>
    <p>&copy; 2024 Departmental Store</p>
    </footer>
    </body>
    </html>
    Styles.css file:
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    }

    header {
    background-color: #333;
    Atheesh A
    953622205012

    color: #fff;
    padding: 10px 0;
    }
    nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    nav ul li {
    display: inline;
    margin-right: 20px;
    }
    nav ul li a {
    color: #fff;
    text-decoration: none;
    }
    footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    }
    .hero {
    background-color: #f4f4f4;
    text-align: center;
    padding: 100px 0;
    }
    .about {
    padding: 20px;
    }
    Atheesh A
    953622205012
    Atheesh A
    953622205012

    You might also like