Using CSS Layout

Community feedback

• 

  P

  Marko Nikolajević•1,065

  @MarkoNikolajevicPosted over 3 years ago

  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 using float and display: 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 div or a pseudo element as ::after and apply on it a background: /* color value */

  Your html and css code is clear. Keep on coding :)

  1

  ---

  

  David Oluwatobi Ebenezer•235

  @EbvidProPosted over 3 years ago

  @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.

  1

  

  P

  Marko Nikolajević•1,065

  @MarkoNikolajevicPosted over 3 years ago

  @EbvidPro I will with pleasure!

  I just noticed that your font-family is not the same as the one of the design :)

  1

  

  David Oluwatobi Ebenezer•235

  @EbvidProPosted over 3 years ago

  @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.

  0

  

  P

  Marko Nikolajević•1,065

  @MarkoNikolajevicPosted over 3 years ago

  @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;
  

  1

  

  David Oluwatobi Ebenezer•235

  @EbvidProPosted over 3 years ago

  @MarkoNikolajevic Thanks so much.

  You've really helped me to learn some new things.

  0
• 

  soransh singh•1,025

  @soransh-singhPosted over 3 years ago

  hey, I was also not able to apply Image filter. So I do a trick where I decrease the opacity of Image to 50% and made the background-color soft purple to make the Image look like the one given in design, it worked for me

  0

  ---

  

  David Oluwatobi Ebenezer•235

  @EbvidProPosted over 3 years ago

  @soransh-singh ohhh, Okay. Let me try that.

  Thanks.

  0