Responsive layout with typing text effect

A key element of the web design landscape is responsive web design. Responsive web design plays a very important role in the fast-growing era of web development. Today, we will be designing a simple website layout and incorporating the popular typing text animation commonly found on various website homepages nowadays. The following video tutorial shows the process of creating a responsive website layout and adding text effects to it. Watch the video and subscribe to our channel if you like our content.

Video Tutorial:

We hope you have seen the video tutorial about responsive layout with typing text effects in it. Responsive web design is a design process that helps a web layout adapt easily to any device or screen size. This means that any website designed responsively will provide an optimal user experience regardless of the device the user is using, be it small or large. The Significance of Responsive Web Design in today's World is immense. In this fast-growing world where people access the internet from so many devices, a website that is not responsive will lose a lot of visitors for sure. Tech giant Google also ranks responsive websites at the top of search results. In order to stay ahead in the digital landscape, responsive web design is a must.

The homepage of the website is also called the digital front door. Because this homepage guides a visitor to other pages of the website. The homepage plays an important role in highlighting the key components of a website and engaging visitors. If the website's main objectives or tasks can be presented to visitors in the form of typing text animation on this homepage, it will get more acceptance. So we included typing text animation for our web layout with the help of a widely used plugin called typed js. Where to find the plugin, how to download it, which files to include in our project, and how to initiate the plugin, all these processes are shown in the above video tutorial. Finally, how to use CSS media queries to make the website layout suitable for display on small devices is also shown.

You May Also like:

Responsive layout with typing text effect [ Source Code ]:

In order to showcase key messages and create a lasting impression typing text animation plays an important role. A popular plugin for adding typing text animation to websites is the typed js plugin. After creating the HTML and CSS files, download the plugin from the link given in the YouTube video description. After extracting, add the required files shown in the video to your project. Then copy the code from the code box below and paste it into your project. Save and open it in your browser. If you face any problems then download the code from the download button below.

ADD HTML:

<!doctype html>
<html lang="en">
     <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>How to Build a Website using HTML CSS | Responsive Web Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Teko&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cookie&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">Meditate</span>
        <a href="#">blog</a>
        <a href="#">contact</a>
      </nav>
      
        <div class="banner-area">
        <h3>Meditation <br> <span>& Mindfulness</span></h3>
            <h2>Reduces <span class="typed2"></span></h2>
            <a href="#">Learn More</a>
        </div>
   </div>


    <script src="typed.js"></script>
    <script>
        var typed = new Typed(".typed2", {
            strings: [
                "Stress Level",
                "Memory Loss",
                "Depression"
            ],
            typeSpeed: 50,
            backSpeed: 50,
            loop: true
        });
    </script>
</body>
</html>

ADD CSS:

body {
	margin: 0;  
	padding: 0;
	font-family: 'Montserrat', sans-serif;
}
.home {
	background-image: url(a2.jpg);
	background-size: cover;
	height: 100vh;
}
nav {
	text-align: center;
	padding-top: 2%;
}
.logo {
	display: inline-block;
	color: #028a98;
	text-transform: capitalize;
	font-weight: bold;
	font-size: 40px;
	font-family: 'Cookie', cursive;
}
nav a {
	text-decoration: none;
	color: #626063;
	font-size: 18px;
	text-transform: uppercase;
	margin: 0 25px;
	letter-spacing: 2px;
	font-weight: 700;
}
.banner-area {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
}
.banner-area h3 {
	font-size: 80px;
	text-transform: capitalize;
	color: #028a98;
	margin: 0 0 40px 0;
	font-family: titan;
	line-height: 1;
}
.banner-area h3 span{
	color: #626063;
}
.banner-area h2 {
	margin: 0;
	padding: 0;
	color: #626063;
	font-size: 2em;
	line-height: 0;
}
.banner-area h2 span {
	color: #028a98;
}
.banner-area a {
	display: inline-block;
	margin-top: 50px;
	text-decoration: none;
	color: #fff;
	background: #028a98;
	padding: 10px 30px;
	font-size: 20px;
	text-transform: uppercase;
}
@media (max-width:800px) {
	nav a {
		font-size: 16px;
		margin: 0 10px;
	}
	.banner-area h2 {
		font-size: 1.7em;
	}
	.banner-area h3 {
		margin: 0 0 20px 0;
		font-size: 70px;
	}
	.home {
		background-position: 58%;
	}
}
@media (max-width: 767px){
	.banner-area h3 {
		font-size: 35px;
	}
	.banner-area h2 {
		font-size: 1em;
	}
	.banner-area a {
		font-size: 14px;
		margin-top: 30px;
	}
	nav a {
		font-size: 8px;
		margin: 0 5px;
	}
	.logo {
		font-size: 30px;
	}
	.home {
		background-position: 60%;
	}
}

We Hope you liked the Responsive layout with the typing text effect tutorial and the source code of it. There are many more such snippets on our website that may be useful for your next project. Click on the load button on the homepage to get them. If you like the content of our website, please share it with others. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive layout with typing text effect [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive layout with typing text effect

Video Tutorial:

Responsive layout with typing text effect [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form