Cloud

by Vloxxity

HTML

<body>
    <!--<div class="cloud"></div>
    <div class="cloud"><div></div></div>
    <div class="cloud"><div><div></div></div></div>
    <div class="cloud"><div><div><div></div></div></div></div>
    <div class="cloud"><div><div><div><div></div></div></div></div></div>-->
    <div class="cloud"><div><div><div><div><div></div></div></div></div></div></div>
    <div class="cloud"><div><div><div><div><div></div></div></div></div></div></div>
    <div class="cloud"><div><div><div><div><div></div></div></div></div></div></div>
</body>

CSS

.cloud{
    height: 40px;
    width: 40px;
    background-color:white;
    margin-top:5%;
    border-radius: 100%;
}
.cloud>div{
    height: 117%;
    width: 115%;
    background-color:inherit;
    position:relative;
    top:-30%;
    left:35%;
    border-radius: inherit;
}
.cloud>div>div{
    height: 120%;
    width: 120%;
    background-color:inherit;
    position:relative;
    top:-20%;
    left:30%;
    border-radius: inherit;
}
.cloud>div>div>div{
    height: 85%;
    width: 85%;
    background-color:inherit;
    position:relative;
    top:10%;
    left:40%;
    border-radius: inherit;
}
.cloud>div>div>div>div{
    height: 75%;
    width: 75%;
    background-color:inherit;
    position:relative;
    top:43%;
    left:40%;
    border-radius: inherit;
}
.cloud>div>div>div>div>div{
    height: 100%;
    width: 200%;
    background-color:inherit;
    position:relative;
    top:-0,5%;
    left:-140%;
}
body{
    background-color:blue;
}