html CSS Javascript

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  HANDLING HERO IMAGE 📸:

  • You need to handle the Hero image with more card because of it's natural shrink to fit behavior.

  ---

  • After reviewing your code i have found the way you tackle the design of Hero Section, The issue lies within that.

  ---

  • You have created a seperated div homepage-black for texts then the image is separately placed with image tag.

  ---

  • We can handle this issue in two ways either controlling the fit of img or refactoring the Hero section.

  ---

  • You can simply add object-fit property for the Hero Image, this lets you to tackle natural shrink to fit property of Images (only add this for desktop's with media query)

  .homepage-img {
    object-fit: cover;
    object-position: 90%;
  }
  

  ---

  • But i will suggest you to refactor the entire Hero section, by removing the homepage-black and add all of it contents directly to homepage div for image you can simply set the Hero image as background and set it's background-size to cover.

  ---

  • After all setting up these things you can simply create the half black block like structure using CSS3's Pseudoselectors, they are ::before and ::after, You can take a minute to go-through this article named ::before / ::after from CSS Tricks site.

  ---

  • I haven't still submitted solution for this one because this is a paid one so i can't provide my solution as a reference, But still i can help you with the knowledge i have. Please do ask if any doubts you have regarding your solution.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  00

  Marked as helpful