How To Create a Complete Coffee Shop Website Design Using HTML CSS & JavaScript

Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials. 

Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.

You can also visit my GitHub where I upload all the code I have.

In this tutorial topic "", we will learn how to create it following these simple easy steps.

Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments. 

Get Source Code.

If interested in watching the video before running the code below, you can click the play button to get started.



Code Begins

  1. First, create a folder with any name you like. Then, make the necessary files inside it.
  2. Create a file called index.html to serve as the main file.
  3. Create a file called style.css for the CSS code.
  4. Create a file called script.js for the JavaScript code.
  5. Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.

To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout. 

HTML


 <!-- Header Section -->
    <header>
        <a href="" class="logo">
            <img src="./img/coffee logo.png" alt="">
        </a>       
        <div class="links">
            <ul>
                <li><a href="#">Home </a></li>
                <li><a href="#about">About </a></li>
                <li><a href="#menu">Menu </a></li>
                <li><a href="#products">Products </a></li>
                <li><a href="#review">Review </a></li>
                <li><a href="#contact">Contact </a></li>
                <li><a href="#blogs">Blogs </a></li>
            </ul>
        </div>
        <div class="others">
            <button class="search-btn"><ion-icon name="search-outline"></ion-icon></button>
            <button class="cart-btn"><ion-icon name="cart-outline"></ion-icon></button>
             <button class="bar-btn"><ion-icon name="menu-outline"></ion-icon></button>
        </div>
    </header>

    <!-- Hero Section -->
    <div class="hero">
        <div class="hero-text">
            <h1>Wake Up with a Fresh Coffee</h1>
            <p>Start your day the right way — with the rich aroma of freshly brewed coffee and the comforting atmosphere of your favorite neighborhood café.</p>
            <button>Order Now</button>
        </div>
        <div class="hero-image">
            <img src="./img/hero.png" alt="">
        </div>
    </div>

    <!-- About Section -->
    <div class="about title" id="about">
        <h1>About <span>Us</span></h1>
        <div class="about-details">
            <div class="about-image">
                <img src="./img/about.jpg" alt="">
            </div>
            <div class="about-text">
                <h2>What makes our coffee special?</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates ducimus molestiae unde ullam rem.</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam itaque voluptas adipisci natus possimus. Velit rerum veniam in nesciunt doloribus.</p>
                <button>Read More</button>
            </div>
        </div>       
    </div>

    <!-- Menu Section -->
    <div class="menu title" id="menu">
        <h1>Our <span>Menu</span></h1>
        <div class="menu-items">
            <div class="menu-item">
                <img src="./img/menu-1.jpg" alt="">
                    <h2>Caffè macchiato</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
                <div class="price">
                    <h3>$5.00</h3>
                    <button>Purchase<ion-icon name="cart"></ion-icon></button>
                </div>
            </div>
            <div class="menu-item">
                <img src="./img/menu-2.jpg" alt="">
                    <h2>Cappuccino</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
                <div class="price">
                    <h3>$5.00</h3>
                    <button>Purchase<ion-icon name="cart"></ion-icon></button>
                </div>
            </div>
            <div class="menu-item">
                <img src="./img/menu-3.jpg" alt="">
                    <h2>Espresso</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
                <div class="price">
                    <h3>$5.00</h3>
                    <button>Purchase<ion-icon name="cart"></ion-icon></button>
                </div>
            </div>
            <div class="menu-item">
                <img src="./img/menu-1.jpg" alt="">
                    <h2>Caffè macchiato</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
                <div class="price">
                    <h3>$5.00</h3>
                    <button>Purchase<ion-icon name="cart"></ion-icon></button>
                </div>
            </div>
            <div class="menu-item">
                <img src="./img/menu-2.jpg" alt="">
                    <h2>Cappuccino</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
                <div class="price">
                    <h3>$5.00</h3>
                    <button>Purchase<ion-icon name="cart"></ion-icon></button>
                </div>
            </div>
            <div class="menu-item">
                <img src="./img/menu-3.jpg" alt="">
                    <h2>Espresso</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
                <div class="price">
                    <h3>$5.00</h3>
                    <button>Purchase<ion-icon name="cart"></ion-icon></button>
                </div>
            </div>
        </div>  
    </div>  

    <!-- Products Section -->
    <div class="products title" id="products">
        <h1>Latest <span>Products</span></h1>
        <div class="products-items">
            <div class="products-item">
                <img src="./img/product-1.jpg" alt="">
                    <h2>Caffè macchiato</h2>
                    <div class="products-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                    </div>
                    <div class="products-price">
                        <h3>$15.99</h3>
                        <strike>$20.99</strike>
                    </div>
                    <div class="products-cta">
                        <button><ion-icon name="cart"></ion-icon></button>
                        <button><ion-icon name="heart"></ion-icon></button>
                        <button><ion-icon name="eye"></ion-icon></button>
                    </div>               
            </div>
            <div class="products-item">
                <img src="./img/product-2.jpg" alt="">
                    <h2>Cappuccino</h2>
                    <div class="products-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-half"></ion-icon>
                    </div>
                    <div class="products-price">
                        <h3>$15.99</h3>
                        <strike>$20.99</strike>
                    </div>
                    <div class="products-cta">
                        <button><ion-icon name="cart"></ion-icon></button>
                        <button><ion-icon name="heart"></ion-icon></button>
                        <button><ion-icon name="eye"></ion-icon></button>
                    </div>  
            </div>
            <div class="products-item">
                <img src="./img/product-3.jpg" alt="">
                    <h2>Espresso</h2>
                    <div class="products-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                    </div>
                    <div class="products-price">
                        <h3>$15.99</h3>
                        <strike>$20.99</strike>
                    </div>
                    <div class="products-cta">
                        <button><ion-icon name="cart"></ion-icon></button>
                        <button><ion-icon name="heart"></ion-icon></button>
                        <button><ion-icon name="eye"></ion-icon></button>
                    </div>  
            </div>
        </div>
    </div>

    <!-- Review Section -->
    <div class="review title" id="review">
        <h1>What <span>Our Customers</span> Say</h1>
        <div class="reviews">
            <div class="reviews-user">
                <div class="review-image">
                    <img src="./img/user-1.jpg" alt="">
                    <div class="review-profile">
                        <h3>John Doe</h3>
                        <div>
                            <ion-icon name="star"></ion-icon>
                            <ion-icon name="star"></ion-icon>
                            <ion-icon name="star"></ion-icon>
                            <ion-icon name="star"></ion-icon>
                        </div>
                    </div>
                </div>
                <div class="review-text">
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non ad reprehenderit quasi, voluptas ipsum culpa delectus error qui amet rem sequi dolores quisquam est magni veritatis mollitia eum consequatur nihil!</p>
                </div>
            </div>
            <div class="reviews">
            <div class="reviews-user">
                <div class="review-image">
                    <img src="./img/user-2.jpg" alt="">
                    <div class="review-profile">
                        <h3>Alex Doe</h3>
                        <div>
                            <ion-icon name="star"></ion-icon>
                            <ion-icon name="star"></ion-icon>
                            <ion-icon name="star"></ion-icon>
                            <ion-icon name="star"></ion-icon>
                        </div>
                    </div>
                </div>
                <div class="review-text">
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non ad reprehenderit quasi, voluptas ipsum culpa delectus error qui amet rem sequi dolores quisquam est magni veritatis mollitia eum consequatur nihil!</p>
                </div>
            </div>
        </div>
        </div> 
    </div>

    <!-- Contact Section -->
    <div class="contact title" id="contact">
        <h1>Contact <span>Us</span></h1>
        <div class="contact-details">
            <iframe width="50%" height="600" frameborder="0" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=1%20Grafton%20Street,%20Dublin,%20Ireland+(My%20Business%20Name)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
            <div class="contact-form">
                <h2>Get in Touch</h2>
                <form>
                    <input type="text" placeholder="Your Name" required>
                    <input type="email" placeholder="Your Email" required>
                    <textarea rows="5" placeholder="Your Message" required></textarea>
                    <button type="submit">Send Message</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Blogs Section -->
    <div class="blogs title" id="blogs">
        <h1>Our <span>Blogs</span></h1>
        <div class="blogs-items">
            <div class="blogs-item">
                <div class="blogs-image">
                    <img src="./img/blog-1.jpg" alt="">
                </div>
                <div class="blogs-text">
                    <h2>How to Brew the Perfect Cup of Coffee</h2>
                    <span>Admin - 12 May, 2025</span>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
                    <button>Read More</button>
                </div>           
            </div>
            <div class="blogs-item">
                <div class="blogs-image">
                    <img src="./img/blog-2.jpg" alt="">
                </div>
                <div class="blogs-text">
                    <h2>Roasted & Toasted: Café Conversations</h2>
                    <span>Admin - 12 May, 2025</span>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
                    <button>Read More</button>
                </div>  
            </div>
            <div class="blogs-item">
                <div class="blogs-image">
                    <img src="./img/blog-1.jpg" alt="">
                </div>
                <div class="blogs-text">
                    <h2>The Daily Drip: Fresh Brews & Hot Topics</h2>
                    <span>Admin - 12 May, 2025</span>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatibus.</p>
                    <button>Read More</button>
                </div>  
            </div>
        </div>
    </div>

    <!-- Footer Section -->
    <footer>
        <div class="footer-content">
            <div class="footer-logo">
                <img src="./img/coffee logo.png" alt="">
            </div>
            <div class="footer-links">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#review">Review</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#blogs">Blogs</a></li>
                </ul>
            </div>
            <div class="footer-social">
                <a href=""><ion-icon name="logo-facebook"></ion-icon></a>
                <a href=""><ion-icon name="logo-twitter"></ion-icon></a>
                <a href=""><ion-icon name="logo-instagram"></ion-icon></a>
            </div>
        </div>
        <p class="footer-copyright">&copy; 2025 <a href="">U-GINE MEDIA</a>. All rights reserved.</p>
    </footer>

    <!-- Responsive Navigation -->
<aside class="aside-navigation">
    <ul>
        <li><a href="#">Home </a></li>
        <li><a href="#about">About </a></li>
        <li><a href="#menu">Menu </a></li>
        <li><a href="#products">Products </a></li>
        <li><a href="#review">Review </a></li>
        <li><a href="#contact">Contact </a></li>
        <li><a href="#blogs">Blogs </a></li>
    </ul>
</aside>

<!-- Responsive Cart Navigation -->
 <aside class="aside-cart">
    <ul>
        <li>
            <div class="cart-item">
                <div><img src="./img/cart.jpg" alt=""></div>
                <div>
                    <h2>Caffè macchiato</h2>
                    <span>$15.99</span>
                </div>  
            </div>
            <button><ion-icon name="trash"></ion-icon></button>
        </li>
        <li>
            <div class="cart-item">
                <div><img src="./img/cart.jpg" alt=""></div>
                <div>
                    <h2>Espresso</h2>
                    <span>$15.99</span>
                </div>  
            </div>
            <button><ion-icon name="trash"></ion-icon></button>
        </li>
        <li>
            <div class="cart-item">
                <div><img src="./img/cart.jpg" alt=""></div>
                <div>
                    <h2>Cappuccino</h2>
                    <span>$15.99</span>
                </div>  
            </div>
            <button><ion-icon name="trash"></ion-icon></button>
        </li>
    </ul>
 </aside>

 <!-- Aside Search -->
  <aside class="aside-search">
    <input type="search" />
  </aside>


    <script src="script.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. 

CSS


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    position: relative;
    font-family: "Poppins", sans-serif;
    background: #121212;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2% 5%;
    padding-bottom: 0.3%;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
}

.logo img {
    width: 80px;
}

.links ul li {
    list-style: none;
    display: inline-block;
    margin: 0 20px;
}

.links ul li a {
    text-decoration: none;
    color: #EDEDED;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.5s ease;
}

.links ul li a:hover {
    text-decoration: underline;
    color: #ff6347;
}

.others {
    display: flex;
    align-items: center;
    gap: 10px;
}

.others button {
    border: none;
    background: transparent;
    display: inline-block;
}

.others button ion-icon {
    font-size: 30px;
    color: #EDEDED;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.5s ease;
}

.others button:hover ion-icon {
    color: #ff6347;
}

.others button.bar-btn {
    display: none;
}

/* Header End */
/* Hero */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    padding-top: 80px;
}

.hero h1 {
    font-size: 4em;
    text-transform: uppercase;
    color: #EDEDED;
    font-weight: 500;
    margin-bottom: 20px;
    max-width: 600px;
}

.hero p {
    font-size: 20px;
    color: #ff6347;
    font-weight: 300;
    margin-bottom: 30px;
    max-width: 650px;
    line-height: 2;
}

.hero button {
    background: #ff6347;
    color: #EDEDED;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.5s ease;
}

.hero button:hover {
    letter-spacing: 2px;
}

.hero-image img {
    max-width: 700px;
    width: 100%;
    animation: bounce 2s infinite alternate;
}

@keyframes bounce {
   0% {transform: translateY(0);}
   100% {transform: translateY(-20px);}
}

/* Hero End */

/* About */
.about {
    padding: 0 5%;
    width: 100%;
    padding-top: 80px;
}

/* Global Style */
.title h1 {
font-size: 3em;
    text-transform: uppercase;
    color: #EDEDED;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
}

.title h1 span {
    color: #ff6347;
}

.about-details {
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    border-radius: 5px;
}

.about-image {
    width: 50%;
    height: 100%;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-text {
    width: 50%;
    height: 100%;
    background: #111219;
    padding: 40px 2em;
}

.about-text h2 {
    font-size: 2.3em;
    text-transform: capitalize;
    color: #EDEDED;
    font-weight: 500;
    margin-bottom: 20px;
}

.about-text p {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    margin-bottom: 30px;
    line-height: 2;
}

.about-text button {
    background: #ff6347;
    color: #EDEDED;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.5s ease;
}

.about-text button:hover {
    letter-spacing: 2px;
}

/* About End */

/* Menu */
.menu {
    padding: 0 5%;
    width: 100%;
    padding-top: 80px;
}

.menu-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    flex-wrap: wrap;
    margin-top: 50px;
}

.menu-item {
    width: 30%;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 3em 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    transition: all 0.5s ease;
}

.menu-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.menu-item h2 {
    font-size: 1.5em;
    text-transform: capitalize;
    color: #EDEDED;
    font-weight: 500;
}

.menu-item p {
    color: rgba(255, 255, 255, 0.5);
    line-height: 2;
}

.price {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #EDEDED;
    margin-top: 20px;
}

.price button {
    border: none;
    background: transparent;
    background: #ff6347;
    font-size: 20px;
    cursor: pointer;
    color: #EDEDED;
    display: flex;
    align-items: center;
    padding:5px 8px;
    border-radius: 3px;
    transition: all 0.5s ease;
}

.menu-item:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.1);
    border-color: #ff6347;
}

.price button:hover {
    background: #EDEDED;
    color: #ff6347;
}

/* Menu End */

/* Product */
.products {
    padding: 0 5%;
    width: 100%;
    padding-top: 80px;
}

.products-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    flex-wrap: wrap;
    margin-top: 50px;
}

.products-item {
    width: 30%;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    transition: all 0.5s ease;
}

.products-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    transition: all 0.5s ease;  
}

.products-item:hover img {
    filter: grayscale(100%);
}

.products-item h2 {
    font-size: 1.5em;
    text-transform: capitalize;
    color: #EDEDED;
    font-weight: 500;
}

.products-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3em;
    color: #ff6347;
}

.products-price {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #EDEDED;
}

.products-price strike {
    color: rgba(255, 255, 255, 0.4);
}

.products-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.products-cta button {
    border: none;
    background: transparent;
    background: #ff6347;
    font-size: 20px;
    cursor: pointer;
    color: #EDEDED;
    display: flex;
    align-items: center;
    padding:5px 8px;
    border-radius: 3px;
    transition: all 0.5s ease;
}

.products-cta button:hover {
    background: #EDEDED;
    color: #ff6347;
}

/* Product End */

/* Review */
.review {
    padding: 0 5%;
    width: 100%;
    padding-top: 80px;
}

.reviews {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.reviews-user {
    width: 100%;
    padding: 2em;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.review-image {
    display: flex;
    gap: 10px;
    color: #EDEDED;
}

.review-image img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.review-profile h3 {
    margin-bottom: 5px;
}

.review-profile ion-icon {
    color: #ff6347;
}

.review-text p {
    color: #EDEDED;
    margin-top: 10px;
    line-height: 2;
    font-size: 17px;
    width: 100%;
}

.reviews-user:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Review End */

/* Contact */
.contact {
    padding: 0 5%;
    width: 100%;
    padding-top: 80px;
}

.contact-details {
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 50px;
}

.contact-form {
    width: 50%;
    height: 100%;
    background: #111219;
    padding: 40px 2em;
}

.contact-form h2 {
    font-size: 2.3em;
    text-transform: capitalize;
    color: #EDEDED;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form form input, .contact-form form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #EDEDED;
    font-size: 18px;
    resize: none;
    outline: none;
    font-family: "Poppins", sans-serif;
}

.contact-form form input::placeholder, .contact-form form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-form form button {
    background: #ff6347;
    color: #EDEDED;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.5s ease;
}

.contact-form form button:hover {
    letter-spacing: 2px;
}

/* Contact End */

/* Blog */
.blogs {
    padding: 0 5%;
    width: 100%;
    padding-top: 80px;
}

.blogs-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    flex-wrap: wrap;
    margin-top: 50px;
}

.blogs-item {
    width: 30%;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1em;
}

.blogs-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.blogs-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.5s ease;  
}

.blogs-item:hover img {
    transform: scale(1.05);
}

.blogs-text {
    padding: 1em;
}

.blogs-text h2 {
    font-size: 1.5em;
    text-transform: capitalize;
    color: #EDEDED;
    font-weight: 500;
}

.blogs-text span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    display: block;
    margin-bottom: 20px;
}

.blogs-text p {
    color: #EDEDED;
    line-height: 2;
}

.blogs-text button {
    border: none;
    background: #ff6347;
    font-size: 17px;
    cursor: pointer;
    color: #EDEDED;
    margin-top: 20px;
    padding:5px 8px;
    border-radius: 3px;
    transition: all 0.5s ease;
}

.blogs-item button:hover {
    background: #EDEDED;
    color: #ff6347;
}

/* Blog End */

/* Footer */
footer {
    padding: 2% 5%;
    width: 100%;
    margin-top: 80px;
    background: #111219;
}

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

.footer-logo img {
    width: 80px;
}

.footer-links ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    flex-wrap: wrap;
}

.footer-links ul li {
    list-style: none;
}

.footer-links ul li a {
    text-decoration: none;
    color: #EDEDED;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.5s ease;
}

.footer-links ul li a:hover {
    text-decoration: underline;
    color: #ff6347;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.footer-social ion-icon {
    font-size: 25px;
    color: #EDEDED;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.5s ease;
}

.footer-social ion-icon:hover {
    color: #ff6347;
}

.footer-copyright {
    text-align: center;
    color: #EDEDED;
    font-size: 17px;
    margin-top: 20px;
}

.footer-copyright a {
    color: #ff6347;
    text-decoration: none;
}

@media (max-width: 1000px) {
    .others button.bar-btn {
        display: inline-block;
    }

    .links ul li {
        display: none;
    }

    .hero h1 {
        font-size: 3em;
    }

    .hero p {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .logo img {
        width: 60px;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        margin: 80px 0;
        gap: 20px;
    }

    .hero h1 {
        font-size: 2.3em;
    }

    .hero p {
        font-size: 16px;
    }

    .hero-image img {
        max-width: 400px;
    }

    .hero button {
        font-size: 16px;
        padding: 8px 16px;
    }

    .title h1 {
        font-size: 2.3em;
    }

    .about-details {
        flex-direction: column;
        height: auto;
    }

    .about-text {
        width: 100%;
    }

    .about-image {
        width: 100%;
    }

    .about-text h2 {
        font-size: 2em;
    }

    .about-text p {
        font-size: 16px;
    }

    .about-text button {
        font-size: 16px;
        padding: 8px 16px;
    }

    .menu-items {
        flex-direction: column;
        align-items: center;
    }

    .menu-item {
        width: 100%;
    }

    .products-items {
        flex-direction: column;
        align-items: center;
    }

    .products-item {
        width: 100%;
    }

    .reviews {
        flex-direction: column;
        align-items: center;
    }

    .contact-details {
        flex-direction: column;
        height: auto;
    }

    .contact-details iframe {
        width: 100%;
        height: 300px;
    }

    .contact-form {
        width: 100%;
    }

    .contact-form h2 {
        font-size: 2em;
    }

    .blogs-items {
        flex-direction: column;
        align-items: center;
    }

    .blogs-item {
        width: 100%;
    }

    .blogs-image {
        height: 200px;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-logo img {
        width: 60px;
    }

    .footer-links ul {
        align-items: center;
    }
}

/* Aside Navigation */
.aside-navigation {
    position: fixed;
    bottom: 0;
    right: 0;
    background: #EDEDED;
    min-height: 89vh;
    z-index: 20;
    overflow: hidden;
    max-width: 300px;
    width: 0;
    padding-top: 40px;
    transition: all 0.5s ease; 
}

.aside-navigation ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
}

.aside-navigation ul li a {
    text-decoration: none;
    color: #121212;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.5s ease;
}

.aside-navigation ul li a:hover {
    text-decoration: underline;
    color: #ff6347;
}

.aside-navigation.active {
    width: 100%;
}
/* Aside Navigation End */

/* Aside Cart */
.aside-cart {
   position: fixed;
    bottom: 0;
    right: 0;
    background: #EDEDED;
    min-height: 84vh;
    z-index: 20;
    overflow: hidden;
    width: 0;
    padding-top: 40px;
    transition: all 0.5s ease;  
}

.aside-cart ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.aside-cart ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 10px; 
}

.cart-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.cart-item h2 {
    font-size: 18px;
    text-transform: uppercase;
}

.cart-item span {
    color: #ff6347;
}

.aside-cart ul li button {
    background: transparent;
    border: none;
    color: #ff6347;
    font-size: 20px;
    cursor: pointer;
}

.aside-cart.active {
    width: 300px;
}
/* Aside Cart End */


/* Aside Search */

.aside-search {
    position: fixed;
    top: 16%;
    right: 10%;
    z-index: 20;
    max-width: 0;
    width: 100%;
    overflow: hidden;
    transition: all 0.5s ease;  
}

.aside-search input {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 3px;
}

.aside-search.active {
    max-width: 300px;
}

@media (max-width: 767px) {
    .aside-cart {
        min-height: 89vh;
    }

    .aside-search {
        top: 11.5%;
        right: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.

JAVASCRIPT


const barBtn = document.querySelector(".bar-btn");
const asideNavigation = document.querySelector(".aside-navigation");

const toggleAsideNavigation = () => {
  asideNavigation.classList.toggle("active");
}

barBtn.addEventListener("click", toggleAsideNavigation);

const asideNavigationLinks = document.querySelectorAll(".aside-navigation a");
asideNavigationLinks.forEach(link => {
  link.addEventListener("click", () => {
    asideNavigation.classList.remove("active");
  });
});


const cartBtn = document.querySelector(".cart-btn")
const asideCart = document.querySelector(".aside-cart");

const toggleAsideCart = () => {
    asideCart.classList.toggle("active")
}

cartBtn.addEventListener("click", toggleAsideCart);

const searchBtn = document.querySelector(".search-btn");
const asideSearch = document.querySelector(".aside-search");

const toggleAsideSearch = () => {
    asideSearch.classList.toggle("active")
}

searchBtn.addEventListener("click", toggleAsideSearch)

Conclusion and Final word

Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.

Happy Coding Journey 🚀

Post a Comment

0 Comments

Close Menu