Responsive layout

by Guillaume Seguin

HTML

<main>
  <header class="header">
    <h2>Les prix du marché</h2>
    <div>
      <span>Anglet (64600), Biarritz (64200) (+2)</span>
      <span>Appartement</span>
      <span>Professionnel</span>
      <span>Non meublé</span>
      <span>Biens publiés (Annonce)</span>
    </div>
    <div>
      <button>Recherche</button>
      <select>
        <option>01/07/2020 - 01/08/2023</option>
      </select>
      <select>
        <option>par trimestre</option>
      </select>
      <button>Imprimer</button>
    </div>
  </header>
  <section>
    <div class="sizing">
      <nav class="header-bg separator">
        <a>évolution des prix</a>
        <a>distribution des prix</a>
      </nav>
      <div class="body">
        <p>Calculée à partir des biens sortis de publication depuis 3 ans</p>
      </div>
    </div>
  </section>
</main>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: lightblue;
}

header {
  display: flex;
  align-items: baseline;
}

header h2 {
  width: 300px;
  margin: 0;
}

section {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 0;
}

.sizing {
  width: 60%;
  height: 100%;
  background-color: lightyellow;
  display: flex;
  flex-direction: column;
  
}

.header {
  background-color: lightgreen;
}

.header-bg {
  position: relative;
}

.header-bg::before {
  position: absolute;
  left: -50vw;
  width: 130vw;
  min-height: 100%;
  content: "";
  background-color: lightgreen;
  border-bottom: 1px solid #000;
  z-index: -1;
}

.body {
  height: 100%;
}

.separator {
  border-bottom: 1px solid #000;
}