This content originally appeared on DEV Community and was authored by paul
Hi 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
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-11T06:28:32+00:00) SaaS landing page. Retrieved from https://www.scien.cx/2024/07/11/saas-landing-page/
" » SaaS landing page." paul | Sciencx - Thursday July 11, 2024, https://www.scien.cx/2024/07/11/saas-landing-page/
HARVARDpaul | Sciencx Thursday July 11, 2024 » SaaS landing page., viewed ,<https://www.scien.cx/2024/07/11/saas-landing-page/>
VANCOUVERpaul | Sciencx - » SaaS landing page. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/11/saas-landing-page/
CHICAGO" » SaaS landing page." paul | Sciencx - Accessed . https://www.scien.cx/2024/07/11/saas-landing-page/
IEEE" » SaaS landing page." paul | Sciencx [Online]. Available: https://www.scien.cx/2024/07/11/saas-landing-page/. [Accessed: ]
rf:citation » SaaS landing page | paul | Sciencx | https://www.scien.cx/2024/07/11/saas-landing-page/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.