@MarkoNikolajevic
Posted
Hi David, you did a nice job with this challenge!
I've a few suggestions for you
- you could use
display: grid;to recreate the 2 columns grid layout instead of usingfloatanddisplay: table;. I think it's easier using grid. - here a useful link about using filter on images https://www.w3schools.com/cssref/css3_pr_filter.asp
- another solution for the image filter is creating a sort of overlay on it using a
divor a pseudo element as::afterand apply on it abackground: /* color value */
Your html and css code is clear. Keep on coding :)
@EbvidPro
Posted
@MarkoNikolajevic Thanks. I'm happy to hear that, I will do well to edit and try them again using the suggested method.
Looking forward to more of your feedbacks on my next challenge.
@MarkoNikolajevic
Posted
@EbvidPro I will with pleasure!
I just noticed that your font-family is not the same as the one of the design :)
@EbvidPro
Posted
@MarkoNikolajevic Yes. I forgot to even include that as one of the questions.
I was not able to use any of the font. I tried using @import method in CSS and I was yet not able to include the font provided.
I don't know if you have any suggestion or method I can use to do that.
@MarkoNikolajevic
Posted
@EbvidPro you could use the link tag in your html and then set the font family in your css.
This is one example using Roboto in your html file
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
in your css file
font-family: 'Roboto', sans-serif;
@EbvidPro
Posted
@MarkoNikolajevic Thanks so much.
You've really helped me to learn some new things.
