DEV Community

loading...
Cover image for How To Make Landing page Using Html, CSS, and JavaScript

How To Make Landing page Using Html, CSS, and JavaScript

backlinkn profile image backlinkn Updated on ・18 min read

Would you like to create a responsive landing page using common HTML, CSS, JavaScript programming languages?
If your answer is yes, I will help you. I will show you how to create a Professional and Responsive Landing Page. I am Santanu Jana a web designer. I will show you the whole way with the help of my experience of the last five years and tell you how to create a landing page. Below I have shown you how to create a webpage and I have given below complete instructions on how to make this webpage. You can download everything you need to make this landing page by clicking the download button below. We hope you enjoy this page and that you can learn more from this article.
Alt TextAlt TextAlt TextAlt TextAlt Text

Demo: Click Here

Download Code: Click Here

Some important information about this landing page

  • It was originally created by me using HTML, CSS, and JavaScript programming code. While creating the landing page, I tried to write the necessary code very easily keeping in mind the new programmers. So that everyone can understand and make.
  • I have completely blacked out the background of this landing page and made the writing colors white. You can change it to your liking if you wish. This means that if you want, you can make the background white and the writing colors black.
  • There is a top menu bar that is completely fixed which means it will always be in the same place.
  • At the beginning of this page, you will get the option to subscribe by adding an email. Here your user will be able to follow your website using an email id and password.
  • Here is where to use the beautiful logo. You can also provide some information about your website below.
  • Then below you can give the link to some of your articles. This means that all the posts you have made have a place to show in the form of the protocol below.
  • Here are basically four posts I added. You can increase your choice if you want. Below you can give some information about yourself.
  • You will also be able to show your qualifications on the side. Here you can show in percentages what topics you are qualified on and how much they are. So that your user can understand how much knowledge you have on anything.
  • Then there's the drop-down menu. Here you can basically add some pages to your website. Basically, you can add contact us, about us, terms and conditions, privacy policy, etc. pages here. You can also link to your social media account.
  • Below I have used footer credits. This basically indicates who created this landing page or website. Here I basically gave my own name. You can add your own name here later if you want. I have shown below how to add.

How To Make This landing Page

Hope you are particularly interested in creating this landing page. If you want to learn how to create this landing page, follow the steps below.
First, you create an HTML file and a CSS file. To create HTML files, you need to open any text editor on your computer, such as Notepad.

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
         Add HTML Code 
      <script>
              Add JavaScript Code
      </script>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

After opening Notepad, you can copy and paste it into Notepad. Then rename to your liking and save by adding dot HTML. Then you create a CSS file. You have to open Notepad in the same way to create a CSS file. Then save it by adding dot CSS by adding rename of your choice without writing anything. Then you attach your CSS file to the HTML file. To do this, you need to copy the rename of your cis file and then paste it in the space above where the "CSS file name" is written. After doing so, you add the following codes to your HTML and CSS files.

Add HTML code to the project

The codes shown below are common HTML codes. You copy those codes and paste them in the structure above where the ad HTML is written.


<div class="smooth">
  <header>
    <h3>iOGO</h3>
    <ul>
      <li><a href="#one">Home</a></li>
      <li><a href="#two">About</a></li>
      <li><a href="#three">Services</a></li>
      <li><a href="#four">Reviews</a></li>
      <li><a href="#bottom">Contact</a></li>
    </ul>
  </header>
  <section id="one">
    <div class="content parallax">
      <div>
          <!--/*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/-->

        <h1>iOGO MEDiA</h1>
        <svg class="title">
          <text x="0" y="40">iOGO MEDiA</text>
          <path d="M 0 66 50 61"></path>
        </svg>
        <p class="lead">
          I hope you like this landing page. And you have learned how to create a webpage. If you encounter any other problems while creating this landing page, please let us know in the comments. I will try my best to help you as much as possible.
           <a class="leadlink" href="https://caniuse.com/#search=scroll-behavior" target="_blank">Can I use</a> site. 
        </p>
         <!--
         /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

      -->
        <p class="lead">
          And also added a parallax effect and logo animation, a sample of which you
           <a class="leadlink" href="https://codepen.io/andrejsharapov/pen/PVJrLO" target="blank">can find here.</a>
        </p>
      </div>
      <div class="blur">
        <form><img src="https://s.cdpn.io/profiles/user/2727382/80.jpg?1545923020"/>
          <input type="text" placeholder="Email:"/>
          <input type="text" placeholder="Password:"/><a class="button" href="#bottom">Follow me</a>
        </form>
      </div>
    </div>
  </section>
   <!--
          /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

      -->
  <section id="two">
    <h2>Section<span> two</span></h2>
    <p>I hope you like this landing page. And you have learned how to create a webpage. If you encounter any other problems while creating this landing page, please let us know in the comments. I will try my best to help you as much as possible.</p>
    <div class="blocks">
      <div class="block">
        <p>TEXT or ICON</p>
      </div>
      <div class="block">
        <p>TEXT or ICON</p>
      </div>
      <div class="block">
        <p>TEXT or ICON</p>
      </div>
      <div class="block">
        <p>TEXT or ICON</p>
      </div>
    </div>
     <!--
          /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

      -->
    <p>I hope you like this landing page. And you have learned how to create a webpage. If you encounter any other problems while creating this landing page, please let us know in the comments. I will try my best to help you as much as possible.</p>
  </section>
  <section id="three">
    <div class="grid g_two">
      <div>
        <h2>Section<span> three</span></h2>
        <p>I hope you like this landing page. And you have learned how to create a webpage. If you encounter any other problems while creating this landing page, please let us know in the comments. I will try my best to help you as much as possible.</p>
        <p>I hope you like this landing page. And you have learned how to create a webpage. If you encounter any other problems while creating this landing page, please let us know in the comments. I will try my best to help you as much as possible.</p>
        <p>I hope you like this landing page. And you have learned how to create a webpage. If you encounter any other problems while creating this landing page, please let us know in the comments. I will try my best to help you as much as possible.</p>
      </div>
      <div class="flex column">
        <div class="flex column">
          <div class="flex jcsb">
            <h4>Comunity</h4><span>77%</span>
          </div>
           <!--
        /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

      -->
          <progress value="77" max="100"></progress>
        </div>
        <div class="flex column">
          <div class="flex jcsb">
            <h4>Team and Developers</h4><span>65%</span>
          </div>
          <progress value="65" max="100"></progress>
        </div>
        <div class="flex column">
          <div class="flex jcsb">
            <h4>Marketing</h4><span>88%</span>
          </div>
          <progress value="88" max="100"></progress>
        </div>
         <!--
     /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

      -->
        <div class="flex column">
          <div class="flex jcsb">
            <h4>Design</h4><span>68%</span>
          </div>
          <progress value="68" max="100"></progress>
        </div>
      </div>
    </div>
  </section>
  <section id="four">
    <h2>Section<span> four</span></h2>
    <p>I hope you like this landing page. And you have learned how to create a webpage. If you encounter any other problems while creating this landing page, please let us know in the comments. I will try my best to help you as much as possible.</p>
    <div class="blocks">
      <div class="block">
        <h4>Author</h4>
        <p>I hope you like this landing page. And you have learned how to create a webpage. If you encounter any other problems while creating this landing page, please let us know in the comments. I will try my best to help you as much as possible.</p>
      </div>
       <!--
        /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

      -->
      <div class="block">
        <h4>Author</h4>
        <p>I hope you like this landing page. And you have learned how to create a webpage. If you encounter any other problems while creating this landing page, please let us know in the comments. I will try my best to help you as much as possible.</p>
      </div>
      <div class="dots">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </div>
  </section>
  <footer id="bottom">
    <div class="widgets">
      <h3>iOGO</h3>
       <!--
         /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

      -->
      <div class="widget">
        <h5 class="follow">Follow me</h5>
        <ul>
          <li><a href="https://dribbble.com/andrejsharapov" target="blank">Dribbble</a></li>
          <li><a href="https://codepen.io/andrejsharapov" target="blank">CodePen</a></li>
          <li><a href="https://twitter.com/andrejsharapov" target="blank">Twitter</a></li>
          <li><a href="https://www.behance.net/andrejsharapov" target="blank">Behance</a></li>
        </ul>
      </div>
      <div class="widget">
        <h5>Heading</h5>
        <ul>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
        </ul>
      </div>
      <!--
          /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

      -->
      <div class="widget">
        <h5>Heading</h5>
        <ul>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
        </ul>
      </div>
      <div class="widget">
        <h5>CONTACTS</h5>
        <ul>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
          <li>Text</li>
        </ul>
      </div>
       <!--
   /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/
      -->

    </div>
    <div class="copy">
      <p>
        &copy; 2019 with  <span>&#9829;</span> <a href="https://backlinkn.com/" target="_blank">Shantanu Jana</a></p><a href="#one">Scroll top &#x2191;</a>
    </div>
  </footer>
</div>
Enter fullscreen mode Exit fullscreen mode

Add CSS code

The following codes are CSS codes. You copy those codes. Then open your CSS file and paste all these codes in that place. Then save.

 str-style,
section#one .title text,
section#one .title path {
  stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;
}
*,
::before,
::after {
  box-sizing: border-box;
}
 /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

body {
  margin: 0;
  padding: 0 4px;
  height: 100vh;
  overflow: hidden;
  line-height: 1.5;
  font-family: 'Inconsolata', sans-serif;
  font-size: 62.5%;
  color: #fff;
  background-color: #1d1e22;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background-color: #1d1e22;
} 
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: #312d3c;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #df2359;
}
a {
  text-decoration: none;
  color: #fff;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

a:hover,
a.leadlink {
  color: #df2359;
}
h1,
h2,
header a {
  text-transform: uppercase;
} 
.smooth {
  margin: 0 auto;
  padding: 0 4px;
  padding-left: 8px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

header,
footer {
  position: relative;
  padding: 2em 3em;
  display: flex;
  align-items: center;
  font-size: 1rem;
}
header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  height: 10vh;
  background-color: #1d1e22;
} 
header h3 {
  position: relative;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  color: #df2359;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

header ul {
  list-style-type: none;
  padding: 0;
  margin: 1em 0;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
}
header ul li {
  position: relative;
  margin: 0 1em;
  transition: all 0.2s linear;
} 
header ul li a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: #fff;
}
header ul li::before {
  position: absolute;
  content: '';
  top: calc(100% + 4px);
  left: 0;
  width: 20px;
  height: 2px;
   /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

  background-color: #fff;
  transform-origin: 0 100%;
  transform: rotate(-5deg);
  transition: all 0.2s ease-out;
}
header ul li:hover::before {
  width: 100%;
  background-color: #df2359;
}
.grid {
  display: grid;
  grid-gap: 2em;
} 
.grid.g_two {
  grid-template-columns: 1fr minmax(300px, auto);
}
.flex {
  display: flex;
  width: 100%;
  align-items: center;
}
.flex.column {
  flex-flow: column wrap;
  justify-content: space-between;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

.jcsb {
  justify-content: space-between;
}
progress {
  position: relative;
  margin: 1em 0;
}
progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;

  max-width: 360px;
  height: 1px;
}
progress::-webkit-progress-bar {
  background-color: #666;
  border-radius: 1em;
}
progress::-webkit-progress-value {
  position: absolute;
  top: -2px;
  left: 0;
  background-color: #df2359;
  border-radius: 1em;
  height: 5px;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

section {
  position: relative;
  display: flex;
  min-height: 100vh;
  padding: 2em 3em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1rem;

  border-radius: 1em;
  background-color: #191a1d;
}
section:nth-child(odd) {
  background-color: #1d1e22;
}
section#one {
  background-image: url("https://andrejsharapov.github.io/iogo/src/header.jpg");
  background-position: center;
  background-size: cover;
  color: #fff;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

section#one h1 {
  visibility: hidden;
  opacity: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0;
}
section#one .title {
  min-width: 350px;
  max-height: 80px;
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  font-weight: 600;
} 
section#one .title text {
  letter-spacing: 2px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}
section#one .title path {
  stroke: #fff;
  stroke-width: 4;
  animation-delay: 1s;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

section#one::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(0deg, rgba(29,30,34,0.3), #1d1e22);
} 
section#two .blocks,
section#four .blocks {
  padding: 2em 0;
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}
section#two .blocks .block,
section#four .blocks .block {
  margin: 0 auto;
  display: flex;
  width: 23%;
  height: 150px;
   /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

  justify-content: center;
  align-items: center;
  border: 3px solid #312d3c;
  border-radius: 1em;
  background-color: #191a1d;
  transition: all 0.2s linear;
}
section#two .blocks .block:hover,
section#four .blocks .block:hover {
  transform: translateY(-10px);
  background-color: #312d3c;
} 
section#four .blocks .block {
  padding: 0.25em 1em;
  width: 49%;
  height: auto;
  flex-flow: column wrap;
  background-color: #191a1d;
}
section#four .dots {
  margin-top: 2em;
  display: flex;
  width: 25%;
  /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

  align-items: center;
  justify-content: space-around;
}
section#four .dot {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 2px solid #312d3c;
  border-radius: 50%;
  background-color: #191a1d;
}
section#four .dot:hover {
  transform: scale(1.1);
  background-color: #312d3c;
} 
section h2 {
  font-family: 'Montserrat', sans-serif;
}
section h2 span {
  color: #df2359;
}
.content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}
.content p.lead {
  font-size: 1.25rem;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

.content .blur {
  position: relative;
  overflow: hidden;
  margin: auto;
  margin-left: 2em;
  padding: 1em;
  width: 100%;
  height: 350px;
  border-radius: 0.35em;
}
.content .blur::before {
  position: absolute;
  content: '';
  top: -25%;
  left: -25%;
  /*display: flex;
  flex-direction: column;
  align-items: center;*/
  width: 150%;
  height: 150%;
  box-shadow: inset 0 0 0 600px rgba(255,255,255,0.3);
  filter: blur(10px);
}
form {
  position: relative;
  z-index: 3;
  padding: 1em;
  display: flex;
  width: 100%;
   /*game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border: 2px solid #fff;
  border-radius: 0.35em;
}
form img {
  width: 64px;
  height: 64px;
} 
form input {
  margin-bottom: 1em;
  min-height: 3em;
  font-size: 1em;
  color: #fff;
  border: 0;
  border-bottom: 2px solid #fff;
  background: none;
}
form input::placeholder {
  position: relative;
  top: 0;
  color: inherit;
  transition: all 0.2s linear;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

form input:focus {
  outline: none;
}
form input:focus::placeholder {
  top: -1.25em;
  font-size: 0.825rem;
}
form .button {
  position: relative;
  margin-top: 1em;
  padding: 1em 3em;
  text-transform: uppercase;
  display: block;
  font-size: 1rem;
  /* game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

  cursor: pointer;
  color: #fff;
  border: 0;
  border-radius: 0.35em;
  background-color: #df2359;
}
footer {
  padding-bottom: 1em;
  width: 100%;
  min-height: 35vh;
  flex-direction: column;
  justify-content: space-around;
  background-color: #191a1d;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

footer h3 {
  position: relative;
  font-family: 'Montserrat', sans-serif;
}
footer h3::before {
  position: absolute;
  content: '';
  top: calc(100% + 4px);
  left: 0;
  width: 20px;
  height: 2px;

  background-color: #df2359;
  transform-origin: 0 100%;
  transform: rotate(-5deg);
  transition: all 0.2s ease-out;
}
footer h5 {
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
footer h5.follow {
  color: #df2359;
}
footer ul {
  list-style-type: none;
  margin: 0;
   /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

  padding: 0;
}
footer ul li {
  line-height: 1.5;
  transition: transform 200ms ease-in;
  will-change: transform;
}
footer ul li:hover {
  transform: translateX(5px);
}
footer .widgets,
footer .copy {
  display: flex;
  width: 100%;

  justify-content: space-between;
  align-items: center;
}
footer .widgets .widget,
footer .copy .widget {
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer .copy {
  margin-top: 1em;
  border-top: 2px solid #312d3c;
} /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

footer .copy p {
  margin: 0.75em 0 0;
}
footer .copy span {
  position: relative;
  display: inline-block;
  color: #df2359;
  animation: hearts 0.6s cubic-bezier(0.18, 0.89, 0.29, 1.05) infinite;
}
@media (max-width: 991px) {
  .blur {
    display: none;
  }/*@-o-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }*/
  .content {
    text-align: center;
  }
  .content h1::before {
    display: none;
  }
}
@-moz-keyframes hearts {
  50% {
    transform: scale(1.4);
  }
}/*@-o-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }*/
@-webkit-keyframes hearts {
  50% {
    transform: scale(1.4);
  }
}
@-o-keyframes hearts {
  50% {
    transform: scale(1.4);
  }
}
@keyframes hearts {
  50% {
    transform: scale(1.4);
  } /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

}
@-moz-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}
@-webkit-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  } /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}
@-o-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
} 
@keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}
 /*game.style.width = width + 'px'game.style.height = height + 'pxhero.style.top = height - 80 + 'px'hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`hero.style.width = `${ASSETS.IMAGE.HERO.width}px`hero.style.height = `${ASSETS.IMAGE.HERO.height}px`*/

Enter fullscreen mode Exit fullscreen mode

Add JavaScript Code

The code below is the JavaScript programming code. You copy these codes and paste them in the structure above where the ad javascript code is written. Then save the file.


function scroller() {
  $(".smooth").on("scroll", function() {
    let scrollPos = $(this).scrollTop();
    $(".parallax").css({
      top: scrollPos / 2 + "px",
      opacity: 1 - scrollPos / 200
    });
  });
}
scroller();
Enter fullscreen mode Exit fullscreen mode

If you follow the above three steps correctly, you will definitely be able to create this professional landing page. If you encounter any problems while creating the landing page, please let me know in the comments. I will help you as much as possible.

Conclusion
I would especially request you to download the codes by clicking on the download button above. Then add your project. Because when I uploaded these codes, I had some problems with Google. So I added some comments. But there is no reason to worry. Because these comments will not change your programming in any way. But it would be best if you download the codes.

Like if you like this landing page.
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide