<div class='container'>
  <div class='bg-1'>
    <h2>16 <span>| 24</span></h2>
    <p>Goals Completed</p>
  </div>
  <div class='bg-1'>
    <h2><i class="fas fa-battery-three-quarters"></i></h2>
    <p>Respiration</p>
  </div>
  <div class='bg-2'>
    <h2><i class="fas fa-running"></i></h2>
    <p>Miles</p>
  </div>
  <div class='bg-1'>
    <h2>36&deg; C</h2>
    <p>Temperature</p>
  </div>
  <div class='bg-1'>
    <h2><i class="fas fa-bed"></i></h2>
    <p>Sleep Keep</p>
  </div>
  <div class='bg-2'>
    <h2>98 BPM</h2>
    <p>Heart Rate</p>
  </div>
  <div class='bg-1'  style='color:#fff'>
    <h2>170 lbs</h2>
    <p>Weight</p>
  </div>
  <div class='bg-2'>
    <h2>28 <span>%</span></h2>
    <p>Fat Percentage</p>
  </div>
  <div class='bg-2'>
    <h2>118 mgdl</h2>
    <p>Blood Glucose</p>
  </div>
  <div class='bg-2'>
    <h2>680 kcal</h2>
    <p>AVG Consumption</p>
  </div>
  <div class='bg-2'>
    <h2><i class="fas fa-dumbbell"></i></h2>
    <p>Workout</p>
  </div>
  <div class='bg-2'>
    <h2>85 <span>%</span></h2>
    <p>Body Hydration</p>
  </div>
</div>

  

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #333;
  color: black;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.container > div {
  height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  
  transition: all ease 0.5s;
}

.container > div:hover {
  transform: scale(0.98);
  opacity: .7;
}

div h2 {
  font-size: 2em;
  margin: 10px;
}

div p {
  font-size: 1.1em;
}

.container > div:nth-of-type(1) {
  grid-column: 1 / 3;
}

.container > div:nth-of-type(6) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(9) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(10) {
  grid-column: 1 / 3;
}



.bg-1 {
  background-image: url(https://i.postimg.cc/1RTV9F6V/filip-zrnzevic-Qs-WG0kj-PQRY-unsplash.jpg);
 
}

.bg-2 {
  background: url(https://i.postimg.cc/N04rYP7Q/henry-be-Iicyia-PYGGI-unsplash.jpg);
}