<div class="contentBlock">content 1</div>

<div class="contentBlock">content 2</div>

<div class="contentBlock">content 3</div>

<div class="contentBlock">content 4</div>

​

<div class="contentBlock boxContainer">content 5

  <div class="box"></div>

</div>

​

<div class="contentBlock">content 6</div>

<div class="contentBlock">content 7</div>

<div class="contentBlock">content 8</div>

<div class="contentBlock">content 9</div>

<div class="contentBlock">content 10</div>

<div class="contentBlock">content 11</div>

<div class="contentBlock">content 12</div>

@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@700&display=swap");

​

.dark {

  background: #263238;

}

​

.dark h1 {

  color: #ccc;

}

​

body {

  background: url("https://assets.codepen.io/32887/background-100-vertical.png")

    no-repeat;

  font-family: "Barlow Semi Condensed", sans-serif;

  color: #333;

  margin: 0;

}

​

.contentBlock {

  height: 100px;

  width: 100%;

  background: rgb(0, 0, 0, 0.1);

  display: flex;

  justify-content: center;

  align-items: center;

}

​

.box {

  width: 100px;

  height: 100px;

  background: #f60;

  position: absolute;

  left: 100px;

}

​

.pin-spacer {

  //background:rgb(0, 250, 100, 0.3);

}

​

.contentBlock:nth-child(odd) {

  background: rgb(0, 0, 0, 0.3);

}

​

.contentBlock.boxContainer {

  background: rgb(255, 100, 0, 0.2);

}

​