https://github.com/ayokanmi-adejola/social-proof-section

A modern, fully responsive social proof section built with semantic HTML5 and modern CSS. This project features user testimonials and ratings, adapting seamlessly to all device sizes for an optimal user experience.
https://github.com/ayokanmi-adejola/social-proof-section

css3 flexbox-layout html5 mobile-first-workflow

Last synced: 8 months ago
JSON representation

A modern, fully responsive social proof section built with semantic HTML5 and modern CSS. This project features user testimonials and ratings, adapting seamlessly to all device sizes for an optimal user experience.

• Host: GitHub
• URL: https://github.com/ayokanmi-adejola/social-proof-section
• Owner: Ayokanmi-Adejola
• Created: 2025-06-30T21:20:36.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-06-30T21:23:13.000Z (12 months ago)
• Last Synced: 2025-09-30T00:00:39.911Z (9 months ago)
• Topics: css3, flexbox-layout, html5, mobile-first-workflow
• Language: HTML
• Homepage: https://social-proof-section-topaz-kappa.vercel.app
• Size: 190 KB
• Stars: 5
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Social Proof Section

This project is a solution to the [Frontend Mentor Social Proof Section Challenge](https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA). It demonstrates a responsive, accessible, and visually appealing testimonial section using semantic HTML and modern CSS.

![Desktop Preview](./design/desktop-preview.jpg)

## Overview

This project showcases a social proof section with user testimonials and ratings, built to match a professional design. The layout adapts seamlessly to all device sizes, ensuring a great user experience everywhere.

## Features

- Fully responsive layout for desktop, tablet, and mobile

- Semantic HTML5 markup for accessibility

- Modern CSS with custom properties and Flexbox

- Clean, maintainable code structure

- Optimized images and assets

## Screenshots

### Desktop

![Desktop Screenshot](./design/desktop-preview.jpg)

### Mobile

![Mobile Screenshot](./design/mobile-design.jpg)

## Built With

- Semantic HTML5

- CSS Custom Properties (Variables)

- Flexbox

- Mobile-first workflow

## Getting Started

1. Clone this repository or download the ZIP.

2. Open `index.html` in your browser to view the project.

3. To customize or extend, edit the HTML and CSS files as needed.

## Responsive Design

- On large screens, testimonials are displayed in a single row.

- On tablets and mobile, testimonials stack vertically or become horizontally scrollable for best readability.

- All spacing, font sizes, and images adjust for optimal viewing on any device.

## How It Works

- The main content is structured in semantic HTML sections for clarity and accessibility.

- CSS Flexbox is used for layout, with custom properties for easy theming.

- Responsive breakpoints ensure the layout adapts to all screen sizes.

## Folder Structure

```

├── design/         # Design reference images

├── images/         # Project images and icons

├── index.html      # Main HTML file

├── style.css       # Main CSS file

├── README.md       # Project documentation

└── ...

```

---

## 👤 Author

- **Ayokanmi Adejola**

- Frontend Mentor: [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)