Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
15
Durga Jaiswal
@Durga-Jaiswal

All comments

  • Phusara•10
    @Phusara
    Submitted over 1 year ago

    QR code component layout solution

    2
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Hello, Good to see your Project. To make the card center aligned with the body, you can follow these as

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

    This will make your card component center aligned.

  • AdamsRuth1•20
    @AdamsRuth1
    Submitted over 1 year ago

    i used HTML,CSS

    #accessibility#styled-components#lighthouse
    3
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Great. You have to make body tag viewport height 100vh.

    body {
    max-height: 100vh;
    }
    

    To avoid scrolling, there should be max-height not min-height. This will make sure that no - scroll bar appear in the main page.

  • Flavio Gomes•720
    @flaviogp
    Submitted over 1 year ago

    Product preview card component with HTML5 and CSS3

    2
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Hello there, Good to see your project.

    You can set min-height of the card so that it matches with the given design. Other than this your project doesn't have much to change.

    Hope you find it helpful.

  • VITOR HUGO TEIXEIRA•80
    @Vitor5782
    Submitted over 1 year ago

    Responsive column using Grid

    1
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Hello there, Good to see your project. Overall your project is good, but the width: 80%; in the .container selector should be 60% or 65% so that it matches with the given Style of Challenge.

    Hope you find this helpful.

    Marked as helpful
  • LexLexLex•40
    @LLLEEXX
    Submitted over 1 year ago

    Rating Design

    #react#react-router
    1
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Overall your project is Good. But as I've seen in the code you've used CSS ID as selectors, this is not a good practise. Try to use classes as selectors, using classes as selectors is known as best practise.

    Marked as helpful
  • AnjasFedo•40
    @Anjasfedo
    Submitted over 1 year ago

    QR Code React Sass

    #react#sass/scss#vite
    2
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Try to use border-radius in pixels(px) as using % does not make border perfect circular around the corners. I've also learnt this after a long time. Using px in border-radius helps in this problem.

    Talking about CSS resources, there are plenty of them.Youtube Videos and Free Courses, but to get better grasp on it, you have to make small and easy projects, that will get you in better position of learning CSS.

    Marked as helpful
  • Mjornog•40
    @Mjornog
    Submitted over 1 year ago

    My first solution using CSS

    2
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Put max-height : 100vh to avoid scrolling the page. It will help in making page do not scroll. Other than this all things are perfect.

    Marked as helpful
  • hema•20
    @hemafars
    Submitted over 1 year ago

    Results Summary Component html css

    1
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Use color gradient as prescribed in style guide for the Your Result side of card, so that it matches with the original layout.

  • Dashaun Sutton-Harris•80
    @dashaunn
    Submitted over 1 year ago

    Results-Summary Component

    2
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Happy, You've completed the challenge. There are many resources out there, I'll list 2 of them:

    1. CSS Grid by wesbos

    2. CSS Grid by Scrimba

  • JalenDmarion25•460
    @JalenDmarion25
    Submitted over 1 year ago

    3-column preview card component

    1
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted over 1 year ago

    Try to use prescribed font-family given in the style guide. body text should have different font-family than head text. Overall the project is good. You have done excellent job

    Marked as helpful
  • Corey•20
    @acoreyu
    Submitted almost 2 years ago

    QR code component

    2
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted almost 2 years ago

    Overall project was Good

    In img tag padding: 20px should be 10px so that it matches with the given design.

    and there should be some padding in header-text and guide-text classes.

    I hope it helps you.

    Marked as helpful
  • Amin•80
    @AMINKHALAJI
    Submitted almost 2 years ago

    responsive-colorful-result

    #cube-css
    2
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted almost 2 years ago

    Set background-image as radial-gradient for the Your Result side component. It's not a simple background color, it is the combination of two colors given in the style-guide in the given package of files. Like this:

    background-image: radial-gradient(circle, hsl(252, 100%, 67%),hsl(241, 81%, 54%) 80%); This will make the background look same like the given project.

  • suhridp•110
    @suhridp
    Submitted almost 2 years ago

    made the responsive nft preview card

    4
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted almost 2 years ago

    If you want to change the image on hover effect try to use onmouseover property of CSS and also use onmouseout property on the same img tag, so that image will change according to the prescribed src attribute. Another thing is that try to put prescribed font given in the style guide of the project, and they also tell about the font size in the style-guide.

  • Michal•250
    @MikeZeg
    Submitted almost 2 years ago

    Product preview card comp...

    2
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted almost 2 years ago

    Try to use prescribed font in the given style guide. Make sure you use regular font not the italic one, so that heading will not be italicized.

    Marked as helpful
  • TANJIRWEBDEV•140
    @TANJIRWEBDEV
    Submitted almost 2 years ago

    Responsive Age Calculator With Animated Age Numbers

    1
    Durga Jaiswal•230
    @Durga-Jaiswal
    Posted almost 2 years ago

    To eliminate extra margins try to put margin and padding equal to zero, to avoid extra space.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub