Open In App

Design Responsive Flower Store in HTML CSS & JavaScript

Last Updated : 21 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Over 80% of online shoppers use mobile devices, so building a responsive design is essential. In this article, you'll learn how to create a beautiful and mobile-friendly flower store using HTML, CSS, and JavaScript—perfect for beginners and intermediate developers looking to enhance their frontend skills.

Prerequisites:

Project Preview

005

Step By Step Guide to Create a Flower Store Project

Step 1: Built a Login Form using basic HTML and CSS for user authentication.

Step 2: Designed a Signup Form to allow new users to register.

Step 3: Created a Sign Out and Cart Page to manage user sessions and display selected items.

Step 4: Developed the Main Page layout, starting with a responsive Navbar featuring sections like Home, Shop, About Us, Cart, Contact, Sign In, and Login.

Step 5: Designed a Product Display Section using div containers for each flower card, added images, and applied display: flex for responsive alignment.

Step 6: Added a Customer Review Section where users can submit reviews. On submission, a new card is generated showing the customer's name and review text.

Step 7: Created a Contact Us Form for inquiries and an About Us Section to provide store information.

Step 8: Applied Internal CSS for styling throughout the project.

Step 9: Optionally, you can switch to External CSSfor better scalability and cleaner code organization.

index.html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <style>
        .body {
            border: 12px dashed black;
            background-color: rgb(252, 0, 42);
        }
        .logo {
            font-size: 1.5rem;
            color: #333;
            text-decoration: none;
        }
        .nav-links {
            list-style: none;
            display: flex;
            align-items: center;
        }

        .nav-item {
            margin-right: 20px;
            text-decoration: none;
            color: #333;
            transition: color 0.3s ease;
        }

        .nav-item:hover {
            color: #6c5ce7;
        }


        .flower-card {
            width: 30%;
            border: 1px solid #ccc;
            padding: 10px;

            text-align: center;
            background-color: #e0e7ac;
            margin: 1%;


        }

        @media (max-width: 768px) {
            .flower-card {
                width: 100%;

            }
        }

        .flower-image {
            width: 100%;
            height: auto;
        }

        .flower-name {
            font-weight: bold;
            margin: 10px 0;
        }

        .flower-price {
            margin-bottom: 10px;
        }

        .add-to-cart-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            border-radius: 5px;
        }

        .main {
            margin-top: ;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 0% 4% 0% 2%;

            width: 100%;



        }

        .slide {
            animation-name: example;
        }

        @keyframes example {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(0);
            }
        }

        .home {
            width: 100%;
            height: 50rem;
            border: 2px dashed black;
            margin-top: 2%;
            background-color: #6c5ce7;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .home .slides-container .slide {
            display: flex;
            color: white;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            display: none;
            margin: 10%;
            margin-left: 60%;
        }

        .home .slides-container .slide.active {
            display: flex;
        }

        .home .slides-container .slide .content {
            flex: 1 1 40rem;
            animation: fadeLeft .4s linear .4s backwards;
        }

        .home .slides-container .slide .content span {
            color: #000;
            font-size: 2.5rem;
        }

        .home .slides-container .slide .content h3 {
            font-size: 6rem;
            color: #222;
            padding: .5rem 0;
        }

        .home .slides-container .slide .img {
            flex: 1 1 40rem;
            margin: 3rem 0;
        }

        .home .slides-container .slide .img img {
            width: 100%;
            animation: fadeUp .4s linear;
        }

        .home #next-slide,
        .home #prev-slide {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 5rem;
            width: 5rem;
            line-height: 5rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
            border: 0.1rem solid rgba(0, 0, 0, 0.7);
            text-align: center;
            background: var(--color);
            font-size: 2rem;
            color: #fff;
            cursor: pointer;
        }

        * {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
            border: none;
            text-transform: capitalize;
            text-decoration: none;
            transition: .2s linear;
        }

        .btn {
            margin-top: 1rem;
            display: inline-block;
            padding: .8rem 3rem;
            background: var(--color);
            color: black;
            font-size: 1.7rem;
            cursor: pointer;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
            border: 0.1rem solid rgba(0, 0, 0, 0.7);
        }

        html {
            font-size: 62.5%;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .btn:hover {
            background: #222;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        }

        .home #next-slide:hover,
        .home #prev-slide:hover {

            color: #fff;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        }



        .home #next-slide,
        .home #prev-slide {
            background-color: black;

        }

        .home #prev-slide {
            left: 2rem;
        }

        .home #next-slide {
            right: 2rem;
        }

        @media screen and (max-width: 900px) {
            .navbar {
                display: none;
                flex-direction: column;
                position: fixed;
                top: 60px;
                left: 0;
                width: 100%;
                background-color: #941d576a;
                border: 1px solid #941d576a;
                z-index: 1000;
            }
        }


        .navbar {
            background-color: rgb(195, 50, 50);
            opacity: 0.9;

            ;
            position: fixed;
            /* Other navbar styles */
        }

        .flower-card:nth-child(1) {
            background-color: #f0f8ff;
            /* Light blue */
        }

        .flower-card:nth-child(2) {
            background-color: #ffebe6;
            /* Light pink */
        }

        .flower-card:nth-child(3) {
            background-color: #f5f5f5;
            /* Light gray */
        }

        .flower-card {
            background: radial-gradient(circle at center, #fff 0%, #ddd 70%);
        }

        .review {
            background-color: #f2f2f2;
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;

            }

            .flower-card {
                width: 100px;

            }

            .rcs {
                width: 45%;

                margin: 3%;
            }
        }

        .contact-form {
            width: 100%;
            margin-top: 10%;
            background-color: #f9f9f9
        }

        .form-group input {
            width: 60%;
        }

        .about-us {
            background-color: #f0f0f0;
        }

        .abt-us-container p {
            color: #333;

        }

        .abt-us-container p:hover {
            color: #606060;

        }

        .container {
            width: 80%;
            margin: auto;
            padding: 20px;
        }

        .card {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
        }

        .rcs {
            width: 20%;
            height: 30%;
            background-color: #96cc85;
            margin: 5%;

        }

        .review {
            flex-direction: column;
            background-color: #de9471;
        }

        .contact-form {
            width: 100%;
            margin-top: 10%;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .contact-form h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-weight: bold;
        }

        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .form-group textarea {
            height: 150px;
        }

        button[type="submit"] {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button[type="submit"]:hover {
            background-color: #0056b3;
        }

        /* About Us Section Styles */
        .about-us {
            padding: 50px 0;
            background-color: #f9f9f9;
            border: 2px solid gray;
            background-color: #cac6c6;
        }

        .about-us .abt-us-container {
            width: 80%;
            margin: auto;
            text-align: center;
            display: flex;
        }

        .inp {
            width: 2rem;

        }

        .about-us h2 {
            margin-bottom: 30px;
            font-size: 2rem;
            color: #333;
        }

        .about-us h2 {
            margin-bottom: 20px;
            line-height: 1.6;
            color: #666;
            font-weight: bolder;
            font-size: xx-large;
        }


        .abtp {
            margin: 2%;
        }

        .review {
            background-color: #f2f2f2;
            padding: 20px;
            margin-top: 20px;
        }



        .review textarea,
        .review input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .review button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .review button:hover {
            background-color: #0056b3;
        }


        .contact .icons-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
            gap: 1.5rem;
        }

        .contact .icons-container .icons {
            text-align: center;
            border: 0.1rem solid rgba(0, 0, 0, 0.7);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
            padding: 2rem;
        }

        .contact .icons-container .icons i {
            height: 6rem;
            width: 6rem;
            line-height: 6rem;
            font-size: 2.5rem;
            background: var(--color);
            color: #fff;
            border-radius: 50%;
        }

        .contact .icons-container .icons h3 {
            color: #222;
            font-size: 2rem;
            padding: 1rem 0;
        }

        .contact .icons-container .icons p {
            color: #222;
            font-size: 1.5rem;
            line-height: 2;
        }

        .contact .row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .contact .row form {
            padding: 2rem;
            border: 0.1rem solid rgba(0, 0, 0, 0.7);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
            flex: 1 1 40rem;
        }

        .contact .row form h3 {
            font-size: 2.5rem;
            padding-bottom: 1rem;
            color: #222;
        }

        .contact .row form .inputBox {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .contact .row form .inputBox .box,
        .contact .row form textarea {
            padding: 1rem 1.2rem;
            font-size: 1.6rem;
            border: 0.1rem solid rgba(0, 0, 0, 0.7);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
            color: #222;
            text-transform: none;
            margin: .7rem 0;
        }

        .contact .row form textarea {
            width: 100%;
            height: 15rem;
            resize: none;
        }

        Copy code .navbar {
            position: static;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }

        .Tulips {
            background-color: #6c5ce7;
        }

        .navigation {
            display: flex;
            flex-direction: row;
            margin-left: 29.555%;
            width: 100%;
            margin-top: 1%;
        }

        .nav-links li {
            margin: 1%;
        }

        .nav-links {
            width: 100%;
        }

        .c-name {
            margin-left: 46%;
            margin-top: 5%;
        }

        .best-seller {
            margin: 4% 0% 0px 4%;
            font-size: xxx-large;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }

        table {
            border-collapse: collapse;
            width: 40%;
            margin-left: 20%;

            background-color: #f5f5f5;
        }

        th,
        td {

            padding: 8px;
            text-align: center;
        }

        .shop-table {
            display: none;
        }

        .shop:hover+.shop-table {
            display: block;
        }

        .shop:hover+.shop-table {
            border: 1px dashed blue;
        }

        .nav-container {
            position: sticky;

        }

        .like-btn .feather-heart {
            stroke: #ccc;
            /* default color */
        }

        .like-btn.liked .feather-heart {
            stroke: red;
            /* color when liked */
        }

        .btn:hover {
            color: white;
        }

        .grid-sec {
            display: flex;
            flex-direction: row;
            width: 100%;

        }

        .grid-sec .sec {
            margin: 3%;

        }

        .grid-sec a {
            text-decoration: none;
            color: black;
            display: block;
            font-size: 15px;
            margin: 5%;
        }

        .sub-btn {
            display: flex;
            flex-direction: row;
            margin-top: 4%;
        }

        .sub-btn input {
            border: 3px solid rgb(197, 89, 50);
            border-radius: 3px;


        }

        .sub-btn button {
            color: white;
            background-color: #e87325;
        }

        .sub-btn-section {
            margin-top: 6%;
            margin-left: 4%;
        }

        .open-button {
            background-color: #555;
            color: white;
            padding: 16px 20px;
            border: none;
            cursor: pointer;
            opacity: 0.8;
            position: ;
            margin-left: 80%;
            margin-bottom: 2%;
            bottom: 23px;
            right: 28px;
            width: 280px;
        }

        /* The popup form - hidden by default */
        .form-popup {
            display: none;
            position: fixed;
            bottom: 0;
            right: 15px;
            border: 3px solid #f1f1f1;
            z-index: 9;
        }

        /* Add styles to the form container */
        .form-container {
            max-width: 300px;
            padding: 10px;
            background-color: white;
        }

        /* Full-width input fields */
        .form-container input[type=text],
        .form-container input[type=password] {
            width: 100%;
            padding: 15px;
            margin: 5px 0 22px 0;
            border: none;
            background: #f1f1f1;
        }

        /* When the inputs get focus, do something */
        .form-container input[type=text]:focus,
        .form-container input[type=password]:focus {
            background-color: #ddd;
            outline: none;
        }

        /* Set a style for the submit/login button */
        .form-container .btn {
            background-color: #04AA6D;
            color: white;
            padding: 16px 20px;
            border: none;
            cursor: pointer;
            width: 100%;
            margin-bottom: 10px;
            opacity: 0.8;
        }

        /* Add a red background color to the cancel button */
        .form-container .cancel {
            background-color: red;
        }

        /* Add some hover effects to buttons */
        .form-container .btn:hover,
        .open-button:hover {
            opacity: 1;
        }

        .row {
            margin-top: 10%;

        }

        .sec a:hover {
            border: 2px black;
            transform: scale(1.7);
            text-decoration: underline;

        }
    </style>
</head>

<body>

    <div class="nav-container">
        <div class="nav-container">
            <div class="c-name">
                <a href="#" class="logo">
                    <h1 style="font-weight: 1000;">Phoolwala </h1>
                </a>
            </div>
            <div class="navigation">
                <ul class="nav-links">
                    <li>
                        <a href="index2.html#main" class="nav-item">
                            <h1>Home</h1>
                        </a>
                    </li>

                    <div class="shop">
                        <li>
                            <a href="index2.html#main" class="nav-item ">
                                <h1>Shop</h1>
                            </a>
                        </li>
                    </div>



                    <li>
                        <a href="#" class="nav-item">
                            <h1>About Us</h1>
                        </a>
                    </li>
                    <li><a href="cart.html" class="nav-item"><span
                                class="material-symbols-outlined icon"
                                class="carticon">shopping_cart</span></a></li>
                    <li>
                        <a href="#" class="nav-item">
                            <h1>Contact</h1>
                        </a>
                    </li>
                    <li>
                        <a href="registerform.html" class="nav-item">
                            <h1>Sign-In</h1>
                        </a>
                    </li>
                    <li>
                        <a href="loginform.html" class="nav-item">
                            <h1>Login</h1>
                        </a>
                    </li>
                </ul>





            </div>

            <div class="shop-table">
                <table>
                    <tr>
                        <th>Popular Flowers</th>
                        <th>Plants </th>
                        <th>Occasions</th>
                    </tr>
                    <tr>
                        <td>Roses</td>
                        <td>Orchids </td>
                        <td>Birthday</td>
                    </tr>
                    <tr>
                        <td>Sunflower</td>
                        <td>Bulb Garden</td>
                        <td>Get well </td>
                    </tr>
                    <tr>
                        <td>Tulips</td>
                        <td>Peace Lilies</td>
                        <td>Anniversary</td>
                    </tr>
                    <tr>
                        <td>Lilies</td>
                        <td>Money Trees</td>
                        <td>Baby</td>
                    </tr>
                    <tr>
                        <td>Orchids</td>
                        <td>Calla Lilies</td>
                        <td>More</td>
                    </tr>
                    <tr>
                        <td>Daisies</td>
                        <td>Rose Plants</td>

                    </tr>
                    <tr>
                        <td>All Flowers</td>
                        <td>Bonsai Trees</td>

                    </tr>
                </table>
            </div>
        </div>




        <section class="home" id="home">
            <div class="slides-container">
                <div class="slide active">
                    <div class="content">
                        <span>Order Online </span>
                        <h3>Upto 60% off</h3>
                        <a href="#" class="btn">Buy Now</a>
                    </div>
                    <div class="img">

                    </div>
                </div>
                <div class="slide">
                    <div class="content">
                        <span>Customize Ordering</span>
                        <h3>upto 80% off</h3>
                        <a href="#" class="btn">Buy Now</a>
                    </div>
                    <div class="img">
                        <img decoding="async" src="">
                    </div>
                </div>

                <div class="slide">
                    <div class="content">
                        <span>Fast Delivery</span>
                        <h3>upto 80% off</h3>
                        <a href="#" class="btn">Buy Now</a>
                    </div>
                    <div class="img">
                        <img decoding="async" src="">
                    </div>
                </div>

            </div>
            <div id="next-slide" class="fas fa-angle-right" onclick="next()">
                <span class="material-symbols-outlined">
                    arrow_forward_ios
                </span>
            </div>
            <div id="prev-slide" class="fas fa-angle-left" onclick="next()">
                <span class="material-symbols-outlined">
                    arrow_back_ios
                </span>
            </div>
        </section>


        <h1 class="best-seller"><b>Best Seller</b> </h1>
        <div class="main" id="main" style="display: flex;">

            <div class="flower-card">
                <img class="flower-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240405161442/Rose1.png" alt="Flower Image">
                <div class="flower-name" style="font-size: 20px; font-weight: bold;">Rose</div>
                <div class="flower-price" style="font-size: 18px;">10Rs</div>
                <div class="action-buttons">

                    <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart</button>
                    <button class="like-btn" onclick="likeFlower()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>




            <div class="flower-card">
                <img class="flower-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240405161937/Rose2.png
                " alt="Flower Image">
                <div class="flower-name" style="font-size: 20px; font-weight: bold;">Rose</div>
                <div class="flower-price" style="font-size: 18px;">10Rs</div>
                <div class="action-buttons">

                    <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart</button>
                    <button class="like-btn" onclick="likeFlower()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="flower-card">
                <img class="flower-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240405162041/Rose3.png" alt="Flower Image">
                <div class="flower-name" style="font-size: 20px; font-weight: bold;">Rose</div>
                <div class="flower-price" style="font-size: 18px;">10Rs</div>
                <div class="action-buttons">

                    <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart</button>
                    <button class="like-btn" onclick="likeFlower()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>


            <div class="flower-card">
                <img class="flower-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240405162447/Rose4.png" alt="Flower Image">
                <div class="flower-name" style="font-size: 20px; font-weight: bold;">Rose</div>
                <div class="flower-price" style="font-size: 18px;">10Rs</div>
                <div class="action-buttons">

                    <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart</button>
                    <button class="like-btn" onclick="likeFlower()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>


            <div class="flower-card">
                <img class="flower-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240405162707/Rose5.png" alt="Flower Image">
                <div class="flower-name" style="font-size: 20px; font-weight: bold;">Rose</div>
                <div class="flower-price" style="font-size: 18px;">10Rs</div>
                <div class="action-buttons">

                    <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart</button>
                    <button class="like-btn" onclick="likeFlower()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>



            <div class="flower-card">
                <img class="flower-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240405163251/Rose6.png" alt="Flower Image">
                <div class="flower-name" style="font-size: 20px; font-weight: bold;">Rose</div>
                <div class="flower-price" style="font-size: 18px;">10Rs</div>
                <div class="action-buttons">

                    <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart</button>
                    <button class="like-btn" onclick="likeFlower()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="flower-card">
                <img class="flower-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240405163432/Rose7.png" alt="Flower Image">
                <div class="flower-name" style="font-size: 20px; font-weight: bold;">Rose</div>
                <div class="flower-price" style="font-size: 18px;">10Rs</div>
                <div class="action-buttons">

                    <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart</button>
                    <button class="like-btn" onclick="likeFlower()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>


            <div class="flower-card">
                <img class="flower-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240405163524/Rose8.png" alt="Flower Image">
                <div class="flower-name" style="font-size: 20px; font-weight: bold;">Rose</div>
                <div class="flower-price" style="font-size: 18px;">10Rs</div>
                <div class="action-buttons">

                    <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart</button>
                    <button class="like-btn" onclick="likeFlower()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>


            <div class="flower-card">
                <img class="flower-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20240405163618/Rose9.png" alt="Flower Image">
                <div class="flower-name" style="font-size: 20px; font-weight: bold;">Rose</div>
                <div class="flower-price" style="font-size: 18px;">10Rs</div>
                <div class="action-buttons">

                    <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart</button>
                    <button class="like-btn" onclick="likeFlower()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>



            <div class="flower-card">
                <img class="flower-image" alt="Flower Image">
                <div class="flower-name">Alstroemeria</div>
                <div class="flower-price"><img src="" alt="">10Rs</div>
                <button class="add-to-cart-btn" onclick="addToCart(10)">Add to Cart
                </button>
            </div>
        </div>



        <div class="review" style="display: flex;">
            <div class="container">
                <h2>Customer Reviews</h2>

                <textarea id="reviewInput" placeholder="Write your review..."></textarea>
                <input type="text" id="nameInput" placeholder="Your Name">
                <button onclick="submitReview()">Submit Review</button>

            </div>


        </div>
        <div id="reviewContainer" style="display: flex;">

        </div>




        <section class="about-us">
            <h2 style="margin-left: 20px;"><b>About Phoolwala</b></h2>
            <div class="abt-us-container">
                <div class="grid-sec">
                    <div class="sec" id="sec1">
                        <h2>Policy Info</h2>

                        <a href="#">Terms & Conditions</a>
                        <a href="#">Privacy Policy</a>
                        <a href="#">Disclaimer</a>
                        <a href="#">Terms of Use</a>

                    </div>
                    <div class="sec" id="sec2">
                        <h2>ABOUT COMPANY</h2>

                        <a href="#">About-us</a>
                        <a href="#">Connect to team</a>
                        <a href="#">Careers</a>
                        <a href="#">News Room</a>


                    </div>
                    <div class="sec" id="sec3">
                        <h2>NEED HELP ?</h2>
                        <a href="#">Contact-Us</a>
                        <a href="#">FAQ</a>


                    </div>
                    <div class="sub-btn-section">
                        <h1 style="width: 100%;">Suscribe</h1>
                        <div class="sub-btn">
                            <input type="email" name="" id="" placeholder="Email">
                            <button type="submit">SUMBIT</button>
                        </div>
                    </div>
                </div>
                <div class=""></div>



            </div>
        </section>

        <hr>
        <div class="row">
            <button class="open-button" onclick="openForm()">Ask Any Queries
            </button>

            <div class="form-popup" id="myForm">
                <form action="/action_page.php" class="form-container">
                    <h1>Ask Query</h1>

                    <label for="email"><b>Email</b></label>
                    <input type="text" placeholder="Enter Email" name="email" required>

                    <label for="psw"><b>write your querie</b></label>
                    <input type="text" placeholder="how to buy?" name="psw" required>

                    <button type="submit" class="btn">Sumbit</button>
                    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
                </form>
            </div>



            <script>
                function submitReview() {
                    var reviewText = document.getElementById("reviewInput").value;
                    var name = document.getElementById("nameInput").value;

                    if (!reviewText.trim() || !name.trim()) {
                        alert("Please enter both your name and review.");
                        return;
                    }

                    var reviewContainer = document.getElementById("reviewContainer");
                    var card = document.createElement("div");
                    var h1 = document.createElement("h1");
                    var p = document.createElement("p");
                    card.appendChild(h1);
                    card.appendChild(p);
                    h1.innerHTML = "<strong>" + name;
                    card.className = "card";
                    p.innerHTML = ":</strong> " + reviewText;
                    card.classList.add("rcs")
                    reviewContainer.appendChild(card);

                    // Clear input fields after submitting review
                    document.getElementById("reviewInput").value = "";
                    document.getElementById("nameInput").value = "";
                }

                let totalPrice = 0;

                const navbar = document.querySelector(".navbar");
                const menuBtn = document.querySelector("#menu-btn");
                const slides = document.querySelectorAll(".home .slides-container .slide");
                const header = document.querySelector(".header");

                let index = 0;

                // JavaScript to toggle the
                // visibility of the navigation menu
                document.addEventListener("DOMContentLoaded",
                    function () {
                        const hamburger = document.getElementById("hamburger");
                        const navbar = document.querySelector(".navbar");

                        hamburger.addEventListener("click", function () {
                            navbar.classList.toggle("active");
                        });
                    });

                window.addEventListener("scroll", () => {
                    navbar.classList.remove("active");
                });

                function showSlide(nextIndex) {
                    slides[index].classList.remove("active");
                    index = (nextIndex + slides.length) % slides.length;
                    slides[index].classList.add("active");
                }

                function next() {
                    showSlide(index + 1);
                }

                function prev() {
                    showSlide(index - 1);
                }

                function likeFlower() {
                    var likeBtn = document.querySelector('.like-btn');
                    likeBtn.classList.toggle('liked');
                }

                function openForm() {
                    document.getElementById("myForm").style.display = "block";
                }

                function closeForm() {
                    document.getElementById("myForm").style.display = "none";
                }
            </script>
</body>

</html>
loginform.html 
//login form it is linked with index2.html that is the main page

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 100%    ;
            background-color: rgb(230, 230, 225);
        }
        .container{
            width: 30%;
            height: 70%;
            align-self: center;
            margin: 10%;
            margin-left: 34%;
            background-color: white;
            display: flex;
            align-items: center;
            align-content: center;
            border-radius: 3%;
            flex-direction: column;
        }
        .header{
            display: flex;
            flex-direction: row;
        }
        .form{
            align-items: center;
            align-content: center;
            align-self: center;
            text-align: center;
        }
        input{
            width: 40%;
            margin-top: 5%;
            height: 2em;
            border-radius: 6px;
            background-color: rgb(247, 247, 255);
            border: 1px solid white;
            padding: 1%;
        }
        .footer{
                margin-top: 5%;
                margin-bottom: 10%;
                display: flex;
                flex-direction: column;
        }
        .check-box{
            display: flex;
            flex-direction: row;
            margin-left: 18%;
            margin-top: 6%;
        }
        .sign-up-btn{
            width: 50%;
            background-color: black;
            color: white;
            border-radius: 5px;
            margin-left: 34%;
            height: 2.4em;
            margin-bottom: 10%;
        }
        .sign-up-btn:hover{
            cursor: pointer;
        }
        a{
            text-decoration: none;
        }
        .foot{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            }
    </style>
</head>

<body>
    <div>

        <div class="container">
            <p id="login-message" style="display: none;">Logging in...</p>
            <div class="header">
                <div><img src="" alt=""></div>
                <div>
                    <h1 style="font-weight: 1000;"><header >Phoolwala</header></h1></div>

            </div>
            <div class="form">
                <div>
                    <span>
                        <h1>
                            Sign In
                        </h1>

                    </span>
                    <span>
                       Login and stay connected  
                    </span>
                </div>
                <div>
                    <form action="">
                        <input type="email" style="width: 80%;" placeholder="Email">
                        <input type="password" placeholder="password" style="width: 80%;">
                        <div class="foot">
                            <div class="check-box">
                                <input type="checkbox" name="" id="" required style="width: 11%;"><span style="margin-top: 5%;">Remember Me  </span></div>
                            <div style="margin-top: 7.5%; "> <a href="#">Forget Password?</a></div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="footer">
                <button type="sumbit" class="sign-up-btn" onclick="showLoginMessage()">
                    Sign In
                </button>
                <span>
                    Create an Account <b><a href="registerform.html">Sign Up</a></b>
                </span>
            </div>
        </div>
    </div>
    <script>
        function showLoginMessage() {
            event.preventDefault();
            document.getElementById("login-message").style.display = "block";
            setTimeout(function () {
                window.location.href = "index2.html";
            }, 2000);
        }
    </script>
</body>

</html>
registerform.html 
//registerform.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            height: 100%    ;
            background-color: rgb(230, 230, 225);
        }
        .container{
            width: 30%;
            height: 70%;
            align-self: center;
            margin: 10%;
            margin-left: 34%;
            background-color: white;
            display: flex;
            align-items: center;
            align-content: center;
            border-radius: 3%;
            flex-direction: column;
        }
        .header{
            display: flex;
            flex-direction: row;
        }
        .form{
            align-items: center;
            align-content: center;
            align-self: center;
            text-align: center;
        }
        input{
            width: 40%;
            margin-top: 5%;
            height: 2em;
            border-radius: 6px;
            background-color: rgb(247, 247, 255);
            border: 1px solid white;
            padding: 1%;
        }
        .footer{
                margin-top: 5%;
                margin-bottom: 10%;
                display: flex;
                flex-direction: column;
        }
        .check-box{
            display: flex;
            flex-direction: row;
            margin-left: 18%;
            margin-top: 6%;
        }
        .sign-up-btn{
            width: 50%;
            background-color: black;
            color: white;
            border-radius: 5px;
            margin-left: 34%;
            height: 2.4em;
            margin-bottom: 10%;
        }
        .sign-up-btn:hover{
            cursor: pointer;
        }
        a{
            text-decoration: none;
          
        }
    </style>
</head>

<body>
    <div>
        <div class="container">
            <div class="header">
                <div><img src="" alt=""></div>
                <div>
                    <h1><header>Phoolwalla
                </header></h1></div>
            </div>
            <div class="form">
                <div>
                    <span>
                        <h1>
                            Sign Up
                        </h1>
                    </span>
                    <span>
                        create your account   
                    </span>
                </div>
                <div>
                    <form action="">
                        <input type="text" placeholder="First Name">
                        <input type="text" placeholder="Last Name">
                        <input type="email" style="width: 80%;" placeholder="Email">
                        <input type="password" placeholder="password">
                        <input type="password" placeholder="Confirm Password">
                        <div class="check-box">
                            <input type="checkbox" name="" id="" required style="width: 11%;"><span style="margin-top: 5%;">I have read  the terms and condition </span></div>
                    </form>
                </div>
            </div>
            <div class="footer">
                <button type="sumbit    " class="sign-up-btn">
                    Sign Up
                </button>
                <span style="margin-left: 1em;">
                    Already have an Account <b><a href="loginform.html">Sign in</a></b>
                </span>
            </div>
        </div>
    </div>
</body>

</html>
checkoutform.html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Cart Checkout</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
          }
          .container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
          }
          .cart, .checkout-form {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            padding: 20px;
            margin: 10px;
          }
          .cart h2, .checkout-form h2 {
            margin-top: 0;
          }
          .cart ul {
            padding: 0;
          }
          .cart ul li {
            list-style: none;
          }
          .checkout-form label {
            display: block;
            margin-bottom: 5px;
          }
          .checkout-form input[type="text"],
          .checkout-form input[type="email"],
          .checkout-form textarea,
          .checkout-form select {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
          }
          .checkout-form button {
            background-color: #6c5ce7;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
          }
          .checkout-form button:hover {
            background-color: #5a3ec8;
          }
    </style>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simple Cart Checkout</title>
        <link rel="stylesheet" href="styles.css">
        <script>
            function handleSubmit(event) {
              event.preventDefault();
         
              document.getElementById('checkout-form').style.display = 'none';
            
              document.getElementById('thank-you-message').style.display = 'block';
            }
        </script>
    </head>

    <body>
        <header>
            <h1>Checkout</h1>
        </header>
        <div class="container">
            <div class="cart">
                <h2>Cart Summary</h2>
                <ul>

                </ul>

            </div>
            <div id="checkout-form" class="checkout-form">
                <h2>Shipping Information</h2>
                <form action="#" method="POST" onsubmit="handleSubmit(event)">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" required>
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" required>
                    <label for="address">Address:</label>
                    <textarea id="address" name="address" required></textarea>
                    <label for="payment">Payment Method:</label>
                    <select id="payment" name="payment" required>
                        <option value="credit">Credit Card</option>
                        <option value="paypal">PayPal</option>
                        <option value="cash">Cash on Delivery</option>
                    </select>
                    <button type="submit">Place Order</button>
                </form>
            </div>
            <div id="thank-you-message" style="display: none;">
                <h2>Thank you for ordering!</h2>
                <p>Your order has been placed successfully.</p>
            </div>
        </div>
        <script>
            // Function to handle adding items to cart
               function addToCart(price) {
                // Add the price of the selected flower to the total price
                totalPrice += price;
    
                // Update the cart summary with the new total price
                const cartSummary = document.querySelector('.cart ul');
                cartSummary.innerHTML += `<li>Price: ${price} Rs</li>`;
            }
            // Function to handle submitting the review
            function submitReview() {
                // Your existing code
            }
        </script>
    </body>

    </html>

Output:

005
Flower store landing page

Next Article
Design a Online Cake Shop Website in HTML CSS & JavaScript

H
harshildhoot
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox