0% found this document useful (0 votes)
2 views3 pages

HTML CODE - Copy

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 views3 pages

HTML CODE - Copy

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

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;
}

.tree1 { left: 80px; }


.tree2 { left: 200px; }
.tree3 { left: 320px; }

.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="title">🌍 Welcome to Mini World!</div>

<div class="sun"></div>
<div class="cloud cloud1"></div>

<div class="mountains"></div>

<div class="tree tree1"></div>


<div class="tree tree2"></div>
<div class="tree tree3"></div>

<div class="ground"></div>

</body>
</html>

You might also like