Skip to content
Submitted over 3 years ago

Mobile first, Flexbox and a little javascript

Rajnish Deshmukh•200
@drajnish
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hello everyone!

Have some question but apart from that all constructive feedback is welcome.

  1. Is there any other way to change the color of the logo. I changed the color by changing the "fill" property of svg file (footer logo).

  2. Need some suggestion for graphic design and photography section. Used float to arrange both section and position is absolute for text. so problem is for small size device text goes upward.

  3. In javascript it was not changing property value while using document.querySelector('.class').style.property = new style and also did not even show property value.

  4. Love to know how to make it shorter just to not repeat myself so much in my code? I tried to make it as concise as I could.

Thank you very much in advance.

Community feedback

  • Michael Adebambo•1,045
    @Blazing-MikePosted over 3 years ago

    1. Filter property can be used to change color of a logo and take note that the logo is an SVG so the filter property will work here's am article that can help https://css-tricks.com/change-color-of-svg-on-hover/

    2. For that section... Wrap them in in a div and display flex or grid... The display absolute for text and adjust the margin-top to be negative value then give it some bottom padding and I would like you to check out mobile first design ( it is simply developing for smaller screens first before desktop) https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/#:~:text=A%20responsive%20framework%20is%20a,in%20mobile%2Dfirst%20design%20development.&text=Responsiveness%20is%20not%20only%20adjusting,an%20image%20at%20least%20once.

    3. I don't really know why this is happening but you should represent class with a variable name then use the variable name to access functionalities

    4. To make code shorter.. add similar class for element that need some similar style like the two LEARN More btns have same style except for border-bottom color.... Just try looking at sections or element that have similar style and give them same class.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord