C-ZLTV / social-proof-section

I took on the social proof section challenge by frontend mentor and build a desktop and phone responsive layout. The project was build with the mobile first approach and mainly using Flexbox for the layout.

Frontend Mentor - Social proof section solution

This is my solution to the Social proof section challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Build out this social proof section and get it looking as close to the design as possible.

Users should be able to view the optimal layout for the section depending on their device's screen size.

Screenshot

Links

• Solution: Solution URL here
• Live Site: Live site URL here

My process

I build the social proof section taking the mobile first approach and mainly using Flexbox for the layout. The two parts, hero and cards, became flex containers on the desktop version while on the mobile version all the components fall in a column.

The star ratings layout was made with self-align applied to all three flex items. While the five starts are the svg background image applied to a div with background-repeat on space and a fixed width and height.

The cards have transform on translateY() for the scale effect.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Sass - CSS extension language

What I learned

This project helped me understand and play around with background properties and values:

background-image: url("../images/bg-pattern-top-mobile.svg"),
  url("../images/bg-pattern-bottom-mobile.svg");
background-position: top left, bottom left;
background-repeat: no-repeat;
background-size: 100%;

I also got to implement translateY for the into an actual project and in a useful way:

.card-2 {
  transform: translateY(1rem);
}

.card-3 {
  transform: translateY(2rem);
}

Author

• Website - Cristina Zlatov
• Frontend Mentor - @C-ZLTV
• Twitter - @czltv