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

# Sunnyside Agency | React | Framer Motion | TailwindCSS

P

@cancomertpay

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Welcome to the Sunnyside Agency landing page project! This project is a fun and colorful landing page created using React, Vite, Tailwind CSS and Framer Motion. It follows the mobile-first approach and is designed to be responsive on various devices including mobile phones, tablets, and desktops.

Technologies Used

  • React
  • Vite
  • Tailwind CSS
  • Framer Motion

Features

  • Fun and colorful design
  • Responsive layout for mobile, tablet, and desktop
  • Interactive animations powered by Framer Motion

Important note: The reason for the application not rendering correctly in Frontend Mentor's checker is due to the Framer Motion's whileInView feature. Please don't be prejudiced and take a look at the live preview of the application.

Community feedback

@Tolulope-as

Posted

Wow I love the transitions but I noticed your background image is somewhat to the right I think u should use

background-position :top center;

Marked as helpful

0

@PedroS2001

Posted

Wow It's really a very good project. However, some corrections can be made.

Very cool animations!! Although I personally do not like that the animation runs all the time, but only the first time.

When the screen size is between 500 and 780 (large tablet and mobile), the responsive fails and the menu looks bad.

keep going!

1

P

@cancomertpay

Posted

@PedroS2001 Thanks Pedro, I'll fix it.

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