Skip to content

nellanjimms/Profile-Card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Profile Card Component

Design Preview for the Profile card component coding challenge

Table of Contents

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

About

HTML&CSS profile card

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published