Купи слона

by Vladimir

HTML

<section class="wrapper">
<header>
  <span></span>Купи слона
  <div>Все так говорят, а ты купи слона!</div>
</header>
<section>
<aside class="col-25">
  <h3>
  Навигация
  </h3>
</aside>
<main class="col-75">
  <h1>
  Слон Африканский
  </h1>
  <div class="col-50">
    <img width="100%" src="http://zveri911.ru/img/elephant/elephant.jpg" />
  </div>
  <div class="col-50">
    <ul>
      <li>Цена: 10000$</li>
      <li>Количество: <input type="number" /></li>
    </ul>
  </div>
  <div class="clear"></div>
  <p>
  Слон станет другом для всей семьи!
  </p>
  <footer>
    <h3>Похожие продукты</h3>
    <ul class="related-items">
      <li>
        <a href="#">
          <img src="https://www.litmir.me/data/img/8/%D1%80%D0%BE%D0%B7_ie.jpeg" width="150" />
          Слон Индийский
        </a>
      </li>
      <li>
        <a href="#">
          <img src="http://www.graycell.ru/picture/big/slon.jpg" width="150" alt="">
          Слон Морской
        </a>
      </li>
    </ul>
  </footer>
</main>
<div class="clear">
</div>
  
</section>
<footer></footer>
</section>

CSS

body {
  background: url('https://hw.menardc.com/main/items/media/GLOBA032/ProductLarge/endless-top.jpg');
}
.wrapper {
  width: 100%;
  max-width: 1024px;
  margin: 20px auto;
}
[class*="col-"] {
  float: left;
  box-sizing: border-box;
}
.col-50 {
  width: 50%;
}
.col-25 {
  width: 25%;
}
.col-75 {
  width: 75%;
}
.clear {
  clear: both;
}
main {
  background: #fff;
  border-radius: 0 10px 10px 10px;
  padding: 20px;
}
aside {
  background: #fff;
  border-radius: 10px 0 0 10px;
  padding: 20px;
}
header {
  border: 2px solid #fff;
    background: linear-gradient(180deg, #002a88 0%, #008acc 100%);
    border-radius: 10px;
    height: 80px;
    color: #fff;
    margin-bottom: 20px;
}