3-column preview card component

Community feedback

• 

  Prantik•660

  @prantiknoor

  Posted almost 3 years ago

  Your solution is pretty straightforward.🙂

  But there are some issues you should look at. firstly you should wrap your page's main content with main tag.

   <main>
     <div class="sections">
        ...
     </div>
   </main>
  

  & extra info with footer tag.

   <footer>
     <div class="attribution">
      ...
     </div>
   </footer>
  

  Your card is not centered. you can easily center that by using grid:

  body {
    /* font-size: 15px; */
    font-size: 0.94rem; /* You should always use rem wherever possible */
    color: hsla(0, 0%, 100%, 0.75);
    background-color: hsl(0, 0%, 95%);
    font-family: 'Lexend Deca', sans-serif;
    margin: 0;
    /* position: absolute;
    display: block;
    align-items: center; */
    display: grid;
    place-content: center;
  }
  

  /* Align the footer center */
  footer {
    width: 100%;
    height: 2rem;
    display: grid;
    place-content: center;
  }
  

  01

  Marked as helpful