🎬How To Create Website With Auto Typing Text Effect Using HTML CSS JavaScript🙌

This content originally appeared on DEV Community and was authored by Robson Muniz

Lets Create a Website With Auto Typing Text Effect Using HTML CSS JavaScript, step-by-step in a very easy to follow along tutorial.

Source Code:

HTML

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

<head>
  <meta charset="UTF-8">
  <title>Create Website with Auto Typing Text Effect</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <nav>
      <img src="img/logo.png" alt="" class="logo">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Services</a></li>
      </ul>
      <img src="img/menu.png" alt="" class="menu-icon">
    </nav>

    <div class="text-box">
      <h1>I'm <span class="auto-input"></span></h1>
      <p>You can reach out to me if you need any nelp in making
        a Website for you or your business.</p>
      <a href="#">Contact me</a>
      <a href="#" class="btn">Download CV</a>
    </div>
    <img src="img/bg7.png" alt="" class="user-img">
  </header>

  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

  <script>
    let typed = new Typed(".auto-input", {
      strings: ["Emma Downy", "Web Developer", "Blogger"],
      typeSpeed: 100,
      backSpeed: 100,
      loop: true
    })
  </script>

</body></html>

This content originally appeared on DEV Community and was authored by Robson Muniz

Print Share Comment Cite Upload Translate Updates

APA

Robson Muniz | Sciencx (2021-12-31T16:54:01+00:00) 🎬How To Create Website With Auto Typing Text Effect Using HTML CSS JavaScript🙌. Retrieved from https://www.scien.cx/2021/12/31/%f0%9f%8e%achow-to-create-website-with-auto-typing-text-effect-using-html-css-javascript%f0%9f%99%8c/

MLA

" » 🎬How To Create Website With Auto Typing Text Effect Using HTML CSS JavaScript🙌." Robson Muniz | Sciencx - Friday December 31, 2021, https://www.scien.cx/2021/12/31/%f0%9f%8e%achow-to-create-website-with-auto-typing-text-effect-using-html-css-javascript%f0%9f%99%8c/

HARVARD

Robson Muniz | Sciencx Friday December 31, 2021 » 🎬How To Create Website With Auto Typing Text Effect Using HTML CSS JavaScript🙌., viewed ,<https://www.scien.cx/2021/12/31/%f0%9f%8e%achow-to-create-website-with-auto-typing-text-effect-using-html-css-javascript%f0%9f%99%8c/>

VANCOUVER

Robson Muniz | Sciencx - » 🎬How To Create Website With Auto Typing Text Effect Using HTML CSS JavaScript🙌. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/31/%f0%9f%8e%achow-to-create-website-with-auto-typing-text-effect-using-html-css-javascript%f0%9f%99%8c/

CHICAGO

" » 🎬How To Create Website With Auto Typing Text Effect Using HTML CSS JavaScript🙌." Robson Muniz | Sciencx - Accessed . https://www.scien.cx/2021/12/31/%f0%9f%8e%achow-to-create-website-with-auto-typing-text-effect-using-html-css-javascript%f0%9f%99%8c/

IEEE

" » 🎬How To Create Website With Auto Typing Text Effect Using HTML CSS JavaScript🙌." Robson Muniz | Sciencx [Online]. Available: https://www.scien.cx/2021/12/31/%f0%9f%8e%achow-to-create-website-with-auto-typing-text-effect-using-html-css-javascript%f0%9f%99%8c/. [Accessed: ]

rf:citation

» 🎬How To Create Website With Auto Typing Text Effect Using HTML CSS JavaScript🙌 | Robson Muniz | Sciencx | https://www.scien.cx/2021/12/31/%f0%9f%8e%achow-to-create-website-with-auto-typing-text-effect-using-html-css-javascript%f0%9f%99%8c/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Source Code:

Related Posts