Skip to content
OverviewSolutions
2
Comments
39

Ramsay Sewell

@ramsaysewellDundee, UK585 points

20 year old website developer

I’m currently learning...

ReactJS

Latest solutions

Latest comments

  • Ramsay Sewell•585
    @ramsaysewell

    Hey!

    This looks great, well done!

    Your HTML markup is very easy to follow and the class names are self explanatory.

    Keep it up!

    Ramsay

  • Ramsay Sewell•585
    @ramsaysewell

    Hello,

    I really like this solution that you have submitted, it looks well coded and definitely responsive.

    A small tip for centering the slider icon used for your theme switcher, would be to, instead of using a fixed pixel value, use percentages instead. Here's the way I would use percentages:

    top: 50%;
transform: translateY(-50%);

    This will make sure that the icon is exactly in the middle of the slider bar and isn't able to go out of position.

    Great job and keep up the great coding!

    Ramsay

  • Ramsay Sewell•585
    @ramsaysewell

    Hey Jonathan,

    This looks really cool, well done on working with the pretty complex CSS, you've done a great job.

    I think the iPhone itself could stand out a bit more with a box-shadow like shown in the design.

    Maybe something like box-shadow: 4px 3px 30px rgba(0,0,0,0.1);?

    Looks great, keep it up!

    Ramsay

  • Ramsay Sewell•585
    @ramsaysewell

    Hi Juan,

    This looks great, well done.

    I would be picky and say that the hover affects could be given a transition property to improve the hover effects.

    I noticed on your social icons in the footer, you have:

    .className svg path:hover { 
   fill: green;
}

    However, the hover only occurs when you are hovering over part of the icon (that has a path). To slightly improve the UX, you can do this:

    .className svg:hover path {
   path: green;
}

    Meaning that when you hover over the <svg> element, you want the path to change fill.

    Well done and happy coding!

  • Ramsay Sewell•585
    @ramsaysewell

    Hi Bhanu,

    Really great job on this challenge, it looks amazing!

    I like the level of responsiveness that you've managed to implement into this page.

    I would like to see the navigation header inline with the .intro image. You may have to place the image relative to the flow and use transform: translateY() for this to be inline with the container's boundaries.

    There are also a few places with the incorrect font-weight or border-width, but that's just me being picky 😃

    Great job!

    Ramsay

  • Ramsay Sewell•585
    @ramsaysewell

    Hi Abhijit,

    Great job on this solution, it looks really good and responsive.

    Here are a few tips for how we can make this look closer to the design:

    • For the .nav-logo image, I would wrap this in it's own <div> instead of using the <img> tag as a Flex Item. This will help make sure that the <img> retains it's aspect ratio and isn't stretched because of Flexbox.
    • The .intro-header-box-flex can have a max-width set of around 1200px and then margin: 0 auto;. This will make sure you keep the background stretched to the edges and the content is restricted to it's width, let me know if this works.
    • For the footer social images, these were given in your /images folder and so you should be able to insert the SVG into your HTML document, allowing you to change the fill property. Check out CSS-Tricks for help on styling SVGs.

    I hope these tips are useful and none of it confuses you.

    Let me know if there's anything I can help with.

    Ramsay

View more comments