Responsive Agency Website Homepage Design

The homepage is considered the main entrance to a website. When we search a website URL in a browser, the first page we see is the homepage. This section is called the virtual directory of a website. This web section contains the main navigation bar through which we can go to the depth of the website and know about other information. In this blog post, we will share with you another snippet about the responsive web design or responsive website homepage. The video below shows the step-by-step process of creating the snippet. Please watch the video. If you find our content useful, please subscribe to our YouTube channel.

Hope you have watched the video. The homepage is an important part of a website because it is how a visitor gets to know what the website has to offer. In an ideal homepage, all the important page links, contact information, and phone numbers of the website are added. Along with the good design, a responsive layout is also important. Because you don't know from which device the user will visit your website. It can be a desktop, mobile, tab, or any other small device. According to the survey, currently, the most traffic to a website comes from mobile devices. So your website should be made in such a way that it can adjust to all screen sizes.

The website layout is completed with the following: A navigation bar, a title, a headline, a call-to-action button, and a background image. Small devices may not be able to show the entire menu, so it may be hidden. Instead, an animated hamburger menu icon will appear. when we click on the hamburger menu icon, the main menu will expand vertically. The hamburger menu will switch to a cross icon and when we click it again, the menu will go back to its initial position. The video shows how the Homepage layout can be changed to fit the screen size and viewability.

You May Also like:

Responsive Agency Website Homepage Design [ Source Code ]:

Create an HTML and CSS file. Link the external CSS to the HTML file. Copy the code from the code box below and paste it into the respective file. Save the code and open it in the browser to see if it works. If it doesn't work then download the code from the download button below. The homepage design is completed, now add the following sections like about us, portfolio, etc. to create a complete website.

ADD HTML:

<!DOCTYPE html> 
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
    <title>How to create a responsive website html css</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <a class="logo" href="#">Creativo</a>
        <input type="checkbox" id="menu-btn" class="menu-btn">
        <label class="menu-icon" for="menu-btn">
            <span class="nav-icon"></span>
        </label>
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </header>
    <div class="banner">
        <div class="content">
            <h2>creative <span>agency</span></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <a href="#">learn more</a>
        </div>
    </div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Montserrat', sans-serif;
}
.header {
	position: fixed;
	z-index: 111;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
}
.header ul {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.logo {
	font-size: 35px;
	text-decoration: none;
	padding: 10px;
	float: left;
	display: block;
	color: #2ebd94;
	font-weight: 700;
}
.header .menu a {
	padding: 15px 25px;
	font-size: 20px;
	display: block;
	color: #2ebd94;
	text-decoration: none;
}
.header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .3s ease-out;
}
.header .menu a {
	color: #2ebd94;
}
.header .menu a:hover {
	background: #2ebd94;
	color: #fff;
}
.header .menu-icon {
	position: relative;
	float: right;
	padding: 30px 20px;
	cursor: pointer;
}
.header .nav-icon {
	position: relative;
	display: block;
	height: 2px;
	width: 30px;
	background: #2ebd94;
}
.header .menu-icon .nav-icon::before {
	position: absolute;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	background: #2ebd94;
	top: 7px;
	transition: all .2s ease-out;
}
.header .menu-icon .nav-icon::after {
	position: absolute;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	background: #2ebd94;
	top: -7px;
	transition: all .2s ease-out;
}
.header .menu-btn {
	display: none;
}
.header .menu-btn:checked~.menu {
	max-height: 600px;
}
.header .menu-btn:checked~.menu-icon .nav-icon {
	background: transparent;
}
.header .menu-btn:checked~.menu-icon .nav-icon::before {
	transform: rotate(-45deg);
	top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon::after {
	transform: rotate(45deg);
	top: 0;
}
.banner {
	background-image: url(1.jpg);
	height: 100vh;
	display: flex;
	color: #fff;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-size: cover;
	background-position: center center;
}
.content h2 {
	color: #000;
	font-family: 'Bebas Neue', cursive;
	font-size: 42px;
}
.content h2 span {
	color: #2ebd94;
}
.content p {
	color: rgba(0, 0, 0, 0.5);
	font-weight: 500;
}
.content a {
	background: #2ebd94;
	text-decoration: none;
	color: #fff;
	padding: 10px 25px;
	display: inline-block;
	margin-top: 25px;
}
@media only screen and (min-width:768px) {
	.header {
		padding: 0px 50px;
	}
	.header .menu a {
		all: unset;
		color: #000;
	}
	.header .menu {
		all: unset;
		float: right;
		padding-right: 100px;
	}
	.header ul li {
		list-style: none;
		display: inline-block;
	}
	.header ul li {
		color: #fff;
		font-size: 20px;
		padding: 20px 10px;
		cursor: pointer;
	}
	.header .menu-icon {
		display: none;
	}
	.content h2 {
		font-size: 70px;
	}
}
@media (max-width: 600px) {
	.banner {
		background-position: 65%;
	}
	.content {
		text-align: left;
		padding-left: 5%;
	}
}

Hope your code works. There are many more snippets like this on the website. You can visit those by clicking the load more button below the website's homepage. We are happy to have you here, so please don't forget to share our content.

DOWNLOAD CODE

Responsive Agency Website Homepage Design [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Agency Website Homepage Design

Responsive Agency Website Homepage Design [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form