Service cards

index.html

<div class="cardContainer">
  <div class="card">
    <div class="circle">
      <img class="icon" src="assets/svg/aws.svg" alt="" />
    </div>
    <div class="card-services">
      <h3>cloud network</h3>
    </div>
  </div>
  <div class="card">
    <div class="circle">
      <img class="icon" src="assets/svg/code-solid.svg" alt="" />
    </div>
    <div class="card-services">
      <h3>website Development</h3>
    </div>
  </div>
  <div class="card">
    <div class="circle">
      <img class="icon" src="assets/svg/server-solid-1.svg" alt="" />
    </div>
    <div class="card-services">
      <h3>web hosting</h3>
    </div>
  </div>
  <div class="card">
    <div class="circle">
      <img class="icon" src="assets/svg/globe-solid.svg" alt="" />
    </div>
    <div class="card-services">
      <h3>Search Engine Optimization</h3>
    </div>
  </div>
</div>

service-cards.markdown

Service cards

A Pen by Musa Badru on CodePen.

License.

style.scss

body{
  font-family: Lato, san-serif;
}
.cardContainer{
    /* margin-top: -40px;
    margin-bottom: -60px;
    margin-inline: 1rem; */
  
    
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    gap: 1em;
    
}

.card {
    background-color:#584257;
    width: calc(20% + 5px);
    
    display: flex;
    flex-direction: column;
    
    padding: 10px;
    box-shadow: 4px 6px 6px     hsla(235, 5%, 35%, .9);
    text-align: center;
    


        h3{
            font-size: var(--step-1);
            padding-top: 4px;
            line-height: 1.1;
            /* padding-inline: var(--space-3xl); */
            /* flex-grow: 1; */
            /* margin: 0 auto; */
        }
}
.icon {
  width: 35px;
  padding: 2px;
  object-fit: contain;
  /* max-height: 100%; */
}    

.card-service{
  flex: 1;
}  

.circle {
  width: 45px;
  height: 45px;
  
  margin: 0 auto;
  
  padding: 5px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: #e1b4bd;
}