HTML CODE - Copy
HTML CODE - Copy
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini World</title>
<style>
body {
margin: 0;
background: linear-gradient(to top, #87ceeb, #e0f7fa);
overflow: hidden;
font-family: 'Segoe UI', sans-serif;
}
.sun {
position: absolute;
top: 50px;
right: 80px;
width: 100px;
height: 100px;
background: radial-gradient(circle, #ffeb3b, #fdd835);
border-radius: 50%;
box-shadow: 0 0 30px #ffeb3b;
animation: spin 20s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.cloud {
position: absolute;
background: #fff;
border-radius: 50%;
opacity: 0.9;
animation: floatClouds 60s linear infinite;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
border-radius: 50%;
}
.cloud1 {
width: 120px;
height: 60px;
top: 80px;
left: -150px;
}
.cloud1:before {
width: 80px;
height: 80px;
top: -20px;
left: 30px;
}
.cloud1:after {
width: 60px;
height: 60px;
top: 10px;
left: 60px;
}
@keyframes floatClouds {
0% { left: -200px; }
100% { left: 110%; }
}
.mountains {
position: absolute;
bottom: 0;
width: 100%;
height: 300px;
background: linear-gradient(to top, #4caf50, #81c784);
clip-path: polygon(0 100%, 20% 40%, 40% 100%, 60% 50%, 80% 100%, 100% 70%,
100% 100%);
}
.tree {
position: absolute;
bottom: 50px;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 60px solid #2e7d32;
}
.tree::after {
content: '';
position: absolute;
top: 60px;
left: -5px;
width: 10px;
height: 20px;
background: #8d6e63;
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #388e3c;
}
.title {
position: absolute;
top: 20px;
left: 30px;
font-size: 2.5em;
color: #ffffff;
text-shadow: 2px 2px #4caf50;
}
</style>
</head>
<body>
<div class="sun"></div>
<div class="cloud cloud1"></div>
<div class="mountains"></div>
<div class="ground"></div>
</body>
</html>