https://github.com/surya8991/profile-card-component

https://github.com/surya8991/profile-card-component

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/surya8991/profile-card-component
• Owner: Surya8991
• Created: 2023-10-01T16:23:09.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-01T16:56:37.000Z (about 1 year ago)
• Last Synced: 2023-10-01T19:40:50.077Z (about 1 year ago)
• Language: CSS
• Size: 65.4 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)

  

- [Author](#author)

**Note: Delete this note and update the table of contents based on what sections you keep.**

## Overview

### The challenge

-Your challenge is to build out this profile card component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

### Screenshot

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

### Links

- Solution URL: [https://github.com/Surya8991/profile-card-component](https://github.com/Surya8991/profile-card-component)

- Live Site URL: [https://main--extraordinary-torte-5a155e.netlify.app/](https://main--extraordinary-torte-5a155e.netlify.app/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

### What I learned

Responsive user profile card design with custom CSS variables for colors.

Flexbox for centering content and media queries for responsiveness.

Decorative background images and circular profile picture styling.

### Author

- GitHub - [Surya L](https://github.com/Surya8991)

- Frontend Mentor - [Surya8991](https://www.frontendmentor.io/profile/Surya8991)

- Linkedin - [Surya L](https://www.linkedin.com/in/surya-l/)