CSS FLEX AND HTML PRODUCT CARD

Community feedback

• 

  Guillermo Mulvihill•190

  @guilleoemPosted over 2 years ago

  Hi, nice try! I realize you used bootstrap, but you don't have to. I give you some tips and I hope they are useful:

  1- Realize that you have in the main content a card that has an image on one side and the text on the other, then you could try something like

  <main>
    <div class="card">
      <div class="image-container"></div>
      <div class="text-container"></div>
    </div>
  </main>
  

  That would be the basic structure. To center the card you simply give some properties to your <main> element:

  main {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  check my code

  Marked as helpful

  0

  ---

  

  Sython•130

  @Newking1SarkcessPosted over 2 years ago

  @guilleoem thanks it's very helpful I really appreciate and I would even appreciate more if you can keep sharing with me. Thank you.

  1