баннер html\css

by Denis Tverdokhlebov

HTML

<div class="flex">
  <div class="block">
    <div class="background london">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 968.7 353.6" style="enable-background:new 0 0 968.7 353.6;" xml:space="preserve">
<style type="text/css">
	.st0{opacity:0.83;}
	.st1{opacity:0.74;}
	.st2{fill:#4A3871;}
	.st3{opacity:0.74;fill:#706194;}
	.st4{opacity:0.74;fill:#998CB5;}
	.st5{fill:#F7EFFF;}
	.st6{fill:url(#SVGID_1_);}
	.st7{fill:url(#SVGID_2_);}
	.st8{fill:url(#SVGID_3_);}
	.st9{fill:url(#SVGID_4_);}
	.st10{fill:url(#SVGID_5_);}
	.st11{fill:url(#SVGID_6_);}
	.st12{fill:url(#SVGID_7_);}
	.st13{fill:url(#SVGID_8_);}
	.st14{fill:url(#SVGID_9_);}
	.st15{fill:url(#SVGID_10_);}
	.st16{fill:url(#SVGID_11_);}
	.st17{fill:url(#SVGID_12_);}
	.st18{fill:url(#SVGID_13_);}
	.st19{fill:url(#SVGID_14_);}
	.st20{fill:url(#SVGID_15_);}
	.st21{fill:url(#SVGID_16_);}
	.st22{fill:#150633;}
	.st23{fill:url(#SVGID_17_);}
	.st24{opacity:0.4;fill:url(#SVGID_18_);}
	.st25{opacity:0.4;fill:url(#SVGID_19_);}
	.st26{opacity:0.4;fill:url(#SVGID_20_);}
	.st27{opacity:0.4;fill:url(#SVGID_21_);}
	.st28{fill:#B8AFDB;}
	.st29{opacity:0.56;fill:#B8AFDB;}
	.st30{fill:url(#SVGID_22_);}
</style>
<g id="moon_1_" class="st0">
	<g class="st1">
		
			<image style="overflow:visible;opacity:0.75;" width="998" height="998" xlink:href="http://i63.tinypic.com/1z70611.png"  transform="matrix(0.24 0 0 0.24 101.0587 71.8721)">
		</image>
		<g>
			<circle class="st2" cx="220.8" cy="191.6" r="77.2"/>
		</g>
	</g>
	<circle class="st3" cx="220.8" cy="191.6" r="70"/>
	<circle class="st4" cx="220.8" cy="191.6" r="63.2"/>
	<circle class="st5" cx="220.8" cy="191.6" r="56.2"/>
</g>
<g id="moon" class="st0">
	<g class="st1">
		
			<image style="overflow:visible;opacity:0.75;" width="998" height="998" xlink:href="http://i63.tinypic.com/1z70611.png"  transform="matrix(0.24 0 0 0.24 595.065 74.5587)">
		</image>
		<g>
			<circle class="st2"...

CSS

@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #FFF;
  text-decoration: none;
}

@-webkit-keyframes skyline {
  0% {
    -webkit-transform: translateX(-845px);
  }
  85% {
    -webkit-transform: translateX(-100px);
  }
  100% {
    -webkit-transform: translateX(-140px);
  }
}
@keyframes skyline {
  0% {
    transform: translateX(-845px);
  }
  85% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(-140px);
  }
}
@-webkit-keyframes clouds {
  0% {
    -webkit-transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(-50px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}
@keyframes clouds {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0px);
  }
}
html, body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0px;
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  background: #3d3963;
  background: -moz-radial-gradient(center, ellipse cover, #3d3963 0%, #232541 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #3d3963 0%, #232541 100%);
  background: radial-gradient(ellipse at center, #3d3963 0%, #232541 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3963', endColorstr='#232541',GradientType=1 );
  -webkit-font-smoothing: antialiased;
}

.flex {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block {
  background: #150633;
  width: 370px;
  text-align: center;
  overflow: hidden;
  height: 650px;
  position: relative;
  box-shadow: 0 19px 48px rgba(0, 0, 0, 0.22), 0 15px 32px rgba(0, 0, 0, 0.15);
}
.block .background {
  top: -60px;
}
.block .background.london {
  transition: 0.4s all ease;
  transform: translateX(-845px);
}
.block .background.london .slidetext {
 ...