Social proof section using HTML and CSS

Community feedback

• 

  Adarsh Pratap•5,515

  @adarshcodesPosted almost 4 years ago

  Hi @Mohanad-Hafiz, first of all, Welcome to this amazing community, and congratulations on submitting your first solution. Let's talk about your solution,

  • Design Aspect: Your solution is pretty close to the design provided. Good work👍. A few things you can consider to make it better. Instead of using those background images as image tag, add them using css. Ex- body: { background: url("your-img-directory-top") no-repeat, url("your-bottom-img-link") no-repeat; background-position: top 0, bottom 0; }. You can use this reference for more details of background-image

  • Responsiveness: It seems it doesn't have responsive code, you can make it responsive using flex-box or grid and media-queries. No worries, it's your first solution, a lot to learn ahead. Best of Luck : )

  • Accessibility and HTML issues: It's a lot of issues, view the report and you can see you just need to add alt="image-desc" and you are good to go.

  It's your first project here and you did it nicely, great work👏. I hope you'll find it helpful. Happy Coding : )

  2

  ---

  

  Mohanad•75

  @Mohanad-HafizPosted almost 4 years ago

  @adarshcodes this is very helpful thank you so much!

  1
• 

  Mansoor Roeen•420

  @mansoor-roeen-glitchPosted almost 4 years ago

  hey Mohanad, 👋👋 nice work with the challenge,

  I suggest, *adding a max-width of 1200px to the .container class and giving it a width of 90%; *positioning the .container class to centre ; *Adding a few media queries to make it more responsive;

  You can join the slack community by scrolling down!! it could be very helpful !! here is my solution for this challenge https://www.frontendmentor.io/solutions/html5-css-l0SNygaJJ

  1

  ---

  

  Mohanad•75

  @Mohanad-HafizPosted almost 4 years ago

  @mansoor-roeen-glitch Thank you for the advice, I will definitely try it out

  0