Skip to content
OverviewSolutions
5
Comments
2
Daniel Earp
@Earpz1

All comments

  • Daniel Earp•100
    @Earpz1Posted almost 2 years ago

    This looks great. The page currently feels flat because there aren't any hover effects or anything to interact with. Some small tweaks around the nav bar and a box shadow on the images and the add to cart button will make this page come alive.

    • Add a border bottom to the li items in the nav bar that appears on hover using the pseudo class hover (https://www.w3schools.com/css/css_pseudo_classes.asp)

    • Box shadows can 'lift' items off a page and gives some depth. They also make good hover effects on a button to show the button can be clicked or somehow interacted with (https://www.w3schools.com/css/css3_shadows_box.asp)

    • Keeping your CSS in a separate file and importing it is preferred to having everything in a single HTML file. It improves readability of your code and keeps things cleaner. (https://www.w3schools.com/css/css_howto.asp)

    The responsive elements are a nice and scale down nicely to fit smaller screens. Good job!

    0
  • Daniel Earp•100
    @Earpz1Posted about 2 years ago

    I personally used Flexbox for this challenge althougth from my understanding CSS Grid seems to be the preferred solution.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Create a flex container with a flex direction: row (it's row by default so you don't have to explicitly declare it). Within that container put your H1 and Paragraph in it which will put them side by side and you can then style them with margin / padding to position them exactly where you want them.

    0