Векторная графика для начинающих: теория и практика технического дизайна — страница 25 из 31

Код HTML

Практикум №9. Многослойная веб-иллюстрация</code></pre></p><p><pre><code>    с адаптивным дизайном
          Ваши детипод присмотром

Тарифный план с семейной геолокацией

        и удобным интерфейсом

Выбрать тариф

Код CSS

body {
  width:100%;
  height:100vh;
  margin:0;
  padding:0;
}
a.illustration {
  display: block;
  width: 100%;
  max-width: 1000px;
  min-height: 480px;
  margin: 0 auto 20px auto;
  background-color: #00b856;
  background-image:url('../img/png/icons.png');
  background-repeat:no-repeat;
  background-position:center center;
  border-radius: 0 0 30px 30px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}
a.illustration h2 {
  display: block;
  width: fit-content;
  margin: 0;
  padding: 105px 0 0 0;
  font-size: 36px;
  font-family: Arial,sans-serif;
  color: #fff;
  text-align: left;
}
a.illustration div.textBlock {
  display: inline-block;
  margin: 0 2% 0 15%;
}
a.illustration p {
  max-width: 360px;
  font-size: 17px;
  font-family: Arial,sans-serif;
  line-height: 1.35em;
}
a.illustration div.object {
  display: inline-block;
  width: 244px;
  height: 342px;
  float: right;
  margin: 60px 20% 0 0;
  background-image: url('../img/svg/object.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
a.illustration div.object i.girl {
  position: relative;
  z-index: 0;
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 200px;
  margin: 58px auto;
  background-size: cover;
  background-color: #9d24d9;
  background-repeat: no-repeat;
  box-shadow: inset 1px 1px 5px #444;
  border: 1px solid #9d24d9;
  background: rgb(153,24,132);
  background: -moz-linear-gradient(top, rgba(153,24,132,1) 0%,
  rgba(221,42,193,1) 100%);
  background: -webkit-linear-gradient(top, rgba(153,24,132,1)
  0%, rgba(221,42,193,1) 100%);
  background: linear-gradient(to bottom, rgba(153,24,132,1) 0%,
  rgba(221,42,193,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr='#991884', endColorstr='#dd2ac1',
  GradientType=0 );
  border: none;
}
a.illustration div.object i.girl:before {
  content: "";
  display: block;
  position: relative;
  z-index: 1;
  width: 128px;
  height: 128px;
  background-image: url('../img/png/girl.png');
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
  border-radius: 200px;
}
a.illustration b.button:not(:target) {
  display: block;
  max-width: 155px;
  margin: 0;
  padding: 8px 16px 10px 16px;
  border-radius: 100px;
  background-color: #9d249b;
  border: 2px solid #fff;
  font-family: Arial,sans-serif;
  font-size: 15px;
  text-align: center;
}
a.illustration b.button:hover, a.illustration b.button:target {
  display: block;
  max-width: 155px;
  margin: 0;
  padding: 8px 16px 10px 16px;
  border-radius: 100px;
  background-color: #972195;
  border: 2px solid #972195;
  font-family: Arial,sans-serif;
  font-size: 15px;
  text-align: center;
  color: #ebebeb;
}
i.adult {
  position: relative;
  top: 120px;
  left: 30px;
  display: block;
  width: 44px;
  height: 26px;
  border: 2px solid #fff;
  background-color: rgba(0,0,0,0.15);
  border-radius: 6px;
}
i.adult:before {
  content: "18+";
  display: block;
  padding: 5px 0 0 0;
  font-family: Arial,sans-serif;
  font-style: normal;
  text-align: center;
}

@media (max-width:999px) and (min-width:640px) {
    a.illustration {
      min-height: 380px;
    }
    a.illustration div.object {
      display: inline-block;
      width: 244px;
      height: 342px;
      float: right;
      margin: 50px 10% 40px 0;
      background-image: url('../img/svg/object.svg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      zoom: 80%;
    }
    a.illustration h2 {
      display: block;
      width: fit-content;