<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background:linear-gradient(#151A79,#0D739E) no-repeat;
background-size:cover;
transition:0.6s;
background-color:#0D739E
}
.earth{
height:300px;
width:300px;
border-radius:100%;
background:radial-gradient(circle at 35% 30%,white,#18B3B9C7);
position: absolute;
top:8rem;
left:2rem;
z-index:-4;
}
.tc1,.tc2,.tc3{
height:5em;
width:5em;
background:#5D9B28;
border-radius:100%;
position: absolute;
box-shadow:0 0 14px #DCFF03;
animation:3s glow infinite;
}
.tc1{
top:200px;
left:120px;
}
.tc2{
top:200px;
left:170px;
}
.tc3{
top:150px;
left:140px;
}
.stem{
width:20px;
height:75px;
background:#5C362D;
position: absolute;
top:250px;
left:170px;
z-index:-2;
}
@keyframes glow{
from{
box-shadow:0 0 10px #DCFF03;
}
to{
box-shadow:0 0 2000px #DCFF03;
}
}
</style>
<body>
<header>
<h2 style="color:white;font-family:Brush Script MT,cursive;">WISHING YOU A VERY HAPPY EARTH DAY 🌍</h2>
<small style="color:white;font-family:monospace">“Plants are the heart of the Earth; save them to save the planet.”</small>
</header>
<div class="container">
<div class="main">
<div class="tree1">
<div class="tc1"></div>
<div class="tc2"></div>
<div class="tc3"></div>
<div class="stem"></div>
<div class="earth">
</div>
</div>
</div>
</body>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.