e-commerce website with HTML and CSS only by sparkify solutions

Build an E-commerce website with HTML and CSS.

How to build an e-commerce website with HTML and CSS?

  • Use HTML to Structure the e-commerce website.
  • Use CSS to style an e-commerce website.

Source code of HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-commerece website</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <!---- Header Start---->
    <header>
        <a href="#" class="logo">
            SaveDive
        </a>
        <ul class="nav-list">
            <li><a href="#Home">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Page</a></li>
            <li><a href="#">Docs</a></li>
        </ul>
        <div class="nav-icons">
            <a href="#"><i class='bx bx-search-alt-2'></i></a>
            <a href="#"><i class='bx bx-user'></i></a>
            <a href="#"><i class='bx bx-cart-alt'></i></a>
            <div class="bx bx-menu" id="menu-icon"></div>
        </div>
    </header>
    <!---- Header End---->
    <!---- Main Start---->
    <section class="main-content" id="Home">
        <div class="main-text">
            <h1>New Arrivals Products</h1>
            <H4>Let's Dive to Save Money</H4>
            <a href="#" class="main-btn">
                Shop Now <i class="bx bx-right-arrow-alt"></i>
            </a>
        </div>
    </section>
    <!---- Main End---->
    <!--- Products Section Starts--->
    <section class="product-container">
        <div class="heading-text heading">
            <h2>Our Latest <span>Products</span></h2>
        </div>
        <div class="products-items">
            <div class="row">
                <img src="shirts.jpg" alt="">
                <div class="product-text">
                    <h5>Sale</h5>
                </div>
                <div class="product-icon">
                    <i class='bx bx-heart' ></i>
                </div>
                <div class="product-ratting">
                    <i class="bx bx-star"></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bxs-star-half ' ></i>
                </div>
                <div class="price">
                    <h4>Man T-Shirts</h4>
                    <p>$20</p>
                </div>
            </div>
            <div class="row">
                <img src="laptop.jpg" alt="">
                <div class="product-text">
                    <h5>New</h5>
                </div>
                <div class="product-icon">
                    <i class='bx bx-heart' ></i>
                </div>
                <div class="product-ratting">
                    <i class="bx bx-star"></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bxs-star-half ' ></i>
                </div>
                <div class="price">
                    <h4>Hp vostro 15 3000</h4>
                    <p>$139</p>
                </div>
            </div>
            <div class="row">
                <img src="mobile.jpg" alt="">
                <div class="product-icon">
                    <i class='bx bx-heart' ></i>
                </div>
                <div class="product-ratting">
                    <i class="bx bx-star"></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bxs-star-half ' ></i>
                </div>
                <div class="price">
                    <h4>Iphone X</h4>
                    <p>$99</p>
                </div>
            </div>
            <div class="row">
                <img src="pants.jpg" alt="">
                <div class="product-text">
                    <h5>Sale</h5>
                </div>
                <div class="product-icon">
                    <i class='bx bx-heart' ></i>
                </div>
                <div class="product-ratting">
                    <i class="bx bx-star"></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bxs-star-half ' ></i>
                </div>
                <div class="price">
                    <h4>Man Jeans</h4>
                    <p>$23</p>
                </div>
            </div>
            <div class="row">
                <img src="school-bag.jpg" alt="">
                <div class="product-icon">
                    <i class='bx bx-heart' ></i>
                </div>
                <div class="product-ratting">
                    <i class="bx bx-star"></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bxs-star-half ' ></i>
                </div>
                <div class="price">
                    <h4>School Bags</h4>
                    <p>$32</p>
                </div>
            </div>
            <div class="row">
                <img src="hand-bag.jpg" alt="">
                <div class="product-text">
                    <h5>Hot</h5>
                </div>
                <div class="product-icon">
                    <i class='bx bx-heart' ></i>
                </div>
                <div class="product-ratting">
                    <i class="bx bx-star"></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bxs-star-half ' ></i>
                </div>
                <div class="price">
                    <h4>Hand Bag</h4>
                    <p>$99</p>
                </div>
            </div>
            <div class="row">
                <img src="shoes.jpg" alt="">
                <div class="product-icon">
                    <i class='bx bx-heart' ></i>
                </div>
                <div class="product-ratting">
                    <i class="bx bx-star"></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bxs-star-half ' ></i>
                </div>
                <div class="price">
                    <h4>Nike Shoes</h4>
                    <p>$67</p>
                </div>
            </div>
            <div class="row">
                <img src="camera.jpg" alt="">
                <div class="product-text">
                    <h5>New</h5>
                </div>
                <div class="product-icon">
                    <i class='bx bx-heart' ></i>
                </div>
                <div class="product-ratting">
                    <i class="bx bx-star"></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bxs-star-half ' ></i>
                </div>
                <div class="price">
                    <h4>Latest Camera</h4>
                    <p>$119</p>
                </div>
            </div>
            <div class="row">
                <img src="watch.jpg" alt="">
                <div class="product-text">
                    <h5>Hot</h5>
                </div>
                <div class="product-icon">
                    <i class='bx bx-heart' ></i>
                </div>
                <div class="product-ratting">
                    <i class="bx bx-star"></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bx-star' ></i>
                    <i class='bx bxs-star-half ' ></i>
                </div>
                <div class="price">
                    <h4>Mans Watch</h4>
                    <p>$19</p>
                </div>
            </div>
        </div>
    </section>
    <!--- Products Section End--->
    <!--- client-review-section Starts--->
    <section class="client-reviews">
        <div class="reviews heading">
            <h2><span>Client </span>Reviews</h2>
            <img src="Nasir-Ali.jpg" >
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique tenetur maiores ratione eum, aspernatur dignissimos molestiae.
                <br>
                Praesentium ipsam atque facilis illum. Possimus repellendus est doloribus expedita, nesciunt debitis incidunt sint.
            </p>
            <h2>Nasir Ali</h2>
            <p>CEO of SaveDive</p>
        </div>
    </section>
    <!--- client-review-section End--->
    <!--- Contact Section Starts--->
    <section class="contact">
        <div class="heading">
            <h2>Company<span> Info</span></h2>
        </div>
        <div class="contact-info ">
            <div class="first-info info">
                <h2>SaveDive</h2>
                <p>Spanking plaza Tarlai Islamabad</p>
                <p>+92 334 546346</p>
                <P>Admin@savedive.com</P>
                <div class="social-icons">
                    <a href="#"><i class="bx bxl-facebook"></i></a>
                    <a href="#"><i class="bx bxl-twitter"></i></a>
                    <a href="#"><i class="bx bxl-instagram-alt"></i></a>
                    <a href="#"><i class="bx bxl-youtube"></i></a>
                </div>
            </div>
            <div class="second-info info">
                <h4>Support</h4>
                <p>Contact Us</p>
                <p>About Page</p>
                <p>Shopping & Returns</p>
                <p>Privacy</p>
            </div>
            <div class="third-info info">
                <h4>Shop</h4>
                <p>Man's Shoping</p>
                <p>Women's Shoping</p>
                <p>Kid's Shoping</p>
                <p>Discount</p>
            </div>
            <div class="fourth-info info">
                <h4>Company</h4>
                <p>About</p>
                <p>Affiliate</p>
                <p>Partners</p>
                <p>Login</p>
            </div>
           
        </div>
    </section>
    <!--- Contact Section End--->
</body>
</html>

 

 

 

 

 

 

 

 

 

 

Save this code with .HTML extension.

Explanation

1.Body Section:
  • The visible content of the web page is written in<body> section.
2. Header Section:
  • The <header> section contains the web page’s elements, typically the logo, navigation menu, and search bar.
  • Logo: The <a href=”#” class=”logo”>SaveDive</a> tag is a link element with the class “logo” that displays the text “SaveDive” and links to the homepage (href=”#” .. ).
  • Navigation menu: An unstructured list (<ul>) element is a navigation menu with list items (<li>). Each item list contains an anchor tag (<a>) that indicates a link to a specific part of the web page or an external web page.
  • Search and User Identifiers: Anchortags with <i> elements specify identifiers for the search (bx bx-search-alt-2) and user profile (bx bx-user).
  • Menu icon: The <div class=”bx bx-menu” id=”menu-icon”></div> element specifies the hamburger menu icon (bx bx-menu) used for navigation.
3. Main Content Section:
  • The <section class=”main-content” id=”Home”> section describes the main content area of ​​the web page with the ID “Home”.
  • Special notes: The <h1> and <h4> elements refer to the headings “New Features” and “Let’s Dive in to Save Money,” respectively.
  • The Buy Now button: <a href=”#” class=”main-btn”>Buy Now <i class=”bx bx-right-arrow-alt”></i> </a> tag is a button element the “Shop Now “ with the text and arrow icon (bx bx-right-arrow-alt) associated with a particular page (`href=”#” is currently not associated with anything).
4. Products Section:
  • The <section class=”product-container”> section displays the product listings.
  • Heading: The <h2> element displays the heading “Our Latest Products”.
  • Product Rows: The product listings are divided into rows using the div element with the class “row”. Each row contains an image, product details, price, and rating.
5. Client Review Section:
  • The <section class=”client-reviews”> section displays a client review and information.
  • Review Heading: The <h2> element displays the heading “Client Reviews”.
  • Client Image: The <img src=”Nasir-Ali.jpg”> tag displays the image of the client.
  • Text: The <p> element displays the client’s review.
  • Client Name and Title: The <h2> and <p> elements display the client’s name (Nasir Ali) and title (CEO of SaveDive).
6. Contact Section:
  • The <section class=”contact”> section displays the company information and contact details.
  • The <h2> tag defines a heading element with the text “Company Info”.
  • The <div> tag with the class “contact-info” likely groups the contact details.
  • Four inner <div> tags, each with the class “info”, likely style and organize different contact information sections like company address, phone number, email, social media links, support options, shop categories, and company information.
  • Each information section likely uses various HTML elements like <h2>, <p>, <a>, and <i class=’bx bxl-facebook’></i> to display text, links, and icons.

Source code of CSS file.

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    list-style: none;
    text-decoration: none;
}
:root
{
    --first-text-color:#2c2c2c;
    --second-text-color:#400142;
    --third-text-color:#ff8c00;
    --main-color:#ff039e;
    --bg-color:#ebebeb;
}
header
{
    position: fixed;
    width: 100%;
    top:0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10%;
}
.logo
{
    color: var(--main-color);
    font-size: 26px;
    font-weight: 600;
}
.nav-list
{
    display: flex;  
}
.nav-list a
{
    color: var(--first-text-color);
    font-size: 18px;
    padding: 10px 20px;
    font-weight: 400;
    transition: all 0.5s ease;
}
.nav-lista:hover
{
    color: var(--main-color);
}
.nav-icons
{
    display: flex;
    align-items: center;
}
.nav-icons i
{
    margin-right: 15px;
    color: var(--first-text-color);
    font-size: 25px;
    font-weight: 400;
    transition: all 0.5s ease;
}
.nav-iconsi:hover
{
    color: var(--main-color);
    transform: scale(1.2);
}
#menu-icon
{
    font-size: 35px;
    color: var(--first-text-color);
    z-index: 1000;
    cursor: pointer;
}
section
{
    padding: 0% 10%;
}
.main-content
{
    width: 100%;
    height: 100vh;
    padding-left: 13%;
    background-image: url(background.jpg);
    background-size:cover;
    background-position: center;
    display: grid;
    grid-template-columns: repeat(1 ,1fr);
    align-items: center;
}
.main-content h1
{
    color: var(--first-text-color);
}
.main-content h4
{
    color: var(--second-text-color);
    font-size: 60px;
    margin:35px 0 35px 0px
}
.main-btn
{
    width: 130px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    border-radius: 6px;
    border: 2px solid var(--main-color);
    color: var(--first-text-color);
    transition: all 0.5s ease;
}
.main-btn:hover
{
    background: var(--main-color);
    transform: scale(1.1);
}
.heading h2
{
    color: var(--first-text-color);
    font-size: 28px;
    text-align: center;
    padding: 20px 0 ;
}
.heading span
{
    color: var(--main-color);
}
.products-items
{
    display: grid;
    grid-template-columns: repeat(auto-fit , minmax(260px,auto));
    gap: 2.5rem;
}
.row
{
    position: relative;
    transition: all 0.5s ease;
}
.row img
{
    width: 100%;
    height: 70%;
    transition: all .5s ease;
    border-radius: 10px;
}
.row img:hover
{
    transform: scale(0.9);
}
.product-text h5
{
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 22px;
    font-weight: 700;
    color: var(--second-text-color);
    background: var(--main-color);
    padding: 4px 6px;
    border-radius: 40%;
}
.product-icon
{
    position: absolute;
    right: 0;
    font-size: 20px;
}
.product-icon:hover
{
    color: var(--main-color);
}
.product-ratting i
{
    color: var(--third-text-color);
    font-size: 20px;
}
.price h4
{
    color: var(--first-text-color);
    font-size: 18px;
    letter-spacing: 1px;
}
.price p
{
    color: var(--second-text-color);
    font-size: 15px;
}
.client-reviews
{
    text-align: center;
}
.reviews img
{
    width: 120px;
    height: auto;
    border-radius: 60px;
    margin: 10px 0;
}
.reviews p
{
    color: var(--second-text-color);
    font-size: 16px;
    margin-bottom: 10px;
}
.reviews h2
{
    color: var(--first-text-color);
    font-size: 25px;
    padding: 10px 0;
}
.contact
{
    background: var(--bg-color);
}
.contact-info
{
    display: grid;
    grid-template-columns: repeat(4,auto);
    gap: 1rem;
}
.contact-info h2
{
    color: var(--main-color);
    font-size: 35px;
}
.info h4
{
    font-size: 20px;
}
.info p
{
    color: var(--second-text-color);
    line-height: 2;
    transition: all 0.5s ease;
}
.infop:hover
{
    color: var(--main-color);
    transform: scale(1.1);
}
.social-icons i
{
    color: var(--third-text-color);
    font-size: 23px;
    margin: 10px 10px 20px 0;
    transition: all 0.5s ease;
}
.social-icons i:hover
{
    color: var(--main-color);
    transform: scale(1.3);
}
@media (max-width:890px)
{
    header
    {
        padding: 20px 3%;
        transition: 0.4s;
    }
}
@media(max-width:630px)
{
    .main-content h1
    {
        margin-left: -10%;
        font-size: 40px;
        transition: .8s;
    }
    .main-contenth4
    {
        font-size: 30px;
        transition: .8s;
    }
}
@media(max-width:750px)
{
    .nav-list
    {
        position: absolute;
        top: 100%;
        right: -100%;
    }
}

 

Save this code as style.css

Explanation.

Global Styles:
  • Explain the * selector that resets default browser styles and ensures consistency.
  • Discuss properties like margin: 0; padding: 0; box-sizing: border-box; and their impact on element layout.
  • Introduce variables using :root for colors (–first-text-color, etc.) and their benefits for maintainability.
  • Dedicate lines to explaining each color variable and its purpose (main color, text colors, etc.).
Header:
  • Explain position: fixed; top: 0; for the header’s fixed position at the top of the page.
  • Discuss width: 100%; for full-width coverage and display: flex for arranging elements using flexbox.
  • Breakdown justify-content: space-between for aligning elements horizontally at opposite ends.
  • Dedicate lines explaining styles for the logo (color, font size, weight).
  • Explain nav-list styles like display: flex for horizontal layout.
  • Discuss styling for navigation links (nav-list a) including font size, color, padding, hover effects (color change, slight scale).
  • Explain styles for icons (nav-icons i) like font size, color, hover effects (color change, scale up).
  • Dedicate lines explaining styles for the hamburger menu icon (#menu-icon) including size, color, cursor pointer for interactivity.
Sections:
  • Briefly explain the purpose of sections for structuring content areas.
  • Discuss padding: 0% 10% for adding padding around content within sections.
Main Content:
  • Explain width: 100%; height: 100vh; for the main content taking full viewport width and height.
  • Discuss padding-left: 13% for introducing left padding and background-image property for setting a background image.
  • Explain background-size: cover; background-position: center; for background image properties.
  • Discuss display: grid for using a grid layout and grid-template-columns: repeat(1, 1fr); for a single column layout.
  • Dedicate lines explaining styles for headings (h1, h4) like color, font size, and margins.
  • Explain main-btn styles for buttons (width, height, display, alignment, font properties, border, color, hover effects).
Additional Sections:
  • Briefly explain similar styling approaches for sections like “Heading,” “Products,” “Client Reviews,” and “Contact.”
  • Highlight specific styles for each section:
  1. Centered text and quotes for headings.
  2. Grid layout and hover effects for product cards (images, text, icons).
  3. Client review section with image styles, text color, and ratings (using icons).
  4. Contact section background color and styles for contact information (grid layout, headings, info text, hover effects).
Media Queries:
  • Introduce media queries as a way to adjust styles for different screen sizes.
  • Explain the @media (max-width: 890px) query for screens less than 890px wide.
  • Discuss adjustments made for smaller screens in this query, like reduced padding in the header.
  • Include similar explanations for media queries targeting widths less than 630px and 750px.
  • Highlight adjustments like font size reduction for headings and buttons on smaller screens.
Conclusion:
  • Briefly summarize how CSS styles various elements on a webpage.
  • Emphasize the importance of CSS for creating a visually appealing and responsive website.
Thanks for reading this post.
How to Build an e-commerce website with HTML and CSS.

By Sparkify Solutions.

Leave a Comment

Your email address will not be published. Required fields are marked *