<div class="cont">
  <div class="grid__item pink"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item dark-pink"></div>
  <div class="grid__item pink"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item dark-pink"></div>
</div>
body {
  padding: 40px;
  background: #eee;
}

.cont {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 30px;
}

.grid__item {
  background: #6507b3;
  height: 250px;
  border-radius: 10px;
}

.pink {
  border-radius: 0 10px 10px 0;
  opacity: 0.5;
}

.dark-pink {
  border-radius: 10px 0 0 10px;
  opacity: 0.5;
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.