Social-Links-Using-CSS

A simple and clean profile card component built with HTML and CSS. This project is responsive and adapts to different screen sizes, providing an elegant display for personal information and social media links.

Features

• Responsive design with media queries for mobile devices.
• Profile picture with rounded borders.
• Personal information including name, location, and a short bio.
• List of social media links with hover effects.
• Modern dark theme using hsl color values.

Technologies Used

• HTML5: For structuring the content of the profile card.
• CSS3: For styling the profile card and making it responsive.
  • Flexbox for layout alignment.
  • Media queries for mobile responsiveness.
  • Hover effects on social media links.

Files

• index.html: Contains the structure of the profile card.
• style.css: Contains the styling and layout of the profile card.
• favicon-32x32.png: The favicon image for the page.
• avatar-jessica.jpeg: The avatar image for the profile.

Preview

Here's how the profile card looks:

Customization

• Replace the avatar-jessica.jpeg with your own image for a personalized profile card.
• Update the personal details such as name, location, and about section in the index.html.
• Add your own social media links in the list under the .links section.

Mobile View

The profile card is designed to be fully responsive and adapts to screen sizes smaller than 375px width. The font size and layout adjust to ensure the profile card looks great on mobile devices.