This content originally appeared on DEV Community and was authored by paul
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
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>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
@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;
}
}
This content originally appeared on DEV Community and was authored by paul
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
paul | Sciencx (2024-07-12T13:57:23+00:00) App landing page. Retrieved from https://www.scien.cx/2024/07/12/app-landing-page/
" » App landing page." paul | Sciencx - Friday July 12, 2024, https://www.scien.cx/2024/07/12/app-landing-page/
HARVARDpaul | Sciencx Friday July 12, 2024 » App landing page., viewed ,<https://www.scien.cx/2024/07/12/app-landing-page/>
VANCOUVERpaul | Sciencx - » App landing page. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/12/app-landing-page/
CHICAGO" » App landing page." paul | Sciencx - Accessed . https://www.scien.cx/2024/07/12/app-landing-page/
IEEE" » App landing page." paul | Sciencx [Online]. Available: https://www.scien.cx/2024/07/12/app-landing-page/. [Accessed: ]
rf:citation » App landing page | paul | Sciencx | https://www.scien.cx/2024/07/12/app-landing-page/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.