probelov.main

by sunnyplus

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header-wrapper shadow-bottom">
  <header class="header">
  <img class="logo" src="https://content.foto.my.mail.ru/mail/sunnyplus/_myphoto/h-11.jpg">
  <div class="search-form shadow-bottom">
    <form action="" method=post>
      <input type="search" list="shops" name="search" autocomplete=off placeholder="Введите название магазина">
      <datalist id="shops">
      <option value="Yves Rocher"></option>
      <option value="Bonprix"></option>
      <option value="Lamoda"></option>
      <option value="Mytoys"></option>
      <option value="Letoile"></option>
      </datalist>
    <!--<input type="submit" value="Найти">-->
    </form>
  </div>
  <div class="sign">
  <a href=""><div class="signin">Войти</div></a>
  <a href=""><div class="signup">Регистрация</div></a>
   </div>
  </header>
</div>
<main>
  <aside>
    <div class="left-block">
    <ul>
      <li><a href="">Все магазины (99)</a></li>
      <li><a href="">Одежда и обувь (9)</a></li>
      <li><a href="">Красота и здоровье (38)</a></li>
      <li><a href="">Электроника и техника (11)</a></li>
      <li><a href="">Все магазины (99)</a></li>
      <li><a href="">Одежда и обувь (9)</a></li>
      <li><a href="">Красота и здоровье (38)</a></li>
      <li><a href="">Электроника и техника (11)</a></li>
      <li><a href="">Все магазины (99)</a></li>
      <li><a href="">Одежда и обувь (9)</a></li>
      <li><a href="">Красота и здоровье (38)</a></li>
      <li><a href="">Электроника и техника (11)</a></li>
    </ul>
    </div>
  </aside>
  <article class="news-block">
    <div class="news" style="background-image:url('https://www.mytoys.ru/static/general/img/header/head_logo_mytoys_ru.png'),url('https://images.mytoys.com/mytoys_ru/images/features/w/w_cw_lassiezim23.jpg')">
    </div>
    <div class="news"></div>
    <div class="news"></div>
    <div class="news"></div>
   ...

CSS

.header-wrapper {
  display:flex;
  position:fixed;
  width:100%;
  min-height:85px;
  top:0;
  background-color:#ffffff;
}
.header {
  width:80%;
  margin:auto;
  display:flex;
  justify-content:space-around;
  align-items:center;
}
.search-form {
  flex-grow:1;
  margin:0 10px;
}
.logo {
  width:200px;
}

.shadow-bottom {
  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);
}
main {
  display:flex;
  justify-content:space-between;
  margin:100px 5px 5px;
}
.news-block {
  margin:10px 20px;
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  align-items:flex-start;
}
.news {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  width:200px;
  height:300px;
  border:1px solid #ECDDDD;
  border-radius:5px;
  margin:5px;
  background-size:contain,cover;
  background-repeat:no-repeat;
  background-position:50% 90%,50% 50%;
}
.news img {
  max-width:190px;
}
.news h3 {
  font-size:15px;
  padding:0 5px;
}
.news:hover {
  border:1px solid #00b0ff;
  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);
}
aside {
  min-width:210px;
}
.left-block {
  position:fixed;
  top:100px;
  left:-5px;
}
footer {
  width:100%;
  min-height:100px;
  background-color:#000000;
}
ul {
  list-style:none;
}
li:nth-child(5n)::after {
  display:block;
  content:"";
  padding:3px 0;
  border-bottom:1px solid #ECDDDD;
}
li {
  padding:10px 0;
  font-size: .875rem;
  font-family: Open Sans,sans-serif;
}
a {
  text-decoration:none;
  color:#000000;
}
a:hover {
  color:#00b0ff;
  border-bottom:1px dotted #00b0ff;
}
.signin,.signup {
  padding:5px 15px;
  display:inline-block;
  color:#ffffff;
  border-radius:4px;
}
.signin {
  background: linear-gradient(#F3AE0F, #E38916);
  border:1px solid #F3AE0F;
}
.signin:hover {
  background:#41c2f2;
  border:1px solid #41c2f2;
}
.signup {
  background: linear-gradient(#41c2f2, #3690b2);
  border:1px solid #41c2f2;
  }
.signup:hover {
  background:#F3AE0F;
  border:1px solid #F3AE0F;
  }
input[type=search] {
 ...