How To Build a Restaurant Website 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 "How To Build a Restaurant Website Using HTML CSS & JavaScript", 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

First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.
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.



<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></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>
    <script src="https://unpkg.com/scrollreveal"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Website Using HTML CSS JavaScript</title>
</head>
<body>
    
    <!-- Header Section -->
     <header class="header">
        <div class="header-container">
            <a href="" class="logo">F<span>oo</span>dy</a>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#feature">Feature</a></li>
                    <li><a href="#product">Products</a></li>
                    <li><a href="#review">Reviews</a></li>
                    <li><a href="#blog">Blogs</a></li>
                </ul>
                <div class="icons">
                    <div><ion-icon name="search-outline"></ion-icon></div>
                    <div><ion-icon name="person-outline"></ion-icon></div>
                    <div><ion-icon name="bag-add-outline"></ion-icon></div>
                </div>
            </nav>
            <button class="menu"><ion-icon name="menu-outline"></ion-icon></button>
        </div>
    </header>
    <!-- Header Section End -->


    <!-- Hero Section -->
     <section class="hero">
        <div class="hero-container scroll-bottom">
            <h1>organic food is good for health</h1>
            <div>
                <button>Order Now</button>
                <button>Make a Reservation</button>
            </div>
        </div>
     </section>
     <!-- Hero Section End -->


    <!-- About Section -->
     <section class="about" id="about">
         <div class="about-container scroll-left">
             <div class="about-image">
                <img src="./img/about.jpg" alt="">
             </div>
             <div class="about-content">
                <h2>best organic fruits and vegetables</h2>
                <p>Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet</p>
                <ul>
                    <li><span><ion-icon name="checkmark-outline"></ion-icon></span> <span>Tempor erat elitr rebum at clita</span></li>
                    <li><span><ion-icon name="checkmark-outline"></ion-icon></span> <span>Aliqu diam amet diam et eos</span></li>
                    <li><span><ion-icon name="checkmark-outline"></ion-icon></span> <span>Clita duo justo magna dolore erat amet</span></li>
                </ul>
                <button>Read More</button>
             </div>
         </div>
     </section>
     <!-- About Section End -->


     <!-- Features Section -->
      <section class="feature" id="feature">
        <div class="feature-container">
            <div class="title center zoom-in">
                <h2>Our Features</h2>
                <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.</p>
            </div>
            <div class="features staggered">
                <div>
                    <img src="./img/feature-1.png" alt="">
                    <h3>Natural Process</h3>
                    <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed vero dolor duo.</p>
                    <button>Read More</button>
                </div>
                <div>
                    <img src="./img/feature-2.png" alt="">
                    <h3>Organic Products</h3>
                    <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed vero dolor duo.</p>
                    <button>Read More</button>
                </div>
                <div>
                    <img src="./img/feature-3.png" alt="">
                    <h3>Biogically Safe</h3>
                    <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed vero dolor duo.</p>
                    <button>Read More</button>
                </div>
            </div>
        </div>
      </section>
      <!-- Features Section End -->


      <!-- Products Section -->
       <div class="product" id="product">
        <div class="product-container">
            <div class="title zoom-in">
                <h2>Our Products</h2>
                <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.</p>
            </div>
            <div class="product-filter">
                <button>Vegetables</button>
                <button>Fruits</button>
                <button>Fresh</button>
            </div>
            <div class="product-grid staggered">

                <!-- One -->
                <div>
                    <div class="product-image"><img src="./img/product-1.jpg" alt=""></div>
                    <div class="label">New</div>
                    <div class="product-info">
                        <h3>Fresh Tomato</h3>
                        <p><span>$19.00</span><span>$29.00</span></p>
                        <div>
                            <div><ion-icon name="eye-outline"></ion-icon>
                            <span>View detail</span></div>
                            <div><ion-icon name="bag-outline"></ion-icon>
                            <span>Add to cart</span></div>
                        </div>
                    </div>
                </div>

                <!-- Two -->
                 <div>
                    <div class="product-image"><img src="./img/product-2.jpg" alt=""></div>
                    <div class="label">New</div>
                    <div class="product-info">
                        <h3>Fresh Tomato</h3>
                        <p><span>$19.00</span><span>$29.00</span></p>
                        <div>
                            <div><ion-icon name="eye-outline"></ion-icon>
                            <span>View detail</span></div>
                            <div><ion-icon name="bag-outline"></ion-icon>
                            <span>Add to cart</span></div>
                        </div>
                    </div>
                </div>

                <!-- Three -->
                 <div>
                    <div class="product-image"><img src="./img/product-3.jpg" alt=""></div>
                    <div class="label">New</div>
                    <div class="product-info">
                        <h3>Fresh Tomato</h3>
                        <p><span>$19.00</span><span>$29.00</span></p>
                        <div>
                            <div><ion-icon name="eye-outline"></ion-icon>
                            <span>View detail</span></div>
                            <div><ion-icon name="bag-outline"></ion-icon>
                            <span>Add to cart</span></div>
                        </div>
                    </div>
                </div>

                <!-- Four -->
                 <div>
                    <div class="product-image"><img src="./img/product-4.jpg" alt=""></div>
                    <div class="label">New</div>
                    <div class="product-info">
                        <h3>Fresh Tomato</h3>
                        <p><span>$19.00</span><span>$29.00</span></p>
                        <div>
                            <div><ion-icon name="eye-outline"></ion-icon>
                            <span>View detail</span></div>
                            <div><ion-icon name="bag-outline"></ion-icon>
                            <span>Add to cart</span></div>
                        </div>
                    </div>
                </div>

                <!-- Five -->
                 <div>
                    <div class="product-image"><img src="./img/product-5.jpg" alt=""></div>
                    <div class="label">New</div>
                    <div class="product-info">
                        <h3>Fresh Tomato</h3>
                        <p><span>$19.00</span><span>$29.00</span></p>
                        <div>
                            <div><ion-icon name="eye-outline"></ion-icon>
                            <span>View detail</span></div>
                            <div><ion-icon name="bag-outline"></ion-icon>
                            <span>Add to cart</span></div>
                        </div>
                    </div>
                </div>

                <!-- Six -->
                 <div>
                    <div class="product-image"><img src="./img/product-6.jpg" alt=""></div>
                    <div class="label">New</div>
                    <div class="product-info">
                        <h3>Fresh Tomato</h3>
                        <p><span>$19.00</span><span>$29.00</span></p>
                        <div>
                            <div><ion-icon name="eye-outline"></ion-icon>
                            <span>View detail</span></div>
                            <div><ion-icon name="bag-outline"></ion-icon>
                            <span>Add to cart</span></div>
                        </div>
                    </div>
                </div>

                <!-- Seven -->
                 <div>
                    <div class="product-image"><img src="./img/product-7.jpg" alt=""></div>
                    <div class="label">New</div>
                    <div class="product-info">
                        <h3>Fresh Tomato</h3>
                        <p><span>$19.00</span><span>$29.00</span></p>
                        <div>
                            <div><ion-icon name="eye-outline"></ion-icon>
                            <span>View detail</span></div>
                            <div><ion-icon name="bag-outline"></ion-icon>
                            <span>Add to cart</span></div>
                        </div>
                    </div>
                </div>

                <!-- Eight -->
                 <div>
                    <div class="product-image"><img src="./img/product-8.jpg" alt=""></div>
                    <div class="label">New</div>
                    <div class="product-info">
                        <h3>Fresh Tomato</h3>
                        <p><span>$19.00</span><span>$29.00</span></p>
                        <div>
                            <div><ion-icon name="eye-outline"></ion-icon>
                            <span>View detail</span></div>
                            <div><ion-icon name="bag-outline"></ion-icon>
                            <span>Add to cart</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <button>Browser More Products</button>
        </div>
       </div>
       <!-- Product Section End -->


       <!-- Firm Section -->
        <section class="firm">
            <div class="firm-container">
                <div>
                    <h3>Visit Our Firm</h3>
                    <p>Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos.</p>
                </div>
                <button>Visit Now</button>
            </div>
        </section>
        <!-- Firm Section End -->


        <!-- Review Section -->
        <section class="review" id="review">
            <div class="review-container">
                <div class="title center zoom-in">
                    <h2>Customer Review</h2>
                    <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.</p>
                </div>
                <div class="reviews staggered">
                    <div>
                        <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.</p>
                        <div>
                            <img src="./img/testimonial-1.jpg" alt="">
                            <h2>Client Name <span>Profession</span></h2>
                        </div>
                    </div>
                    <div>
                        <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.</p>
                        <div>
                            <img src="./img/testimonial-2.jpg" alt="">
                            <h2>Client Name <span>Profession</span></h2>
                        </div>
                    </div>
                    <div>
                        <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.</p>
                        <div>
                            <img src="./img/testimonial-3.jpg" alt="">
                            <h2>Client Name <span>Profession</span></h2>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Review Section End -->


        <!-- Blog Section -->
         <section class="blog" id="blog">
            <div class="blog-container">
                <div class="title center zoom-in">
                    <h2>Latest Blog</h2>
                    <p>Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.</p>
                </div>
                <div class="blogs staggered">
                    <div>
                        <img src="./img/blog-1.jpg" alt="">
                        <div class="blog-text">
                            <h3>How to cultivate organic fruits and vegetables in your own farm</h3>
                            <div>
                                <p><ion-icon name="person-outline"></ion-icon> <span>Admin</span></p>
                                <p><ion-icon name="calendar-outline"></ion-icon> <span>01 July, 2025</span></p>
                            </div>
                        </div>
                    </div>
                    <div>
                        <img src="./img/blog-2.jpg" alt="">
                        <div class="blog-text">
                            <h3>How to cultivate organic fruits and vegetables in your own farm</h3>
                            <div>
                                <p><ion-icon name="person-outline"></ion-icon> <span>Admin</span></p>
                                <p><ion-icon name="calendar-outline"></ion-icon> <span>01 July, 2025</span></p>
                            </div>
                        </div>
                    </div>
                    <div>
                        <img src="./img/blog-3.jpg" alt="">
                        <div class="blog-text">
                            <h3>How to cultivate organic fruits and vegetables in your own farm</h3>
                            <div>
                                <p><ion-icon name="person-outline"></ion-icon> <span>Admin</span></p>
                                <p><ion-icon name="calendar-outline"></ion-icon> <span>01 July, 2025</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </section>
         <!-- Blog Section End -->


         <!-- Footer Section -->
        <footer>
        <div class="footer-container">

        <div class="footer-top">
        <div class="footer-section">
          <h2 class="logo">
            F<span>oo</span>dy
          </h2>
          <p>
            Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit.
          </p>
          <div class="social-icons">
            <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-youtube"></ion-icon></a>
            <a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
          </div>
        </div>

        <div class="footer-section">
          <h3>Address</h3>
          <p><ion-icon name="location-outline"></ion-icon> 123 Street, New York, USA</p>
          <p><ion-icon name="call-outline"></ion-icon> +012 345 67890</p>
          <p><ion-icon name="mail-outline"></ion-icon> info@example.com</p>
        </div>

        <div class="footer-section">
          <h3>Quick Links</h3>
          <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Terms & Condition</a></li>
            <li><a href="#">Support</a></li>
          </ul>
        </div>

        <div class="footer-section newsletter">
          <h3>Newsletter</h3>
          <p>Dolor amet sit justo amet elitr clita ipsum elitr est.</p>
          <form>
            <input type="email" placeholder="Your email" required />
            <button type="submit">SignUp</button>
          </form>
        </div>
      </div>

      <div class="footer-bottom">
        &copy; U-GINE MEDIA, All Right Reserved.<br />
        Designed By <span>U-GINE MEDIA</span> | Distributed By <span>U-GINE MEDIA</span>
      </div>
    </div>
  </footer>
  <!-- Footer Section End -->


  <!-- Scroll To Top -->
   <a href="#" class="scroll-to-top"><ion-icon name="arrow-up-outline"></ion-icon></a>

</body>
</html>

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.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

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

:root {
    --primary-color: #3CB815;
    --secondary-color: #F76A2B;
    --text-light-color: #555555;
    --text-dark-color: #191919;
}

body {
    font-family: 'Raleway', 'Poppins', sans-serif;
}


/* Header Section */
header {
    background: transparent;
    padding: 40px 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease;
}

header.scrolled {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px 0;
}

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

.logo {
    color: var(--primary-color);
    font-size: 2.5em;
    font-weight: 600;
    text-decoration: none;
}

.logo span {
    color: var(--secondary-color);
}

.header-container nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.header-container nav ul {
    list-style: none;
}

.header-container nav ul li {
    display: inline;
    margin: 0 15px;
}

.header-container nav ul li a {
    text-decoration: none;
    color: var(--text-light-color);
    transition: 0.3s ease;
    font-size: 1.1em;
}

.header-container nav ul li a:hover {
    font-weight: 600;
    color: var(--primary-color);
}

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

.icons div {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: var(--text-dark-color);
    padding: 10px;
    border-radius: 50%;
    font-size: 1.1em;
    transition: background 0.3s ease;
}

.icons div:hover {
    background: var(--primary-color);
    color: #fff;
}

.header-container .menu {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 2em;
    color: var(--text-dark-color);
    border: 1px solid rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    display: none;
}
/* Header End */

/* Hero Section */
.hero {
    background: url('./img/hero.jpg') no-repeat center center/cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-container {
    width: 90%;
}

.hero-container h1 {
    font-size: 4.5em;
    color: var(--text-dark-color);
    text-transform: capitalize;
    max-width: 800px;
    width: 100%;
    font-weight: 700; 
    line-height: 1.4;
}

.hero-container > div {
    display: flex;
    gap: 20px;
    margin-top: 50px;
}

.hero-container > div button {
    padding: 15px 30px;
    font-size: 1.1em;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background: var(--primary-color);
    color: #fff;
    transition: background 0.3s ease;
}

.hero-container > div button:nth-child(2) {
    background: var(--secondary-color);
}

.hero-container > div button:hover {
    background: var(--text-dark-color);
}
/* Hero End */

/* About Section */
.about {
    background: #fff;
    width: 100%;
    margin: 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3em;
    width: 90%;
    margin: 0 auto;
}

.about-image {
    position: relative;
    max-width: 600px;
}

.about-image img {
    position: relative;
    z-index: 2;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-image::before {
    position: absolute;
    content: "";
    top: 5%;
    left: -20%;
    width: 100%;
    height: 100%;
    background-image: repeating-radial-gradient(#ffffff, #eeeeee 5px, transparent 5px, transparent 10px);
    background-size: 20px 20px;
    transform: skew(20deg);
    z-index: 1;
}

.about-content {
    max-width: 600px;
}

.about-content h2 {
    font-size: 3em;
    color: var(--text-dark-color);
    margin-bottom: 20px;
    text-transform: capitalize;
}

.about-content p {
    font-size: 1em;
    color: var(--text-light-color);
    line-height: 1.6;
    margin-bottom: 30px;
}

.about-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.about-content ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 1em;
    color: var(--text-light-color);
}

.about-content ul li ion-icon {
    color: var(--primary-color);
    font-size: 1.3em;
}

.about-content button {
    padding: 15px 30px;
    font-size: 1.1em;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background: var(--primary-color);
    color: #fff;
    transition: background 0.3s ease;
}

.about-content button:hover {
    background: var(--text-dark-color);
}
/* About Section End */


/* Feature Section */
.feature {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    background: url("./img/bg.png")
    repeat center center/contain;
    background-color: #F7F8FC !important;
}

.feature-container {
    width: 90%;
}

.title.center {
    text-align: center;
}

.title h2 {
    position: relative;
    font-size: 2.5em;
    margin-bottom: 20px;
    color: var(--text-dark-color);
    width: fit-content;
}

.title.center h2 {
    margin: 0 auto;
    margin-bottom: 20px;
}

.title p {
    max-width: 600px;
    width: 100%;
    line-height: 1.6;
    color: var(--text-light-color);
}

.title.center p {
    text-align: center;
    margin: 0 auto;
    line-height: 1.6;
}

.title h2::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    width: 30%;
    height: 2.5px;
    background: var(--secondary-color);
}

.title h2::after {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 15%;
    height: 3px;
    background: var(--primary-color);
}

.title.center h2::before, .title.center h2::after {
    left: 50%;
    transform: translateX(-50%);
}

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

.features > div {
    max-width: 400px;
    width: 100%;
    text-align: center;
    background: #ffffff;
    padding: 50px 20px;
    flex: 1;
}

.features > div h3 {
    font-size: 1.5em;
    margin: 20px 0;
    color: var(--text-dark-color);
}

.features > div p {
    line-height: 1.6;
    color: var(--text-light-color);
    margin-bottom: 20px;
}

.features > div button {
    padding: 15px 30px;
    border: 2px solid var(--primary-color);
    background: transparent;
    border-radius: 40px;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s ease;
}

.features > div button:hover {
    background: var(--primary-color);
    color: #ffffff;
}
/* Features Section End */



/* Products Section */
.product {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    background: #ffffff;
}

.product-container {
    width: 90%;
}

.product-filter {
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 20px;
    gap: 10px;
}

.product-filter button {
    padding: 10px 15px;
    border: 2px solid var(--primary-color);
    color: var(--text-dark-color);
    cursor: pointer;
    background: transparent;
    font-size: 1em;
    transition: 0.3s ease;
}

.product-filter button:nth-child(1) {
    background: var(--primary-color);
    color: #ffffff
}

.product-filter button:hover {
    background: var(--primary-color);
    color: #ffffff;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.product-grid > div {
    position: relative;
    max-width: 350px;
    width: 100%;
    cursor: pointer;
}

.product-image {
    height: 250px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 0.3s ease;
}

.product-grid > div:hover .product-image img {
    transform: scale(1.1);
}

.product-grid > div:hover {
    box-shadow: 0 8px 24px rgba(60, 184, 21, 0.15), 0 1.5px 6px rgba(0,0,0,0.08);
}

.label {
    position: absolute;
    top: 5%;
    left: 5%;
    background: var(--secondary-color);
    color: #ffffff;
    padding: 5px 15px;
    font-size: 1.1em;
}

.product-info {
    text-align: center;
    padding-top: 25px;
}

.product-info h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: var(--text-dark-color);
    transition: 0.3s ease;
}

.product-info h3:hover {
    color: var(--primary-color);
}

.product-info p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.product-info p span:first-child {
    color: var(--primary-color);
}

.product-info p span:last-child {
    text-decoration: line-through;
    color: var(--text-light-color);
}

.product-info > div {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    padding: 2px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.product-info > div > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px;
    font-size: 0.9em;
    text-align: center;
    transition: 0.3s ease;
    cursor: pointer;
}

.product-info > div > div:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.product-info > div > div ion-icon {
    color: var(--primary-color);
}

.product-info > div > div:hover {
    color: var(--primary-color);
}

.product-container > button {
    margin: 40px auto;
    padding: 20px 30px;
    font-size: 1em;
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    transition: all 0.3s ease;
}

.product-container > button:hover {
    background: #191919;
}
/* Product Section End */


/* Firm Section */
.firm {
    width: 100%;
    background: url("./img/bg.png") repeat center center/contain;
    background-color: var(--primary-color);
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.firm-container {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

.firm-container h3 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.firm-container p {
    max-width: 700px;
    width: 100%;
    line-height: 1.6;
}

.firm-container button {
    padding: 20px 50px;
    cursor: pointer;
    background: var(--secondary-color);
    border: none;
    border-radius: 50px;
    color: #ffffff;
    font-size: 1.2em;
    transition: 0.3s ease;
}

.firm-container button:hover {
    background: var(--text-dark-color);
}
/* Firm Section End */


/* Review Section */
.review {
    padding: 10em 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("./img/bg.png") repeat center center/contain;
    background-color: #F7F8FC !important;
}

.review-container {
    width: 90%;
}

.reviews {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 70px;
}

.reviews > div {
    flex: 1;
    max-width: 400px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 8px 32px 0 rgba(60, 184, 21, 0.15), 0 1.5px 6px rgba(0,0,0,0.08);
    padding: 40px 60px;
    cursor: pointer;
    transition: 0.3s ease;
}

.reviews > div p {
    line-height: 1.6;
}

.reviews > div > div {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

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

.reviews > div > div h2 {
    font-size: 1.3em;
}

.reviews > div > div h2 span {
    font-size: 0.8em;
    display: block;
    margin-top: 5px;
}

.reviews > div:hover {
    background: var(--primary-color);
    color: #ffffff;
}
/* Review Section End */



/* Blog Section */
.blog {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 100px 0;
    padding-top: 50px;
    background: #ffffff;
}

.blog-container {
    width: 90%;
}

.blogs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 70px;
}

.blogs > div {
    max-width: 400px;
    width: 100%;
    background: #f2f2f2;
}

.blogs > div img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
}

.blog-text {
    padding: 20px;
}

.blog-text h3 {
    font-size: 1.2em;
    text-transform: capitalize;
    margin-bottom: 20px;
    color: var(--text-dark-color);
    cursor: pointer;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.blog-text h3:hover {
    color: var(--primary-color);
}

.blog-text > div {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding-top: 20px;
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 20px;
}

.blog-text > div p {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.blog-text > div p ion-icon {
    color: var(--primary-color);
}
/* Blog Section End */



/* Footer Section */
footer {
    background-color: #111;
    padding: 60px 0;
}

.footer-container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-section .logo {
    margin-bottom: 15px;
}

.footer-section h3 {
    color: #ffffff;
    margin-bottom: 15px;
}

.footer-section p {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 10px;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2em;
    text-decoration: none;
    transition: 0.3s;
}

.social-icons a:hover {
    background-color: #fff;
    color: var(--text-dark-color);
}

.footer-section ul {
    list-style: none;
    padding-left: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
}

.footer-section ul li a:hover {
    text-decoration: underline;
}

.newsletter form {
    margin-top: 15px;
}

.newsletter input {
    padding: 10px 8px;
    width: 100%;
    border: none;
    outline: none;
}

.newsletter button {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}

.footer-bottom {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid #444;
    padding-top: 20px;
    color: #ccc;
    line-height: 1.6;
}

.footer-bottom span {
    color: var(--primary-color);
}
/* Footer Section End */


/* Scroll To Top */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0;
    animation: animate 3s linear infinite alternate;
}

@keyframes animate {
    0% {transform: scale(1);}
    100% {transform: scale(1.2);}
}

.scroll-to-top.scrolled {
    opacity: 1;
}


/* Media Queries */
@media (max-width: 990px) {
    .hero {
        height: 70vh;
    }
    
    .logo {
        font-size: 2em;
    }

    .header-container {
        width: 90%;
    }

    .header-container nav ul li {
        margin: 0 10px;
    }

    .header-container nav {
        padding-left: 2em;
        justify-content: start;
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0;
        background: #fff;
        overflow: hidden;
        height: 0;
        transition: all 0.3s ease;
    }

    .header-container nav.active {
        height: 250px;
    }

     .header-container nav.active ul li {
        margin: 20px 0;
     }

    .header-container nav ul li {
        display: block;
        margin: 10px 0;
    }

    .header-container .menu {
        display: flex;
    }

    .icons {
        display: none;
    }

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

    .about-container {
        flex-direction: column;
    }   
    
    .about-content h2 {
        font-size: 2em;
    }

    .title::before {
        width: 20%;
    }

    .title::after {
        width: 10%;
    }

    .title h2 {
        font-size: 2em;
    }

    .firm {
        height: auto;
        padding: 50px 0;
    }

    .firm-container {
        flex-direction: column;
        align-items: start;
        gap: 20px;
        height: auto;
    }

    .firm-container h3 {
        font-size: 2em;
    }

    .firm-container button {
        padding: 15px 30px;
        font-size: 1em;
    }

    .reviews > div > div h2 {
        font-size: 1.2em;
    }
}

@media (max-width: 600px) {
    .hero-container h1 {
        font-size: 2em;
    }

    .hero-container > div {
        flex-direction: column;
        gap: 10px;
    }

    .hero-container > div button {
        font-size: 1em;
    }

    .product-filter {
        justify-content: center;
    }

    .product-filter button {
        padding: 10px;
    }
}

    /* Responsive */
 @media (min-width: 900px) {
    .footer-top {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-section {
        width: 23%;
    }

    .newsletter input {
        width: 60%;
    }

    .newsletter button {
        width: auto;
        margin-top: 0;
    }
}

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.


const menu = document.querySelector('.menu');
const nav = document.querySelector('.header-container nav');

menu.addEventListener('click', () => {
    nav.classList.toggle('active');
});

const header = document.querySelector('header');

const scrollToTop = document.querySelector(".scroll-to-top")
window.addEventListener('scroll', () => {
    if(window.scrollY > 100) {
        header.classList.add('scrolled');
        scrollToTop.classList.add("scrolled");
    } else {
        header.classList.remove('scrolled');
         scrollToTop.classList.remove("scrolled")
    }

});


// ScrollReveal Animation

//Reveal From Bottom
ScrollReveal().reveal('.scroll-bottom', {
    duration: 3000,
    origin: "bottom",
    distance: "50px",
    reset: true
});

//Reveal From Left
ScrollReveal().reveal('.scroll-left', {
    duration: 3000,
    origin: "left",
    distance: "100px",
    reset: true
});

//Zoom In
ScrollReveal().reveal('.zoom-in', {
    scale: 0.85,
    duration: 3000,
    reset: true
});

//Staggered
ScrollReveal().reveal('.staggered > div', {
  origin: 'bottom',
  distance: '100px',
  duration: 3000,
  interval: 200,
  reset: true
});

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 🚀

U-GINE MEDIA

Categories

Search This Blog

Blog archive

Report Abuse

How To Build a Restaurant Website Using HTML CSS & JavaScript | FULL Beginner Tutorial

Code Begins

Conclusion and Final word

Posted by U-GINE MEDIA

Post a Comment

0 Comments

Popular Posts

How To Make A SideBar Menu With TailwindCSS In React JS | FULL Beginner Tutorial

How To Make A Responsive Card Slider Using React JS For Beginners

How To Build A Full E-commerce Website Using React JS | React JS Ecommerce Project From Scratch

Build & Deploy Ecommerce Website Using React & TaiwindCSS | Step-by-Step Tutorial

Build A Complete React Admin Dashboard from Scratch | Step by Step Tutorial

Featured post