Website Landing page

This Project Google Homepage introduces a Animated website landing page. Which is created by using the latest tech stacks i.e. HTML5 , CSS3 and JavaScript(ES6)

The logic used to create this project no too much difficult But these are easy to implement code and Understanding for you.WEbsite landing page by zain coder.

One who has basic understanding of JavaScript and familiar with JS Functions concept can understand in easy manner.

You can customize this project’s animation as well as logic as per requirement.

Its one of the major project you can use for your personal use as well as to present in your college.Your can customized this page according to your needs.

Explanation:

A landing page is known as the lead capture page, static page, or destination page which is designed for a specific task and appears because of an online advertisement or a search engine optimization result. When the user arrives on a landing page it is free from all distractions like the home page and mainly aims to capture a visitor’s information through that form and make them feel comfortable that the website has the solution to their problems. It is a special web page that mainly helps to drive traffic for a marketing campaign.

A landing page must have a “call-to-action” with a specific goal in mind. A successful landing page is one that has higher conversion rates, increased engagement, and better quality leads.

How Landing page is different from a Home Page?

The landing page is a single web page that appears in response to clicking on a search engine-optimized search result or any online advertisement and the Home page is the initial or the main web page of a website. The landing page acts as the front door to the website and the Home page acts as the expressway to the visitor’s desired destination.

Approach to creating a Landing Page:

Create the basic layout of the landing page using HTML that includes a basic nav bar, a basic homepage a body section, and a signup page.
Style the layout created by HTML using CSS and link the CSS file to the HTML file.
Create an index.js file and write the javascript code to display the nav bar in a sliding menu when the website is viewed on small screens

Example: In this example, we will be creating a landing page using HTML, CSS, and Javascript.

HTML Code:

Filename: index.html

<html>
<head>
  <title>ZainHub Educations</title>
  <p></p><br />
<div style="text-align: center;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHltycicS_O2QfGZOIelJprLOpnUka-E9K5XyOHW7p0O7j3U06GeK4xRGD0sxtSz3PTWgR5tzSI3x_cHGq6dLYKb0FqILjytlb_bVxttCo3EINxcLqBn-386qqQ--tnx7Nyl3grIs-O6cd6WaY09hvtz-aRvOA4uNMTLhDT-nagm6Bx7nQojXhUElM/s470/1_3_-removebg-preview(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="120" data-original-width="470" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHltycicS_O2QfGZOIelJprLOpnUka-E9K5XyOHW7p0O7j3U06GeK4xRGD0sxtSz3PTWgR5tzSI3x_cHGq6dLYKb0FqILjytlb_bVxttCo3EINxcLqBn-386qqQ--tnx7Nyl3grIs-O6cd6WaY09hvtz-aRvOA4uNMTLhDT-nagm6Bx7nQojXhUElM/s320/1_3_-removebg-preview(1).png" width="320" /></a></div><br />&nbsp;<p></p>
  <link href="styles.css" rel="stylesheet" type="text/css"></link>
  <script src="animations.js"></script>
</head>
<body>
  <header>
    <h1>Welcome to ZainHub Education</h1>
  </header>

  <nav>
    <ul>
      <li><a href="https://zaincoderhub.blogspot.com/search/?&amp;max-results=5">About Us</a></li>
      <li><a href="https://zaincoderhub.blogspot.com/search/?&amp;max-results=5">Contact Us</a></li>
    </ul>
  </nav>

  <section id="https://zaincoderhub.blogspot.com/search/?&amp;max-results=5">
    
    <h2><a href="https://zaincoderhub.blogspot.com/" target="_blank">About Us!</a></h2>
    <h3 style="text-align: center;">Welcome To <span id="W_Name1">zainshub Education</span></h3>
    <p><span id="W_Name2">zainshub Education</span> is a Professional <span id="W_Type1">Educational,study notes ,guess papers</span> Platform. Here we will provide you only interesting content, which you will like very much. We're dedicated to providing you the best of <span id="W_Type2">Educational,study notes ,guess papers</span>, with a focus on dependability and <span id="W_Spec">study notes ,Guess papers important shorts and long</span>. We're working to turn our passion for <span id="W_Type3">Educational,study notes ,guess papers</span> into a booming <a href="https://www.blogearns.com/2021/05/free-about-us-page-generator.html" rel="do-follow" style="color: inherit; text-decoration: none;">online website</a>. We hope you enjoy our <span id="W_Type4">Educational,study notes ,guess papers</span> as much as we enjoy offering them to you.</p>
<p>I will keep posting more important posts on my Website for all of you. Please give your support and love.</p>
<p style="font-weight: bold; text-align: center;">Thanks For Visiting Our Site<br /><br />
<span style="color: blue; font-size: 16px; font-weight: bold; text-align: center;">Have a nice day!</span></p>
    
    
  </section>
<img alt="Best study material and Guess Papers Institude" src="https://blogger.googleusercontent.com/img/a/AVvXsEgJO3edbRZ0ZACFoyHXI0yU65uXrNDZGAxTaxRcGbuMoQOgCqt6RoeqJRjd_Hjdey67IQBJH208fl7aJwb71BAsPbb9iuWMs8Gxk7VRSwG7MievxfkDuVtX1GJhQpcAq-yflQRqbRc1dfPTL6f8ZFqmzUeWGlc7t68dprOa2DXAtYSRycqlOfvlr02y9A=s616">
  <section id="https://zaincoderhub.blogspot.com/search/?&amp;max-results=5">
    
    <h1>Contact Us !</h1>
    <h2 style="text-align: center;">Welcome to <span id="W_Name">zainshub</span>!</h2>

    <p style="font-size: 17px;">Please email us if you have any queries about the site, advertising, or anything else.</p>

    <div style="text-align: center;">

      <img alt="contact-us" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmCmbG1M-dtu6lyyyr8OXgqX5M-osV5a3SVGrirz6yP7No7XF2NLEqcJ1QJNACAdnNWFvRh1c3m4Sob1swjSinId-47LqEXBZMR8kdiHcSVRjlV53fMgz_W04wkpe5dk3XjtBjhXcaTS4/w320-h87/email-us-1805514__480.webp" width="320" />

      <p style="margin-left: 25%;"><i class="fas fa-envelope-open-text" style="color: #2c3e50; font-size: 20px;"></i> <b><i> <span id="W_Email"><a href="mailto:kinzadogar132@gmail.com">kinzadogar132@gmail.com</a></span></i></b><br />

        <i class="fab fa-whatsapp-square" style="color: #3edc81; font-size: 20px;"></i> <b><span id="W_whatsapp"><a href="tel:"></a></span></b><br /></p>    

      <h3 style="color: #3e005d;">We will revert you as soon as possible...!</h3>
      <p style="color: #3e005d; text-align: center;">Thank you for contacting us! <br /><b>Have a great day</b></p>
      <span style="font-size: 1px; opacity: 0;">This page is generated with the help of <a href="https://www.blogearns.com/2021/06/free-contact-us-page-generator.html" style="color: inherit;">Contact Us Page Generator</a></span>
    </div>
  <section
  </section>
<h2 style="text-align: center;">&nbsp;Example</h2><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://zaincoderhub.blogspot.com/2023/05/blog-post.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="online earning 2021" border="0" data-original-height="99" data-original-width="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-_Yerbea57tfsoiAgEEsMRKVWlyQhanR3Y9QCyFIQJbRFJ9VKVnVxIl6dFt8XyF3f6y8zvpayZRqLp9pM5LVSJfaIDDlkPfGZCikZLhGWbeAPSSbWif0fY5faz9zQNAiEjhvlvwHhUJA/s16000/Onlin+Earning.png" title="online earning 2021" /></a>&nbsp;&nbsp;<a href="https://zaincoderhub.blogspot.com/2023/05/blog-post.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" data-original-height="99" data-original-width="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzlt4OwhBOFaPayWqlPupZPgihTs5EeL3u5Ra2gBbzG0VhYgg_iwMCMrGbsf8jEZnR2j3CEzOC3NgG7c0Uykx5jpyUz7eXZC2vp4E7XpMUopl2RMo2porPu-Tq4xs3ImH2TfW5KE_QVKU/s0/PC+Courses.png" /></a>&nbsp;&nbsp;<a href="https://zaincoderhub.blogspot.com/2023/05/blog-post.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="aiou allama iqbal open university" border="0" data-original-height="99" data-original-width="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKsplOzo04KpNsIyf9Hzf1tAFOQS7BBa3OIkvKkC2qAMTgY2QmcpWYRO5bBKV5f7ssdrQJg2UVkgzGeYxnhz0fVG6MBHVrYH9VdO2kDaFoWGwX0Rpq8NSEUBYfDf9oRz3I41LT3cDEJp4/s16000/AIOU.png" title="aiou allama iqbal open university" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://zaincoderhub.blogspot.com/2023/05/blog-post.html"><img alt="What is Blogging and how to earn by Blogging" border="0" data-original-height="100" data-original-width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeBBKLuRKW4lGWggvVyC9XhRXPMIUPHwsZCS7fClnxrqQeByxHZ9ksUWmF6NNZAUfhJmFbZQd182KItk-wUPDRPEvAtU8RM2utxKEPnXUbL2hMGC9zrW_sQ3I24OAOMt7HnJctA1Fkl50/s16000/Blogger.png" title="What is Blogging and how to earn by Blogging" /></a>&nbsp; &nbsp;<a href="https://zaincoderhub.blogspot.com/2023/05/blog-post.html" style="font-family: arial; margin-left: 1em; margin-right: 1em;" target=""><img alt="How to make money online YouTube" border="0" data-original-height="100" data-original-width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguaTr-jEjB7LuTDQ_bBBA0s3df5iS2ZEjFT-BeLmQTCavQYq-Ear_P6DJOR6byYH6OcJop6fgodNPXVYK72fq9RKDzVR4K4eMOvtHLHfaiu_TVDMApBMGiW287K_0IMNg-lQ6f1eIBnz0/s16000/YouTube.png" title="How to make money online YouTube" /></a>&nbsp;&nbsp;<a href="https://zaincoderhub.blogspot.com/2023/05/blog-post.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="How to make money running Google ads" border="0" data-original-height="100" data-original-width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBbgKLKQAbsISXalVRjHQ02if9NjrSmUZqqBZc6EyytGnsaAEVzmvh5tckmH3nlAI5kCohC-peXPnktq3gVYoQSAIbzASoYXMStcW80uHVGgmmg4Eya3EtuXDg9hyOS-phDMMlrXpPalY/s16000/AdSense.png" title="How to make money running Google ads" /></a></div></section
  <footer>
    <p>© 2023 ZainSardar Creates. All rights reserved.</p>
  </footer>

  <script>
    // JavaScript animations
    window.addEventListener('load', function() {
      // Example animation - fade in header
      const header = document.querySelector('header');
      header.style.opacity = '0';
      fadeIn(header, 2000);
    });

    function fadeIn(element, duration) {
      let op = 0.1;
      const timer = setInterval(function() {
        if (op >= 1) {
          clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ')';
        op += op * 0.1;
      }, duration / 10);
    }
  </script>
</body>
</html>

CSS Code:

Filename: Style.css

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav li {
  display: inline;
  margin: 0 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

section {
  padding: 40px;
}

footer {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

h1, h2 {
  color: #333;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

JavaScript Code:

Filename: script.js

// animations.js
document.addEventListener('DOMContentLoaded', function() {
  // Smooth scrolling effect
  const links = document.querySelectorAll('nav a');

  links.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      const targetElement = document.querySelector(targetId);
      const targetPosition = targetElement.offsetTop;

      window.scrollTo({
        top: targetPosition,
        behavior: 'smooth'
      });
    });
  });

  // Example animation - animate width of sections
  const sections = document.querySelectorAll('section');

  sections.forEach(section => {
    section.style.width = '0';
    animateWidth(section, 2000);
  });

  function animateWidth(element, duration) {
    let width = 0;
    const targetWidth = 100;
    const interval = 10;
    const increment = targetWidth / (duration / interval);

    const timer = setInterval(function() {
      if (width >= targetWidth) {
        clearInterval(timer);
      }
      width += increment;
      element.style.width = width + '%';
    }, interval);
  }

  // Responsive behavior
  window.addEventListener('resize', function() {
    adjustLayout();
  });

  adjustLayout();

  function adjustLayout() {
    const screenWidth = window.innerWidth;
    const header = document.querySelector('header');
    const nav = document.querySelector('nav');

    if (screenWidth <= 768) {
      header.style.padding = '10px';
      nav.style.padding = '5px';
    } else {
      header.style.padding = '20px';
      nav.style.padding = '10px';
    }
  }
});

In this code, we have added responsive behavior that adjusts the layout based on the screen width. The adjustLayout() function is called on page load and whenever the window is resized. It checks the current screen width and adjusts the padding of the header and navigation elements accordingly.

To ensure that the code adapts to different device screens, include the <meta name="viewport" content="width=device-width, initial-scale=1.0"> meta tag in the <head> section of your HTML file.

With these additions, the landing page will now provide a smooth scrolling effect, animate the width of sections, and dynamically adjust the layout based on the device screen width.

Remember to save the JavaScript code in a file called animations.js and include it in your HTML file using the <script src="animations.js"></script> tag

Output

Website Landing page project by zaincoderhub zainsardar

You can also test this code from there:

See the Pen Untitled by kinza dogar (@kinza-dogar) on CodePen.

Ticker

Header Ads Widget

Website Landing page