https://github.com/prabhu30/profile-card-component
This is a challenge project listed on frontend mentor website. I built the project by looking at the design image given.
https://github.com/prabhu30/profile-card-component
css3 html5 responsive-design
Last synced: about 2 months ago
JSON representation
This is a challenge project listed on frontend mentor website. I built the project by looking at the design image given.
- Host: GitHub
- URL: https://github.com/prabhu30/profile-card-component
- Owner: prabhu30
- Created: 2022-12-19T05:20:59.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-19T05:57:33.000Z (over 3 years ago)
- Last Synced: 2025-03-28T20:48:27.409Z (about 1 year ago)
- Topics: css3, html5, responsive-design
- Language: CSS
- Homepage: https://prabhu30.github.io/profile-card-component/
- Size: 264 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Profile card component solution
This is a solution to the [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
## Overview
### The challenge
- Build out the project to the designs provided
### Screenshot
### Links
- Solution URL: [ Visit now](https://github.com/prabhu30/profile-card-component)
- Live Site URL: [ Visit now](https://profile-card-frontend-design.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
### What I learned
In the process of building this project, I learnt how to add two background images to bring gradient background design to the website, I also learnt few interesting things about main tag, and reset styles.
### Continued development
As part of further development, making those statistics/numbers dynamic can be implemented. That way, as and when followers/likes increase for the person, they will get updated here dynamically. If this feature can be implemented, this profile card can be used directly while designing dynamic end-to-end websites.