mirror

by mirowin

HTML

<div class="main-wrap">
  <div class="header-wrap u-bold">
    <div>Добро пожаловать!</div>
  </div>
  <div class="content-wrap">
    <div class="tittle-wrap bold">
      tittle
    </div>
    <div class="img-wrap">
      <div class="img-slide">
      </div>
    </div>
    <div class="desc-wrap s-bold">
      description
    </div>
  </div>
  <div class="footer-wrap norm">
    <div>Добро пожаловать!</div>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Exo+2:400,400italic,600,600italic,700,700italic,800,800italic,900,900italic&subset=latin,cyrillic);
* {
  padding: 0;
  margin: 0;
  border: 0;
}

div {
  outline: 0px solid gray;
  color: white
}

.norm {
  font-family: 'Exo 2', sans-serif;
  font-weight: 400;
  font-size: 12pt;
}

.norm-it {
  font-family: 'Exo 2', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 12pt;
}

.s-bold {
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 18pt;
}

.s-bold-it {
  font-family: 'Exo 2', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18pt;
}

.bold {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 24pt;
}

.bold-it {
  font-family: 'Exo 2', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 24pt;
}

.e-bold {
  font-family: 'Exo 2', sans-serif;
  font-weight: 800;
  font-size: 28pt;
}

.e-bold-it {
  font-family: 'Exo 2', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 28pt;
}

.u-bold {
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  font-size: 36pt;
}

.u-bold-it {
  font-family: 'Exo 2', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 36pt;
}

.main-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
}

.header-wrap {
  position: relative;
  width: 100%;
  height: 10%;
  padding-top: 2%;
  padding-bottom: 2%;
}

.header-wrap div {
  font-size: 24pt;
  vertical-align: center;
  text-align: center;
}

.content-wrap {
  width: 100%;
  height: 80%;
}

.tittle-wrap {
  z-index: 999;
  position: relative;
  margin-top: 0px;
  width: 100%;
  padding-top: 2%;
  padding-bottom: 2%;
  text-align: center;
  background-color: black;
}

.img-wrap {
  position: relative;
  width: 100%;
  height: 70%;
}

.img-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background:...