Skip to content

Kennie265/CSS-Challenge-

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Personal Profile Card

A clean and responsive profile card built with HTML and Tailwind CSS. This project provides a modern, business card-style presentation of personal and professional information.

🚀 Features

  • Responsive design that works on all devices
  • Clean and modern UI
  • Profile picture display
  • Professional information section
  • Skills showcase
  • Interest highlights
  • Social media links with hover effects
  • Built with Tailwind CSS for easy customization

💻 Technologies Used

🛠️ Installation

  1. Clone the repository:
git clone https://github.com/kennie265/profile-card.git
  1. Open the project folder:
cd profile-card
  1. Open index.html in your browser to view the card.

⚙️ Customization

Profile Information

Edit the following sections in index.html:

  • Profile picture: Replace the placeholder image
  • Name and bio
  • Skills list
  • Interests
  • Social media links

Styling

The project uses Tailwind CSS utility classes. You can customize:

  • Colors
  • Spacing
  • Font sizes
  • Shadows
  • Border radius
  • Hover effects

Social Media Links

Update the social media links in the HTML:

📱 Responsive Design

The profile card is fully responsive and adapts to:

  • Desktop screens
  • Tablets
  • Mobile devices

🎨 Color Scheme

  • Background: Gray-100 (bg-gray-100)
  • Card Background: White (bg-white)
  • Text Colors:
    • Primary: Gray-800
    • Secondary: Gray-600
  • Social Icons:
    • X (Twitter): Black hover
    • Facebook: Blue-600 hover
    • Instagram: Pink-600 hover
    • TikTok: Black hover
    • LinkedIn: Blue-700 hover
    • GitHub: Gray-900 hover

🤝 Contributing

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

📞 Contact

Your Name - @kennie265

Project Link: https://github.com/kennie265/profile-card

🙏 Acknowledgments

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published