Frontend Mentor - Profile Card Component

Table of Contents

• Overview
• The Challenge
• Tools Used
• Challenges and Solution
• Final Thoughts
• Acknowledgement
• Contact

Overview

This is a soluton for the Frontend Mentor Profile Card Component challenge. The challenge was to create a profile card component and make it look as close as possible to the provided design.

The Challenge

The challenge is to create a profile card component using HTML and CSS. The provided design include both desktop and mobile versions.

Key Features

• Display a profile image with a circular border.
• Include the user's name and age.
• Show the user's location.
• Display statistics for followers, likes, and photos.

Tools Used

-HTML5 -CSS3

• Visual Studio Code

How to view

1. Clone this repository to your local machine.
2. Open the 'index.html' file in your browser to see the profile card component.

Challenges and Solutions

• Background Image Placement: Placing the background images to make the background pattern. Used background-image property to place two images separated their URLs using a comma set background-repeat property to no-repeat and set the position of the images using background-position property.

Final Thoughts

This project was a great opportunity to practive HTML5 and CSS3 skills.

Acknowledgement

• Frontend Mentor for the coding challenge and design

Contact

For review, insights and feedback, feel free to reach out to me at Email or GitHub Profile