@XavOli
@radhaBharadwaj
Submitted
What are you most proud of, and what would you do differently next time?
I used em,rem for the first time in my projects...
What specific areas of your project would you like help with?
feedbacks are welcome...
@XavOli
Posted
Amazing job! I notice that your card is not quite aligned vertically when on desktop. This can likely be corrected by adding a height of 100% in your global container (which here I believe you use the body itself as your global container). On that global container, you can then use justify-content-center and align-items-center to vertically and horizontally align your card (content container).
Hope that helps!
Marked as helpful
@mo7amed7ussam198
Submitted
@XavOli
Posted
I would recommend adding a media query to resize your container to be fullscreen to make it more responsive like in the provided screenshots. This is how I did it in mine and I found it worked pretty well!
@media (max-width:600px) {
.container{
border-radius: 0;
position:absolute;
top:0;
left:0;
width: 100vw;
}
}
Love to see that you're using bootstrap, I started learning it today and it'd been really interesting. Continue with the good work!
@SWARNALATHARAJAN
Submitted
What are you most proud of, and what would you do differently next time?
now this time I am improve my coding style
What challenges did you encounter, and how did you overcome them?
make the grid
What specific areas of your project would you like help with?
css
@XavOli
Posted
Amazing job! I would recommend changing your media query so that your card doesn't take the full width when using on mobile. It could likely be done as setting the width to some section of the viewport in the query you already created. Generally, the max-width for that query would be 768px from the information I was able to find. At least that's how I was able to do it in an earlier project, hopefully it works for you too!
@media screen and {min-width: 768;
.container{
width: 90vw;
}
}
@BaiacuPlays
Submitted
@XavOli
Posted
I believe the hover effect was meant to activate when hovering the whole card.
You can do so by adding the hover selector over the whole card, but specifying which class to modify when that occurs.
.card:hover .title { (color) }
From the feedback I received on my project, I believe it is also best practice to wrap the principal content of the page in a <main> attribute.
Great work!
@CrazyGreekGR
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of this whole project, as I managed to do it on myself, no ChatGPT! Some googling was needed, of course
What challenges did you encounter, and how did you overcome them?
I didn't know some things like the drop shadow behind the box, but that was easily fixed by googling and messing around
What specific areas of your project would you like help with?
In this solution, I believe I did a good job, but any correction are appreciated :)
@XavOli
Posted
I believe the border-radius of the image could be increased to round up the edges. I would recommend looking into how to import the specific font that was mentioned in the style guide and the colors mentioned in the guide would've taken care of the difference in style for the paragraph. Overall great job!
