CSS and HTML cloud

CSS and HTML cloud with only a few lines of HTML and CSS.

by William Green

HTML

<div id="projectContainer">
    <div id="cloudContainer">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

#projectContainer {
    background-color:#ddd;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#cloudContainer {
    position:relative;
    margin:auto;
    display:table;
    top:50vh;
}
#cloudContainer div:nth-child(1) {
    background-color:#37ACFF;
    width:90px;
    height:90px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position:relative;
    right:40px;
}
#cloudContainer div:nth-child(2) {
    background-color:#37ACFF;
    width:150px;
    height:150px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position:relative;
    bottom:150px;
}
#cloudContainer div:nth-child(3) {
    width:125px;
    height:125px;
    background-color:#37ACFF;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position:relative;
    bottom:275px;
    left:75px;
}
#cloudContainer div:nth-child(4) {
    width:142px;
    height:30px;
    background-color:#37ACFF;
    position:relative;
    bottom:305px;
}