Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Cesar D. 400

    @ThatDevDiaz

    Submitted

    I came across a few challenges when creating this.

    The images and text within the container are occupying the entire flex box. Every time I tried creating another flex box for the container to be in, it would mess everything up. the reason for doing this is so I can create the gaps between the image/text and the outer border.

    Another challenge I faced was making the image stay a static size. It grows with the page so when I coded the original flex box it looked as intended until re-sizing the screen. It's way bigger than originally designed and I can't figure out how to keep it a static size without messing up all the content within the flexbox.

    I tried getting the live site via GitHub desktop but the image would not upload in GitHub. Every time I tried adding the image it seems that the img would not actually import into the html even though I've added it to the repository. Maybe it's a directory issue and I didn't add a full directory for the image? Not sure.

    Any advice on the code or better practice adjustments would be greatly appreciated.

    *Edit

    After receiving feedback from a community member, I was able to apply new found knowledge and techniques to get my project to further resemble the original design. This was a great learning experience and I feel like I understand flex box a lot better. This also helped me dive a little bit further into using Github properly and linking things within Github's repository.

    p1ktas 30

    @p1ktas

    Posted

    Hey! I've just finished this challenge myself and can help you a bit. In my newbie eyes your HTML is okay-ish, you can fix it by:

    • Adding a ">" symbol at the of end of style.css link;
    • Adding QR image to your qr-code directory and linking to your html by using "./" like so: <img src="./image-qr-code.png" alt="QR code">, dont forget to add "alt" info!.
    • I also recommend using <h1> instead of <h2>, as every page should have an <h1> tag.

    As for CSS, this should help you get a better grasp:

    • Keep your html {} and body {} properties intact, they're ok, everything going down should probably be written from scratch. Also, read into it style-guide.md carefully a few times and fulfill all given tasks!
    • Import a given font, apply it globally.
    • Make your .container {} a flex-container and set it's width. I prefer using rem or px.This should fix your image resizing with the page and place it neatly inside your .container {}.
    • Make your flex-items stack from top to bottom! Read more about it here.
    • Add backround-color, border-radius and padding on all sides to your .container {}.
    • Make all the other needed changes as you go.

    This should point you into the right direction and hopefully, help you finish your project! :)

    Marked as helpful

    0