Responsive CSS Flexbox Homepage Layout

Hello friends, In this project, I will share a flexbox website homepage snippet with you. I have also made the homepage snippet (flexbox website template) responsive for the small devices using CSS media queries with some minor alterations of the CSS properties. In this blog, I have shared many projects on CSS animation examples, bootstrap, JavaScript, HTML CSS, and so on. Please check those as well, apart from this snippet. For a detailed understanding of the code, I suggest you follow the below video and then come back to get the source code.

I hope you watched the video and got some idea about the project. Now, what is css flexbox? CSS flexbox is a one-dimensional layout pattern. Using CSS flexbox layout, we can design flexible and effective web layouts. To create a website, we need a homepage first. In this snippet, we made a simple-looking homepage design with a logo, navbar, and a call-to-action button on the top-right side of the homepage. I also used a full-screen background image for this project. I didn't use any banner text in this homepage design template, because my main focus was to make a responsive flexbox navbar. I used basic CSS flexbox properties to create the snippet and, all of them are self-explanatory.

You May also like:

CSS Flexbox Homepage Layout [ Source Code ]:

To make this snippet, create an HTML file with a .html extension and then a CSS file with a .css extension. After That, link the external file with the HTML file. Please copy the code below and paste them into your file and save them.

ADD HTML

<!DOCTYPE html>
<!--divinectorweb.com-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Responsive CSS Flexbox Homepage Layout</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="header">
		<nav>
			<div class="logo">
				Erik Johnson
			</div>
			<div class="menu">
				<ul>
					<li>
						<a href="#">Home</a>
					</li>
					<li>
						<a href="#">About</a>
					</li>
					<li>
						<a href="#">Services</a>
					</li>
					<li>
						<a href="#">contact</a>
					</li>
				</ul>
			</div>
			<div class="btn">
				<button>Contact</button>
			</div>
		</nav>
	</div>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	font-family: montserrat;
}
nav {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 100px;
	color: #fff;
}
.logo {
	font-size: 25px;
	background-image: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.menu ul li {
	display: inline-block;
	margin: 0 15px;
}
.menu ul li a {
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
	font-family: montserrat;
	background-image: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.btn button {
	color: #000;
	cursor: pointer;
	font-weight: 800;
	text-transform: uppercase;
	padding: 12px 30px;
	border-radius: 4px;
	background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
	border: none;
}
.header {
	height: 100vh;
	background-image: url(https://images.pexels.com/photos/90764/man-studio-portrait-light-90764.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
@media (max-width: 1000px) {
	nav {
		flex-direction: column;
		align-items: flex;
	}
	.menu ul {
		padding: 0;
	}
	.menu ul li {
		margin: 0 15px 0 0;
	}
}
@media (max-width: 600px) {
	.logo {
		margin-top: 0;
		font-size: 17px;
	}
	nav {
		padding: 30px;
	}
	.menu ul li a {
		font-size: 10px;
	}
	.btn {
		display: none;
	}
}

I hope you have created your version. Please subscribe to our youtube channel 'divinector' for free source code and tutorials. Also, press the bell notification and click 'all' so that you can get notified of all our upcoming videos. Follow us on our social media profiles and stay connected with the blog. Thank you for vising this blog.

1 Comments

Post a Comment

About Us

Contact Form

Responsive CSS Flexbox Homepage Layout

You might like

1 Comments

Post a Comment

Contact Form