Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

loopstudios-landing-page-development

@riteessshh

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedbacks are appreciated. And need guidance in the dropdown menu part.

Community feedback

@Rayanthecoder

Posted

it looks cool

1

@Rayanthecoder

Posted

Amazing web really

0

@riteessshh

Posted

@Rayanthecoder thanks man

0
Jane 1,040

@janegca

Posted

Hi Ritesh, your page is getting close to the design but is still missing some pieces

From the mobile design:

  1. The hamburger menu should open a full screen overlay with the menu text uppercased, thin weight, and left-aligned

  2. The gallery images should have a gradient overlay that changes on hover

  3. The 'see all' button is missing the hover effect as are the footer menu and social icon links

  4. The Twitter icon is missing from the social links

  5. The copyright text is grey in the original design

From the desktop design:

  1. The menu items need some left-hand spacing
  2. The bottom part of the intro text is cut-off
  3. The text overlaying the graphic in the next section does not match the design layout
  4. The hover overly works on the gallery images but the text should be changed to black
  5. The hover on the footer menu is working but the underline is too wide, there is still no hover on the social icons

My apologies for not providing fixes for all these, at best, I would suggest you refactor things one at time and possibly restructure your code for mobile first (Kevin Powells' videos helped me better understand the approach, see Responsive Design Made Easy). For the hamburger menu with the overlay try DevEd's Animated Responsive Navbar Tutorial for some insight into how it can work.

Hope this is of some help.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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