Skip to content
Submitted over 2 years ago

CSS Grid

Praise•80
@Omoh123
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

A feedback will be well appreciated, I'm not sure I used some of the properties in the right way.

Community feedback

  • Rajesh Janyani•330
    @Rajesh7rjPosted over 2 years ago

    @Omoh123 Hey, Good attempt mate, but i wanna give few suggestions.

    First you should uncomment your font url.

    Second for element <p> , you should you should use font-family: "fraunces", because it is mention in style-me.guide of project.

    You can also use <h1> instead of <p> for text "Gabrielle Essence Eau De Parfum".

    You can also add font-weight -700 for larger font (for boldness of font) for text "Gabrielle Essence Eau De Parfum" and for price.

    Your class ="text" container look more wider, you can set his width equal to class "image-text".

    Hope these things will help you. Over the time you will become better and better.

    Best Wishes.... Keep coding....

    Marked as helpful
    0
    Praise•80
    @Omoh123Posted over 2 years ago

    @Rajesh7rj thanks

    0
  • Account deleted

    hi @Omoh123, congratulations on finishing your first challenge in frontend mentor, great work!

    I'm going to give you some suggestions to avoid accessibility issues and finish perfecting your code:

    • <html> element must have a lang attribute, this is very easy to solve: 
    <html lang="en">
    • Images must have alternate text, you should add it with the alt attribute like this:
     <img src="images/image-product-desktop.jpg" alt="perfume">
    • Document should have one main landmark, this encloses the main part of your project, you can fix it like this:
    <div class="container">  <-- remove
<main class="container">  --> add
    • Page should contain a level-one heading, you could add it with a .hide class that hides it or you could change this p tag for a <h1> tag:
    <p> PERFUME</p>
    • All page content should be contained by landmarks, at the end of your code you have a div that can easily be a footer:
    <div class="attribution">  <-- remove
<footer class="attribution">  --> add

    I hope this feedback has been useful to you! keep coding :)

    Marked as helpful
    0
  • Beck Sattorov•170
    @BeckSattorovPosted over 2 years ago

    good work

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord