Restaurant Landing page
Tags: ui, frontend, showdev, website
Published: 2024-07-11 12:31:28

Here's a free restaurant landing page

## Features
1. Responsive.
2. Tailwind css, for rapid development.

## Live site

You can view the live site here: [restaurant landing page](https://bistro-rest.netlify.app/) 

## Screenshot
![free restaurant landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxkq5dy86bawe33rq9c6.png)

## Follow
[twitter](https://x.com/pauls_freeman)
[github](https://github.com/PaulleDemon)

## Source code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Bistro restaurant</title>
    <meta name="description" content="Enjoy Classic English Breakfast & More | Casual outpost offering traditional morning fare alongside wraps, pizza & sandwiches.">
    
    <meta name="twitter:title" content="Bistro restaurant">
    <meta name="twitter:description" content=" Bistro">

    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="Title of the project" />
    <meta property="og:description" content="" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://github.com/PaulleDemon" /> <!--Replace with the current website url-->
    <meta property="og:image" content="" />

    <link rel="shortcut icon" href="./assets/bistro.png" type="image/x-icon">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap">

    <!-- <link rel="stylesheet" href="../../tailwind-css/tailwind-runtime.css"> -->
    <link rel="stylesheet" href="./css/tailwind-build.css">
    <link rel="stylesheet" href="./css/index.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   
</head>

<body class="tw-min-h-[100vh] tw-w-full tw-bg-[#ffffff] 
                tw-flex tw-flex-col">
    
    <header class="tw-flex tw-w-full tw-z-20
                    tw-h-[60px]  
                    md:tw-justify-around
                    tw-fixed tw-top-0 tw-px-[10%]
                    max-md:tw-mr-auto
                    ">
        <div class="tw-absolute tw-top-0 tw-left-0 tw-shadow-lg
                    tw-bg-white tw-h-0 tw-w-full tw-z-[-1]"
                id="expanding-header-bg"   
                    >
        <!-- expands the white background as scroll -->
        </div>

        <div class="tw-w-[150px] tw-h-[50px] tw-p-[4px]">
            <img src="./assets/bistro.svg" 
                  alt="logo" class="tw-w-full tw-h-full tw-object">

        </div>
        <div class="collapsable-header animated-collapse"
                    id="collapsed-items"
                    >
            <div class=" tw-w-max
                            tw-flex tw-gap-5 tw-h-full md:tw-mx-auto
                            md:tw-place-items-center 
                            max-md:tw-place-items-end
                            tw-text-base max-md:tw-flex-col
                            max-md:tw-mt-[30px]
                            max-md:tw-gap-5
                            tw-text-white
                        ">
                    
                <a class="header-links" href="">
                    About us
                </a>
                <a class="header-links" href="">
                    Menus
                </a>
                <a class="header-links" href="">
                    Contact us
                </a>
                <a class="header-links" href=""
                        target="_blank" rel="noreferrer"
                        >
                    Order online
                </a>
            </div>
            <div class="tw-flex tw-gap-[20px] tw-place-items-center tw-text-xl
                         max-md:!tw-text-white
                         max-md:tw-place-content-center
                         max-md:tw-w-full
                         ">
                <a href="https://www.facebook.com/" 
                        target="_blank" 
                        rel="no-referrer"
                        area-label="facebook"
                        class=" header-links
                                tw-transition-colors
                                tw-duration-[0.3s]
                                "
                        >
                    <i class="bi bi-facebook"></i>
                </a>

                <a href="https://www.instagram.com/"
                        target="_blank"
                        rel="no-referrer"
                        area-label="twitter"
                        class="header-links
                                tw-transition-colors
                                tw-duration-[0.3s]
                                "
                            >
                    <i class="bi bi-instagram"></i>
                </a>
            </div>
        </div>
        <button class="tw-absolute tw-text-white tw-z-50 
                        tw-right-3
                        tw-top-3
                         tw-text-3xl  bi bi-list md:tw-hidden" 
                onclick="toggleHeader()" aria-label="menu" id="collapse-btn">
            <!-- <i class="bi bi-list"></i> -->
        </button>
    </header>

    <section class="tw-w-full tw-h-[100vh] max-md:tw-h-[100dvh] tw-max-w-[100vw]
                     tw-flex tw-flex-col tw-overflow-hidden tw-relative"
                     id="hero-section"
                     >
        
        <img src="./assets/images/homepage/restaurant.jpg" 
                alt="Restaurant" 
                class=" tw-object-cover
                        tw-w-full tw-h-full"
               
                >
        <div class="tw-absolute tw-w-full tw-h-full 
                tw-bg-[#0000007d]">

        </div>
        <div class="tw-absolute tw-left-[50%] tw-top-[50%] 
                    tw-translate-x-[-50%]
                    tw-translate-y-[-50%]  
                    tw-w-full
                    tw-flex
                    tw-flex-col
                    tw-gap-4
                    tw-p-2
                    tw-place-content-center
                    tw-place-items-center
                  tw-text-white">
            <img src="./assets/logo/kitchen.svg" 
                alt="kitchen" 
                class="tw-w-[150px] 
                        tw-h-[150px]
                        max-md:tw-w-[100px]
                        max-md:tw-h-[100px]
                        ">
        
            <h1 class="tw-text-7xl khula-font 
                        tw-font-semibold
                        max-md:tw-text-5xl
                        max-md:tw-text-center
                        ">
                Bistro Restaurants
            </h1>
            <div class="tw-flex max-md:tw-gap-[4%] tw-gap-[2%] tw-mt-3 tw-w-full tw-place-content-center">
                <a href="https://5"
                        target="_blank" rel="noreferrer"
                        class="tw-p-3 tw-px-[20px] 
                                tw-rounded-full 
                                tw-bg-white
                                tw-text-black
                                tw-flex
                                tw-duration-[0.3s]
                                tw-transition-colors
                                hover:tw-bg-primary
                                hover:tw-text-white
                                "
                        >
                    Order online
                </a>
                <a href="https://maps.app.goo.gl/"
                    target="_blank" rel="noreferrer"
                    class="tw-p-3 tw-px-[20px] 
                            tw-rounded-full 
                            tw-bg-white
                            tw-text-black
                            tw-flex
                            tw-gap-2
                            tw-duration-[0.3s]
                            tw-transition-colors
                            hover:tw-bg-primary
                            hover:tw-text-white
                            "
                    >
                    <span>View on map</span> 
                    <i class="bi bi-geo-alt"></i>
                </a>

            </div>
        </div>
        
    </section>

    
    <section class="tw-w-full tw-flex 
                    max-md:tw-flex-col
                    tw-place-content-center 
                    tw-min-h-[60vh]
                    tw-px-[20%]
                    max-md:tw-px-[5%]
                    tw-p-4
                    tw-gap-[10%]
                    max-md:tw-gap-[4%]
                    tw-place-items-center
                    tw-bg-[#fff]
                    ">

        <div class="tw-w-[350px] tw-h-[350px] tw-rounded-md 
                    max-md:tw-w-[300px] max-md:tw-h-[300px]
                    tw-flex tw-overflow-hidden
                    max-md:tw-mt-[5%]
                    ">
            <img src="./assets/images/homepage/coffee.jpg" 
                    alt="coffee" class="tw-w-full tw-object-cover">
        </div>
        <div class="tw-flex tw-flex-col tw-gap-[5%] tw-h-full 
                    max-md:tw-mt-2 max-md:tw-gap-[3%] max-md:tw-text-center">
            <h2 class="tw-text-3xl max-md:tw-text-2xl 
                        primary-text-color tw-font-medium">Bistro Restaurant</h2>
            <h3 class="tw-text-5xl max-md:tw-text-3xl">Welcomes you</h3>
            <div class="tw-max-w-[350px] tw-mt-6 tw-text-justify">
                Discover the charm of Bistro, an authentic English restaurant offering a taste of Ireland in every bite. Indulge in traditional English cuisine crafted with care, 
                complemented by warm hospitality and a cozy ambiance. From hearty stews to savory pies, experience the flavors of English at Bistro
            </div>
            <a href="https://maps.app.goo.gl/" 
                class="btn
                        tw-transition-transform
                        hover:tw-translate-x-2
                        tw-duration-[0.3s]
                        tw-mt-5
                        max-md:tw-mx-auto
                    ">
                <span>View on map</span>  
                <i class="bi bi-arrow-right"></i> 
            </a>
        </div>
        <div></div>
    </section>

    <section class="tw-w-full tw-flex tw-flex-col
                    tw-place-content-center 
                    max-md:tw-px-[5%]
                    tw-p-[5%]
                    tw-place-items-center
                    tw-bg-[#fff]
                    ">
        <h2 class="tw-text-xl tw-italic">Discover Authentic English Flavours</h2>
        <h3 class="tw-text-4xl primary-text-color tw-font-semibold">Explore our menu</h3>
        
        <div class="tw-w-full tw-flex 
                    max-md:tw-flex-wrap tw-place-content-center 
                    tw-gap-5 tw-mt-[5%]">

            <div class="tw-flex tw-flex-col tw-gap-5 tw-max-w-[650px] 
                        md:tw-max-h-[700px]
                        tw-overflow-clip">
                <div class="tw-flex max-md:tw-flex-col tw-gap-5">
                    <div class="tw-h-[450px] tw-w-[80%] 
                                tw-rounded-lg tw-overflow-clip
                                tw-cursor-pointer
                                tw-relative
                                menu-item-container
                                max-md:tw-w-full
                                ">
                        <img src="./assets/images/homepage/coffee.jpg" 
                            alt="authentic wine" 
                            class="tw-w-full tw-h-full 
                                    tw-object-cover
                                    tw-transition-[scale]
                                    tw-duration-[0.4s]
                                    ">
                        
                        <div class="menu-btn
                                    tw-text-xl
                                    ">
                            Coffee
                        </div>

                    </div>
                    <div class="tw-h-[450px] tw-w-[80%] 
                                tw-rounded-lg tw-overflow-clip
                                tw-cursor-pointer
                                tw-relative
                                max-md:tw-w-full
                                menu-item-container
                                ">
                        <img src="./assets/images/homepage/lunch.jpg" 
                            alt="Lunch" 
                            class="tw-w-full tw-h-full 
                                    tw-object-cover
                                    tw-transition-[scale]
                                    tw-duration-[0.4s]
                                    ">
                        
                        <div class="menu-btn
                                    tw-text-xl
                                    ">
                            Lunch
                        </div>

                    </div>
                </div>
                <div class="tw-h-[240px] tw-w-full 
                                tw-rounded-lg tw-overflow-clip
                                tw-cursor-pointer
                                tw-relative
                                menu-item-container
                                ">
                    <img src="./assets/images/homepage/dinner.jpg" 
                        alt="authentic wine" 
                        class="tw-w-full tw-h-full 
                                tw-object-cover
                                tw-transition-[scale]
                                tw-duration-[0.4s]
                                ">
                    
                    <div class="menu-btn
                                tw-text-xl
                                ">
                        Dinner
                    </div>

                </div>
            </div>
            <div class="tw-flex tw-flex-col tw-gap-5 md:tw-h-[700px]">
                <div class="tw-w-[350px] tw-h-[33%] 
                            tw-rounded-lg tw-overflow-clip
                            tw-cursor-pointer
                            tw-relative
                            max-md:tw-w-full
                            menu-item-container
                            ">
                    <img src="./assets/images/homepage/breakfast.jpg" 
                        alt="authentic wine" 
                        class="tw-w-full tw-h-full 
                                tw-object-cover
                                tw-transition-[scale]
                                tw-duration-[0.4s]
                                ">
                    
                    <div class="menu-btn
                                tw-text-xl
                                ">
                        Breakfast
                    </div>

                </div>
                <div class="tw-w-[350px] tw-h-[33%] 
                            tw-rounded-lg tw-overflow-clip
                            tw-cursor-pointer
                            tw-relative
                            max-md:tw-w-full
                            menu-item-container
                            ">
                    <img src="./assets/images/homepage/wine.jpeg" 
                        alt="authentic wine" 
                        class="tw-w-full tw-h-full 
                                tw-object-cover
                                tw-transition-[scale]
                                tw-duration-[0.4s]
                                ">
                    
                    <div class="menu-btn
                                tw-text-xl
                                ">
                        Drinks
                    </div>

                </div>
                <div class="tw-w-[350px] tw-h-[33%] 
                            tw-rounded-lg tw-overflow-clip
                            tw-cursor-pointer
                            tw-relative
                            max-md:tw-w-full
                            menu-item-container
                            ">
                    <img src="./assets/images/homepage/dessert.jpg" 
                        alt="Desserts" 
                        class="tw-w-full tw-h-full 
                                tw-object-cover
                                tw-transition-[scale]
                                tw-duration-[0.4s]
                                ">
                    
                    <div class="menu-btn
                                tw-text-xl
                                ">
                        Desserts
                    </div>

                </div>
            </div>
        </div>

    </section>

    <section class="tw-w-full tw-flex 
                    tw-place-content-center 
                    tw-px-[10%]
                    tw-p-4
                    tw-gap-[10%]
                    tw-place-items-center
                    tw-bg-[#EFEFEF]
                    max-md:tw-flex-col
                    tw-overflow-hidden
                    "
                    id="reservation"
                    >

        <div class="tw-w-[350px] tw-h-[350px] tw-rounded-md tw-flex 
                    max-md:tw-hidden
                    tw-overflow-hidden">
            <img src="./assets/images/homepage/restaurant.jpg" 
                    alt="restaurant" class="tw-w-full tw-object-cover">
        </div>
        <div class="tw-flex tw-flex-col tw-gap-[5%] tw-h-full tw-mt-[5%]">
            <div class="tw-flex tw-flex-col tw-gap-2">
                <h2 class="tw-text-3xl max-md:tw-text-xl primary-text-color tw-font-medium">Reservation</h2>
                <h3 class="tw-text-5xl max-md:tw-text-3xl">Book your table</h3>
            </div>
            <div class="tw-max-w-[350px] tw-mt-4 tw-flex tw-flex-col tw-gap-3">
               
                <div class="tw-flex tw-flex-col tw-gap-4">
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-text-gray-500">Name</div>
                        <input type="text" 
                                class="input" 
                                maxlength="10"
                                required
                                placeholder="name" >
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-text-gray-500">Phone</div>
                        <input type="text" 
                                class="input" 
                                required
                                placeholder="phone"
                                >
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-text-gray-500">Email</div>
                        <input type="email" 
                                class="input" 
                                required
                                placeholder="email"
                                id="email"
                                >
                    </div>
                    
                </div>

                <div class="tw-flex tw-gap-4">
                    <div class="tw-flex tw-flex-col tw-gap-1 tw-w-full">
                        <div class="tw-text-gray-500">Time</div>
                        <select name="timings" id="timings" class="input">
                            
                        </select>
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-text-gray-500">Date</div>
                        <input type="date" 
                                class="input" 
                                required
                                placeholder="date"
                                id="date"
                                >
                    </div>
                </div>

                <div class="tw-flex max-md:tw-flex-col tw-w-full tw-gap-4">
                    <div class="tw-flex tw-flex-col tw-gap-1 tw-w-full">
                        <div class="tw-text-gray-500">People</div>
                        <input type="number" value="2" min="0" max="15" class="input">
                    </div>
                    
                </div>
                
                <a href="#" 
                    class="btn
                            tw-transition-transform
                            hover:tw-translate-x-2
                            tw-duration-[0.3s]
                            tw-mt-5
                            tw-ml-auto
                        ">
                    <span>Book table</span>  
                    <i class="bi bi-arrow-right"></i> 
                </a>

            </div>
            <div class="tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-center">
                <h3 class="tw-text-xl">To book call</h3>
                
                <div class="tw-text-3xl primary-text-color">
                    +123 232 123 
                </div>
            </div>
        </div>
        
    </section>

    <section class="tw-mt-5 tw-w-full tw-flex tw-flex-col tw-p-[5%]
                     tw-place-items-center">

        <h3 class="tw-text-3xl max-md:tw-text-2xl primary-text-color tw-font-medium">
            What some of our diners say
        </h3>
        
        <div class="tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-gap-[5%]">

            <div class="review-container tw-flex tw-flex-col">
                <div class="tw-flex !tw-h-[150px] tw-max-w-[550px]">
                    <div class="slides fade tw-text-lg max-md:tw-text-base tw-text-justify">
                        <q class="tw-italic tw-text-gray-600">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis assumenda dolor delectus laborum odio consequatur accusantium quam? Ad, odit.
                        </q>
                        <div class="tw-mt-2 tw-text-yellow-400">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>
                        <p class="tw-mt-3">- Trich B</p>
                    </div>
                
                    <div class="slides fade tw-text-lg max-md:tw-text-base tw-text-justify">
                        <q class="tw-italic tw-text-gray-600 ">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, sint.
                        </q>
                        <div class="tw-mt-2 tw-text-yellow-400">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>
                        <p class="tw-mt-3">- Bára Müllerová</p>
                    </div>

                    <div class="slides fade tw-text-lg max-md:tw-text-base tw-text-justify">
                        
                        <q class="tw-italic tw-text-gray-600 ">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore sapiente possimus quibusdam nesciunt, architecto distinctio.
                        </q>
                        <div class="tw-mt-2 tw-text-yellow-400">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>
                        <p class="tw-mt-3">- Matt freeman</p>

                    </div>
                </div>
              
                <!-- Navigation dots -->
                <div class="dots-container tw-mt-auto">
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
            </div>
        </div>

        <div class="tw-mt-[5%] tw-flex tw-flex-col tw-w-full tw-place-items-center tw-place-content-center tw-gap-5">
            <h2 class="tw-text-3xl primary-text-color">On the map</h2>
            <iframe src="https://www.google.com/maps/embed?" 
                    class="tw-w-[600px] 
                            tw-h-[350px]
                            max-md:tw-w-full
                            "
                    style="border:0;" allowfullscreen="" loading="lazy" 
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
        <div class="tw-mt-[5%] tw-flex tw-flex-col tw-w-full tw-place-items-center tw-place-content-center tw-gap-5">
            <h2 class="tw-text-3xl primary-text-color">Award</h2>

            <div class="tw-flex max-md:tw-flex-wrap tw-w-full tw-place-content-center tw-gap-[5%]">
              
                <img src="./assets/images/homepage/tripadvisor-travellers choice.png" 
                        alt="Tripadvisor travelers choice award"
                        class="tw-w-[250px] tw-h-[250px]
                            max-md:tw-w-[150px]
                            max-md:tw-h-[150px]
                            "
                        >
                
            </div>

        </div>
    </section>

    <section class="tw-w-full tw-flex 
                    tw-flex-col
                    tw-place-content-center 
                    tw-px-[10%]
                    tw-p-[5%]
                    tw-gap-[10%]
                    tw-place-items-center
                    tw-bg-[#EFEFEF]
                    ">

        <div class="tw-w-full tw-place-content-center 
                    tw-flex tw-flex-col tw-gap-3
                    tw-place-items-center
                    ">

            <h2 class="tw-text-3xl max-md:tw-text-xl primary-text-color">Special Newsletter signup</h2>
            <h2 class="tw-text-xl max-md:tw-text-lg">Get offers and updates</h2>

            <div class="input tw-flex tw-h-[50px] tw-bg-white tw-p-2 
                        !tw-rounded-full tw-overflow-hidden tw-place-items-center ">
                <input type="email" class="tw-w-full tw-h-full tw-outline-none tw-px-3"
                        placeholder="email"
                    >
                <button class="btn tw-h-[35px] 
                            tw-bg-primary
                            tw-duration-[0.3s]
                            tw-transition-colors
                            ">
                    Signup
                </button>   
            </div>

        </div>

        <div class="tw-w-full tw-place-content-center 
            tw-flex tw-flex-col tw-gap-3
            tw-place-items-center tw-mt-[5%]
            ">

                <h2 class="tw-text-3xl max-md:tw-text-xl primary-text-color">Like us?</h2>
                <h2 class="tw-text-xl max-md:tw-text-lg">Tell us more</h2>

                <div class="tw-flex">
                    <div class="stars" data-rating="0">
                        <span class="star" data-value="1">&#9733;</span>
                        <span class="star" data-value="2">&#9733;</span>
                        <span class="star" data-value="3">&#9733;</span>
                        <span class="star" data-value="4">&#9733;</span>
                        <span class="star" data-value="5">&#9733;</span>
                    </div>
                </div>

            </div>

        

    </section>

    <div class="tw-fixed
                tw-top-[50%] tw-translate-y-[-50%]
                tw-left-[50%] tw-translate-x-[-50%]
                tw-w-[450px] tw-max-h-[450px] 
                max-md:tw-w-[350px]
                tw-z-40
                tw-p-3
                tw-hidden
                tw-flex 
                tw-flex-col
                tw-rounded-md
                tw-shadow-2xl
                tw-bg-white"
                id="modal"
                >
        <div class="tw-w-full tw-relative tw-h-[40px]">
            <button class="tw-text-4xl 
                            bi bi-x
                            tw-absolute
                            tw-right-2
                            "
                    id="modal-close"
                            >
        </div>
        </button>
        <h2 class="tw-text-2xl tw-text-center tw-mt-[5%]" 
                id="modal-title"></h2>

        <div class="tw-text-base tw-font-normal tw-mt-2" 
                id="modal-description">
        </div>

        <textarea id="modal-input" 
                placeholder="write..."
                maxlength="2000"
                class="input tw-w-full 
                        tw-hidden
                        tw-mt-2
                        tw-resize-y 
                        tw-text-base
                        tw-font-normal
                        tw-min-h-[50px]
                        tw-max-h-[150px]"></textarea>

        <div class="tw-w-full tw-flex tw-place-content-center tw-mt-3">
            <a href="#" class="btn tw-text-sm tw-cursor-pointer" id="modal-action-btn">
                Open
            </a>
        </div>
        
    </div>


    <footer class="tw-flex max-md:tw-flex-col tw-w-full tw-p-[5%]
                    tw-px-[10%] tw-place-content-around tw-gap-3 
                    tw-bg-primary
                    tw-text-white
                    ">
        <div class="tw-h-full tw-w-[250px] tw-flex tw-flex-col 
                    tw-gap-6 tw-place-items-center max-md:tw-w-full">
            
            <img src="./assets/bistro-white.png" 
                alt="logo" srcset="" class="tw-max-w-[200px]">
            <div>
                2 Lord Edward St,   
                <br>
                Temple Bar,
                <br>
                D02 P634,
                <br>
                US
            </div>
            <div class="tw-mt-3 tw-font-semibold tw-text-lg">
                Follow us
            </div>
            <div class="tw-flex tw-gap-4 tw-text-2xl">
                <a href="" aria-label="Facebook">
                    <i class="bi bi-facebook"></i>
                </a>
                <a href="https://twitter.com/pauls_freeman" aria-label="Twitter">
                    <i class="bi bi-twitter"></i>
                </a>
                <a href="https://twitter.com/pauls_freeman" class="tw-w-[40px] tw-h-[40px]" aria-label="Tripadvisor">
                    <svg
                    width="25"
                    height="25"
                    viewBox="0 0 13.229166 13.229167"
                    version="1.1"
                    id="svg1"
                    class="tw-w-[35px] tw-h-[35px]"
                    xml:space="preserve"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:svg="http://www.w3.org/2000/svg"><defs
                      id="defs1" /><g
                      id="layer1"><path
                        style="fill: #fff; stroke-width:1.30792"
                        d="M 6.0253827,10.495874 C 5.5783463,10.001905 5.4730621,9.9874894 4.9562421,10.349485 4.6409418,10.57033 3.9735136,10.751021 3.4730684,10.751021 0.89854523,10.751021 -0.60286372,8.3105194 0.57289183,6.0368587 0.91665107,5.3721018 0.94696499,5.0667983 0.70731296,4.6830543 0.43285458,4.2435768 0.4965716,4.1875715 1.2710225,4.1875715 c 0.4802291,0 1.4350231,-0.2768956 2.1217645,-0.6153233 1.7482569,-0.8615452 4.8670347,-0.8585049 6.5021593,0.00634 0.6332597,0.3349417 1.6060847,0.6089848 2.1618327,0.6089848 0.955629,0 0.986284,0.026701 0.56505,0.4921614 -0.412837,0.4561778 -0.404172,0.5754932 0.118511,1.6319261 0.477372,0.9648547 0.517018,1.2818537 0.258339,2.0656558 C 12.356309,10.323718 10.162954,11.286931 8.4225426,10.386929 7.6572822,9.991197 7.5660532,9.9989988 7.0617703,10.503283 6.5233943,11.041658 6.5192825,11.04163 6.0253827,10.495796 Z M 5.0317745,8.9365392 C 5.7722627,7.9951606 5.7488545,7.1275495 4.9581665,6.2083199 4.5005696,5.676332 4.0588414,5.4637977 3.4107611,5.4637977 c -0.6480802,0 -1.0898085,0.2125343 -1.5474052,0.7445222 -0.7906881,0.9192296 -0.8140964,1.7868407 -0.073608,2.7282193 0.4371956,0.555804 0.8078632,0.7205729 1.6210132,0.7205729 0.81315,0 1.1838179,-0.1647689 1.6210134,-0.7205729 z M 2.7954378,8.5412992 C 2.2053961,8.1976314 2.1708939,7.1104489 2.7351672,6.6421435 3.055027,6.3766836 3.3124895,6.3674224 3.8290754,6.6027948 4.6638042,6.9831227 4.7506658,8.1388301 3.9756941,8.5535824 3.3461405,8.8905092 3.3958837,8.8910272 2.7954378,8.5412992 Z M 11.25909,9.2465573 C 11.976631,8.7439728 12.303797,7.424765 11.898649,6.6677353 11.397186,5.7307446 10.165115,5.2433824 9.1725513,5.5893919 8.2063958,5.9261953 7.7863939,6.5471603 7.7863939,7.6387992 c 0,1.6428498 2.0605831,2.5968408 3.4726961,1.6077581 z M 9.127216,8.2631641 C 8.7127456,7.8486937 8.6567966,7.6134425 8.875505,7.2047823 9.0301735,6.9157817 9.2802245,6.602997 9.431174,6.5097051 9.8428305,6.2552872 10.721259,6.610132 10.912317,7.1080177 11.383218,8.335167 10.057255,9.193203 9.127216,8.2631641 Z M 8.3365565,4.1384237 C 7.7390342,3.8697618 5.2528645,3.8815881 4.8212489,4.1551454 4.5417361,4.3323 4.6520767,4.5287674 5.28366,4.9784943 5.7398981,5.3033646 6.1875949,5.8036157 6.2785418,6.0901635 6.4249349,6.5514079 6.5761377,6.4800237 7.5969399,5.4677347 8.5012911,4.5709256 8.6608127,4.2842177 8.3365565,4.1384237 Z"
                        id="path1" /></g></svg>
                </a>
            </div>
        </div>

        <div class="tw-h-full tw-w-[250px] tw-flex tw-flex-col 
                    tw-gap-4">

            <h2 class="tw-text-3xl max-md:tw-text-xl">
                Menu
            </h2>
            <div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
                <a href="" class="footer-link">Breakfast menu</a>
                <a href="" class="footer-link">Lunch menu</a>
                <a href="" class="footer-link">Dessert menu</a>
                <a href="" class="footer-link">Drinks menu</a>
            </div>
        </div>
        <div class="tw-h-full tw-w-[250px] tw-flex tw-flex-col 
                    tw-gap-4">

            <h2 class="tw-text-3xl max-md:tw-text-xl">
                Resources
            </h2>
            <div class=" tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
                <a href="" class="footer-link">About us</a>
                <a href="" class="footer-link">FAQ</a>
                <a href="" class="footer-link">Contact Us</a>
                <a href="" class="footer-link">Locations</a>
                <a href="" class="footer-link">Privacy policy</a>
            </div>
        </div>

     
    </footer>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js" integrity="sha512-5efjkDjhldlK+BrHauVYJpbjKrtNemLZksZWxd6Wdxvm06dceqWGLLNjZywOkvW7BF032ktHRMUOarbK9d60bg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script src="./scripts/utils.js"></script>
<script src="./index.js"></script>

<!-- https://github.com/PaulleDemon -->

</html>
```

**Css**
```css
@import url('https://fonts.googleapis.com/css2?family=Khula:wght@300;400;600;700;800&display=swap');

:root{

    --btn-color: #fdfdfd;/* button color*/
    --btn-bg: #BE3345;/* button bg color*/

    --primary-text-color: #BE3345;
}

html {
    scroll-behavior: smooth;
}

.khula-font {
    font-family: "Khula", sans-serif;
    font-style: normal;
}

header{
    background-color:   transparent;
    color: #fff;
}


header > .collapsable-header{
    display: flex;
    gap: 1rem;
    width: 100%;
    background-color: inherit;
    place-content: center;
    overflow: hidden;
    transition: width 0.3s ease;
}

.animated-collapse{
    transition: width 0.3s ease;
}

.header-links {
    display: flex;
    align-items: center;
    min-width: fit-content;
    border-radius: 25px;
    padding: 5px 10px;
    transition: background-color 0.3s, color 0.3s;
}

.header-links:hover {
    background-color: #ffffff;
    color: #240606;
}

.header-white-bg{
    color: #000;
}

.header-white-bg:hover{
    background-color: #BE3345 !important;
    color: #fff !important;
}

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

.opacity-0{
    opacity: 0 !important;
}

.opacity-100{
    opacity: 100 !important;
}

.btn{
    padding: 10px 15px;
    width: max-content;
    border-radius: 25px;
    color: var(--btn-color);
    background-color: var(--btn-bg);
    justify-content: center;
    align-items: center;
    display: flex;
}

.btn:hover{

}

.input{
    padding: 10px;
    border-radius: 10px;
    outline: none;
    min-width: 100px;
    border: 2px solid #cecece;
    transition: border 0.3s;
}

.input:active, .input:focus, .input:focus-within{
    border: 2px solid #BE3345;
}


.slides {
    display: none;
    position: relative;
    height: 100%;
}


/* Navigation dots styling */
.dots-container {
    text-align: center;
    margin-top: 20px;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
}

.dots-container .active,
.dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

.menu-item-container{

}

.menu-btn{
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
    transform: translate(-50%, -50%);
    z-index: 5;
    color: #000;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.menu-btn:hover{
    background-color: #BE3345;
    color: #fff;
}


.footer-link{
    color: #fff;
    transition: color 0.3s;
}

.footer-link:hover{
    color: #ffef0b;
}


.review-container {
    position: relative;
    max-width: 600px;
    margin: auto;
}

.review-slide {
    display: none;
    padding: 20px;
    text-align: center;
}

.fade {
    animation: fadeEffect 1s ease-in-out;
}

@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}


.stars {
    display: inline-block;
    font-size: 40px;
    cursor: pointer;
}
.stars .star {
    color: #ccc;
    transition: color 0.2s;
}
.stars .star:hover,
.stars .star.active {
    color: gold;
}


@keyframes fade {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .prev,
    .next,
    .text {
        font-size: 11px;
    }
}


@media not all and (min-width: 768px) {
    header .collapsable-header {
        position: absolute;
        right: 0px;
        flex-direction: column;
        opacity: 0;
        height: 100vh;
        height: 100dvh;
        width: 0vw;
        justify-content: space-between;
        padding: 5px;
        padding-top: 5%;
        padding-bottom: 5%;
        place-items: end;
        background-color: #BE3345;
        color: white;
        overflow-y: scroll;
    }

    .header-links{
        color: white;
    }
    
}
```