This beautiful component was created with grid and flex

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  Hello again Mohit, congratulations for you solution!

  I saw the live site and two things you can change in order to improve it are the font-size thats not rendering the correct font and the image overlay.

  Import the font using Google Fonts https://fonts.google.com/ and import the code to drop on your CSS/HTML:

  Family: Inter / Weights: 400, 700 Family: Lexend Deca / Weights: 400

  For the overlay effect on the image making it purple use mix-blend-mode: multiply and opacity 80%.

  When you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings.

  I hope this helps you

  Marked as helpful

  0

  ---

  

  Mohit Jain•190

  @MOHITBILALAPosted about 2 years ago

  @correlucas I will try my best, thanks for guiding me

  0
• 

  Mohd Gulam Ansari•210

  @gulamansari57181Posted about 2 years ago

  Hey congratulations buddy ! I have gone through your live link. Great work ! But I have a small suggestion.

  On 100% viewport the main image is spreading inappropriately, so you can try below two fixes:

  1. Either limit the overall container in terms of width.i.e. ''' main{ width:80% //Yoc can play around with this } '''
  2. Or You can use background-image property as: background-position:contain;

  Hope this help. Happy Coding !!

  Marked as helpful

  0

  ---

  

  Mohit Jain•190

  @MOHITBILALAPosted about 2 years ago

  @gulamansari57181 I'll try it for sure, thanks for the suggestion

  0