<nav>
  <a href="#">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" role="img">
      <circle cx="12" cy="12" r="10"></circle>
      <line x1="14.31" y1="8" x2="20.05" y2="17.94"></line>
      <line x1="9.69" y1="8" x2="21.17" y2="8"></line>
      <line x1="7.38" y1="12" x2="13.12" y2="2.06"></line>
      <line x1="9.69" y1="16" x2="3.95" y2="6.06"></line>
      <line x1="14.31" y1="16" x2="2.83" y2="16"></line>
      <line x1="16.62" y1="12" x2="10.88" y2="21.94"></line>
    </svg>
  </a>
  <a href="#">Kırmızı Balon</a>
  <a href="#">Yeşil Balon</a>
  <a href="#">Mavi Balon</a>
  <a href="#">Turuncu Balon</a>
  <a href="#">Beyaz Balon</a>
  <a href="#">Kahverengi Balon</a>
  <a href="#">Mor Balon</a>
</nav>
<div class="cards">
  <div class="card">
    <header>
      <h2>Bristol</h2>
    </header>

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
    <div class="body">
      <p>I live in Bristol. It mostly rains, but when it isn't raining we have hot air balloons.</p>
      <p>The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden.</p>
    </div>

  </div>

  <div class="card wide">
    <header>
      <h2>Harbour Cranes</h2>
    </header>

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour2.jpg" alt="Bristol harbour">
    <div class="body">
      <p>We also have giant cranes, and historic boats. It is best if the balloons avoid these.</p>

    </div>
  </div>

  <div class="card wide">
    <header>
      <h2>Striped Balloon</h2>
    </header>

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/coloured-balloon.jpg" alt="Coloured balloon">
    <div class="body">
      <p>I like the nice standard balloons. Stripy. Solid looking basket.</p>
    </div>
  </div>

  <div class="card">
    <header>
      <h2>Fortnum &amp; Mason</h2>
    </header>

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/champagne-balloons.jpg" alt="Fortnum and Mason balloon">
    <div class="body">
      <p>This one uses the correct Pantone colour for Fortnum and Mason.</p>
    </div>
  </div>

  <div class="card">
    <header>
      <h2>Funfair Problems</h2>
    </header>

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/funfair-balloons.jpg" alt="Funfair">
    <div class="body">
      <p>Here we have balloons getting tangled up with a funfair.</p>
    </div>
  </div>

  <div class="card">
    <header>
      <h2>Swatch</h2>
    </header>

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/swatch.jpg" alt="Swatch Balloon">
    <div class="body">
      <p>We have balloons in special shapes. This one is a Swatch.</p>
    </div>
  </div>

  <div class="card">
    <header>
      <h2>Minion</h2>
    </header>

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/minion.jpg" alt="Minion Balloon">
    <div class="body">
      <p>Here is a Minion. Minions are at least a reasonable shape for a balloon. Some of the special shapes struggle to leave the ground.</p>
    </div>
  </div>

  <div class="card">
    <header>
      <h2>Where is the basket?</h2>
    </header>

    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/where-is-the-basket.jpg" alt="Balloonist">
    <div class="body">
      <p>If you don't need to take your lunch with you, you can do without the wicker basket.</p>
    </div>
  </div>

</div>

nav {
  background: rgba(41,73,130, 0.6);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  
  a {
    padding: 10px;
    color: white;
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(12,[col] 1fr);
  grid-gap: 20px;
  grid-auto-flow: dense;
  padding-top: 30px;
}

.card {
 grid-column: auto / span 3;
}

.wide {
  grid-column: auto / span 6;
}







html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fafafa;
}

img {
  max-width: 100%;
}

.cards {
  margin: 0 auto;
  max-width: 800px;
}

.card {
  background-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.card header {
  padding: 10px;
  background-color: rgb(41,73,130);
  color: #fff;
}

.card header h2 {
  font-size: 1.4rem;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

.card .body {
  padding: 10px;
  font-size: .9rem;
  color: #757575;
}


body {
  margin: 0;
  padding: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour2.jpg);
  background-attachment: fixed;
    background-size: cover;
  background-position: center;
}