Skip to content
OverviewSolutions
12
Comments
38

Patrick

@PPechmannBarcelona, Spain800 points

Self-learning web development. I am knowledgeable in HTML, CSS and SCSS (BEM) , currently learning node.js for backend.

Latest solutions

View more solutions

Latest comments

  • Patrick•800
    @PPechmann

    Hi @blndcat,

    very well done on this challenge, I like it 💪🏻

    I do have a small improvement, to get it even closer to the original design:

    You can center the entire content with flexbox. For this you initially have to give the body {min-height: 100vh;} to cover the entire viewport. Then you can center it as follows:

    Display: flex;
align-items: center;
justify-content: center;

    This is not the only wat to center elements, but I do find it the easiest. I highly recommend checking out this small guide on centering, to have a full range of tools you can use anytime.

    Hope this helps!

    Happy coding 🙂

    Patrick

  • Patrick•800
    @PPechmann

    Hi @obhasa12,

    congrats on the challenge!

    I really like your approach and the code looks pretty clean too, well done 💪

    As a small improvement, I suggest centering the card properly with flexbox. For it to work, you need to give the body a min-height: 100vh, to cover the full viewport, and then simply the following (also on the body):

    display: flex;
align-items: center;
justify-content: center;

    Hope this is helpful and I am looking forward to more completed challenges 😉

    Happy coding!

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hey @Damianeks,

    congrats on completing your first challenge, it's looking very good 👍

    There is a much easier way to center the card in this case.

    If you give the body a min-height: 100vh to cover the full viewport and then give the .content-box a width, let's say of 20.6rem (according to the size you are aiming for), the card will be perfectly centered without having to specify the margins for the card, thanks to flexbox.

    The code would look like this:

        margin: 0px;
    padding: 0px;
    background-color: hsl(212, 45%, 89%);
    align-items: center;
    justify-content: center;
    display: flex;
    font-family: "Outfit", "sans-serif";
    min-height: 100vh;
}
.content-box {
    box-sizing: border-box;
    background-color: hsl(0, 0%, 100%);
    padding: 15px 15px;
    border-radius: 20px;
    height: 550px;
    width: 20.6rem;
}

    If you keep this in mind when centering something on the page, it will make your life much easier and the code cleaner.

    If you have any questions, let me know, I'm here to help 😉

    Happy coding 💪

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hi @sneiderDev,

    congrats on completing the challenge, well done!

    To improve the code a bit, I suggest placing the content inside a <main> tag. You can then give the body a min-width: 100vh to cover the full screen and set the background with background-image: url("").

    Depending on how the background displays then, you can adjust it with background-position and make the necessary tweaks.

    I hope this feedback helps!

    Well done again and keep going 💪

    Happy coding 🙂

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hey @lgorvin,

    congrats to completing this challenge! I did it myself and know how difficult this one can get.

    Regarding the dropdown on the side: You can create a div with the entire navigation in it, give it a height of the entire page (I recommend specifying a height and not using 100vh, as the div will end sooner than the end of the page, if you scroll down).

    You then give it a class and toggle it with javascript.

    I still like your approach a lot and am even thinking that the navigation looks very good from the top too!

    Feel free to check my solution to get a better idea of what I am trying to convey.

    Hope this helps!

    Happy coding and happy weekend to you :)

    Patrick

    Marked as helpful
  • Patrick•800
    @PPechmann

    Hi @Demyttenaere,

    very well done on this challenge, I like it!

    The only little improvements I would suggest, is to apply the eventlistener for the dropdowns, to the Features and Company text too, as users would most likely first click on the text instead of only the arrows.

    You could also add en Eventlistener on the window, for when it resizes to remove all the dropdown classes. This way they will not stay open when changing screen size.

    As a last point, I also suggest to toggle the classes for the dropdowns within the eventlistener functions. If you then click on one dropdown while the other one is open, the previous one closes automatically.

    My solution is not perfect, but you can check it here to see what I mean.

    Hope this little feedback helps!

    Happy coding and happy weekend :)

    Marked as helpful
View more comments