PROWARE technologies
PROWARE technologies

Responsive, Animated HTML/CSS Website Landing Page With Menu

This code creates a responsive landing page with an animated menu.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Website Landing Page w/Menu</title>
	<style>
	body {
		font-family: sans-serif;
		color: white;
		background-color: black;
	}
	.banner {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url(https://picsum.photos/id/100/1920/1080);
		background-size: cover;
		background-position: center center;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		text-align: center;
		color: black;
	}
	.banner h1 {
		font-size: 5vmin;
	}
	.banner h2 {
		font-size: 2vmin;
	}
	.nav {
		position: absolute;
		display: flex;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		overflow: hidden;
	}
	.links {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		left: 0;
		top: 0;
		right: 0;
		z-index: 2;
		transform: translateY(-100%);
		transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28) .5s, top .5s cubic-bezier(0.18, 0.89, 0.32, 1.28) .5s;
		visibility: hidden;
		overflow: hidden;
	}
	.links ul {
		padding: 0;
		margin: 0;
	}
	#menu-icon {
		display: none;
	}
	#menu-icon + label {
		display: block;
		position: absolute;
		z-index: 3;
		top: 1vmin;
		right: 1vmin;
		font-size: 4vmax;
		color: black;
	}
	.links li {
		text-align: center;
		list-style: none;
	}
	.links a {
		font-size: 50px;
		line-height: 75px;
		text-decoration: none;
		color: white;
	}
	.links a:hover::before {
		content: ">";
		padding-right: .5vmin;
	}
	.links a:hover::after {
		content: "<";
		padding-left: .5vmin;
	}
	.box {
		transition: flex .5s ease-in-out;
	}
	.box:nth-child(1),
	.box:nth-child(3) {
		flex: 1;
		background-color: crimson;
	}
	.box:nth-child(2) {
		flex: 1 0 100%;
		background-color: transparent;
	}
	#menu-icon:checked + label {
		color: white;
	}
	#menu-icon:checked ~ .links {
		top: 50%;
		transform: translateY(-50%);
		visibility: visible;
	}
	#menu-icon:checked ~ .nav .box:nth-child(2) {
		flex: 0;
	}
	</style>
</head>
<body>
	
	<input type="checkbox" id="menu-icon" />
	<label for="menu-icon">
		&#9776;
	</label>
	<div class="banner">
		<div>
			<h1>Website Landing Page</h1>
			<h2>Lorem ipsum dolor sit amet.</h2>
		</div>
	</div>
	<div class="nav">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>
	<div class="links">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Email</a></li>
		</ul>
	</div>

</body>
</html>

Coding Video

https://youtu.be/0mIpteoABII