Responsive Homepage Design using Flexbox with Text Effect

byCodingFlicks -March 24, 2021

0

The first page that we see after entering any website is the homepage of the website. That is why the homepage part is called the main entrance of any website. The homepage creates the first impression to the visitors and gradually guides them to go to the other content of the website. A good homepage highlights the main information of the website, gives an idea about the niche on which the website is built and builds trust in them. A typical homepage usually has a navigation menu, some visuals, call-to-action buttons, etc. Today we will share with you the source of a responsive homepage with CSS text animation in it. The method of creating the complete snippet is shown in the video tutorial below. Hope you will watch the video tutorial.

Video Tutorial:

We Hope you have watched the video tutorial on designing a homepage with text animation above. A good and attractive homepage removes the distractions of the visitors and increases their tendency to explore the website further. We have taken the help of CSS Flexbox to create today's responsive web design snippet. With the help of the CSS Flexbox layout system, it is easy to arrange different elements of a website. Designs created with Flexbox adapt well to different screen sizes, which makes it perfect for responsive design. CSS Flexbox has less complex code, which takes much less time. Developers prefer CSS Flexbox in web design because it gives them control over spacing, alignment, and distribution of items in both horizontal and vertical directions. In this snippet, we have used text animation. The main purpose of text animation is to attract attention, make the content more interesting, and capture the reader's attention. This type of animation usually highlights headings, emphasizes important messages, adds personality to a brand, makes the site lively and memorable without overwhelming the visitors, etc.

You May Also Like:

Flexbox Homepage with Text Animation [ Source Code ]:

To create this Flexbox Homepage with Text Animation using HTML and CSS, we have to create an HTML file and a CSS file. After that, copy the code from the code box below and paste it into your file. After saving the code, open it in your browser. You can also download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <title>Homepage Design using Flexbox</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="wrapper">
            <nav>
                <div class="logo">
                    <a href="#">Jessica</a>
                </div>
                <div class="right-nav">
                    <a href="#">Home</a>
                    <a href="#">About</a>
                    <a href="#">Portfolio</a>
                    <a href="#">Services</a>
                    <a href="#">Contact</a>
                </div>
            </nav>
            <div class="hero">
                <div class="imgBox">
                    <img src="1.png" alt="">
                </div>
                <div class="content">
                    <h2>Jessica Chedd</h2>
                    <h1 class="cusAni" data-text="Web Developer">Web Developer</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat rerum illo natus nobis quaerat, maxime inventore ullam veritatis magni commodi voluptatem voluptates accusantium sint voluptatum.</p>
                </div>
            </div>
        </div>
    </header>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: "Poppins", sans-serif;
}
header {
	background: #161616;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%);
}
.wrapper {
	max-width: 1152px;
	padding: 0 15px;
	margin: 0 auto;
}
.logo a {
	text-decoration: none;
	color: #fff;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 1px;
}
.logo {
	padding-top: 15px;
}
nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.right-nav {
	padding-top: 15px;
}
.right-nav a {
	text-decoration: none;
	color: #fff;
	margin-left: 15px;
	transition: all .3s ease;
}
.right-nav a:hover {
	color: darkorange;
}
.imgBox {
	display: flex;
	justify-content: center;
	flex: 1;
}
.content {
	flex: 1;
}
.hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.imgBox img {
	width: 400px;
}
.content h2 {
	color: #fff;
}
.content p {
	color: #fff;
}
h1.cusAni {
	font-size: 4rem;
	color: #fff;
	position: relative;
	margin: 0;
	width: 100%;
}
h1.cusAni::before {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	color: darkorange;
	overflow: hidden;
	border-right: 2px solid;
	animation: animate 6s infinite;
}
@keyframes animate {
	0%, 10%, 100% {
		width: 0;
	}
	50%, 70% {
		width: 100%;
	}
}
/*responsive css*/

@media(max-width:1200px) {
	.wrapper {
		max-width: 100%;
        height: auto;
	}
}
@media(max-width:768px) {
	.wrapper {
		max-width: 100%;
	}
	h1.cusAni {
		font-size: 2rem;
	}
}
@media(max-width:576px) {
	.imgBox img {
		width: 100%;
	}
	.wrapper {
		max-width: 100%;
	}
	.wrapper {
		flex-direction: column;
	}
	nav {
		display: block;
		text-align: center;
	}
	.content {
		position: absolute;
		top: 160px;
		padding: 0 1rem;
	}
	h1.cusAni {
		font-size: 1.5rem;
	}
}

People's attention spans are getting shorter day by day. So to reduce bounce rate, you need to do something extra so that visitors can stay on your website for a long time. Making the website fully responsive and adding text animations is part of this. This way, visitors can view your website from all devices and your main message will reach your audience through text animations. Hope you have collected the snippet. To get more source codes like this, click on the "Load More" button at the bottom of our homepage. Thank you for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.