Carwash landing page template
Tags: showdev, frontend, webdev
Published: 2024-07-12 06:42:10

Hi 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](https://supremecarwash.netlify.app/)

### Screenshot

![carwash landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pyla5lhli79h418jok3.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>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">&#10094;</a>
                <p class="next">&#10095;</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">&#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/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>
```

```css

: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;
    }
}
```