Responsive Web design with typing effect

Suppose you are visiting a website from your phone or other small device and find small text, overlapping images, buttons, forms that are not even clickable. Very frustrating, right? This is where responsive web design comes in. It ensures that your website adapts smoothly to any small screen. Be it a desktop, tablet, or smartphone. This special feature of web design keeps visitors engaged, reduces bounce rate, and even increases your website’s SEO ranking. In this blog post, we have created a responsive website homepage that has a typing text animation. For the typing animation, we have used a popular plugin called Types JS. Below, we have provided a video tutorial of today’s created snippet. Please watch the video and comment on it.

Video Tutorial:

We hope you enjoyed the above video tutorial on responsive web design with typing text animation. The homepage of any website is considered the front door to the company’s online space. It is the first section that a visitor sees, and within seconds, they decide whether to stay or leave. A well-designed website homepage should grab attention with clear messaging. It should also guide users to the main sections and reflect the brand visually and emotionally. It should not be cluttered or confusing; rather, it should be clean and attractive so that visitors keep exploring the website. We used the Typed JS plugin to add a beautiful typewriter text animation to our snippet. Typed.js is a lightweight JavaScript plugin, and we only need to define the text strings, adjust the speed to create beautiful typing text animations from it. This cool typing text animation can create interest, highlight key messages, and bring our site to life so that it can make our homepage memorable.

You May Also Like:

Responsive Web design with typing effect [ Source Code ]:

To create this responsive website homepage with text animation, you will need one HTML file and one CSS file. You can create a separate JS file to hold the JavaScript code. Add the typed JS CDNs as shown in the video tutorial above. Then, copy the code from the code box below and paste it into your files. You can also download the full code from the download button at the bottom of this blog post.

ADD HTML:

<!doctype html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>Responsive Website Layout using HTML and CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="home"> 
       <nav>
       <a href="#">home</a>
       <a href="#">about</a>
       <span class="logo">Biz<span>box</span></span>
       <a href="#">blog</a>
       <a href="#">contact</a>
   </nav>
    <div class="banner-area">
       <h3>Business Solution</h3>
        <h2>We Help in <span class="typed2"></span></h2>
        <a href="#">Learn More</a>
    </div>
   </div>

    <script src="typed.js"></script>
    <script>
        var typed = new Typed(".typed2", {
            strings: [
                "Planning",
                "Implementing",
                "Marketing"
            ],
            typeSpeed: 50,
            backSpeed: 50,
            loop: true
        });
    </script>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
    font-family: "Montserrat", sans-serif;
}
.home {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(a2.jpg);
	background-size: cover;
	background-position: center center;
	height: 100vh;
}
nav {
	text-align: center;
	padding-top: 2%;
}
.logo {
	display: inline-block;
	color: #fff;
	text-transform: capitalize;
	font-weight: bold;
	font-size: 35px;
	font-family: "Protest Riot", sans-serif;
}
.logo span{
    color: #ff6d00;
}
nav a {
	text-decoration: none;
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	margin: 0 25px;
	letter-spacing: 3px;
}
.banner-area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
}
.banner-area h3 {
	font-size: 75px;
	text-transform: capitalize;
	color: #fff;
	margin: 0 0 25px 0;
	font-family: "Protest Riot", sans-serif;
}
.banner-area h2 {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 30px;
	line-height: 0;
}
.banner-area h2 span {
	color: #ff6d00;
}
.typed-cursor {
	color: #fff !important;
}
.banner-area a {
	display: inline-block;
	margin-top: 50px;
	text-decoration: none;
	color: #fff;
	background: #ff6d00;
	padding: 10px 30px;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 500;
}
@media (max-width:800px) {
	nav a {
		font-size: 11px;
		margin: 0 10px;
	}
	.banner-area h2 {
		font-size: 1.7em;
	}
	.banner-area h3 {
		margin: 0 0 20px 0;
		font-size: 70px;
	}
}

@media (max-width: 600px){
	nav a{
		font-size: 10px;
		margin: 0 5px;
		letter-spacing: 0;
	}
	.banner-area h3{
		font-size: 30px;
	}
	.banner-area h2{
		font-size: 1em;
	}
	.logo{
		font-size: 25px;
	}
}

The versatility of a website homepage doesn't just depend on its appearance; it also depends on its functionality, engagement, and responsiveness. With mobile-friendly layouts and dynamic typing effects, we can create a seamless experience that keeps visitors engaged. The web design process relies on small things that make a big difference. We hope you have collected the source code. For more such snippets, please click the Load More button on our homepage. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive Web design with typing effect [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Web design with typing effect

Video Tutorial:

Responsive Web design with typing effect [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form