Skip to content
OverviewSolutions
0
Comments
2
P
ElonCosta
@ElonCosta

All comments

  • ElonCosta•60
    @ElonCostaPosted 3 months 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
  • ElonCosta•60
    @ElonCostaPosted 3 months 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