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.
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.
You May Also Like:
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.
<!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>
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%;
}
}
For the Original Post Click Here
Top comments (0)