Here's a free restaurant landing page
Features
- Responsive.
- Tailwind css, for rapid development.
Live site
You can view the live site here: restaurant landing page
Screenshot
Follow
Source code
<!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">★</span>
<span class="star" data-value="2">★</span>
<span class="star" data-value="3">★</span>
<span class="star" data-value="4">★</span>
<span class="star" data-value="5">★</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
@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;
}
}
Top comments (0)