--HTML CODE--
<!DOCTYPE html>
<html lang="en">
<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">
<title>Stickman Story</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Cool Programming Projects -->
<div class="primary-container">
<div class="container boy">
<div class="head"></div>
<div class="body"></div>
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-leg"></div>
<div class="left-leg"></div>
</div>
<div class="container girl">
<div class="head"></div>
<div class="body">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
<div class="right-hand"></div>
<div class="left-hand"></div>
<div class="right-leg"></div>
<div class="left-leg"></div>
</div>
<div class="road"></div>
<div class=" msg-box box1"><P>Hey, Is your name Google ?</P></div>
<div class=" msg-box box2"><P>No, but why?</P></div>
<div class=" msg-box box3"><P>because you have everything I am searching for :)</P></div>
</div>
</body>
</html>
--CSS CODE--
*{
padding:0;
margin:0;
}
body{
width:100%;
height:100vh;
background: linear-gradient(black,white);
overflow: hidden;
animation:body-background 100ms linear 12s 20 alternate forwards;
}
.primary-container{
width:100%;
height:100vh;
position: absolute;
}
.primary-container::before{
content: "";
position: absolute;
width:100%;
height:100%;
animation:before-background 5s linear 14s infinite;
}
.road{
height:100px;
width:100%;
background: linear-gradient(rgb(19, 19, 19),rgb(32, 32, 32));
position: absolute;
bottom:0px;
z-index: 1;
}
.container{
width:140px;
height:240px;
position: absolute;
bottom:90px;
}
.boy{
left:450px;
}
.girl{
right:450px;
}
.boy .head,.girl .head{
width:80px;
height:80px;
border-radius: 50%;
left: 24px;
position: absolute;
}
.boy .head{
border:5px solid rgb(0, 0, 0);
}
.girl .head{
border:5px solid rgb(0, 0, 0);
}
.boy .body, .boy .left-hand, .boy .right-hand, .boy .left-leg, .boy .right-leg{
width:5px;
height:80px;
background-color: black;
position: absolute;
border-radius: 40%;
}
.girl .left-hand, .girl .right-hand, .girl .left-leg, .girl .right-leg{
width:5px;
height:80px;
background-color: rgb(0, 0, 0);
position: absolute;
border-radius: 40%;
}
.boy .body{
left: 65px;
top: 85px;
}
.girl .body{
width:40px;
height:80px;
}
.girl .body div{
width:5px;
height:75px;
background-color: rgb(0, 0, 0);
position: absolute;
border-radius: 40%;
}
.girl .body .first{
left: 63px;
top: 92px;
transform: rotate(11deg);
transform-origin: top;
}
.girl .body .second{
left: 63px;
top: 92px;
transform: rotate(-11deg);
transform-origin: top;
}
.girl .body .third{
height: 36px;
left: 63px;
top: 147px;
transform: rotate(
90deg);
}
.boy .left-hand,.girl .left-hand{
left: 64px;
top: 90px;
transform: rotate(26deg);
transform-origin: top;
}
.boy .right-hand,.girl .right-hand{
left: 64px;
top: 90px;
transform: rotate(-26deg);
transform-origin: top;
}
.boy .left-leg , .girl .left-leg{
left: 64px;
top: 163px;
transform: rotate(23deg);
transform-origin: top;
}
.boy .right-leg , .girl .right-leg{
left: 64px;
top: 163px;
transform: rotate(-23deg);
transform-origin: top;
}
@keyframes before-background {
0%{
background: linear-gradient(red ,white);
}
20%{
background: linear-gradient(rgb(0, 195, 255) ,white);
}
40%{
background: linear-gradient(rgb(38, 255, 0) ,white);
}
60%{
background: linear-gradient(rgb(0, 4, 255) ,white);
}
80%{
background: linear-gradient(rgb(229, 255, 0) ,white);
}
100%{
background: linear-gradient(rgb(255, 0, 0) ,white);
}
}
@keyframes before-opacity {
0%{
opacity:0;
}
1%{
opacity:1;
}
100%{
opacity: 1;
}
}
@keyframes body-background {
0%{
background: white;
opacity:1;
}
100%{
background: black;
opacity: 0;
}
}
.msg-box{
width:250px;
height:100px;
border:3px solid black;
display: flex;
justify-content: center;
align-items: center;
padding:10px;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
font-weight: 500;
border-radius: 15px;
}
.msg-box p{
text-align: center;
}
.box1{
position: absolute;
left:250px;
top:200px;
opacity: 0;
animation: box-animation 3s linear 1 1s forwards;
}
.box2{
position: absolute;
right:250px;
top:200px;
opacity: 0;
animation: box-animation 2s linear 1 4.5s forwards;
}
.box3{
position: absolute;
left:250px;
top:200px;
opacity: 0;
animation: box-animation 5s linear 1 7s forwards;
}
@keyframes box-animation {
0%{
opacity: 0;
}
10%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
opacity: 0;
}
}
Post a Comment