E-Commerce Flower Shop /Flower Business Website Design Using Pure HTML & CSS Only -100% Free Source Code Download

Created an online Flower Shop E-commerce website design or Flower Business Website Design using HTML and CSS only from scratch

How to make a completely responsive e-commerce website design using pure HTML and CSS only

► The main feature of this website is: ►
Fully Responsive navigation bar section using flex-box.
Fully Responsive home section using flex-box.
Fully Responsive about section using flex-box.
Fully Responsive products card section using flex-box.
Fully Responsive review section using flex-box.
Fully Responsive contact section using flex-box.
Fully Responsive footer section using flex-box.

E-Commerce Flower Shop /Flower Business Website Design Using Pure HTML & CSS Only -100% Free Source Code Download

SOURCE CODES

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ): End of the page

Website Download Link: https://freewebsitecode.com/

Thanks for watching!

Follow Us

https://facebook.com/freewebsitecode/

►►𝐃𝐨𝐧’𝐭 𝐅𝐨𝐫𝐠𝐞𝐭 𝐓𝐨 𝐒𝐮𝐛𝐬𝐜𝐫𝐢𝐛𝐞 ►►
https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ

FreeWebsiteCode.com tries to provide HTML, CSS, SCSS, JavaScript, React, Android Studio, Java, PHP, Laravel, Python, Django, C#(C Sharp), and ASP.net related projects 100% free. We try to make learning easier. Free Website Code always tries to give free projects to those who are new learners. Free projects and source code will help to learn easily. They can save time and learn more.

You can use this as a Furniture Selling / Buying Website Design
You can use this as an Online E-Commerce Website Design
You can use this as an Event Furniture Rent Website Design
You can use this as a Hotel Booking Website Design
You can use this as a Furniture Company Website Design
You can use this as a Furniture Show Room Portfolio Website Design
You can use this as a Furniture Project Portfolio Website Design
You can use this as an Online Business Website Design
You can use this as a Multi-Page Website Design

======================================================

How to make a website using HTML CSS and JavaScript
Complete website in HTML CSS and JavaScript with source code.

Created an online Flower Shop E-commerce website design or Flower Business Website Design using HTML and CSS only from scratch

Create A Responsive Halloween E-Commerce Website Design Using HTML – CSS – JavaScript | 100% Free Download
https://www.youtube.com/watch?v=frz85Y8H4UE&t=2s

Complete Responsive Food / Restaurant Website Design Using HTML / CSS / JAVASCRIPT – 100% Free Download
https://www.youtube.com/watch?v=m9vfjSwb4zc

Create A Responsive Car Selling Website Design Using HTML – CSS – JavaScript | 100% Free Download
https://www.youtube.com/watch?v=FQ0osQ1ZVRc

Create A Responsive Grocery Store Website Design Using HTML – CSS – JavaScript-100% Free Download
https://www.youtube.com/watch?v=NifI30KHMY8

Create A Responsive Online Book Store Website Design Using HTML – CSS – JavaScript | 100% Free Download
https://www.youtube.com/watch?v=EeQYAJnknZg

E-Commerce Fashion / Cloth Store Website Design Using HTML – SASS – JavaScript 100% Free Download
https://www.youtube.com/watch?v=aDnL51Ambgw

Animated Glassmorphism Styled / Glass Effect Website Design Using HTML – CSS – JavaScript-100% Free Download
https://www.youtube.com/watch?v=840c9kfZvaQ&t=9s

Complete Responsive IT Company / Business Website Design Tutorial HTML – CSS – JAVASCRIPT -100% Free Download
https://www.youtube.com/watch?v=dYXqHMJcNiY&t=3s

Hospital – Medical – Clinic – Diagnostic Center Website Design Using HTML – CSS – JavaScript -Free Download
https://www.youtube.com/watch?v=LjgTq6_VF4g&t=2s

Coffee Shop – Tea Stall – Fast Food Website Design Using HTML- CSS -JavaScript- 100% Free Download
https://www.youtube.com/watch?v=Qyx-G7xQ5fE&t=1s

Personal Portfolio / Blog Website Design Project Using HTML – CSS – JavaScript -100% Free Download
https://www.youtube.com/watch?v=BDGW4HxGACA

Follow Us

https://facebook.com/freewebsitecode/

►►𝐃𝐨𝐧’𝐭 𝐅𝐨𝐫𝐠𝐞𝐭 𝐓𝐨 𝐒𝐮𝐛𝐬𝐜𝐫𝐢𝐛𝐞 ►►
https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ

Thanks for watching!

►►𝐃𝐨𝐧’𝐭 𝐅𝐨𝐫𝐠𝐞𝐭 𝐓𝐨 𝐒𝐮𝐛𝐬𝐜𝐫𝐢𝐛𝐞 ►►
https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>complete responsive flower website design tutorial</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <!-- custom css file link  -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!-- header section starts  -->

<header>

    <input type="checkbox" name="" id="toggler">
    <label for="toggler" class="fas fa-bars"></label>

    <a href="#" class="logo">flower<span>.</span></a>

    <nav class="navbar">
        <a href="#home">home</a>
        <a href="#about">about</a>
        <a href="#products">products</a>
        <a href="#review">review</a>
        <a href="#contact">contact</a>
    </nav>

    <div class="icons">
        <a href="#" class="fas fa-heart"></a>
        <a href="#" class="fas fa-shopping-cart"></a>
        <a href="#" class="fas fa-user"></a>
    </div>

</header>

<!-- header section ends -->

<!-- home section starts  -->

<section class="home" id="home">

    <div class="content">
        <h3>fresh flowers</h3>
        <span> natural & beautiful flowers </span>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae laborum ut minus corrupti dolorum dolore assumenda iste voluptate dolorem pariatur.</p>
        <a href="#" class="btn">shop now</a>
    </div>
    
</section>

<!-- home section ends -->

<!-- about section starts  -->

<section class="about" id="about">

    <h1 class="heading"> <span> about </span> us </h1>

    <div class="row">

        <div class="video-container">
            <video src="images/about-vid.mp4" loop autoplay muted></video>
            <h3>best flower sellers</h3>
        </div>

        <div class="content">
            <h3>why choose us?</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cumque sit nemo pariatur corporis perspiciatis aspernatur a ullam repudiandae autem asperiores quibusdam omnis commodi alias repellat illum, unde optio temporibus.</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium ea est commodi incidunt magni quia molestias perspiciatis, unde repudiandae quidem.</p>
            <a href="#" class="btn">learn more</a>
        </div>

    </div>

</section>

<!-- about section ends -->

<!-- icons section starts  -->

<section class="icons-container">

    <div class="icons">
        <img src="images/icon-1.png" alt="">
        <div class="info">
            <h3>free delivery</h3>
            <span>on all orders</span>
        </div>
    </div>

    <div class="icons">
        <img src="images/icon-2.png" alt="">
        <div class="info">
            <h3>10 days returns</h3>
            <span>moneyback guarantee</span>
        </div>
    </div>

    <div class="icons">
        <img src="images/icon-3.png" alt="">
        <div class="info">
            <h3>offer & gifts</h3>
            <span>on all orders</span>
        </div>
    </div>

    <div class="icons">
        <img src="images/icon-4.png" alt="">
        <div class="info">
            <h3>secure paymens</h3>
            <span>protected by paypal</span>
        </div>
    </div>
   
</section>

<!-- icons section ends -->

<!-- prodcuts section starts  -->

<section class="products" id="products">

    <h1 class="heading"> latest <span>products</span> </h1>

    <div class="box-container">

        <div class="box">
            <span class="discount">-10%</span>
            <div class="image">
                <img src="images/img-1.jpg" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>flower pot</h3>
                <div class="price"> $12.99 <span>$15.99</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-15%</span>
            <div class="image">
                <img src="images/img-2.jpg" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>flower pot</h3>
                <div class="price"> $12.99 <span>$15.99</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-5%</span>
            <div class="image">
                <img src="images/img-3.jpg" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>flower pot</h3>
                <div class="price"> $12.99 <span>$15.99</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-20%</span>
            <div class="image">
                <img src="images/img-4.jpg" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>flower pot</h3>
                <div class="price"> $12.99 <span>$15.99</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-17%</span>
            <div class="image">
                <img src="images/img-5.jpg" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>flower pot</h3>
                <div class="price"> $12.99 <span>$15.99</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-3%</span>
            <div class="image">
                <img src="images/img-6.jpg" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>flower pot</h3>
                <div class="price"> $12.99 <span>$15.99</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-18%</span>
            <div class="image">
                <img src="images/img-7.jpg" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>flower pot</h3>
                <div class="price"> $12.99 <span>$15.99</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-10%</span>
            <div class="image">
                <img src="images/img-8.jpg" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>flower pot</h3>
                <div class="price"> $12.99 <span>$15.99</span> </div>
            </div>
        </div>

        <div class="box">
            <span class="discount">-5%</span>
            <div class="image">
                <img src="images/img-9.jpg" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="cart-btn">add to cart</a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>flower pot</h3>
                <div class="price"> $12.99 <span>$15.99</span> </div>
            </div>
        </div>

    </div>

</section>

<!-- prodcuts section ends -->

<!-- review section starts  -->

<section class="review" id="review">

<h1 class="heading"> customer's <span>review</span> </h1>

<div class="box-container">

    <div class="box">
        <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti asperiores laboriosam praesentium enim maiores? Ad repellat voluptates alias facere repudiandae dolor accusamus enim ut odit, aliquam nesciunt eaque nulla dignissimos.</p>
        <div class="user">
            <img src="images/pic-1.png" alt="">
            <div class="user-info">
                <h3>john deo</h3>
                <span>happy customer</span>
            </div>
        </div>
        <span class="fas fa-quote-right"></span>
    </div>

    <div class="box">
        <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti asperiores laboriosam praesentium enim maiores? Ad repellat voluptates alias facere repudiandae dolor accusamus enim ut odit, aliquam nesciunt eaque nulla dignissimos.</p>
        <div class="user">
            <img src="images/pic-2.png" alt="">
            <div class="user-info">
                <h3>john deo</h3>
                <span>happy customer</span>
            </div>
        </div>
        <span class="fas fa-quote-right"></span>
    </div>

    <div class="box">
        <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti asperiores laboriosam praesentium enim maiores? Ad repellat voluptates alias facere repudiandae dolor accusamus enim ut odit, aliquam nesciunt eaque nulla dignissimos.</p>
        <div class="user">
            <img src="images/pic-3.png" alt="">
            <div class="user-info">
                <h3>john deo</h3>
                <span>happy customer</span>
            </div>
        </div>
        <span class="fas fa-quote-right"></span>
    </div>

</div>
    
</section>

<!-- review section ends -->

<!-- contact section starts  -->

<section class="contact" id="contact">

    <h1 class="heading"> <span> contact </span> us </h1>

    <div class="row">

        <form action="">
            <input type="text" placeholder="name" class="box">
            <input type="email" placeholder="email" class="box">
            <input type="number" placeholder="number" class="box">
            <textarea name="" class="box" placeholder="message" id="" cols="30" rows="10"></textarea>
            <input type="submit" value="send message" class="btn">
        </form>

        <div class="image">
            <img src="images/contact-img.svg" alt="">
        </div>

    </div>

</section>

<!-- contact section ends -->

<!-- footer section starts  -->

<section class="footer">

    <div class="box-container">

        <div class="box">
            <h3>quick links</h3>
            <a href="#">home</a>
            <a href="#">about</a>
            <a href="#">products</a>
            <a href="#">review</a>
            <a href="#">contact</a>
        </div>

        <div class="box">
            <h3>extra links</h3>
            <a href="#">my account</a>
            <a href="#">my order</a>
            <a href="#">my favorite</a>
        </div>

        <div class="box">
            <h3>locations</h3>
            <a href="#">india</a>
            <a href="#">USA</a>
            <a href="#">japan</a>
            <a href="#">france</a>
        </div>

        <div class="box">
            <h3> Social links</h3>
            <a href="https://facebook.com/freewebsitecode/"> <i class="fab fa-facebook-f"></i> facebook</a>
            <a href="https://freewebsitecode.com/"> <i class="fab fa-twitter"></i> twitter</a>
            <a href="https://freewebsitecode.com/"> <i class="fab fa-instagram"></i> instagram</a>
            <a href="https://freewebsitecode.com/"> <i class="fab fa-linkedin"></i> linkedin</a>
            <a href="https://freewebsitecode.com/"> <i class="fab fa-pinterest"></i> pinterest</a>
            <a href="https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos"> <i class="fab fa-youtube"></i> youtube</a>
        </div>

        <div class="box">
            <h3>contact info</h3>
            <a href="#">+123-456-7890</a>
            <a href="#">[email protected]</a>
            <a href="#">Kolkata, india </a>
            <h3>payment methods</h3>
            <img src="images/payment.png" alt="payment image">
        </div>

    </div>

    <div class="credit"> created by <span> <a href="https://freewebsitecode.com/"> Free Website Code </a> </span> | all rights reserved </div>

</section>

<!-- footer section ends -->



    
</body>
</html>