Skip to content
OverviewSolutions
23
Comments
6
Addiel
@addiellucena94

All comments

  • Addiel•370
    @addiellucena94Posted 9 months ago

    Hi @Onyekachi10 I have many advice for you:

    1- You have one Article and Section tag for nothing, the style used in you Section tag you maybe can use it in you Body tag.

    2- You can use heigth auto and a padding in your board class.

    3- Don't use a static width dimension for your image if the width of the board change with the screen dimension. The Board change but the Image not, this is not a good practice.

    4- In your CSS, consider organizing properties in a consistent order, such as positioning, box model, typography, and visual styling. This makes your code more readable and easier to maintain.

    Keep practicing and the results will improve. I hope my advice is helpful to you. Greetings

    Marked as helpful
    1
  • Addiel•370
    @addiellucena94Posted 9 months ago

    Hello, I have a suggestion for you, you should make your website show a function when it loads without waiting for the button to be pressed.

    0
  • Kailera•10
    @kaileraSubmitted 9 months ago

    Hello, my name is Samuel (kailera is my game nickname) and this is my first experience coding a frontend challenge from FrontEnd mentor. This project proposes the creation of a responsive qr code card in html/css stack. This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

    This qr code card adapts in mobile and desktop screens, without many changes to its structure. Basically, im mobile and large/desktop screens it has to be in center view. The style guide provide by FrontMentorChallenge specify the widths for mobile and desktop screens: 375 and 1440 px respectively. Without much difficulty, to try to respect these measurements, the size of the wrapper was defined as follows:

    style.css
background-color: var(--light-gray);
width: 100vw;
max-width: var(--desktop);
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
align-items: center;

    Body has a white background, so when screen is large than a desktop measurement, the wrapper increases stops and shows the body background. This prevents the card from growing to the point of becoming useless (a QR code on a television screen that covers the entire transmitted image for example).

    QR Code Card using html/css stack

    4
    Addiel•370
    @addiellucena94Posted 9 months ago

    Nice work Samuel and welcome to FrontEnd Mentor

    Marked as helpful
    0
  • Addiel•370
    @addiellucena94Posted 9 months ago

    Good job, only one suggestion, fix the font color and put the car brands in capital letters.

    You can try to use:

    color: white;
text-transform: capitalize;
    1
  • Addiel•370
    @addiellucena94Posted 9 months ago

    Good Job!! excellent result... 👍👌

    1
  • Addiel•370
    @addiellucena94Posted 10 months ago

    Great job, you just needed to work in the background, the next time use background property with image and color (background: url('you first image'), url('you second image'), #yourColor) and use background-position for the location.

    1