All comments

• 

  M.A.B• 80

  @MohamedAbdelBAQIMo

  Submitted about 1 month ago

  

  BLog-Preview

  2

  00

  

  P

  ElonCosta• 60

  @ElonCosta

  Posted about 1 month ago

  The solution really differs from the original design, the component is not centered, there is no shadow or border.

  You can use grid to center the component both vertically and horizontally this way

  body {
      display: grid;
      min-height: 100vh; 
  }
  
  .card {
      place-self: center;
  }
  

  It's not really recommended to use heading tags just for different text sizes since screen readers can get confused.

  Marked as helpful

  1
• 

  Marcin• 40

  @bluetude

  Submitted about 1 month ago

  

  QR Code component

  1

  11

  

  P

  ElonCosta• 60

  @ElonCosta

  Posted about 1 month ago

  The container classes are not really needed but managed to achieve the desired look and design!

  The same effect overall could be achieved using a single container with only the direct children elements, no need to wrap them in other containers.

  <div class="main">
      <img src="#" alt="QR Code"/>
      <h1 class="header">Header<h1/>
      <span class="text">Text<span/>
  </div>
  

  Then styling each child element spacing, margins and paddings according.

  Font fallbacks are also always nice to have.

  font-family: 'Outfit', sans-serif;
  

  Marked as helpful

  1