PaulHi all,
I created this free saas landing page.
Live site
You can check the live site here
features
- respnosive
- Framework independent: uses plain HTML css
- Uses tailwind for rapid development.
Screenshot
Source code:
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celestial SaaS</title>
<meta name="description" content="">
<link rel="shortcut icon" href="./assets/logo/logo1.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-[#ffffff] tw-flex tw-flex-col">
<div class="tw-flex tw-absolute tw-top-0 tw-w-full tw-h-[150px]">
<div class="header-gradient tw-w-full tw-h-full">
</div>
</div>
<header class="tw-flex tw-w-full tw-z-20
tw-h-[60px]
md:tw-justify-around
tw-absolute tw-top-0 tw-px-[5%]
max-md:tw-px-4
max-md:tw-mr-auto
tw-bg-opacity-0
tw-text-black
">
<a class="tw-w-[50px] tw-h-[50px] tw-p-[4px]" href="">
<img src="./assets/logo/logo1.png"
alt="logo" class="tw-w-full tw-h-full tw-object">
</a>
<div class="collapsible-header animated-collapse max-md:tw-shadow-md"
id="collapsed-header-items"
>
<div class=" tw-w-max
tw-flex tw-gap-5 tw-h-full md:tw-mx-auto
md:tw-place-items-center
max-md:tw-place-items-end
tw-text-base max-md:tw-flex-col
max-md:tw-mt-[30px]
max-md:tw-gap-5
tw-text-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="">
company
</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-full
tw-bg-primary
tw-text-white
hover:tw-translate-x-2
tw-transition-transform
tw-duration-[0.3s]
"
>
<span>Get started</span>
<i class="bi bi-arrow-right"></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 tw-flex-col">
<div class="tw-flex tw-flex-col tw-place-content-center tw-items-center">
<div class="tw-text-6xl max-lg:tw-text-4xl tw-font-semibold
tw-leading-[80px] tw-text-center
max-md:tw-leading-snug tw-uppercase"
>
<span>
Re-imagining the Future
</span>
<br>
<span class="tw-text-primary">
of Software
</span>
</div>
<div class="tw-mt-10 tw-max-w-[450px] tw-p-2 tw-text-center 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 class="tw-flex tw-mt-6 tw-gap-4 tw-text-2xl reveal">
</div>
</div>
<div class="tw-w-full tw-flex tw-place-content-center
tw-place-items-center tw-overflow-hidden">
<div class="tw-relative tw-w-fit
tw-flex tw-place-items-center tw-place-content-center">
<div class="tw-overflow-hidden tw-flex
tw-max-w-[650px]
tw-max-h-[550px]
tw-min-h-[450px]
tw-min-w-[350px]
max-lg:tw-max-h-[320px]
max-lg:tw-min-h-[150px]
max-lg:tw-h-fit
max-lg:tw-w-[320px]
tw-rounded-2xl tw-shadow-xl">
<img src="./assets/images/home/dashboard.png"
alt="dashboard" class="tw-h-full tw-w-full
tw-object-cover max-lg:tw-object-contain"
>
</div>
</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
"
>
<div class="tw-flex tw-w-full tw-gap-10 tw-place-content-center ">
<!-- add the brands using your app -->
<div class="tw-w-[150px] tw-h-[30px]">
<img src="./assets/images/brand-logos/google.svg" alt="Google"
class="tw-w-full tw-h-full
tw-object-contain tw-grayscale
hover:tw-grayscale-0
tw-transition-colors
" srcset="">
</div>
<div class="tw-w-[150px] tw-h-[30px]">
<img src="./assets/images/brand-logos/microsoft.svg" alt="Microsoft"
class="tw-w-full tw-h-full tw-object-contain
tw-grayscale
hover:tw-grayscale-0
tw-transition-colors"
srcset="">
</div>
<div class="tw-w-[150px] tw-h-[30px]">
<img src="./assets/images/brand-logos/adobe.svg" alt="Adobe"
class="tw-w-full tw-h-full tw-object-contain tw-grayscale
hover:tw-grayscale-0
tw-transition-colors
" srcset="">
</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
"
>
<div class="tw-flex tw-flex-col tw-gap-5 tw-text-center tw-max-w-[750px]">
<h2 class="tw-text-4xl max-lg:tw-text-3xl tw-mt-10 tw-font-semibold ">
Simple.
<span class="tw-text-primary">Fast.</span>
Loved
</h2>
<div class=" tw-text-gray-700 ">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus consequatur odit exercitationem repellendus, recusandae ratione at tenetur, omnis dicta tempore dolor saepe quos doloremque tempora quibusdam. Aspernatur deserunt voluptatem aliquid.
</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">Core 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. Beatae, vero.
</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-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"
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/logo1.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="./index.js"></script>
</html>
index.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: #4f55c1;/* button bg color*/
--primary-text-color: #4f55c1;
--link-hover: #4f55c1;
--input-hover-bd-color: #4f55c1;
}
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-gradient{
background: rgb(206,174,212);
background: linear-gradient(83deg, #ceaed474 15%, #abd4e693 33%, #73edc097 79%, #8c91e86b 100%);
filter: blur(100px);
}
.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: 24px;
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: 25px;
/* 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;
}
}
Want more? Follow me on Github
