https://github.com/0xabdulkhaliq/four-card-feature-section

An exercise/assessment which was submitted with additional features and tweaks that aspires everyone..✨
https://github.com/0xabdulkhaliq/four-card-feature-section

css-animations css3 frontend frontend-mentor frontendmentor-challenge html5 javascript-library scrollreveal-js swiper swiper-js

Last synced: about 2 months ago
JSON representation

An exercise/assessment which was submitted with additional features and tweaks that aspires everyone..✨

• Host: GitHub
• URL: https://github.com/0xabdulkhaliq/four-card-feature-section
• Owner: 0xabdulkhaliq
• License: mit
• Created: 2022-12-05T08:54:53.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-06T16:27:44.000Z (about 2 years ago)
• Last Synced: 2024-11-08T11:23:32.629Z (3 months ago)
• Topics: css-animations, css3, frontend, frontend-mentor, frontendmentor-challenge, html5, javascript-library, scrollreveal-js, swiper, swiper-js
• Language: CSS
• Homepage: https://0xabdulkhalid.github.io/four-card-feature-section/
• Size: 1.1 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# **Four card feature section**

This is a solution to the [Four card feature section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK)





## **Preview**












## **Links**

- Solution URL: [click here](https://www.frontendmentor.io/solutions/four-card-feature-section-but-slightly-tweaked-up-V_5_-1PbBC)

- Live Site URL: [click here](https://0xabdulkhalid.github.io/four-card-feature-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)   

- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

- ![ScrollReveal](https://img.shields.io/badge/ScrollReveal%20js-0e141f?style=for-the-badge&logo=ScrollReveal&logoColor=e39ff6)

- ![Swiper](https://img.shields.io/badge/Swiper%20Js-172b4d?style=for-the-badge&logo=Swiper&logoColor=5cc2e8)




## **Tools Used**

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

- ![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white)

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

- ![Google](https://img.shields.io/badge/google-4285F4?style=for-the-badge&logo=google&logoColor=white) 

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




## **Outcome**

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

* Used **Js libraries** for animations and transitions

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

* Tried to maintain **clean code**

* Used **media queries** for responsive design

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




## **What I learned**

* Usage of **Swiper.js** to get realistic effects

* Usage of **::before** & **::after** pesudoclasses in css

* Usage **Figma** for designing cover images

* A lot of minor things




## **Acknowledgment**

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

* Thanks to Open source Javascript libraries [Swiper.js](https://github.com/nolimits4web/swiper) & [ScrollReveal.js](https://github.com/jlmakes/scrollreveal)




## **Contact**