Landing Page Tutorial: Make Webpage Using HTML, CSS, and JS

Blogger Leb
November 05, 2020
0

Landing Page Tutorial: Make Webpage Using HTML, CSS, and JS

A landing page is the first page of a website that you can use to create a variety of programming codes. But HTML, CSS, and JavaScript programming languages ​​are especially good for creating a landing page. 

HTML code will create the structure of the landing page, CSS code will make the landing page more beautiful and stylish. JavaScript code will help make it professional and animated. Also programming languages ​​like data structure, SQL, etc. are used. I will show you in this article how you can easily create a beautiful and professional landing page using a simple programming code. Basically, if you want to create a landing page for a website, you need to focus on a few specific things. First of all, make it professional and responsive. 

This means that it can adapt itself beautifully to any device. Which is very necessary for the website. As a result, your page will look the same on mobile, laptop, desktop, etc. Some special CSS code is used to make it responsive, which I have shown you below. Below I show you how to create this landing page. I have also given below all the necessary code to make it. You can easily use your own website or blog by copying that code.

Some special features of this landing page

💛 Only HTML, CSS, and JavaScript programming code were used to create it.

💜 This is a fully responsive landing page, so you can easily customize it for any device.

💚 The background of this website design has been completely blackened.

💘 The main page has a subscribe form which is called the login form.

💙 Includes a professional top menu bar. On which hover is added and that menu bar is a fully fixed menu bar.

💗 There is a beautiful logo, where you can add the logo of your choice. Below is some information about the website.

💚 Below is a list of qualifications. Here you can give a list of what you are good at and show the percentage.

💙 There are also places to give descriptions. Here you can give some advice to your users.

💗 Below is a list of authors. Here you can give some details to all the authors on your website who write content, their pictures.


 Below is the footer menu. Here you can give some links as per your requirement. Such as social media, YouTube, or some other platforms where you have an account. Also some you can add some pages of your choice.

 Below is the footer credit for this website. This means that there is a place to show the original owner of this website and who created this website. Since I made it, my name is here. You can change the footer credit if you wish. I have seen for myself how to change.


I think this is a beautiful and complete landing page that you can use in any of your work effortlessly. Below I show you completely how to make this page.

 I have used three types of programming code to enhance it. I have given all these programming codes below. There is also a download button at the top so you can download it as you need.


How to build this landing page

Below I show you how to build here and link to your website. To create it, first, you need to create an HTML file. To create a file, open any text editor on your computer, such as Notepad, WordPad, etc. Then you copy it to the structure shown below, then paste it into Notepad. 

Then you save that notepad file with the name of your choice. When saving, you will rename it to your liking and add dot HTML to it. This way you can create an HTML file. After creating this file, you can add HTML, CSS, and JavaScript code to that HTML file by following the three steps below.

 

Add HTML Code

The code shown below is the complete HTML code. Which has been used to create this page. First, you copy the following codes. Then paste the ad HTML code in the structure above. Also, if you want to add it to any of your other projects, you can do it very easily. For that, you have to paste these HTML codes into the body tag of your project.


<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>
         <!--
        <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>
      -->
        <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>
         <!--
        <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>
      -->
        <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>
   <!--
        <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>
      -->
  <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>
     <!--
        <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>
      -->
    <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>
           <!--
        <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>
      -->
          <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>
         <!--
        <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>
      -->
        <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>
       <!--
        <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>
      -->
      <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>
       <!--
        <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>
      -->
      <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>
      <!--
        <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>
      -->
      <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>
       <!--
        <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>
      -->

    </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>



Add CSS Code

The ones shown below are the complete CSS code. Which has been used in making this project. These codes basically help to make the page of this website responsive. You copy these codes and paste them in the upper structure where the ad CSS code is written. Also if you want to associate it with any of your other projects. For that, you copy the CSS codes and paste it inside the style tags in the body tags of your project.



 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;
}
/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background-color: #1d1e22;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: #312d3c;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #df2359;
}
a {
  text-decoration: none;
  color: #fff;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
a:hover,
a.leadlink {
  color: #df2359;
}
h1,
h2,
header a {
  text-transform: uppercase;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
.smooth {
  margin: 0 auto;
  padding: 0 4px;
  padding-left: 8px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
header h3 {
  position: relative;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  color: #df2359;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
.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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
.jcsb {
  justify-content: space-between;
}
progress {
  position: relative;
  margin: 1em 0;
}
progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
section {
  position: relative;
  display: flex;
  min-height: 100vh;
  padding: 2em 3em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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);
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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%;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
.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%;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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%;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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%;
  /*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  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;
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
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;
  }/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  .content {
    text-align: center;
  }
  .content h1::before {
    display: none;
  }
}
@-moz-keyframes hearts {
  50% {
    transform: scale(1.4);
  }
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
@-webkit-keyframes hearts {
  50% {
    transform: scale(1.4);
  }
}
@-o-keyframes hearts {
  50% {
    transform: scale(1.4);
  }
}
@keyframes hearts {
  50% {
    transform: scale(1.4);
  }/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
}
@-moz-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}
@-webkit-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}
@-o-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
@keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}
/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/

Add JavaScript Code

Own codes are JavaScript programming codes that help make this project animated and professional. You copy the code below and paste it into the upper structure where the ad javascript code is written. If you want to add it to your own project, you can paste it inside the body tags inside the script tag.




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



 Hope you have followed the above three methods correctly. Below I show you how to make it more professional and responsive.

Customize this landing page according to you

Make it Responsive

@media tags have been used to make it responsive. This is basically a kind of CSS code. Which determines what your project will look like on any device. Here you can give a maximum and minimum size. Depending on which size your project will get. I used a maximum size of 991px to create this project.

@media (max-width: 991px) {
  .blur {
    display: none;
  }/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  .content {
    text-align: center;
  }
  .content h1::before {
    display: none;
  }
}
@-moz-keyframes hearts {
  50% {
    transform: scale(1.4);
  }
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
@-webkit-keyframes hearts {
  50% {
    transform: scale(1.4);
  }
}
@-o-keyframes hearts {
  50% {
    transform: scale(1.4);
  }
}
@keyframes hearts {
  50% {
    transform: scale(1.4);
  }/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
}
@-moz-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}
@-webkit-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}
@-o-keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}/*stroke-dasharray: 700;
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;*/
@keyframes dash {
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #fff;
  }
}
/*stroke-dash array: 700;
  stroke-dash offset: 1000;
  animation: dash 4s linear forwards;*/

Change footer credit

Here I have shown you how to change the footer credit of this landing page. As I said before, this credit is for showing the originality of your site. Here I am currently with my name. You can add your own name here if you wish. I have given my name Shantanu here. You can enter your own name or the name of your website in the place where Santanu is written below.

 <p>
        &copy; 2019 with  <span>&#9829;</span> <a href="https://backlinkn.com/" 
target="_blank">Shantanu Jana</a></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.


❤Sharing is caring❤



Tags
Share to other apps

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)
To Top