Responsive Landing Page | Typewriter Effect

Hello internet people, Today in this blog I will show you how to create a Responsive landing page along with text typing animation. Earlier, you learned to Create a loading button using HTML and CSS.

Landing Page is one of the most important web pages created with the intention of showing the main title and description of the organization, products, or personal portfolio. In most cases, landing pages are created for marketing purposes. A landing page plays a vital role to run your business smoothly and also helps to generate more income.

Things Included in Landing Pages

Name
Address
Social Media Profile
Product/Company Description
Size of Company
Phone Number
Email Address
And many more

3 Tips to Make Landing Page Better

Don’t add unnecessary navigation
Maintain short & sweet intro/description
Add valuable content only instead of writing long paragraphs

After going through this blog, you can easily create a landing page having great UI. As you can see in the above image, the whole background is black and the primary color is red. The hexadecimal value of the red color is #f00000. This landing page is mainly divided into three parts i.e. nav bar, the description, and the image. You can see the typewriter effect in the description part which is not created with the CSS. Let me tell you about the process of creating a typewriter effect. I haven’t written any custom functions or CSS to create it. I have just used the popular JavaScript library called “typed.js”.

To use “typed.js” you just need to include the below-mentioned CDN link inside the <head></head> tag and write some code.

CDN of Typed.JS

After adding this CDN, create a div or paragraph where you want to show the typewriter effect. After that just write the below code.

var typed = new Typed('.typewriter', {

strings: ['Designer',

'Developer',

'Blogger'],

loop: true,

typeSpeed: 50,

backSpeed: 50,

showCursor: true

});

</script>

The “.typewriter” is a class of div where you want to show the text. If you want more text to be typed just add them inside the array.

If you’re feeling difficult to understand what I am saying. You can watch a video preview of this program (Responsive Landing Page along with the typewriter effect).

Video Preview of Landing Page

All this landing page design is based on CSS only and the typewriter effect is based on JavaScript. If you’re a beginner you can also create this type of landing page. If you like this program (Responsive Landing Page along with typewriter effect) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Responsive Landing Page along with typewriter effect [Source Codes]

To create this program (Responsive Landing Page along with typewriter effect). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Javascript code is also inside the HTML file. Remember, you’ve to create a file with a .html extension.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    <link rel="stylesheet" href="style.css">
    <title>Landing Page</title>
</head>

<body>
    <div class="container">
        <nav>
            <div class="logo">
                <img src="logo.png" alt="">
            </div>
            <input type="checkbox" id="check">
            <label for="check" class="hamburger">
                <div class="line line1"></div>
                <div class="line line2"></div>
                <div class="line line3"></div>
            </label>
            <ul>
                <li><a href="" class="active">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">My Works</a></li>
                <li><a href="">Latest Projects</a></li>
            </ul>
        </nav>
        <div class="hero">
            <div class="description">
                <div class="iam">I'm a</div>
                <div class="typewriter"></div>
                <p>also song digger, art lover, travel addict.</p>
                <div class="hire-btn"><i class="fas fa-hands-helping"></i> Hire Me</div>
            </div>
            <div class="image">
                <img src="https://media.istockphoto.com/photos/studio-shot-of-young-african-man-wearing-black-shirt-in-black-and-picture-id862263568?k=6&m=862263568&s=612x612&w=0&h=QphaP3KUvISdF2qF8qA8nCbFeDoBywbEWiIjt-EUHn4="
                    alt="">
            </div>
        </div>
    </div>
    <script>
        var typed = new Typed('.typewriter', {
            strings: ['Designer',
                'Developer',
                'Blogger'],
            loop: true,
            typeSpeed: 50,
            backSpeed: 50,
            showCursor: true
        });
    </script>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}

.container nav {
  height: 80px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.container nav .logo {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-left: 30px;
}

.container nav .logo img {
  width: 90px;
  -webkit-transform: rotate(340deg);
          transform: rotate(340deg);
}

.container nav #check {
  display: none;
}

.container nav #check:checked ~ ul {
  left: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.container nav .hamburger {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-right: 60px;
  display: none;
}

.container nav .hamburger .line {
  width: 40px;
  height: 5px;
  background-color: #fff;
}

.container nav .hamburger .line2 {
  margin-top: 3px;
  width: 30px;
}

.container nav .hamburger .line3 {
  margin-top: 3px;
  width: 20px;
}

.container nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.container nav ul li {
  list-style: none;
  margin-left: 20px;
}

.container nav ul li a {
  text-decoration: none;
  color: #fff;
}

.container nav ul li .active {
  color: #f00000;
}

.container nav ul li a:hover {
  color: #f00000;
}

.container .hero {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container .hero .description {
  width: 50%;
  padding: 100px 0px 0px 100px;
}

.container .hero .description .iam {
  font-size: 50px;
  color: #666;
}

.container .hero .description .typewriter {
  font-size: 53px;
  color: #f00000;
  height: 40px;
}

.container .hero .description p {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

.container .hero .description .hire-btn {
  width: 130px;
  margin-top: 20px;
  cursor: pointer;
  border: 1px solid #f00000;
  color: #fff;
}

.container .hero .description .hire-btn i {
  padding: 10px;
  margin-right: 8px;
  background-color: #f00000;
  color: #fff;
}

@media (max-width: 890px) {
  .container {
    overflow: auto;
  }
  .container nav .hamburger {
    display: block;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
  .container nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: fixed;
    top: 80px;
    padding-top: 20px;
    background-color: #363636;
    padding: 20px 20px 0px 0px;
    height: 100vh;
    left: -100%;
  }
  .container nav ul li {
    margin-bottom: 15px;
  }
  .container .hero {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .container .hero .description {
    width: 100%;
    padding: 10px 0px 10px 10px;
  }
  .container .hero .image {
    width: 100%;
  }
  .container .hero .image img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 890px) and (min-width: 600px) {
  .container .hero .description {
    padding-left: 100px;
  }
}

That’s all, now you’ve successfully created a landing page using HTML, CSS, and JavaScript. If your code does not work or you’ve faced any errors/problems then please comment down your queries. If you feel this article had helped you, please share it with your friends. Subscribe to our Website by pressing the bell icon at the right bottom. We will send you notifications regarding our new posts and other tips and tricks. You can unsubscribe anytime you like. If you have any suggestions for me please mention them in the comment below.

Things Included in Landing Pages

3 Tips to Make Landing Page Better

You Might Also Like

Video Preview of Landing Page

Responsive Landing Page along with typewriter effect [Source Codes]

HTML

CSS

Thank You :)

Post a Comment

Post a Comment

About Us

Contact Form