Skip to content
OverviewSolutions
14
Comments
4
P
Abdelrhman Ahmed
@MrBlackvanta

All comments

  • Charles Barros•70
    @charbavitoSubmitted about 2 years ago

    This is my proposal of solution to the QR code component challenge from Frontend Mentor website and my very first non-tutorial project in front-end carrer. The challenge consists of creating a simple static page using the jpg design file as reference and using only HTML5 and CSS3. As I said, this was my first non-tutorial Front-end project, so everything was a great learning experience, however, I emphasize that the alignment techniques both with Flexbox and with display block and also relative and absolute positions were great learnings in this challenge.

    HTML5, CSS3, Flexbox, VScode, Git and Github

    2
    Abdelrhman Ahmed•170
    @MrBlackvantaPosted about 2 years ago

    Hey @charbavito congratulation on solving your first challenge you did a great job, I loved you're code very much.

    A couple of hints tho to really complete this challenge:-

    • Change the font-weight of the heading to 700
    • Add a box-shadow to the card.

    You're more than welcome to contact me if you ever get stuck in you're upcoming challenges at [email protected]

    Marked as helpful
    1
  • Emmanuel K. Flomoku•20
    @Flomoku231Submitted about 2 years ago

    The project was good and I learn a lot. I found it difficult in importing the font family in my code. I tried my best but it was not working for me. I am sure of every code that I wrote in this project. I am hoping to do more projects in order to learn something new everyday.

    Thanks!

    QR Code using HTML & CSS

    3
    Abdelrhman Ahmed•170
    @MrBlackvantaPosted about 2 years ago

    Hey EMMANUEL congratulation on solving the challenge, lovely work.

    as for the code try to use google fonts go to the website, select the font family you want, select the weights you want then in the right sidebar you shall find a link that looks like this

    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">

    copy it and paste in your html head before the CSS link tag and then apply it in your CSS using the font-family property like this font-family: 'Kumbh Sans', sans-serif;

    0
  • Abdelrhman Ahmed•170
    @MrBlackvantaPosted about 2 years ago

    Hey @vace328 Congratulation on solving this challenge <3

    You're just few steps from perfection.

    • Try to add box-shadow to the card.
    • When a question is clicked and you hover it the text shouldn't turn orange.
    • If you really challenge yourself try to do the Bonus point (Complete the challenge without using JavaScript)
    0
  • Abdelrhman Ahmed•170
    @MrBlackvantaPosted over 2 years ago

    You did great buddy, but here are somethings you really need to consider:-

    • body background color is not right.
    • Container border radius is missing.
    • Container box shadow is missing.
    • Header color is not right.
    • Header font weight is not right.
    • Paragraph color is not right.
    0