Shihabiiuc Logo Shihabiiuc
Back to Blog

Create a landing page using HTML, CSS & JS (source code included)

A landing page is a great opportunity to get leads and make sales. It also helps the visitors to navigate through different content of your website. Your prospects get a clear idea about what you do and why they should interact with you. This post will show you how to create a perfect landing page using only HTML, CSS & a small amount of JavaScript. I also have added a link to download the full template.

Before you get started, see the live demo of the finished page that you’re going to build.

Live Preview »

Did you like it (live preview)? Let’s get started.

Different Ways to Create a Landing Page

There are many tools to create landing pages, such as Unbounce, WordPress, Thrive Architect, and Leadpages. However, most of them are paid and can be expensive.

In this post, you’ll build a completely free landing page that works similarly to premium builders—and may even offer better performance due to its lightweight, static design.

You’ll also need an email marketing platform like MailChimp, ActiveCampaign, Drip, or AWeber. This tutorial uses MailChimp, which is free for up to 2,000 subscribers, but you can choose any platform you prefer.

You need the account in order to collect emails as you see in the screenshot above.

But if you’re not collecting emails, you don’t need it.

Project structure

landing-page/                (root folder)
│
├── index.html
├── style.css
├── style.scss
├── favicon.ico             (site icon)
│
├── img/                    (images folder)
│   └── social-icons/       (social media icons)
│
└── js/                     (JavaScript files)

I used the above simple project structure but you can modify if you’re working on an existing project.

Do you need web design help? Feel free to reach out.

I am a freelance web developer helping other developers, designers, and clients. If you need web design-related help, feel free to reach out to me. Always a reasonable price and easy to communicate with.

Contact me on Fiverr See other options

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- GOOGLE FONTS -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant&family=Jost:wght@700&display=swap" rel="stylesheet">
  <!-- GOOGLE FONTS END -->
  <link rel="stylesheet" href="style.css">
  <title>Landing Page Template</title>
</head>
<body>
  <section id="header">
    <nav class="nav">
      <div class="nav-logo">
        <a href="index.html">
          <img src="img/logo.png" alt="logo">
        </a>
      </div>

      <button id="menu" class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </button>

      <div class="nav-links">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#subscribe">Subscribe</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
    </nav><!-- .site-header -->
  </section>

  <section class="banner">
    <div class="container">
      <div class="half">
        <h1>Adipisicing nesciunt harum molestias molestiae facere</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet error eius quas, obcaecati hic asperiores odio nostrum sunt quasi aliquid repellat nobis excepturi.</p>
      </div>
      <div class="half last">
        <img src="./img/landing-page-banner.jpg" alt="">
      </div>
    </div>
  </section><!-- .banner -->

  <section class="optin" id="subscribe">
    <h2>Subscribe to our newsletter</h2>
    <div class="container">
      <div id="mc_embed_shell">
        <div id="mc_embed_signup">
            <form action="https://shihabiiuc.us14.list-manage.com/subscribe/post?u=79bca784b829cc2cbfa76dbd2&amp;id=6a5ff315f3&amp;f_id=00ca75e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group"><input type="email" name="EMAIL" placeholder="Enter your email" class="required email" id="mce-EMAIL" required="" value=""></div>
                <div id="mce-responses" class="clear foot">
                    <div class="response" id="mce-error-response" style="display: none;"></div>
                    <div class="response" id="mce-success-response" style="display: none;"></div>
                </div>
            <div aria-hidden="true" style="position: absolute; left: -5000px;">
                /* real people should not fill this in and expect good things - do not remove this or risk form bot signups */
                <input type="text" name="b_79bca784b829cc2cbfa76dbd2_6a5ff315f3" tabindex="-1" value="">
            </div>
                <div class="optionalParent">
                    <div class="clear foot">
                        <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe">
                    </div>
                </div>
            </div>
        </form>
        </div>
        <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='MMERGE1';ftypes[1]='text';fnames[2]='MMERGE2';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script></div>

    </div><!-- .container -->
  </section><!-- .optin -->

  <section class="usefulness">
    <div class="container">
      <div class="item animated-element">
        <img src="./img/1.svg" alt="enter your alt text">
        <p>Consectetur nobis</p>
      </div><!-- .item -->
      <div class="item animated-element">
        <img src="./img/2.svg" alt="enter your alt text">
        <p>Delectus peleniti</p>
      </div><!-- .item -->
      <div class="item animated-element">
        <img src="./img/3.svg" alt="enter your alt text">
        <p>Laboriosam ametsed</p>
      </div><!-- .item -->
      <div class="item animated-element">
        <img src="./img/4.svg" alt="enter your alt text">
        <p>Sapiente eligendio</p>
      </div><!-- .item -->
    </div><!-- .container -->
  </section><!-- .usefulness -->

  <section class="features" id="features">
    <div class="container">
      <div class="item">
        <p>Amet consectetur adipisicing elit mumquam deleniti sunt distinctio iusto assumenda deserunt. Impedit poraro nostrum vitaead blanditiis amet eligendi aspernatur repellendus officiis, nam omnis officia necessitatibus.</p>
      </div><!-- .item -->
      <div class="item">
        <img src="./img/landing-page-features.jpg" alt="your meaningful alt text">
      </div><!-- .item -->
      <div class="item">
        <p>Dolorsit amet consectetur adipisicing elit. Aliquam sed hic molestiae iusto. Aspernatur totam est adipisci quo, perferendis doloremque corrupti quas. Pluptate nobis suntorporis magnam dolore adipisicing elit mumquam deleniti.</p>
      </div><!-- .item -->
      <div class="item">
        <p>Lorem ipsum dolor sitamet consectetur adipisicing elit. Eaque impedit voluptate veniam odit fugiat molestias praesentium tenetur debitis earum. Mollitia fugit deleniti voluptates natus quosea labore possimus harum.</p>
      </div><!-- .item -->
      <div class="item">
        <p>Possimus dolor corporis inventore officiis ducimus adipisci totam cupiditate facere vitae ab ut ratione veniam dolorum magnam nemoerror dolores repudiandae sunt. Repellat mollitia atque suntea quiamodi pariatur quaerat minima.</p>
      </div><!-- .item -->
    </div><!-- .container -->
  </section><!-- .features -->

  <section class="testimonials">
    <h2>Testimonials</h2>
  <div class="container">
    <div class="item">
      <blockquote>
        <img class="ratings" src="./img/star-ratings.png" alt="star ratings">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque fugit vel quae ab beatae blanditiis aspernatur corporis ex nesciunt. Distinctio deserunt consequuntur culpa ea quisquam quibusdam iure enim, dolorum quos.
      </blockquote>
      <img src="./img/photo-1.jpg" alt="photo">
      <p>John Doe, Fitness Instructor, California.</p>
    </div>  <!-- .item -->
    <div class="item">
      <blockquote>
        <img class="ratings" src="./img/star-ratings.png" alt="star ratings">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque fugit vel quae ab beatae blanditiis aspernatur corporis ex nesciunt. Distinctio deserunt consequuntur culpa ea quisquam quibusdam iure enim, dolorum quos.
      </blockquote>
      <img src="./img/photo-2.jpg" alt="photo">
      <p>Jane Lave, Therapist, Vancouver, CA.</p>
    </div>  <!-- .item -->
    <div class="item">
      <blockquote>
        <img class="ratings" src="./img/star-ratings.png" alt="star ratings">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque fugit vel quae ab beatae blanditiis aspernatur corporis ex nesciunt. Distinctio deserunt consequuntur culpa ea quisquam quibusdam iure enim, dolorum quos.
      </blockquote>
      <img src="./img/photo-3.jpg" alt="photo">
      <p>Vladimir Putin, Doctor, California.</p>
    </div>  <!-- .item -->
    <div class="item">
      <blockquote>
        <img class="ratings" src="./img/star-ratings.png" alt="star ratings">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque fugit vel quae ab beatae blanditiis aspernatur corporis ex nesciunt. Distinctio deserunt consequuntur culpa ea quisquam quibusdam iure enim, dolorum quos.
      </blockquote>
      <img src="./img/photo-4.jpg" alt="photo">
      <p>Valeriya, Lawyer, California.</p>
    </div>  <!-- .item -->
    <div class="item">
      <blockquote>
        <img class="ratings" src="./img/star-ratings.png" alt="star ratings">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque fugit vel quae ab beatae blanditiis aspernatur corporis ex nesciunt. Distinctio deserunt consequuntur culpa ea quisquam quibusdam iure enim, dolorum quos.
      </blockquote>
      <img src="./img/photo-1.jpg" alt="photo">
      <p>John Doe, Fitness Instructor, California.</p>
    </div>  <!-- .item -->
    <div class="item">
      <blockquote>
        <img class="ratings" src="./img/star-ratings.png" alt="star ratings">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque fugit vel quae ab beatae blanditiis aspernatur corporis ex nesciunt. Distinctio deserunt consequuntur culpa ea quisquam quibusdam iure enim, dolorum quos.
      </blockquote>
      <img src="./img/photo-2.jpg" alt="photo">
      <p>Jane Lave, Therapist, Vancouver, CA.</p>
    </div>  <!-- .item -->
  </div>    <!-- .full-width-wrapper -->
</section>  <!-- .testimonials -->

<section class="showcase">
  <h2>Consectetur adipisicing elitsit 🌲</h2>
  <div class="container">
    <div class="col">
      <h3>Anventore officis</h3>
      <img src="./img/home.jpg" alt="enter your alt text">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id repellat, amet officia aliquid ad dicta quia. Eveniet fugiat temporibus deleniti molestiae praesentium laborum voluptatem? Architecto mollitia repellat expedita incidunt officiis.</p>
    </div>
    <div class="col">
      <h3>Pluptate nobis</h3>
      <img src="./img/retirement-planning.jpg" alt="enter your alt text">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis amet vel quaerat autem sed excepturi animi praesentium est dolores ad reiciendis quibusdam, at maxime minus explicabo officia ducimus sit. Necessitatibus.</p>
    </div>
    <div class="col">
      <h3>Amet consectetur</h3>
      <img src="./img/lawn.jpg" alt="enter your alt text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam delectus culpa facere aliquid alias labore. Perspiciatis nobis distinctio mollitia delectus repudiandae nisi non ipsam, pariatur aliquid expedita omnis facilis voluptate.</p>
    </div>
  </div>
</section><!-- .showcase -->

<section class="faq" id="faq">
  <h2>FAQ</h2>
  <div class="container">
    <div class="item">
      <h3 class="accordion">Consectetur adipisicing elittaque quaerat nostrum esse?</h3>
      <div class="accordion-content">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem quae dolore labore. Amet consectetur adipisicing elit mumquam deleniti sunt distinctio iusto assumenda deserunt. Impedit poraro nostrum vitaead blanditiis amet eligendi aspernatur repellendus officiis, nam omnis officia necessitatibus.</p>
        <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt labore dolore magna aliqua.</p>
      </div>
    </div>

    <div class="item">
      <h3 class="accordion">Nostrud exercitation ullamco laboris nisi?</h3>
      <div class="accordion-content">
        <p>Ponsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
        <p>Dolorsit amet consectetur adipisicing elit. Aliquam sed hic molestiae iusto. Aspernatur totam est adipisci quo, perferendis doloremque corrupti quas. Pluptate nobis suntorporis magnam dolore adipisicing elit mumquam deleniti.</p>
      </div>
    </div>

    <div class="item">
      <h3 class="accordion">Aliquip exea commodo consequat?</h3>
      <div class="accordion-content">
        <p>Adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Possimus dolor corporis inventore officiis ducimus adipisci totam cupiditate facere vitae ab ut ratione veniam dolorum magnam nemoerror dolores repudiandae sunt. Repellat mollitia atque suntea quiamodi pariatur quaerat minima.</p>
      </div>
    </div>
  </div> <!--.container -->
</section><!-- .faq -->

<!-- FOOTER -->
<footer class="footer">
  <div class="container main-content-area">
    <div class="holder">
      <h3>popular features</h3>
      <ul>
        <li><a href="#">All Products and Features</a></li>
        <li><a href="#">Free Meeting Scheduler App</a></li>
        <li><a href="#">Social Media Tools</a></li>
        <li><a href="#">Email Tracking Software</a></li>
        <li><a href="#">Sales Email Automation</a></li>
        <li><a href="#">Ads Software</a></li>
        <li><a href="#">Email Marketing Software</a></li>
        <li><a href="#">Lead Management Software</a></li>
        <li><a href="#">Pipeline Management Tools</a></li>
        <li><a href="#">Free Website Builder</a></li>
        <li><a href="#">Sales Email Templates</a></li>
      </ul>
    </div><!-- .holder -->
    <div class="holder">
      <h3>Free Tools</h3>
      <ul>
        <li><a href="#">password generator</a></li>
        <li><a href="#">Username generator</a></li>
        <li><a href="#">Keyboard counter</a></li>
        <li><a href="#">Word counter</a></li>
        <li><a href="#">30 minutes timer</a></li>
        <li><a href="#">Help Desk Software</a></li>
        <li><a href="#">Free Online Form Builder</a></li>
        <li><a href="#">Free Chatbot Builder</a></li>
        <li><a href="#">Free Live Chat Software</a></li>
        <li><a href="#">Marketing Analytics</a></li>
      </ul>
    </div><!-- .holder -->
    <div class="holder">
      <h3>Company</h3>
      <ul>
        <li><a href="#">About us</a></li>
        <li><a href="#">Career</a></li>
        <li><a href="#">Management team</a></li>
        <li><a href="#">Board of directors</a></li>
        <li><a href="#">Investor relations</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Partner programs</a></li>
        <li><a href="#">Affiliate programs</a></li>
      </ul>
    </div><!-- .holder -->
    <div class="holder">
      <h3>Services</h3>
      <ul>
        <li><a href="#">Website design</a></li>
        <li><a href="#">Website development</a></li>
        <li><a href="#">WordPress development</a></li>
        <li><a href="#">PHP & Laravel</a></li>
        <li><a href="#">Node & React</a></li>
        <li><a href="#">Search engine optimization</a></li>
        <li><a href="#">Blog content creation</a></li>
        <li><a href="#">Custom software development</a></li>
      </ul>
    </div><!-- .holder -->
  </div><!-- .container -->
  <div class="container social-media-links">
    <ul class="list">
      <li><a href="#"><img src="./img/social-icons/facebook.png" alt="facebook"></a></li>
      <li><a href="#"><img src="./img/social-icons/instagram.png" alt="instagram"></a></li>
      <li><a href="#"><img src="./img/social-icons/youtube.png" alt="youtube"></a></li>
      <li><a href="#"><img src="./img/social-icons/twitter.png" alt="twitter"></a></li>
      <li><a href="#"><img src="./img/social-icons/linkedin.png" alt="linkedin"></a></li>
      <li><a href="#"><img src="./img/social-icons/medium.png" alt="medium"></a></li>
      <li><a href="#"><img src="./img/social-icons/tiktok.png" alt="tiktok"></a></li>
    </ul>
  </div><!-- .container social-media-links -->
  <div class="copyright">
    <a href="#"><img src=./img/logo.png alt="logo"></a>
    <p>Copyright © 2023 Your company name.</p>
    <ul>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Terms & Conditions</a></li>
      <li><a href="#">Refund Policy</a></li>
    </ul>
  </div><!-- .copyright -->
</footer>


  <script src="js/script.js"></script>
</body>
</html>

CSS

@charset "UTF-8";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Cormorant", serif;
  font-size: 16px;
  font-weight: 400;
  background-color: #222;
}

img {
  max-width: 100%;
}

section {
  padding: 90px 15px;
}

h1 {
  font-size: 30px;
}
@media (min-width: 768px) {
  h1 {
    font-size: 50px;
  }
}

h2 {
  font-size: 26px;
}
@media (min-width: 768px) {
  h2 {
    font-size: 40px;
  }
}

h3 {
  font-size: 22px;
}
@media (min-width: 768px) {
  h3 {
    font-size: 30px;
  }
}

h4,
h5,
h6 {
  font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Jost", sans-serif;
  font-weight: 700;
  margin: 10px 0;
  line-height: 1.4;
  color: #222222;
}

p {
  font-size: 1.4em;
  margin: 5px 0 20px;
  line-height: 1.7;
  color: #000000;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}

.animated-element {
  opacity: 0;
}

#header {
  padding: 0;
  margin: 0;
  background-color: #193549;
}

.nav {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 15px 0;
}
@media screen and (min-width: 1250px) {
  .nav {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 15px 15px;
  }
}
.nav .nav-logo {
  -ms-flex-item-align: start;
  align-self: flex-start;
  padding: 10px 5px 5px;
}
.nav .nav-logo a img {
  max-width: 200px;
  height: auto;
}
@media screen and (min-width: 768px) {
  .nav .nav-logo a img {
    max-width: 314px;
    height: auto;
  }
}
.nav .nav-links {
  display: none;
  width: 100%;
}
@media screen and (min-width: 1250px) {
  .nav .nav-links {
    display: block;
  }
}
.nav .nav-links ul {
  -webkit-animation: fadeIn 2s ease-in-out;
  animation: fadeIn 2s ease-in-out;
  position: absolute; /* to prevent content pushing down */
  width: 100%;
  background-color: rgba(222, 240, 255, 0.95);
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
@media (min-width: 1250px) {
  .nav .nav-links ul {
    position: static;
    background-color: transparent;
  }
}
@media screen and (min-width: 1250px) {
  .nav .nav-links ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
.nav .nav-links ul li {
  position: relative; /* to prevent content pushing down*/
  list-style: none;
  border-bottom: 1px solid #c7e5fc;
  border-top: 1px solid #f0f8ff;
}
@media (min-width: 1250px) {
  .nav .nav-links ul li {
    position: static;
  }
}
@media (min-width: 1250px) {
  .nav .nav-links ul li {
    border: none;
  }
}
.nav .nav-links ul li a {
  font-size: 1.3em;
  text-transform: uppercase;
  font-family: "Jost", sans-serif;
  font-weight: 700;
  color: #7f53ac;
  letter-spacing: 1.2px;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
}
.nav .nav-links ul li:hover {
  background-color: #efe0ff;
}
.nav button#menu.hamburger {
  position: absolute;
  width: 50px;
  height: 44px;
  cursor: pointer;
  background: transparent;
  border: none;
  display: block;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (min-width: 1250px) {
  .nav button#menu.hamburger {
    display: none;
  }
}
.nav button#menu.hamburger span {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
.nav .hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #ffffff;
  border-radius: 4px;
}
.nav .hamburger span:nth-of-type(1) {
  top: 0;
}
.nav .hamburger span:nth-of-type(2) {
  top: 20px;
}
.nav .hamburger span:nth-of-type(3) {
  bottom: 0;
}
.nav #menu.active span:nth-of-type(1) {
  width: 45%;
  -webkit-transform: translate3d(2px, 10px, 0) rotate(405deg);
  transform: translate3d(2px, 10px, 0) rotate(405deg);
}
.nav #menu.active span:nth-of-type(2) {
  -webkit-transform: translate3d(-1px, 0, 0) rotate(-45deg);
  transform: translate3d(-1px, 0, 0) rotate(-45deg);
}
.nav #menu.active span:nth-of-type(3) {
  width: 45%;
  -webkit-transform: translate3d(23px, -9px, 0) rotate(405deg);
  transform: translate3d(23px, -9px, 0) rotate(405deg);
}

.nav-links.active {
  display: block;
}

.banner {
  background-color: #000000;
  background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
}
.banner .container {
  display: block;
}
@media (min-width: 1200px) {
  .banner .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}
.banner .container .half {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
}
.banner .container .half h1 {
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn 2s;
}
.banner .container .half p {
  color: #ffffff;
  -webkit-animation: fadeInUp 2s;
  animation: fadeInUp 2s;
}
.banner .container .half.last {
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
}
.banner .container .half.last img {
  max-width: calc(100% - 120px);
  display: block;
  margin: 60px auto;
  -webkit-animation: imgRotation ease 2s;
  animation: imgRotation ease 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@media (min-width: 768px) {
  .banner .container .half.last img {
    max-width: 60%;
    margin: 20% auto;
  }
}
@media (min-width: 1200px) {
  .banner .container .half.last img {
    max-width: calc(100% - 70px);
    display: inline;
  }
}

.optin {
  background-color: #ffffff;
  background-image: linear-gradient(315deg, #e0f2ff 0%, #f2f2f2 74%);
}
.optin h2 {
  text-align: center;
}
.optin .container {
  background-color: #daeaf9;
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 20px;
  border-radius: 7px 17px 0 10px;
  -webkit-box-shadow: 2px 2px 1px #ea4335;
  box-shadow: 2px 2px 1px #ea4335;
}
.optin .container form {
  font-family: "Jost", sans-serif;
  width: 100%; /* for mobile and smaller screens */
  margin: 0 auto;
}
@media (min-width: 768px) {
  .optin .container form {
    width: 700px;
  }
}
.optin .container form .mc-field-group,
.optin .container form .optionalParent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.optin .container form input[type="text"],
.optin .container form input[type="email"],
.optin .container form textarea {
  font-family: "Cormorant", serif;
  font-size: 1.2em;
  width: 500px;
  max-width: 100%;
  padding: 15px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}
.optin .container form input::-webkit-input-placeholder {
  font-family: "Cormorant", serif;
  font-size: 1.2em;
}
.optin .container form input::-moz-placeholder {
  font-family: "Cormorant", serif;
  font-size: 1.2em;
}
.optin .container form input:-ms-input-placeholder {
  font-family: "Cormorant", serif;
  font-size: 1.2em;
}
.optin .container form input::-ms-input-placeholder {
  font-family: "Cormorant", serif;
  font-size: 1.2em;
}
.optin .container form input::placeholder {
  font-family: "Cormorant", serif;
  font-size: 1.2em;
}
.optin .container form input[type="text"]:focus,
.optin .container form input[type="email"]:focus,
.optin .container form textarea:focus {
  outline: none;
  border-color: #007bff;
  -webkit-box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.optin .container form input[type="submit"] {
  padding: 8px 60px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
  font-size: 1.3em;
  text-transform: uppercase;
  font-family: "Jost", sans-serif;
  margin: 30px 0 0;
}
.optin .container form input[type="submit"]:hover {
  background-color: #0069d9;
}

.usefulness {
  background-color: #193549;
}
.usefulness .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.usefulness .container .item {
  background-color: #122736;
  border: 1px solid #0e212e;
  border-radius: 4px;
  padding: 20px 10px;
}
.usefulness .container .item img {
  display: grid;
  margin: 0 auto;
}
.usefulness .container .item p {
  font-family: "Jost", sans-serif;
  font-size: 1.1em;
  text-align: center;
  margin: 10px 0 0;
  color: #ffffff;
  text-transform: uppercase;
}
.usefulness .container .item.animate {
  -webkit-animation: fadeIn 2s ease-in;
  animation: fadeIn 2s ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.features {
  background-color: #ffffff;
}
.features .container {
  display: grid;
  grid-template-columns: 1fr;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}
@media (min-width: 1200px) {
  .features .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.features .container .item {
  background-color: #dee1e6;
  padding: 20px;
}
.features .container .item:nth-child(2) {
  display: grid;
  -ms-flex-line-pack: center;
  align-content: center;
  padding: 0;
}
@media (min-width: 768px) {
  .features .container .item:nth-child(2) {
    grid-row: span 2;
  }
}
.features .container .item:nth-child(2) img {
  margin: 0 auto;
}
.features .container .item p {
  color: #193549;
}
.features .container .item img {
  max-width: 100%;
}

.testimonials {
  background-color: #b2e7fb;
  padding: 90px 15px;
}
.testimonials h2 {
  text-align: center;
}
.testimonials .container {
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .testimonials .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 20px;
  }
}
.testimonials .container .item {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
}
.testimonials .container .item img:not(.ratings) {
  border: 3px solid #02443d;
  border-radius: 50%;
  max-width: 100px;
  display: block;
  margin: 0 auto;
}
.testimonials .container .item .ratings {
  display: block;
  margin: 0 auto 15px;
}
.testimonials .container .item p {
  text-align: center;
}
.testimonials .container .item blockquote {
  font-size: 1.2em;
}

.showcase {
  background-color: #ffffff;
}
.showcase h2 {
  max-width: 1400px;
  margin: 0 auto;
}
.showcase .container {
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .showcase .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-column-gap: 60px;
    -moz-column-gap: 60px;
    column-gap: 60px;
  }
}
.showcase .container .col {
  margin: 30px 15px;
  background-color: #e6f7ff;
  border: 1px solid #17b5ff;
}
@media (min-width: 768px) {
  .showcase .container .col {
    margin: 0;
  }
}
.showcase .container .col h3 {
  margin: 15px 0 5px 20px;
  color: #ba0000;
}
.showcase .container .col img {
  width: 100%;
}
.showcase .container .col p {
  margin: 15px 20px;
}

.faq {
  background-color: #f7f6f6;
}
.faq h2 {
  max-width: 900px;
  margin: 0 auto;
}
.faq .container {
  max-width: 900px;
  margin: 0 auto;
}
.faq .container .item {
  border: 1px solid #dee2e6;
}
.faq .container .item:first-child {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.faq .container .item:last-child {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}
.faq .container .accordion {
  margin: 0;
  color: #222222;
  cursor: pointer;
  padding: 1.225rem;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  font-size: 1.125rem;
}
.faq .container .accordion:after {
  content: "∟";
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: left;
  transform-origin: left;
  float: right;
  font-size: 20px;
  color: #000000;
  -webkit-transition: -webkit-transform 0.2s ease-in;
  transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
  transition:
    transform 0.2s ease-in,
    -webkit-transform 0.2s ease-in;
}
.faq .container .active,
.faq .container .container .accordion:hover {
  background-color: #cfe2ff;
  color: #0a58ca;
}
.faq .container .active:after {
  content: "∟";
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  font-size: 20px;
}
.faq .container .accordion-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.4s ease-in-out;
  transition: max-height 0.4s ease-in-out;
  font-size: 1rem;
  line-height: 1.7;
}

footer.footer {
  font-family: Georgia, serif;
  background-color: #213343;
  padding: 90px 15px;
}
footer.footer .container {
  max-width: 1400px;
  margin: 0 auto;
}
footer.footer .main-content-area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  grid-gap: 20px;
}
footer.footer .main-content-area .holder h3 {
  color: #ffffff;
  text-transform: capitalize;
  font-size: 1.5em;
  margin: 0;
}
footer.footer .main-content-area .holder ul {
  padding: 0;
}
footer.footer .main-content-area .holder ul li {
  list-style: none;
}
footer.footer .main-content-area .holder ul li a {
  line-height: 1.7;
  font-size: 0.85rem;
  font-weight: bold;
  color: #b6c7d6;
  text-decoration: none;
  text-transform: capitalize;
  padding: 0.3rem 0;
  display: inline-block;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
footer.footer .main-content-area .holder ul li a:hover {
  text-decoration: underline;
  color: #95ecec;
}
footer.footer .social-media-links {
  position: relative;
  margin-top: 60px;
}
footer.footer .social-media-links ul.list {
  max-width: 60%;
  margin: 0 auto;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
footer.footer .social-media-links ul.list::before {
  width: 20%;
  position: absolute;
  content: "";
  border-top: 1px solid #ff0000;
  top: 50%;
  left: 0;
}
footer.footer .social-media-links ul.list::after {
  width: 20%;
  position: absolute;
  content: "";
  border-top: 1px solid #ff0000;
  top: 50%;
  right: 0;
}
footer.footer .social-media-links ul.list li {
  list-style: none;
}
footer.footer .social-media-links ul.list li a img {
  max-width: 20px;
}
@media (min-width: 768px) {
  footer.footer .social-media-links ul.list li a img {
    max-width: 30px;
  }
}
footer.footer .copyright {
  font-family: Verdana, sans-serif;
  margin-top: 45px;
  text-align: center;
}
footer.footer .copyright img {
  max-width: 200px;
}
footer.footer .copyright p {
  color: #b6c7d6;
  font-weight: bold;
  font-size: 0.9em;
}
footer.footer .copyright ul {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
footer.footer .copyright ul li {
  list-style: none;
}
footer.footer .copyright ul li a {
  color: #ffffff;
  font-weight: bold;
  -webkit-transition: color 0.4s ease-in-out;
  transition: color 0.4s ease-in-out;
  margin-right: 20px;
}
footer.footer .copyright ul li a:hover {
  color: #95ecec;
  text-decoration: none;
}

@-webkit-keyframes imgRotation {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transform-origin: center;
    transform-origin: center;
  }
}

@keyframes imgRotation {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transform-origin: center;
    transform-origin: center;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    padding-top: 60px;
    opacity: 0;
  }
  to {
    padding-top: 0;
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    padding-top: 60px;
    opacity: 0;
  }
  to {
    padding-top: 0;
    opacity: 1;
  }
}

JavaScript

// NAVIGATION MENU
document.addEventListener("DOMContentLoaded", function () {
  const hamburgers = document.querySelectorAll(".hamburger");
  const mobileNavs = document.getElementsByClassName("nav-links")[0];

  for (var i = 0; i < hamburgers.length; i++) {
    hamburgers[i].addEventListener("click", function () {
      this.classList.toggle("active");
      mobileNavs.classList.toggle("active");
    });
  }
});

// ANIMATE WHEN VIEWPORT COMES TO THE SCREEN - IT'S ADDING .ANIMATE CLASS WHEN THE VIEWPORT COCMES BASED ON THE .ANIMATED-ITEM CLASS
// Function to handle the intersection of elements
function handleIntersection(entries, observer) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("animate");
      // Stop observing the element after it's animated
      observer.unobserve(entry.target);
    }
  });
}
// Create an Intersection Observer
const observer = new IntersectionObserver(handleIntersection, {
  root: null, // Use the viewport as the root
  rootMargin: "0px", // Customize the root margin as needed
  threshold: 0.5, // Adjust the threshold as needed (0.5 means at least 50% of the element must be in the viewport)
});
// Get all elements with the 'animated-element' class and observe them
const animatedElements = document.querySelectorAll(".animated-element");
animatedElements.forEach((element) => {
  observer.observe(element);
});

// ACCORDION
var accdr = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < accdr.length; i++) {
  accdr[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

Download images

You can download all the images from the link below.

Download Images »

If you have any questions or need help, feel free to contact me.

Do you need web design help? Feel free to reach out.

I am a freelance web developer helping other developers, designers, and clients. If you need web design-related help, feel free to reach out to me. Always a reasonable price and easy to communicate with.

Contact me on Fiverr See other options

Downoad/Clone the entire template from your terminal.

git clone https://github.com/shihabiiuc/landing-page.git

If you found this project helpful, please support me by hitting the 'Star' icon on my GitHub Repository. Please use the following link.

Github star indication

This post has ened above. Now everything is irrelated below.

Rewriting this Post after an Abduction

Injustice, Oppression, Fear is everywere. Going through a mental trauma this time (March 2026/June 2024). Losted everything, just trying to standup again. Here are my supporters.

I want Justice!