<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="clouds">
<div class="cloud">cloud</div>
<div class="cloud1">cloud1</div>
<div class="cloud2">cloud2</div>
<div class="cloud3">cloud3</div>
<div class="cloud4">cloud4</div>
<div class="cloud5">cloud5</div>
</div>
<div><h1>In the begining God created <span>the heaven and the earth. {Genesis 1:1}</span></h1></div>
<div class="footer">
<h6>© 2024 Polina Eliana</h6>
</body>
</html>
html body {
width: 500px;
height: 850px;;
background: linear-gradient(
to top,
rgb(116, 231, 29) 50%,
rgb(30, 226, 243) 50%);
}
.cloud {
width:300px;
height:300px;
background: aliceblue;
position: relative;
left: 700px;
clip-path: circle(50% at 50% 50%);
background-color: aliceblue;
border: 15px solid rgb(227, 224, 224);
border-bottom: none;
border-right: none;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.cloud1 {
width:300px;
height:300px;
background: aliceblue;
position: absolute;
left: 610px;
top: 200px;
clip-path: circle(50% at 50% 50%);
animation-name: moving;
animation-duration: 3s;
animation-direction:normal;
border: 15px solid rgb(227, 224, 224);
border-top: none;
border-left: none;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.cloud2 {
width:300px;
height:300px;
background: aliceblue;
position: absolute;
left: 900px;
top: 5px;
clip-path: circle(50% at 50% 50%);
animation-name: moving;
animation-duration: 3s;
animation-direction:normal;
border: 15px solid rgb(227, 224, 224);
border-left: none;
border-right: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.cloud3 {
width:300px;
height:300px;
background: aliceblue;
position: absolute;
left: 500px;
top: 5px;
clip-path: circle(50% at 50% 50%);
animation-name: moving;
animation-duration: 3s;
animation-direction:normal;
border: 15px solid rgb(227, 224, 224);
border-right: none;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.cloud4 {
width:300px;
height:300px;
background:aliceblue;
position: absolute;
left: 850px;
top: 160px;
clip-path: circle(50% at 50% 50%);
animation-name: moving;
animation-duration: 3s;
animation-direction:normal;
border: 15px solid rgb(227, 224, 224);
border-top: none;
border-left: none;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.cloud5 {
width:300px;
height:300px;
background: aliceblue;
position: absolute;
left: 400px;
top: 200px;
clip-path: circle(50% at 50% 50%);
animation-name: moving;
animation-duration: 3s;
animation-direction:normal;
border: 15px solid rgb(227, 224, 224);
border-top: none;
border-right: none;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
@keyframes moving {
0% {
left:700px;
}
}
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align:right;
position: relative;
left: 500px;
bottom: 150px;
color: hsl(44, 96%, 63%);
animation-name: appear;
animation-duration: 8s;
}
@keyframes appear {
from {
color: transparent;
}
to {
color:hsl(44, 96%, 63%);
}
}
.footer {
text-align: right;
position: relative;
top: 350px;
left: 350px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.