Durga Jaiswal
@Durga-JaiswalAll comments
- @Phusara@Durga-Jaiswal
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@Durga-Jaiswal
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.
- @flaviogp@Durga-Jaiswal
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.
- @Vitor5782@Durga-Jaiswal
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 - @LLLEEXX@Durga-Jaiswal
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@Durga-Jaiswal
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@Durga-Jaiswal
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 - @hemafars@Durga-Jaiswal
Use color gradient as prescribed in style guide for the Your Result side of card, so that it matches with the original layout.
- @dashaunn@Durga-Jaiswal
Happy, You've completed the challenge. There are many resources out there, I'll list 2 of them:
- @JalenDmarion25@Durga-Jaiswal
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 - @acoreyu@Durga-Jaiswal
Overall project was Good
In img tag
padding: 20px
should be10px
so that it matches with the given design.and there should be some padding in
header-text
andguide-text
classes.I hope it helps you.
Marked as helpful - @AMINKHALAJI@Durga-Jaiswal
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@Durga-Jaiswal
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.
- @MikeZeg@Durga-Jaiswal
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@Durga-Jaiswal
To eliminate extra margins try to put margin and padding equal to zero, to avoid extra space.