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>
Top comments (7)
I am learning from this
Where is the style file ?
Do you have
Or that in the video ?
Generally very helpful 🙂
Thanks
Hey Salah, how are you doing sir?
Yes it's in the video, but I'll bring it here and post it.
I'm glad you liked it.
Happy Coding my friend DEV!
This is awesome! I actually wanted to implement this for my portfolio. Wanted to include my profession along with some hobbies I do.
Hey Dev I loved the idea, implement it and show us, would love to see it done.
Happy Coding!
I was searching for my YouTube website. Very Helpful
I am glad you like you liked it...
Welcome to the Tribe and happy coding!
bit.ly/3oBQbc0
This is amazing, please could you share spice code, preparing my portfolio and I want to put that there please