Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/0xabdulkhaliq/profile-card-component-remastered

Remastered version of Profile card component solution for Frontendmentor challenge
https://github.com/0xabdulkhaliq/profile-card-component-remastered

css frontend-mentor html remastered

Last synced: 6 days ago
JSON representation

Remastered version of Profile card component solution for Frontendmentor challenge

Host: GitHub
URL: https://github.com/0xabdulkhaliq/profile-card-component-remastered
Owner: 0xabdulkhaliq
Created: 2023-02-01T16:19:39.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2023-02-02T11:05:33.000Z (almost 2 years ago)
Last Synced: 2024-08-14T03:38:16.394Z (3 months ago)
Topics: css, frontend-mentor, html, remastered
Language: CSS
Homepage: https://0xabdulkhalid.github.io/profile-card-component-remastered/
Size: 1.34 MB
Stars: 0
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # **Profile card component - Remastered Solution**

This project is a solution to the [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ)




## **Preview**










## **Links**

- |||

  | :----- | :-----: |

  | Live Preview: | [click here](https://0xabdulkhalid.github.io/profile-card-component-remastered/) |

  | Frontendmentor Post: | [click here](https://www.frontendmentor.io/solutions/profile-card-component-remastered-vanilla-css-easter-egg--dQ9XjrgHA) |

  | Original Repository (Non-Remastered): | [click here](https://github.com/0xabdulkhalid/profile-card-component) |

  |||




## **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**

* First completed this **challenge as per design they provided**, then **i modified the way it looks**

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

* 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 **transition** property for generating smooth hover transitions for images

* 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**