Skip to content
OverviewSolutions
3
Comments
2
Caius-Scipio
@Caius-Scipio

All comments

  • Imo Emmanuel•140
    @PearlPerfectSubmitted over 1 year ago

    I could not add the background image to the background. I will appreciate if I am shown a better to make it work.

    I am unsure of the way I added the profile picture and would appreciate best practice too.

    Responsive flex component

    1
    Caius-Scipio•70
    @Caius-ScipioPosted over 1 year ago

    Great job on completing the challenge! The background images also gave me issues. What helped me complete my challenge was adding this line to the body style:

    body {
background: url(../images/bg-pattern-top.svg) bottom [##]vh right [##]vw no-repeat, url(../images/bg-pattern-bottom.svg) top [##]vh left [##]vw no-repeat;
}

    Just play around with the numbers to get it just right and you should be golden.

    Additionally, it appears that the centering is a bit off. I found using these lines in the body to be really effective:

    body {
display: grid;
place-items: center;
}

    You can still use flexbox in other areas. I did. Again, great job and keep practicing!

    Marked as helpful
    0
  • Rizki Bagus•50
    @RizkiB12Submitted over 1 year ago

    What did you find difficult while building the project?

    • Because I'm first time to join this challenge i spend more time to read requirement for this challenge before i do this challenge. Please let me know how i can do responsive for that challenge. Which areas of your code are you unsure of?
    • I think for the responsive Do you have any questions about best practices?
    • The best practices for the responsive design

    QR Code Component Using HTML and CSS

    2
    Caius-Scipio•70
    @Caius-ScipioPosted over 1 year ago

    Hey there,

    Great job on completing the solution!

    I think you can improve on your design with semantic tags and relocating an item.

    For example: <div class="card-title"><p>Improve your front-end skills by building projects</p></div>

    could be: <div class="card-title"><h1>Improve your front-end skills by building projects</h1></div>

    Changing the attribution to here, would take it out of the QR Code itself:

    </div>
<div class="attribution">Challenge ...
</section>
</body>

    Of course, after these few changes, you'll need to readjust your grid layout and increasing a bit of the padding around the title and description portions. Keep tinkering and you can get closer.

    But overall, well done! You've already got through the toughest part and well on your way!

    Marked as helpful
    1