Разработка дизайн-макета баннера

Разработка интерактивного баннера (CSS)

HTML:

<div class="banner">

<img src="images/zeml9.png" alt="Земля" class="zem">

<img src="images/moon.png" alt="Луна" class="moon">

<img src="images/raketa.png" alt="Ракета" class="raketa">

<div class="raketa"></div>

<divclass="content"><h2 id="sh2">Карьеравашихдетейначинаетсяунас!</h2><form>

<input type="submit" id="submit" value="Записаться"/>

</form>

</div>
</div>

CSS:

.banner{

height: 219px;

border: 1px solid #3A7AE2;

width: 100%px;

margin: 10px 15px 50px 15px;

border-radius: 5px;

background: url('images/phon.jpg') no-repeat center center;

background-size: cover;

position:relative;

box-shadow:0px 0px 30px #000;

 }

.content{

height:200px;

width:310px;

background:rgba(50,155,197,0.5);

position:absolute;

right:10px;

top:10px;

border:1px solid #184564;

border-radius:10px;

z-index:100;

 }

#sh2{

margin:40px 0px 0px 10px;

text-align:center;

 }

#submit{

margin:40px 0px 0px 90px;

width:130px;

background-color:#FFFFFF;

height:40px;

border:1px solid #DDDDDD;

border-radius:5px;

 }

.zem{

position:relative;

z-index:1;

margin:-30px 0px 0px 40px;

padding:50px;

width:180px;

 }

.moon{

position:absolute;

left:125px;

top:140px;

width:90px;

animation: linear 10s anime infinite;

z-index:0;

 }

@keyframes anime{

0%{width:40px;}

24%{z-index:0;}

25%{top:40px;left:260px;z-index:2;}

50%{top:80px;width:100px;}

75%{top:130px;left:23px;}

100%{width:40px;transform:rotate(360deg);}

 }

.raketa{

position:absolute;

top:160px;

left:140px;

width:1px;

transform:rotate(40deg);

z-index:99;

animation:linear 6s poleteli infinite;

 }

@keyframes poleteli{

0%{}

10%{top:20px;left:250px;width:20px;transform:rotate(80deg);}
100%{top:50px;left:1178px;width:150px;transform:rotate(100deg);z-index:-2;}

}