@GermanGuerreroR
Latest solutions
Latest comments
- @Dreamleaf
Generally very good, but you have some problems with the card width changing on different viewport sizes.
For example, the image could be placed without a wrapper element to fix that section - or you could add
display: contents;to the .header__bg class.The html could also be simplified by reducing the number of wrapper divs you are using, I approach these types of layouts with the following structure:
main.card
img (no wrapper needed) aside (the tag and post date) div.content (title and teaser text) user info (could wrap in a semantic aside or footer if desired) close main
You can center everything using flex or grid on the body, and add a standard padding to the .card. This way you may just need to tinker with specific sizings in a media query if needed.
Hope this is helpful! And have a great christmas!
Marked as helpful - @EONRaider@Dreamleaf
Looks great, the only thing I think could improve is to add some padding or margin on mobile view to stop the card hitting the sides.
- @savvystrider@Dreamleaf
I really like the additional pulse animation from the user image, however while adding that you have missed the card hover transition.
The box-shadow should grow on hover. I'm assuming that if you can create the cool additions that this was just an oversight.
Marked as helpful - @joshmichael23@Dreamleaf
Generally looks good.
I note that you missed the interactive elements though.
It should have a hover to the yellow on the title link and the box shadow should grow on hover.
Both are pretty simple to add in, but overall you did a great job.
Marked as helpful - @8BitSoda@Dreamleaf
A couple of points about the text elements in the card.
-
You have both the title and text within p tags, ideally there should be a heading within the element. So you could have made the "improve your...." text a h1 element. In a real world situation, there would likely be other things on the page and the title may be better suited as a h2.
-
You have both text sections set with a single font size, the design has them differently - and while there is a bit of trial and error needed, you could have styled them accordingly.
-
When you declare the font - always include a fall back font if the main choice is being pulled in from an external source. This way if there is an issue with the fonts loading, you still control how it looks. For this you just need to write:
font-family: outfit, sans-serif; -
Look at using REMs for the font sizing instead of PX values, definitely have a read up on the difference and why it is better.
Keep going though, every time you write code it will improve.
-
- @rj-Rajeev@Dreamleaf
Neatly done, good job!
One practice that is good to get into the habit of doing, even on smaller projects, is to separate the CSS into it's own file. While it doesn't impact challenges like this, in the real world the separation of html and css is standard, so it's just good to do :)
