MediumGeneral
Customer Reviews

👤 Client Story:

We're launching a new software project next month, and we'd like to have this section ready to be implemented in our website. The design given matches our new branding and we're excited to see this final piece of the puzzle put into place. We take pride in great UI/UX and a minimalistic visual precision of our branding. So, we would like the final product to be delivered exactly as shown in the mockup. The animations should be detailed and subtle, and not too on the nose. Note: We use the Rubik font which is available through Google Fonts.

Can you build a functional prototype for the reviews section?

🚀 Summary

This project will help you practice CSS flexbox principles and necessitate understanding of the box-model for padding and margin. Additionally, this medium level project includes common requests related to interactive animations and responsive sizing.

📗 Recommended Pre-study

CSS Box-model
https://css-tricks.com/the-css-box-model/\

CSS Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS Position (absolute/relative)
https://css-tricks.com/almanac/properties/p/position/

GSAP
https://greensock.com/get-started

Open Source Icon Libaries
https://heroicons.com/ https://icons.getbootstrap.com/

📋 Project Requirements:

Goal: Create a pixel-perfect recreation of the reviews section mockup, with animations and mobile-responsive sizing.

1. Layout:

   • Space the reviews evenly, and round the corners.
   • Display 1 review at a time for mobile users.
   • Display 3 reviews for desktop users.s
   • Find and link the correct font in the head section.
   • Add a decorative quote that overhangs the top.
     (Hint: Try including the SVG code from an icon library)

2. Interactivity:

   • Arrows should shift the reviews one review at a time.
   • Ensure the animation works on a variety of screen sizes.
   • Ensure the animation works for varying numbers of reviews.

⚠️ Challenge

Try switching the project animations to vanilla JS (or to GSAP if you haven't yet).