Illyaas

Web page (must run on full screen)

<!DOCTYPE html>

<html>

<head>
Â 	
<meta charset='utf-8'>
Â 
Â <meta name='author' content='Illyaas'>
Â 	
<meta name='viewport' content='width=device-width, initial-scale=1.0'>Â 
	<title>Modern web design</title>
	<style>Â 
	@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
		*{
			margin: 0;
			padding: 0;
		}
		.container {
			height: 100vh;
			width: 100%;
			background-image: linear-gradient(-110deg , pink 50%, #ffbb45);
			background-position: center;
			background-size: cover;
			padding-left: 5%;
			padding-right: 5%;
			box-sizing: border-box;
			position: relative;
			animation: container-bg 2s linear forwards;
			overflow: hidden;
		}
		@keyframes container-bg {
			from {opacity: 0.5}
			to {opacity: 1}
		}
		.navbar {
			width: 100%;
			height: 15vh;
			margin: auto;
			display: flex;
			align-items: space-around;
			align-items: center;
			transform: translateY(-150px);
			animation: navbar 2s 1s ease forwards;
		}
		@keyframes navbar {
			from{transform: translateY(-150px);}
			to{transform: translateY(00px);}
		}
		.logo {
			width: 260px;
			cursor: pointer;
		}
		nav {
			flex: 1;
			padding-left: 60px;

}

nav ul li {
			display: inline-block;
			list-style: none;
			margin: 0px 20px;
		}
		nav ul li a {
			text-decoration: none;
			color: #333;
		}
		.content h1 {
			font-size: 70px;
			font-weight: 100;
			margin-top: 24px;
			margin-bottom: 15px;
			color: #232d60;
			font-family: 'Patua One', cursive;
		}
		.content p {
			font-size: 20px;
			color: #6a7199;
			font-family: 'Baloo 2', cursive;
		}
		.content {
			margin-left: 10%;
			margin-top: 10%;
			transform: translateX(-1000px);
			animation: content 5s ease 1s forwards;
		}
		@keyframes content {
			from{transform: translateX(-1000px);}
			to {transform: translateX(00px);}
		}

.content .btn {
			display: inline-block;
			background: linear-gradient(45deg, #87adfe, #ff77cd);
			border-radius: 10px;
			padding: 10px 20px;
			box-sizing: border-box;
			text-decoration: none;
			color: #fff;
			margin-top: 30px;
			
			transform: scale(1.1);
			transition: transform .7s;
			animation: btn 3s ease-out 5s forwards;
		}
		.content .btn:hover{
			transform: scale(1.4);
		}
		@keyframes btn {
			from {box-shadow: 0px 0px 0px rgba(94,28,68,0.15);}
			to {box-shadow: 5px 8px 30px 3px rgba(94,28,68,0.15);}
		}
		.feature-img {
			height: 70%;
			position: absolute;
			bottom: -50rem;
			right: 6rem;
			margin-bottom: 70px;
			transform: translateX(-500);
			animation: img 3s ease 3s forwards;
		}
		@keyframes img {
			from{bottom: -50em;
			right: 6rem;}
			to{bottom: 0;
			right: 6rem;}
		}
		.arrow-icons img{
			width: 40px;
			margin-right: 25px;
			margin-top: 10px;
		}
		.cart{
			float: right;
			position: absolute;
			top: -150px;
			right: 0;
			margin: 25px;
			transform: scale(1.1);
			transition: transform .7s;
			animation: cart 2s 1s ease forwards;
		}
		@keyframes cart {
			from{top: -150px;}
			to{top: 0;}
		}
		.cart:hover {
			transform: scale(1.4);
		}
		.social-links {
			transform: scale(.2);
			float: left;
		}
		.grass {
			
			height: 60em;
			width: 80em;
			position: absolute;
			bottom: -90em;
			right: -30em;
			background: linear-gradient(-45deg, turquoise 60%, green);
			border-radius: 50%;
			z-index: -1;
			animation: grass 3s ease 2s forwards;
		}
		@keyframes grass {
			from {bottom: -90em;}
			to {bottom: -40em;}
		}

</style>
</head>
<body>
	<div class="container">Â 
		<div class="navbar">Â 
			<img src="https://justcodaborate.org/project_assets/logo.png" class="logo">
			<nav>Â 
				<ul>Â 
					<li><a href="">Home</a></li>
					<li><a href="">About</a></li>
					<li><a href="">Collection</a></li>
					<li><a href="">Categorory</a></li>
				</ul>
				
			</nav>
		</div>
			<img src="https://justcodaborate.org/project_assets/cart.png" class="cart">
		<div class="content">Â 
			
			<h1>You should always <br> learn more</h1>
			<p>The internet is full of things to learn</p>
			<div class="arrow-icons">
				<img src="https://justcodaborate.org/project_assets/back-arrow.png">
				<img src="https://justcodaborate.org/project_assets/next-arrow.png">
			</div>

<a href="" class="btn"> Learn more</a>
		</div>

</div>

</div>
</body>
</html>