PaulHi all,
I created this simple car wash landing page.
Features
- Responsive.
- Tailwind css, for rapid development.
Live site
You can view the live site here: carwash 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>Supreme car wash</title>
<meta name="description" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<link rel="shortcut icon" href="./assets/logo.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">
<div class="tw-w-full tw-justify-around
tw-bg-gray-200 tw-h-[80px]
tw-flex tw-px-5
max-md:tw-hidden
tw-place-items-center
">
<p class="tw-text-3xl primary-text-color tw-font-semibold">Supreme car wash</p>
<div class="tw-flex tw-gap-4">
<div class="tw-w-[50px] tw-h-[50px]
tw-flex tw-place-items-center
tw-place-content-center
tw-rounded-full tw-bg-secondary
tw-text-white
tw-p-3
">
<i class="bi bi-clock tw-text-3xl
tw-font-bold"></i>
</div>
<div>
<p class="tw-text-xl tw-text-primary
tw-font-semibold">Opening hours</p>
<p class="tw-text-gray-600">Mon-Fri, 8:00 - 9:00</p>
</div>
</div>
<div class="tw-flex tw-gap-4">
<div class="tw-w-[50px] tw-h-[50px]
tw-flex tw-place-items-center
tw-place-content-center
tw-rounded-full tw-bg-secondary
tw-text-white
tw-p-3
">
<i class="bi bi-telephone tw-text-3xl
tw-font-bold"></i>
</div>
<div>
<p class="tw-text-xl tw-text-primary
tw-font-semibold">Call us</p>
<p class="tw-text-gray-600">+1 222-222-222</p>
</div>
</div>
<div class="tw-flex tw-gap-4">
<div class="tw-w-[50px] tw-h-[50px]
tw-flex tw-place-items-center
tw-place-content-center
tw-rounded-full
tw-bg-secondary
tw-text-white
tw-p-3
">
<i class="bi bi-envelope tw-text-3xl
tw-font-bold"></i>
</div>
<div>
<p class="tw-text-xl tw-text-primary
tw-font-semibold">Email us</p>
<p class="tw-text-gray-600">supreme@example.com</p>
</div>
</div>
</div>
<header class="tw-flex tw-w-full tw-z-20
tw-h-[60px]
md:tw-justify-around
tw-sticky tw-top-0 tw-px-[10%]
tw-bg-white
max-md:tw-bg-primary
max-md:tw-mr-auto
tw-shadow-lg
">
<div class="tw-flex tw-w-fit">
<div class="tw-w-[50px] tw-p-1">
<img src="./assets/logo.png"
alt="supreme-car-wash logo" class="tw-object-contain">
</div>
</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
">
<a class="header-links" href="">
About us
</a>
<a class="header-links" href="">
Services
</a>
<a class="header-links" href="">
Price
</a>
<a class="header-links" href="">
Contact us
</a>
</div>
<div class="tw-flex tw-gap-[20px] tw-place-items-center tw-text-xl
primary-text-color
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="noreferrer noopener"
area-label="facebook"
class="hover:tw-text-blue-600
tw-transition-colors
tw-duration-[0.3s]
"
>
<i class="bi bi-facebook"></i>
</a>
<a href="https://www.instagram.com//"
target="_blank"
rel="noreferrer noopener"
area-label="instagram"
class="hover:tw-text-blue-600
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-2xl 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-[650px] max-md:tw-h-[300px] tw-max-w-[100vw]
tw-flex tw-flex-col tw-overflow-hidden">
<div class="slideshow-container tw-h-full
tw-w-full tw-flex tw-flex-col">
<div class="tw-relative tw-w-full tw-h-[650px] max-md:tw-h-full tw-overflow-clip">
<div class="slides fade">
<div class="numbertext">1 / 3</div>
<img src="./assets/images/slideshow/car-wash.jpg"
alt="Delux car wash"
class="tw-object-cover tw-w-full tw-h-full">
<div class="text">Supreme car wash</div>
</div>
<div class="slides fade">
<div class="numbertext">2 / 3</div>
<img src="./assets/images/slideshow/interior.jpg"
alt="Car wash"
class="tw-object-cover tw-w-full tw-h-full">
<div class="text">Interior car wash</div>
</div>
<div class="slides fade">
<div class="numbertext">3 / 3</div>
<img src="./assets/images/slideshow/sponge-car-wash.jpg"
alt="supreme car wash"
class="tw-object-cover tw-w-full tw-h-full">
<div class="text">Best car wash</div>
</div>
<!-- Next and previous buttons -->
<p class="prev">❮</a>
<p class="next">❯</a>
</div>
<!-- The dots/circles -->
<div class="dots-container tw-z-10">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</section>
<section class="tw-w-full tw-flex
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]
">
<h1 class="tw-text-5xl primary-text-color
tw-text-center
tw-font-medium max-md:tw-text-4xl">
Supreme Car Wash, TX
</h1>
<div class="tw-flex max-md:tw-flex-col tw-gap-[10%] tw-mt-[5%]
max-md:tw-place-items-center
max-md:tw-gap-[4%] tw-w-full tw-place-content-center">
<div class="tw-w-[400px] tw-h-[350px]
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/garage.jpg"
alt="engine" 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-5xl max-md:tw-text-3xl primary-text-color">About us</h2>
<div class="tw-max-w-[400px] tw-mt-6
tw-text-justify max-md:tw-text-sm">
Supreme Car Wash offers premium car cleaning services, providing meticulous attention to detail to ensure your vehicle shines like new. Our experienced team uses top-quality products and advanced techniques to deliver superior results. Visit us today for a professional
car wash experience that leaves your vehicle looking pristine inside and out.
</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>
</section>
<section class="tw-w-full tw-flex
tw-flex-col
tw-min-h-[60vh]
max-md:tw-min-h-[unset]
max-md:tw-h-max
tw-px-[20%]
max-md:tw-px-[5%]
tw-p-8
tw-gap-[10%]
max-md:tw-gap-[4%]
tw-place-items-center
tw-bg-[#EFEFEF]
">
<h2 class="tw-text-2xl max-md:tw-text-lg tw-text-secondary">Our services</h2>
<h2 class="tw-text-5xl max-md:tw-text-3xl tw-text-primary tw-text-center">Premium washing service</h2>
<div class="tw-w-full tw-mt-[5%] tw-flex
tw-gap-[10%]
tw-justify-around
max-md:tw-mt-8
tw-place-content-center">
<div class="tw-flex tw-flex-col tw-gap-4
tw-place-content-center
tw-place-items-center
tw-text-center
tw-w-[200px] tw-h-[350px]
max-md:tw-w-[150px] max-md:tw-h-[150px]
">
<div class="tw-w-full tw-h-[150px] max-md:tw-h-[100px]">
<img src="./assets/images/icons/car-wash.svg"
alt="car wash" class="tw-h-full tw-w-full tw-object-contain">
</div>
<div class="tw-text-2xl max-md:tw-text-lg primary-text-color">
Exterior washing
</div>
</div>
<div class="tw-flex tw-flex-col tw-gap-4
tw-place-content-center
tw-place-items-center
tw-text-center
tw-w-[200px] tw-h-[350px]
max-md:tw-w-[150px] max-md:tw-h-[150px]
">
<div class="tw-w-full tw-h-[150px] max-md:tw-h-[100px]">
<img src="./assets/images/icons/seat-cleaning.svg"
alt="car wash" class="tw-h-full tw-w-full tw-object-contain">
</div>
<div class="tw-text-2xl max-md:tw-text-lg primary-text-color">
Seat cleaning
</div>
</div>
<div class="tw-flex tw-flex-col tw-gap-4
tw-place-content-center
tw-place-items-center
tw-text-center
tw-w-[200px] tw-h-[350px]
max-md:tw-w-[150px] max-md:tw-h-[150px]
">
<div class="tw-w-full tw-h-[100px]">
<img src="./assets/images/icons/vaccuming.svg"
alt="car wash" class="tw-h-full tw-w-full tw-object-contain">
</div>
<div class="tw-text-2xl max-md:tw-text-lg primary-text-color">
Vacuuming
</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]
">
<h3 class="tw-text-2xl tw-font-semibold tw-text-secondary">Washing plans</h3>
<h3 class="tw-text-4xl tw-font-semibold primary-text-color ">Choose your plan</h3>
<div class="tw-w-full tw-flex
max-md:tw-flex-col tw-place-items-center
tw-mt-[5%] tw-gap-4 tw-place-content-center">
<div class="tw-flex tw-flex-col
tw-w-[350px] tw-h-[400px]
tw-bg-white
tw-p-4
tw-place-items-center
tw-gap-3
tw-rounded-lg
">
<h2 class="tw-text-3xl primary-text-color">Basic cleaning</h2>
<h3 class="tw-text-5xl tw-font-semibold tw-text-blue-950">$14</h3>
<ul class="tw-flex tw-mt-2 tw-flex-col tw-gap-2
tw-text-lg">
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Seat Washing</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Vacuum Cleaning</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Exterior Cleaning</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-x-circle"></i>
<span>Interior Wet Cleaning</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-x-circle"></i>
<span>Window Wiping</span>
</li>
</ul>
<a href="" class="tw-p-2 btn tw-mt-auto
hover:tw-scale-[1.02]
tw-duration-[0.3s]
tw-transition-transform
">
Book now
</a>
</div>
<div class="tw-flex tw-flex-col
tw-w-[350px] tw-h-[400px]
tw-bg-white
tw-p-4
tw-shadow-2xl
tw-border-2
tw-place-items-center
tw-gap-3
tw-rounded-lg
">
<h2 class="tw-text-3xl primary-text-color">Executive cleaning</h2>
<h3 class="tw-text-5xl tw-font-semibold">$25</h3>
<ul class="tw-flex tw-mt-2 tw-flex-col tw-gap-2
tw-text-lg">
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Seat Washing</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Vacuum Cleaning</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Exterior Cleaning</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Interior Wet Cleaning</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-x-circle"></i>
<span>Window Wiping</span>
</li>
</ul>
<a href="" class="tw-p-2 btn tw-mt-auto
hover:tw-scale-[1.02]
tw-duration-[0.3s]
tw-transition-transform
">
Book now
</a>
</div>
<div class="tw-flex tw-flex-col
tw-w-[350px] tw-h-[400px]
tw-bg-white
tw-p-4
tw-place-items-center
tw-gap-3
tw-rounded-lg
">
<h2 class="tw-text-3xl primary-text-color">Presidential cleaning</h2>
<h3 class="tw-text-5xl tw-font-semibold tw-text-blue-950">$35</h3>
<ul class="tw-flex tw-mt-2 tw-flex-col tw-gap-2
tw-text-lg">
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Seat Washing</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Vacuum Cleaning</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Exterior Cleaning</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Interior Wet Cleaning</span>
</li>
<li class="tw-flex tw-gap-2">
<i class="bi bi-check-circle tw-text-green-500"></i>
<span>Window Wiping</span>
</li>
</ul>
<a href="" class="tw-p-2 btn tw-mt-auto
hover:tw-scale-[1.02]
tw-duration-[0.3s]
tw-transition-transform">
Book now
</a>
</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="booking"
>
<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/car-washing.jpg"
alt="car wash" 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-5xl max-md:tw-text-3xl primary-text-color tw-font-medium">Request car wash</h2>
</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 tw-flex-col tw-w-full tw-gap-2">
<div class="tw-text-gray-500">Inquiry</div>
<textarea class="input tw-resize-y
tw-w-full
tw-max-h-[250px]
tw-min-h-[40px]
"></textarea>
</div>
<a href="#"
class="btn
tw-transition-transform
hover:tw-translate-x-2
tw-duration-[0.3s]
tw-mt-5
tw-ml-auto
">
<span>Request</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">
+1 832-604-7679
</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 clients 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]">
<!-- testimonials -->
<div class="slides fade tw-text-lg tw-text-justify">
<q class="tw-italic tw-text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sapiente laudantium id ratione! Fugiat nulla ut, possimus facere sit natus.
</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">- Sandra Brooks</p>
</div>
<div class="slides fade tw-text-lg tw-text-justify">
<q class="tw-italic tw-text-gray-600 ">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium tempora reprehenderit illo accusamus minus sunt.
</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">- Joshua Simmons</p>
</div>
<div class="slides fade tw-text-lg tw-text-justify">
<q class="tw-italic tw-text-gray-600 ">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate quaerat quia aut eveniet ipsa quae consectetur placeat debitis doloribus animi.
</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">- Roger Neely</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>
</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]
hover:tw-bg-blue-900
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/logo.png"
alt="logo" class="tw-w-[150px]">
<div>
12111 Cypress,
<br>
TX,
<br>
United States
</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>
</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">
Services
</h2>
<div class="tw-flex tw-flex-col tw-gap-3 max-md:tw-text-sm">
<a href="" class="footer-link">Car wash</a>
<a href="" class="footer-link">Interior cleaning</a>
<a href="" class="footer-link">Window wiping</a>
<a href="" class="footer-link">Oil change</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="./scripts/utils.js"></script>
<script src="index.js"></script>
</html>
:root{
--btn-color: #fdfdfd;/* button color*/
--btn-bg: #00006f;/* button bg color*/
--header-link-hover: #00006f;
--primary-text-color: #00006f;
/* --link-hover: #4f55c1; */
--input-hover-bd-color: #00006f;
}
html {
scroll-behavior: smooth;
}
header{
background-color: white;
}
header > .collapsable-header{
display: flex;
gap: 1rem;
width: 100%;
background-color: white;
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: 8px 15px;
transition: background-color 0.3s, color 0.3s;
}
.header-links:hover {
background-color: var(--header-link-hover);
color: #fff;
}
.black-text{
color: #000;
}
.white-text{
color: #fff;
}
.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;
gap: 10px;
}
.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 var(--input-hover-bd-color);
}
.slides {
display: none;
position: relative;
height: 100%;
}
/* Slideshow container */
.slideshow-container {
width: 100%;
position: relative;
margin: auto;
overflow: hidden;
height: 100%;
}
.slideshow-container img {
vertical-align: middle;
height: 100%;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
z-index: 10;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.slideshow-container .text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Navigation dots styling */
.dots-container {
text-align: center;
margin-top: 20px;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dots-container .active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
.footer-link{
color: #fff;
transition: color 0.3s;
}
.footer-link:hover{
color: #0fe857;
}
.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;
justify-content: space-between;
opacity: 0;
height: 100vh;
width: 0vw;
padding: 5px;
padding-top: 5%;
padding-bottom: 5%;
place-items: end;
background-color: #00006f;
color: white;
}
}
