skip to Main Content

I’m trying to make this purple square looks like this image:

enter image description here

But mine looks like this from the code. Why the square isn’t with the height that i put?

.motivosContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.motivo {
  width: 311px;
  background-color: gray;
  border-radius: 15px;
  height: 56px;
  position: relative;
  text-align: center;
}

.motivo::after {
  content: url('https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg');
  position: absolute;
  left: 0;
  top: 0;
  height: 56px;
  width: 56px;
}
<section id="motivos" class="py-5">
  <div class="container col-sm-10">
    <h2 class="titulo text-center mx-5 mb-4">A <span>terapia online</span> é para você que busca tratar e superar... </h2>
    
    <div class="motivosContent text-center">
      <div class="motivo py-3">Ansiedade</div>
      <div class="motivo py-3">Depressão</div>
      <div class="motivo py-3">Burnout</div>
      <div class="motivo py-3">TDAH</div>
      <div class="motivo py-1">Problemas nos<br>relacionamentos</div>
    </div>
</section>

3

Answers


  1. Set it as the background-image instead on the pseudo-element.

    Also, forgot to close your .container div.

    .motivosContent {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    
    .motivo {
      width: 311px;
      background-color: gray;
      border-radius: 15px;
      height: 56px;
      position: relative;
      text-align: center;
    }
    
    .motivo::after {
      content: "";
      background-image: url('https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg');
      background-size: cover;
      background-position: center;
      position: absolute;
      border-radius: 15px;
      left: 0;
      top: 0;
      height: 56px;
      width: 56px;
    }
    <section id="motivos" class="py-5">
      <div class="container col-sm-10">
        <h2 class="titulo text-center mx-5 mb-4">A <span>terapia online</span> é para você que busca tratar e superar... </h2>
        <div class="motivosContent text-center">
          <div class="motivo py-3">Ansiedade</div>
          <div class="motivo py-3">Depressão</div>
          <div class="motivo py-3">Burnout</div>
          <div class="motivo py-3">TDAH</div>
          <div class="motivo py-1">Problemas nos<br>relacionamentos</div>
        </div>
      </div>
    </section>
    Login or Signup to reply.
  2. You can try using background-image & background-size instead of content. I added a border radius to the image so it will cut down the whitespace to copy the image you posted. And changed the gray to light gray which is not significant.

    .motivosContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    
    .motivo {
        width: 311px;
        background-color: lightgray;
        border-radius: 15px;
        height: 56px;
        position: relative;
        text-align: center;
    }
    
    .motivo::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 56px;
        width: 56px;
        background-image: url('https://img.selecoesbrasil.com.br/lp-zc_042023_icon-quadrado-roxoa.jpg');
        background-size: cover;
        border-radius: 15px;
    }
    <section id="motivos" class="py-5">
    <div class="container col-sm-10">
        <h2 class="titulo text-center mx-5 mb-4">A <span>terapia online</span> é para você que busca tratar e superar... </h2>
        <div class="motivosContent text-center">
            <div class="motivo py-3">Ansiedade</div>
            <div class="motivo py-3">Depressão</div>
            <div class="motivo py-3">Burnout</div>
            <div class="motivo py-3">TDAH</div>
            <div class="motivo py-1">Problemas nos<br>relacionamentos</div>
        </div>
    </section>
    Login or Signup to reply.
  3. Unclear if you ARE using bootstrap but here I use it but also put some custom CSS in where I use grid and position an element to the left and one to the right. This does NOT use the custom jpg background but just uses a background color and a radius on the element. Some of the grid could also be simply done with bootstrap classes but included here just to illustrate a pure CSS example.

    I could have also avoided the CSS where I push the grey behind the purple if I had added a wrapper for the two elements and put the gray on the wrapper in the background.

      z-index: -1;
      margin-left: -0.25em;
    

    Note also I can change the color of the icons with the use of something besides the white: color: #FFFFFF; for example a lime green color: #00FF00;

    .motivosContent {
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 3.5rem 19.5rem;
      grid-auto-rows: : 3.5rem;
      align-items: center;
      gap: 0;
      row-gap: 1rem;
    }
    
    .motivo {
      grid-column: 2;
      background-color: #80808088;
      border-top-right-radius: 1rem;
      border-bottom-right-radius: 1rem;
      text-align: center;
      z-index: -1;
      margin-left: -0.25em;
    }
    
    .image-container {
      align-self: center;
      justify-self: center;
      border-radius: 1rem;
      grid-column: 1;
      height: 100%;
      background-color: #712CF9;
      color: #FFFFFF;
      font-size: 1.6em;
    }
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
    
    <section id="motivos" class="py-5">
      <div class="container col-sm-10">
        <h2 class="titulo text-center mx-5 mb-4">A <span>terapia online</span> é para você que busca tratar e superar... </h2>
        <div class="motivosContent align-middle text-center fw-bold fs-3">
          <div class="image-container px-3 bi bi-emoji-dizzy "></div>
          <div class="motivo py-3 ">Ansiedade</div>
          <div class="image-container px-3 bi bi-cloud-drizzle "></div>
          <div class="motivo py-3 ">Depressão</div>
          <div class="image-container px-3 bi bi-battery-half "></div>
          <div class="motivo py-3 ">Burnout</div>
          <div class="image-container px-3 bi bi-lightning "></div>
          <div class="motivo align-middle py-3 ">TDAH</div>
          <div class="image-container pt-2 px-3 align-middle bi bi-heartbreak "></div>
          <div class="motivo py-1 ">Problemas nos<br>relacionamentos</div>
        </div>
      </div>
    </section>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search