<div class="sky">
<div class="sea"></div>
<div class="star1">★</div>
<div class="star2">★</div>
<div class="star3">★</div>
<div class="moon">●</div>
</div>
.sky{
width: 200px;
height:200px;
background: #b22222;
position: relative;
}
.sea{
width: 100%;
height: 80px;
background: #00008b;
opacity: 0.9;
position: absolute;
bottom: 0;
z-index: 1;
}
.star1{
color: #fff;
font-size: 10px;
position: absolute;
top: 10px;
left: 10px;
}
.star2{
color: #fff;
font-size: 10px;
position: absolute;
top: 50px;
left: 80px;
}
.star3{
color: #fff;
font-size: 10px;
position: absolute;
bottom: 180px;
right: 10px;
}
.moon{
color: #fff;
font-size: 100px;
width: 100px;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.