Profile Card Component
This is a simple HTML and CSS code for creating a profile card component. The code is designed to display information about a person, including their name, age, location, and various statistics such as followers, likes, and photos. Preview
Profile Card Component Preview Features
Displays the profile picture, name, age, and location of the person.
Shows statistics such as the number of followers, likes, and photos.
Uses a custom font, "Kumbh Sans", from Google Fonts.
Responsive design that adapts to different screen sizes.
Usage
Clone this repository or copy the HTML and CSS code into your project.
Include the style.css file in your HTML file.
Customize the content and styles according to your needs.
Run the HTML file in a web browser to see the profile card component.
Styling
The CSS code provides basic styling for the profile card component. It includes the following features:
Centered layout with a minimum height of 450 pixels.
Rounded corners and a background pattern for the card container.
White background for the details section.
Profile picture with a circular shape and a border.
Horizontal line separator.
Statistics displayed in a row with equal spacing.
Background Images
The profile card component uses two background images to create a visually appealing background. The images are located in the ./images directory:
bg-pattern-bottom.svg: This image is positioned at the bottom of the background.
bg-pattern-top.svg: This image is positioned at the top of the background.
Responsive Design
The profile card component is designed to be responsive and adapt to different screen sizes. It uses the @media rule to apply specific styles when the width of the viewport is less than 400 pixels. In this case, the width of the card container is reduced to 320 pixels.
Feel free to modify the styles and adjust the responsive breakpoints to fit your project's requirements. Attribution
This code is inspired by a challenge from Frontend Mentor. To learn more about Frontend Mentor and their challenges, visit their website: Frontend Mentor
The profile picture used in this code is for demonstration purposes only and should be replaced with an appropriate image. License
This code is licensed under the MIT License. Feel free to use and modify the code for your own projects.