https://github.com/0xabdulkhaliq/social-proof-section

Social proof section solution for Frontend mentor Challenge
https://github.com/0xabdulkhaliq/social-proof-section

bem css3 frontend-mentor html5 semantic-web

Last synced: about 1 month ago
JSON representation

Social proof section solution for Frontend mentor Challenge

• Host: GitHub
• URL: https://github.com/0xabdulkhaliq/social-proof-section
• Owner: 0xabdulkhaliq
• Created: 2023-01-24T14:23:55.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-24T14:41:19.000Z (almost 2 years ago)
• Last Synced: 2024-08-14T03:38:16.697Z (4 months ago)
• Topics: bem, css3, frontend-mentor, html5, semantic-web
• Language: HTML
• Homepage: https://0xabdulkhalid.github.io/social-proof-section/
• Size: 189 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# **Social proof section - Solution**

This is a solution to the [Social proof section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA)




## **Preview**










## **Links**

- Solution URL: [click here](https://www.frontendmentor.io/solutions/social-proof-section-mhZiQX9w1l)

- Live Site URL: [click here](https://0xabdulkhalid.github.io/social-proof-section/)




## **Built With**

- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   

- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   




## **Tools Used**

- ![Shell Script](https://img.shields.io/badge/Bash-%23221011.svg?style=for-the-badge&logo=gnu-bash&logoColor=white) 

- ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)  

- ![Arch](https://img.shields.io/badge/Arch%20Linux-1793D1?logo=arch-linux&logoColor=fff&style=for-the-badge)

- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   




## **Outcome**

* Tried **BEM Methodology** which helped me to write clean code in css

* Used HTML5 **semantic elements** for better accessability and readability

* Practiced **mobile first workflow** which ensures responsive layout

* Used **Git** and **GitHub** for project management

* Tried to maintain **clean code**

* **Cross tested** on Firefox and Chromium based browsers




## **What I learned**

* Usage **transition** property for generating smooth hover transitions for elements

* Usage of **Semantic elements** to improve accessability for screen readers

* Usage of **GRID** & **FLEX** layouts in css

* A lot of minor things




## **Acknowledgment**

* Challenge by [Frontend Mentor](https://www.frontendmentor.io)




## **Contact**