Full Tutorial


Adding Animations





Source Code

HTML Code 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Digico.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- NavBar -->
<nav>
<div class="logo">
<h1>Digi<span>co.</span></h1>
</div>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
<div class="other-links">
<button>Say Hi!</button>
</div>
</nav>
<!-- Banner -->
<section class="banner">
<div class="LeftSide">
<h3>We are a digital Agency based in San Francisco</h3>
<h1>We build Digital Products For Creative People</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt </p>
</div>
<div class="RightSide">
<img src="images/banner.png">
</div>
</section>
</body>
</html>


CSS Code (With Animations)

*{
margin: 0;
padding: 0;
font-family: Poppins;
background: #f6f8f6;
}
nav{
padding: 10px 76px;
display: flex;
flex-direction: row;
align-items: center;
}
.logo{
flex-basis: 20%;
animation: moveright 1s forwards;
visibility: hidden;
}
.logo h1{
font-size: 1cm;
color: black;
}
.logo h1 span{
color: red;
}
.nav-links{
flex-basis: 50%;
margin: auto;
animation: movedown 0.5s forwards;
visibility: hidden;
}
.nav-links ul{
display: flex;
list-style: none;
}
.nav-links ul li{
margin-right: 51px;
font-size: 19px;
transition: 0.5s;
}
.nav-links ul li:hover{
color: red;
font-weight: 500;
cursor: pointer;
}
.other-links button{
padding: 8px 30px;
border-radius: 10px;
border: 1px solid lightgrey;
transition: 0.5s;
font-size: 16px;
animation: moveleft 1s forwards;
visibility: hidden;
}
.other-links button:hover{
box-shadow: 0 0 8px lightgrey;
}
.banner{
height: 80vh;
padding: 1cm;
display: flex;
flex-direction: row;
align-items: center;
}
.banner .LeftSide{
width: 50%;
padding-left:1cm;
animation: moveright 1s forwards;
visibility: hidden;
}
.banner .LeftSide h1{
font-size: 1.3cm;
margin-bottom: 20px;
animation: moveright 1s forwards;
visibility: hidden;
}
.banner .LeftSide h3, .banner .LeftSide p{
color: grey;
}
.banner .RightSide img{
animation: pop 1s forwards;
visibility: hidden;
}
/*animation*/
@keyframes moveright{
from{
transform: translateX(-100%);
visibility: visible;
}
to{
transform: translateX(0%);
visibility: visible;
}
}
@keyframes movedown{
from{
transform: translateY(-100%);
visibility: visible;
}
to{
transform: translateY(0%);
visibility: visible;
}
}
@keyframes moveleft{
from{
transform: translateX(100%);
visibility: visible;
}
to{
transform: translateX(0%);
visibility: visible;
}
}
@keyframes pop{
from{
transform: scale(1.3);
visibility: visible;
}
to{
transform: scale(1.0);
visibility: visible;
border-radius: 15px;
}
}

/*Adding Responsiveness*/
@media screen and (max-width: 650px){
.logo{
text-align: center;
position: absolute;
top: 0;
}
.nav-links ul{
visibility: hidden;
}
}