Skip to content
OverviewSolutions
8
Comments
14

Hossam khalaf

@hossam-khalafEgypt230 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Hossam khalaf•230
    @hossam-khalaf

    Thanks, @vcarames for Your Valuable feedback

    Ready To Build Your Community" is already an H3 heading.

    going to work on them right away:)

    Have a great day

  • Hossam khalaf•230
    @hossam-khalaf

    Hello, @abdelmounime

    Great Effort what you did so far.

    • You can use Semantic Elements like main tag instead of div you can read more about it here: Semantics

    • Also, you can add more padding-bottom or margin-bottom to the p tag to match the design

    Have a great day, Happy Coding😊

    Marked as helpful
  • Hossam khalaf•230
    @hossam-khalaf

    hello, @rachelktyjohnson

    Great job what you did with the background-position.

    the only note I can give you about it is to use relative units instead of px

    your code is like that : background-position: top -600px left -750px, bottom -600px right -750px;

    you can change it to something like that:

    background-position: left 50vw top 40vh, right 46vw bottom 50vh; and you won't need to add any media-query for the background because the background position is relative now to the viewport width and height

    Have a great day, Happy Coding 😊

    Marked as helpful
  • Hossam khalaf•230
    @hossam-khalaf

    Hello, @Soulz001 Great Job on what you achieved in the design so far.

    here are some notes:

    1- You can use the main tag as your container instead of adding non-necessary divs, your code will be more readable and much cleaner, also try to use semantic elements more, like <section> <articles>

    2- the mobile version of your projects has a scroll and doesn't match the design, after reading your code I saw that the padding on the pics__section causing that problem, it's so large for the mobile screen, decrease it to 9 or 10 rem or try using <picture> tag instead of using the background property on the <div>. -- you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    3- good job on background effect by the way but, You can use [mix-blend-mode] to make this color blend between the image and the background-color of the container. And play with the opacity to reach the actual effect.

    4- try increasing the font size of the heading to match the design and also adding some padding-right to text__section to match the desktop design, also don't forget to change it in the media-query -- which you can change to 600px for example instead of 1024 --

    don't get overwhelmed by all of the notes, there is nothing wrong with your code, it's just a better way of doing things, we are all still learning and we will always have more to learn about.

    have a great day Happy Coding😊

    Marked as helpful
  • Hossam khalaf•230
    @hossam-khalaf

    Hi, Remoan Great job you did with this project,

    You can use [mix-blend-mode] to make this color blend between the image and the background-color of the container. And play with the opacity to reach to the actual effect.

    Also you can increase the font size of the headings to match the design. Have a great day, Happy coding 😊👌

    Marked as helpful
  • Hossam khalaf•230
    @hossam-khalaf

    Good Job With The Design Edgar! I see a little Problem with the Mobile Nav, The Bars icon doesn't disappear when clicking on it and it shows alongside with Times icon. The quick fix for that is to use conditional rendering with (useState hook) on the icon itself.

    also, you can use (position:absolute) on the mobile nav to match the design.

    I like the animation so much though.

    Good Luck :)

View more comments