Skip to content
OverviewSolutions
2
Comments
39
Ramsay Sewell
@ramsaysewell

All comments

  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    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

    0
  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    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

    1
  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    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

    2
  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    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!

    0
  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    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

    3
  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    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

    1
  • André Serudo•185
    @andreserudoSubmitted over 4 years ago

    Any feedback our suggestions to improve my code/my style are welcome! Thanks for your attention.

    Fylo Data Component

    1
    Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    Hey Andre,

    I really like this solution, especially the little addition of the animation of the progress bar - very cool!

    I would like to see this with some spacing on the left and right for mobile devices. I believe this is due to the larger values of padding that you have applied to the .logos and .storage elements.

    Really good job on this!

    Ramsay

    1
  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    Hi Keside,

    I like this solution, well done on completing it!

    I would like to see the logo a bit bigger on desktop device screen so that it compares closer to the original design.

    Everything else looks spot on and really responsive.

    Congratulations, keep it up!

    Ramsay

    0
  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    Hey Keside,

    Are you saying that there's something you're not happy with in your code?

    I think this looks really good and compares to the design nicely.

    I would like to see the "Try It Free" button wrap under the Huddle logo for mobile devices or have them shrink to fit on the same row.

    Really good job, keep it up!

    Ramsay

    0
  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    Hi Gagan,

    Well done for cmpleting this challenge.

    As for the alignment of the grid, I would try setting a max-width property of the grid section as it's currently spanning 100% of the window, forcing it to misalign.

    If you add max-width: 1000px and make sure to align center your content in the page, you should be able to see the optimised layout. You can align center using Flexbox or simply margin: 0 auto, meaning "automatically adjust from the left and right while not having any margin on the top".

    If you try this out on your solution, you should find it to be a lot more responsive and friendly to work with.

    Well done!

    Ramsay

    1
  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    Hey Connor,

    This looks really good! Congratulations on getting it so close to the design, I would say its almost pixel perfect too!

    I like how semantic your code is and the use of BEM is very well respected.

    Great job! Keep it up!

    1