Certainly! Below is a documentation for the Swiggy Clone HTML & CSS Project. This document will explain the purpose of the project, how to set it up, and give a brief overview of the code structure.

---

Swiggy Clone - HTML & CSS Project Documentation

Project Overview

The Swiggy Clone is a simple web application that replicates the basic functionality and layout of the Swiggy food delivery service homepage. It is built using HTML and CSS to create a responsive user interface, displaying the logo, menu items, and a footer.

Features

1. Header Section:
   • Contains a logo and navigation menu with links to Home, Order Food, Offers, Profile, and Cart.
2. Hero Section:
   • A prominent section with a heading and a call-to-action button ("Order Now").
3. Menu Section:
   • Displays a few popular food items such as Cheese Burger, Chicken Thali, and Veg Pizza. Each food item is shown with an image, price, and an "Add to Cart" button.
4. Footer Section:
   • Contains a simple copyright message.

Technologies Used

• HTML (for the structure of the webpage)
• CSS (for styling and layout)

---

Project Setup

File Structure

/swiggy-clone-project
    ├── index.html         # Main HTML file containing the structure of the webpage
    ├── style.css          # CSS file for styling the page

Steps to Set Up the Project

1. Download or Clone the Project:

   • If you haven't created the project yet, follow these steps:
     • Create a folder named swiggy-clone-project on your local machine.
     • Inside that folder, create two files: index.html and style.css.
     • Copy and paste the HTML code into index.html and the CSS code into style.css.

2. Open the Project:

   • After setting up the files, simply open the index.html file in any web browser (such as Google Chrome, Firefox, or Edge).

---

Code Explanation

HTML Code (index.html)

Header Section

The header contains a logo (from Swiggy's brand) and a navigation menu that links to different sections of the site.

<header>
    <div class="container">
        <div class="logo">
            <img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Swiggy_Logo.png" alt="Swiggy Logo">
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Order Food</a></li>
                <li><a href="#">Offers</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Cart</a></li>
            </ul>
        </nav>
    </div>
</header>

• The logo image is taken from an external source.
• The navigation (<nav>) contains links that simulate the main sections of the Swiggy platform.

Hero Section

This section is the main focus of the page with a large heading and a button that encourages users to "Order Now".

<section class="hero">
    <div class="container">
        <h1>Food Delivery at Your Doorstep</h1>
        <p>Order from your favorite restaurants now!</p>
        <button>Order Now</button>
    </div>
</section>

• The heading and text are centered and designed to attract users.
• The button calls attention with a "Order Now" prompt.

Menu Section

Displays popular food items like Cheese Burger, Chicken Thali, and Veg Pizza with an image, name, price, and an "Add to Cart" button.

<section class="menu">
    <div class="container">
        <h2>Popular Dishes</h2>
        <div class="menu-items">
            <div class="menu-item">
                <img src="https://www.pngitem.com/pimgs/m/112-1124189_burger-png.png" alt="Burger">
                <h3>Cheese Burger</h3>
                <p>$5.99</p>
                <button>Add to Cart</button>
            </div>
            <div class="menu-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Chicken_Thali.jpg/800px-Chicken_Thali.jpg" alt="Chicken Thali">
                <h3>Chicken Thali</h3>
                <p>$12.99</p>
                <button>Add to Cart</button>
            </div>
            <div class="menu-item">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Pizza_Hut_logo.svg/800px-Pizza_Hut_logo.svg.png" alt="Pizza">
                <h3>Veg Pizza</h3>
                <p>$9.99</p>
                <button>Add to Cart</button>
            </div>
        </div>
    </div>
</section>

• Each food item is displayed within a flexbox layout that adapts to different screen sizes.
• Food item images are sourced from various places.

Footer Section

A simple footer with a copyright message.

<footer>
    <div class="container">
        <p>&copy; 2025 Swiggy Clone. All rights reserved.</p>
    </div>
</footer>

---

CSS Code (style.css)

General Styles

The global styles reset the default margin, padding, and box-sizing properties to ensure consistent layout across browsers. The body style sets the background color and font for the page.

/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

Header Styling

The header uses flexbox to align the logo and navigation menu side by side. The logo image is resized, and the navigation links are styled with spacing and font color.

header {
    background-color: #FF6600;
    padding: 10px 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo img {
    height: 50px;
}

header nav ul {
    display: flex;
    list-style-type: none;
}

header nav ul li {
    margin: 0 15px;
}

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

Hero Section

The hero section has a large background color and centered text. The button is styled with padding, background color, and hover effects.

.hero {
    background-color: #ff8533;
    padding: 60px 20px;
    text-align: center;
    color: white;
}

.hero button {
    padding: 15px 30px;
    font-size: 16px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.hero button:hover {
    background-color: #555;
}

Menu Section

The menu items are displayed using flexbox, and each item has a hover effect to add interactivity.

.menu .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.menu-items {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.menu-item {
    background-color: #f9f9f9;
    padding: 20px;
    width: 30%;
    margin-bottom: 30px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.menu-item:hover {
    transform: translateY(-10px);
}

Footer Styling

The footer is styled with a background color and centered text.

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

footer p {
    font-size: 16px;
}

---

Additional Notes

Responsiveness

• The website is designed to be responsive. The use of flexbox ensures that the layout adjusts to different screen sizes.
• As the screen size shrinks, the menu items stack vertically.

Potential Improvements

• JavaScript: You can integrate JavaScript to add cart functionality, such as adding and removing items from the cart.
• Backend Integration: This static website can be extended with a backend to handle user logins, orders, and payments.
• Images: The images used here are placeholders; you can replace them with actual images for a real-world project.

---

Conclusion

This Swiggy Clone project is a basic static website that simulates the homepage of a food delivery service. The combination of HTML for structure and CSS for styling creates a simple but effective design that is responsive and user-friendly. It can be expanded into a fully functional application by adding backend services and JavaScript interactivity.