https://github.com/yashi-singh-9/profile-card-component

This is a solution to the Profile Card Component challenge on Frontend Mentor, where the task was to build a responsive profile card component based on a provided design. The project demonstrates skills in HTML, CSS, and responsive design, utilizing CSS custom properties and Flexbox for layout and styling.
https://github.com/yashi-singh-9/profile-card-component

css frontend frontend-mentor frontendmentor-challenge html

Last synced: 12 days ago
JSON representation

This is a solution to the Profile Card Component challenge on Frontend Mentor, where the task was to build a responsive profile card component based on a provided design. The project demonstrates skills in HTML, CSS, and responsive design, utilizing CSS custom properties and Flexbox for layout and styling.

• Host: GitHub
• URL: https://github.com/yashi-singh-9/profile-card-component
• Owner: Yashi-Singh-9
• Created: 2024-09-18T11:24:15.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-26T05:56:36.000Z (about 2 months ago)
• Last Synced: 2024-10-17T17:51:13.160Z (30 days ago)
• Topics: css, frontend, frontend-mentor, frontendmentor-challenge, html
• Language: CSS
• Homepage: https://profile-card-component-frontend-yashi.netlify.app/
• Size: 116 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Profile Card Component - Frontend Mentor Challenge

[![Netlify Status](https://api.netlify.com/api/v1/badges/b87a4dcb-121b-4bf9-9d01-ab32ca88bc8d/deploy-status)](https://app.netlify.com/sites/profile-card-component-frontend-yashi/deploys) 

![Last Commit](https://img.shields.io/github/last-commit/Yashi-Singh-9/Profile-Card-Component/main)

## Overview

This project is a solution to the **Profile Card Component** challenge on [Frontend Mentor](https://www.frontendmentor.io). The challenge involves creating a responsive profile card component that displays a user's profile information, including their name, age, location, and social media statistics.

## Screenshot

#### Desktop 

![Desktop Screenshot](design/desktop-design.jpg)

#### Mobile

![Mobile Screenshot](design/mobile-design.jpg)

## Project Links

- **Solution**: [Frontend Mentor](https://www.frontendmentor.io/solutions/profile-card-component-AgRVAdRRoZ)

- **Live Demo**: [Live](https://profile-card-component-frontend-yashi.netlify.app/)

## Technologies Used

- **HTML5**: For the structure of the webpage.

- **CSS3**: For styling the component, including the use of Flexbox for layout and custom properties for consistent theming.

- **Google Fonts**: The "Kumbh Sans" font family is used for typography.

## Features

- **Responsive Design**: The profile card is fully responsive, ensuring a seamless user experience across different screen sizes, including mobile devices.

- **Customizable**: The component uses CSS variables (custom properties) for easy customization of colors and other styles.

- **Clean Layout**: The layout is simple and clean, with a central focus on the profile information and statistics.

## Project Structure

The project files are organized as follows:

- **index.html**: Contains the markup for the profile card component.

- **styles.css**: Contains all the styles used for the component, including global styles, component-specific styles, and media queries.

- **images/**: Contains all the images used in the project, such as the background patterns and the profile picture.

## Customization

You can easily customize this component by modifying the CSS variables defined in the `:root` selector within `styles.css`. These variables control the primary and neutral colors used throughout the component.

## Credits

- Challenge by [Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ).

- Coded by [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246).