Самостійна робота

Реалізувати проект. За основу взяти таблицю стилів з сайту
https://www.impressivewebs.com/demo-files/css3-animated-scene/

Приклад, як в CSS отримати коло: 



.circle {

 width: 100px; 

 height: 100px; 

 background: #cc0000; 

 -moz-border-radius: 50px; 

 -webkit-border-radius: 50px;
border-radius: 50px; 

}

еліпс (овал)
.ellipse { 

 width: 200px; 

 height: 100px; 

 background: #cc0000; 

 -moz-border-radius: 100px/50px; 

 -webkit-border-radius: 100px/50px; 

 border-radius: 100px/50px; 

}

квадрат/прямокутник
.square { 

width: 100px; / width: 300px;

height: 100px; 

background: #cc0000; 

}

А багато всіляких фігур можна знайти тут https://html5book.ru/css-figury/

Як поєднати декілька фігур
Наприклад,

html

<div class="rect">

    <div class="circle"></div>

</div>

css

div {

    background-color:#000;

}

.rect {

    width: 100px;

    height: 30px;

    position: relative;

    margin: 50px; 

}

.circle {

    width: 60px;

    height: 60px;

    border-radius: 30px;

    position: absolute;

    top: -15px;

    left: 20px;

}