App landing page
Tags: showdev, frontend, webdev, html
Published: 2024-07-12 13:57:23

I created this app landing page.

### Features
* Responsive.
* Tailwind css, for rapid development.

### Live site
You can view the live site here: [app landing page](https://chatorigin.netlify.app/)

### Screenshot

![app landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qicatc6y8t79lt4iuj3.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>Chat Origin</title>
    <meta name="description" content="">
    <link rel="shortcut icon" href="./assets/logo.png" type="image/x-icon">
    
    <!-- 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="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-bg-[#fff] tw-flex tw-flex-col">
    

    <header class="tw-flex tw-w-full tw-z-20
                    tw-h-[60px]  
                    lg:tw-justify-around
                    tw-absolute tw-top-0 tw-px-[5%]
                    max-lg:tw-px-4
                    max-lg:tw-mr-auto
                    tw-bg-opacity-0
                    ">
        <a class="tw-w-[50px] tw-h-[50px] tw-p-[4px]" href="">
            <img src="./assets/logo.png" 
                  alt="logo" class="tw-w-full tw-h-full tw-object">
        </a>
        <div class="collapsible-header animated-collapse  max-lg:tw-shadow-md"
                    id="collapsed-header-items"
                    >
            <div class=" tw-w-max
                            tw-flex tw-gap-5 tw-h-full lg:tw-mx-auto
                            lg:tw-place-items-center 
                            max-lg:tw-place-items-end
                            tw-text-base max-lg:tw-flex-col
                            max-lg:tw-mt-[30px]
                            max-lg:tw-gap-5
                            tw-text-black
                        ">
                    
                <a class="header-links" href="">
                    About us
                </a>
                <a class="header-links" href="#pricing">
                    Pricing
                </a>
                <a class="header-links" href="">
                    Features
                </a>
                <a class="header-links" href="">
                    Blog
                </a>
                <a class="header-links" href="">
                    Contact us
                </a>
            </div>
            <div class="tw-flex tw-gap-[20px] tw-place-items-center tw-text-base
                         max-md:tw-place-content-center
                         max-md:tw-w-full
                         max-md:tw-flex-col
                         tw-mx-4
                         ">

                <a href=""
                    aria-label="signup"
                    class=" 
                            tw-py-2
                            tw-px-3
                            tw-rounded-md
                            tw-bg-primary
                            tw-text-white
                            hover:tw-translate-x-2
                            tw-transition-transform
                            tw-duration-[0.3s]
                        "   
                        >
                    <span>Download</span>
                    <i class="bi bi-apple"></i>
                </a>
            </div>
        </div>
        <button class="tw-absolute tw-text-black tw-z-50 
                        tw-right-3
                        tw-top-3
                        tw-text-3xl  bi bi-list lg:tw-hidden"  
                onclick="toggleHeader()" aria-label="menu" id="collapse-btn">
        </button>
    </header>

    <section class="tw-w-full tw-min-h-[100vh] tw-max-w-[100vw]
                        max-md:tw-mt-[50px]
                        max-lg:tw-p-4 
                        tw-flex tw-flex-col tw-overflow-hidden tw-relative"
                        >
            
        <div class="tw-w-full tw-h-full tw-p-[5%]
                    tw-place-content-center tw-min-h-[100vh]
                    tw-gap-6 max-xl:tw-place-items-center
                    tw-flex max-lg:tw-flex-col">

            <div class="tw-flex tw-flex-col tw-place-content-center">
                <div class="tw-text-6xl max-lg:tw-text-4xl tw-font-semibold 
                            tw-leading-[80px]
                            max-md:tw-leading-snug tw-uppercase" 
                            >
                    <span>
                        Connect instantly
                    </span>
                    <br>
                    <span class="tw-text-primary">
                        with customers
                    </span>
                </div>  
                <div class="tw-mt-10 tw-max-w-[450px] tw-text-justify tw-p-2 max-lg:tw-max-w-full">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error adipisci corrupti accusamus reiciendis similique assumenda nostrum fuga dicta vitae ipsum.                        
                </div>
                
                <div class="tw-mt-4 tw-flex 
                            tw-overflow-hidden tw-gap-4 
                            tw-p-2
                            tw-place-items-center ">
                    
                    <a class="btn  
                                tw-duration-[0.3s]
                                hover:tw-scale-x-[1.03]
                                tw-transition-transform
                                "
                                href=""
                                >
                        Get started
                    </a>  
                    <a class="btn  
                                !tw-text-primary
                                !tw-bg-[#c8cbf984]
                                tw-duration-[0.3s]
                                hover:tw-scale-x-[1.03]
                                tw-transition-transform
                                "
                                href=""
                                >
                        <span>Learn more</span>
                    </a>  
                </div>

            </div>
            
            <div class="tw-w-full tw-flex tw-place-content-center tw-max-w-[50%] 
                            tw-place-items-center tw-overflow-hidden max-lg:tw-max-w-[unset]">
                
                <div class="tw-overflow-hidden tw-flex 
                                tw-max-w-[650px] 
                                tw-max-h-[580px] 
                                tw-min-h-[450px] 
                                tw-min-w-[350px] 
                                max-lg:tw-max-h-[320px]
                                max-lg:tw-min-h-[180px]
                                max-lg:tw-h-fit
                                max-lg:tw-w-[320px]
                                max-lg:tw-min-w-[320px]
                                ">
                    <img src="./assets/images/home/iphone.png" 
                            alt="app" class="tw-h-full tw-w-full 
                                            tw-object-contain">
                        
                </div>
            </div> 

        </div>
        
    </section>
    <section class="tw-w-full  tw-max-w-[100vw]
                    tw-flex tw-flex-col tw-overflow-hidden tw-relative 
                    tw-place-items-center
                    tw-place-content-center
                    tw-p-6
                    "
                    id="numbers"
                    >
        <div class="tw-flex tw-flex-col tw-gap-8 tw-place-items-center">
            <h3 class="tw-text-3xl">In numbers</h3>
            <div class="tw-flex max-md:tw-flex-col tw-w-full tw-gap-10 tw-place-content-center"
                  id="numbers-container"  >
                <div >
                    <span class="tw-text-6xl max-lg:tw-text-4xl" >
                        <span id="installs">250</span><span>k +</span>
                    </span>
                    <span class="tw-text-xl tw-font-medium tw-text-gray-800">
                        /Installs
                    </span>
                    
                </div>
                <div class="tw-text-6xl">
                    <span class="tw-text-6xl max-lg:tw-text-4xl">
                        <span id="hours">400</span>
                        <span>+</span>
                    </span>
                    <span class="tw-text-xl tw-font-medium tw-text-gray-800">
                        /hrs saved
                    </span>
                </div>

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

    <section class="tw-w-full  tw-max-w-[100vw]
                    tw-flex tw-flex-col tw-overflow-hidden tw-relative 
                    tw-place-items-center
                    tw-place-content-center
                    tw-p-6
                    "
                    id=""
                    >
        <div class="tw-mt-8 tw-flex tw-flex-col tw-gap-5 tw-place-items-center">
            <div class="tw-flex tw-flex-col tw-gap-3 tw-text-center tw-mt-5">
                <h3 class="tw-text-xl tw-text-primary">Features loved by our clients</h>
                <h2 class="tw-text-4xl tw-font-semibold">Features</h2>
            </div>
            <div class="tw-flex tw-flex-wrap tw-max-w-[60%] tw-place-content-center tw-mt-6 max-lg:tw-flex-col tw-gap-2">
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-boombox-fill "></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 1</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-award-fill"></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 2</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-book-fill "></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 3</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-briefcase-fill "></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 4</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                        <!-- <img src="./assets/images/home/sample.jpg" 
                                alt="feature1"> -->
                    <i class="tw-text-5xl tw-text-primary bi bi-credit-card-2-front-fill"></i>
                    <h3 class="tw-text-2xl tw-font-semibold">Feature 5</h3>
                    <div class="tw-text-[#595959]">
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                    </div>
                </div>
                <div class=" tw-flex tw-flex-col tw-w-[350px] tw-text-center tw-h-[250px] tw-p-4 tw-gap-2">
                    <!-- <img src="./assets/images/home/sample.jpg" 
                            alt="feature1"> -->
                <i class="tw-text-5xl tw-text-primary bi bi-fire "></i>
                <h3 class="tw-text-2xl tw-font-semibold">Feature 6</h3>
                <div class="tw-text-[#595959]">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, voluptates numquam quam expedita mollitia possimus. Quos tempora placeat pariatur est!
                </div>
            </div>
            </div>
        </div>
    </section>

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

        <h3 class="tw-text-3xl max-md:tw-text-2xl tw-text-primary tw-font-medium">
            What our clients say
        </h3>
        <!-- Testimonials -->
        <div class="max-md:tw-columns-1 lg:tw-columns-2 xl:tw-columns-3 tw-space-y-8 tw-gap-10 tw-mt-8">
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/women.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="women">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">Trich B</div>
                        <div class="tw-text-[#4b4b4b]">AMI, ceo</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, sequi sunt velit aut omnis nulla ut, autem corrupti nemo optio ipsam amet ducimus illum? Repellendus itaque autem alias eos quis.
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/man.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">John B</div>
                        <div class="tw-text-[#4b4b4b]">ABC, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore deserunt delectus consectetur enim cupiditate ab nemo voluptas repellendus qui quas..
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/man2.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">Mante </div>
                        <div class="tw-text-[#4b4b4b]">xyz, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, numquam.
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/women.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">Lara </div>
                        <div class="tw-text-[#4b4b4b]">xz, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta, saepe illum. Dicta quisquam praesentium quod!
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/man.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">James </div>
                        <div class="tw-text-[#4b4b4b]">app, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga accusamus non enim debitis rem neque beatae explicabo corrupti porro ullam?
                </p>
            </div>
            <div class="tw-break-inside-avoid tw-flex tw-flex-col tw-w-[350px] max-lg:tw-w-[320px] tw-h-fit tw-shadow-lg tw-p-4 tw-rounded-lg ">
                <div class="tw-flex tw-gap-3 tw-place-items-center">
                    <div class="tw-w-[50px] tw-h-[50px] tw-border-solid 
                            tw-border-[2px] tw-border-primary
                            tw-overflow-hidden tw-rounded-full">
                        <img src="./assets/images/people/man2.jpg" 
                                class="tw-w-full tw-h-full tw-object-cover" alt="man">
                    </div>
                    <div class="tw-flex tw-flex-col tw-gap-1">
                        <div class="tw-font-semibold">Ron </div>
                        <div class="tw-text-[#4b4b4b]">marketplace, cto</div>
                    </div>

                </div>
                <p class="tw-italic tw-text-gray-600 tw-mt-4">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga accusamus non enim debitis rem neque beatae explicabo corrupti porro ullam?
                </p>
            </div>
        </div>

    </section>

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

        <h3 class="tw-text-3xl max-md:tw-text-2xl tw-text-primary tw-font-medium">
            Simple pricing
        </h3>
        <!-- pricing -->
        <div class="tw-flex tw-flex-wrap tw-gap-8 tw-place-content-center max-lg:tw-flex-col tw-mt-10">

            <div class="tw-w-[380px] max-lg:tw-w-[320px] tw-p-8 tw-flex tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-shadow-xl">
                <h3 class="">
                    <span class="tw-text-5xl tw-font-semibold">$9</span>
                    <span class="tw-text-gray-600 tw-text-2xl">/mo</span>
                </h3>
                <p class="tw-text-center tw-text-gray-600 tw-mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!</p>
                <hr>
                <ul class="tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-lg tw-text-center tw-text-gray-600">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
                <a href="http://" class="tw-mt-8 btn !tw-w-full hover:tw-scale-x-[1.02] 
                                         tw-transition-transform tw-duration-[0.3s]">
                    Get now
                </a>
            </div>
            <div class="tw-w-[380px] max-lg:tw-w-[320px] tw-p-8 tw-flex tw-flex-col tw-place-items-center tw-gap-2 
                        tw-rounded-lg tw-shadow-xl tw-border-2 tw-border-primary">
                <h3 class="">
                    <span class="tw-text-5xl tw-font-semibold">$19</span>
                    <span class="tw-text-gray-600 tw-text-2xl">/mo</span>
                </h3>
                <p class="tw-text-center tw-text-gray-600 tw-mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!</p>
                <hr>
                <ul class="tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-lg tw-text-center tw-text-gray-600">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
                <a href="http://" class="tw-mt-8 btn !tw-w-full hover:tw-scale-x-[1.02] 
                                         tw-transition-transform tw-duration-[0.3s]">
                    Get now
                </a>
            </div>
            <div class="tw-w-[380px] max-lg:tw-w-[320px] tw-p-8 tw-flex tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-shadow-xl">
                <h3 class="">
                    <span class="tw-text-5xl tw-font-semibold">$49</span>
                    <span class="tw-text-gray-600 tw-text-2xl">/mo</span>
                </h3>
                <p class="tw-text-center tw-text-gray-600 tw-mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!</p>
                <hr>
                <ul class="tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-lg tw-text-center tw-text-gray-600">
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem, ipsum.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit.</li>
                </ul>
                <a href="http://" class="tw-mt-8 btn !tw-w-full hover:tw-scale-x-[1.02] 
                                         tw-transition-transform tw-duration-[0.3s]">
                    Get now
                </a>
            </div>
        </div>

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

        <h3 class="tw-text-3xl max-md:tw-text-2xl tw-text-primary tw-font-medium">
            Read more
        </h3>
        <!-- pricing -->
        <div class="tw-flex tw-flex-wrap tw-gap-8 tw-place-content-center max-lg:tw-flex-col tw-mt-10">

            <a href="" class="tw-w-[350px] max-lg:tw-w-[300px] tw-h-[300px] tw-p-2 tw-flex tw-flex-col 
                        tw-place-items-center tw-gap-2 tw-rounded-lg tw-shadow-xl tw-overflow-clip">

                <div class="tw-rounded-md tw-overflow-hidden tw-h-[200px] tw-w-full">
                    <img src="./assets/images/home/sample.jpg" 
                        alt="article image" 
                        class="tw-w-full tw-h-full tw-object-cover"
                        srcset="">
                </div>
                <h3 class="tw-text-3xl max-md:tw-text-2xl tw-font-semibold">
                    Article 1
                </h3>
                <p class="tw-text-center tw-text-gray-600 tw-mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!</p>
               
            </a>
            <a href="" class="tw-w-[350px] max-lg:tw-w-[300px] tw-h-[300px] tw-p-2 tw-flex tw-flex-col 
                        tw-place-items-center tw-gap-2 tw-rounded-lg tw-shadow-xl tw-overflow-clip">

                <div class="tw-rounded-md tw-overflow-hidden tw-h-[200px] tw-w-full">
                    <img src="./assets/images/home/sample.jpg" 
                        alt="article image" 
                        class="tw-w-full tw-h-full tw-object-cover"
                        srcset="">
                </div>
                <h3 class="tw-text-3xl max-md:tw-text-2xl tw-font-semibold">
                    Article 2
                </h3>
                <p class="tw-text-center tw-text-gray-600 tw-mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!</p>
               
            </a>
            <a href="" class="tw-w-[350px] max-lg:tw-w-[300px] tw-h-[300px] tw-p-2 tw-flex tw-flex-col 
                        tw-place-items-center tw-gap-2 tw-rounded-lg tw-shadow-xl tw-overflow-clip">

                <div class="tw-rounded-md tw-overflow-hidden tw-h-[200px] tw-w-full">
                    <img src="./assets/images/home/sample.jpg" 
                        alt="article image" 
                        class="tw-w-full tw-h-full tw-object-cover"
                        srcset="">
                </div>
                <h3 class="tw-text-3xl max-md:tw-text-2xl tw-font-semibold">
                    Article 3
                </h3>
                <p class="tw-text-center tw-text-gray-600 tw-mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, explicabo!</p>
               
            </a>
        </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
                    ">

        <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-2xl max-md:tw-text-xl tw-text-primary">Special Newsletter signup</h2>
            <h2 class="tw-text-xl max-md:tw-text-lg">Keep yourself updated</h2>

            <div class="tw-flex tw-h-[60px]  tw-p-2 
                        tw-overflow-hidden tw-gap-2 tw-place-items-center ">
                <input type="email" class="input tw-w-full tw-h-full 
                                             tw-p-2 tw-outline-none"
                        placeholder="email"
                    >
                <a class="btn  
                            tw-duration-[0.3s]
                            tw-transition-colors
                            "
                        href=""
                            >
                    Signup
                </a>   
            </div>

        </div>
    </section>

    <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-text-black
                    tw-mt-auto
                    ">
        <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" srcset="" class="tw-max-w-[120px]">
            <div>
                2 Lord Edward St,   
                <br>
                D02 P634,
                <br>
                United Kingdom
            </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://instagram.com/" class="tw-w-[40px] tw-h-[40px]" aria-label="Instagram">
                   <i class="bi bi-instagram"></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">
                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">Blogs</a>
                <a href="" class="footer-link">Privacy policy</a>
            </div>
        </div>


    </footer>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js" integrity="sha512-B1lby8cGcAUU3GR+Fd809/ZxgHbfwJMp0jLTVfHiArTuUt++VqSlJpaJvhNtRf3NERaxDNmmxkdx2o+aHd4bvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/ScrollTrigger.min.js" integrity="sha512-AY2+JxnBETJ0wcXnLPCcZJIJx0eimyhz3OJ55k2Jx4RtYC+XdIi2VtJQ+tP3BaTst4otlGG1TtPJ9fKrAUnRdQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


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

</html>
```

**Css**

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

:root{

    --btn-color: #fdfdfd;/* button color*/
    --btn-bg: #155eef;/* button bg color*/

    --primary-text-color: #155eef;
    --link-hover: #155eef;
    --input-hover-bd-color: #155eef;
}


html {
    scroll-behavior: smooth;
    font-family: "Roboto", sans-serif;
}

header{
    /* background-color: #fff;
    color: #000; */
}


header > .collapsible-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: 10px;
    padding: 5px 10px;
    transition: background-color 0.5s, color 0.5s;
}


.header-links:hover {
    color: var(--link-hover);
}

.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: 6px;
    color: var(--btn-color);
    background-color: var(--btn-bg);
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
}

.btn:hover{

}

.btn:disabled{
    cursor: default;
}

.input{
    padding: 10px;
    background-color: transparent;
    border-radius: 6px;
    /* outline: none; */
    min-width: 100px;
    border: 2px solid #818080;
    transition: border 0.3s;
}

.input:active, .input:focus, .input:focus-within{
    border: 2px solid var(--input-hover-bd-color);
}

.input-error{
    border-bottom: 3px solid #ff1e1e;
}

.input-error:focus-within{
    border-bottom: 3px solid #fd0101;
}


.message-container{
    /* container used to display message */
    border: 3px solid #c6e1f5;
    background-color: #d7edf8;
    color: #043893;
    width: 100%;
    max-width: 450px;
    border-radius: 5px;
    min-height: 50px;
    padding: 5px 10px;
}

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

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

.footer-link:hover{
    color: #483cf4;
}


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

.review-card{
    box-shadow: 0px 2px 4px #757474a0;
    border-radius: 15px;
    /* width: 200px; */
    /* height: 550px; */
    padding: 10px;
}

/* --------- collapsible div ---------- */
.collapsible {
    background-color: #f3f0f0;
    color: #2b2929;
    /* cursor: pointer; */
    padding: 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: 0.4s;
}

/* Style for the collapsible content */
.content {
    padding: 0 18px;
    /* display: none; */
    height: 0px;
    overflow: hidden;
    background-color: transparent;
    transition: height 0.5s;
    text-align: justify;
    margin-top: 10px;
}

.collapsible .active,
.collapsible:hover {
    /* background-color: #dedddd; */
}

@media not all and (min-width: 1024px) {
    header .collapsible-header {
        position: fixed;
        right: 0px;
        flex-direction: column;
        opacity: 0;
        height: 100vh;
        min-height: 100vh;
        height: 100dvh;
        width: 0vw;
        justify-content: space-between;
        padding: 5px;
        padding-top: 5%;
        padding-bottom: 5%;
        place-items: end;
        background-color: #ffffff;
        color: #000000;
        overflow-y: auto;
        box-shadow: 2px 0px 3px #000;
    }

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