Social Links Profile

Challenge Description

In this small project, I have built out a Social Link Sharing Profile.
You can even personalize it and use it to share all your social profiles!

Table of Contents

1. Challenge Description
2. Introduction
3. Purpose
4. Features
5. Pre-Requisites
6. File Structure
7. Tools
8. Preview
9. Contributing
10. Credits
11. Author

Introduction

In this challenge, I have built out the social links profile, and when the cursor points to the links, you will see hover and focus effects on it.

Purpose

This challenge aims to create a stylish social links profile for showcasing and sharing personal social media profiles, emphasizing interactive design elements with hover and focus states for enhanced user interaction.

Features

1. Interactive Elements: All interactive elements have hover and focus states to enhance user experience and accessibility.
2. Customizable: Easily personalize the profile to fit your own style and social media links.
3. Responsive Design: The layout is responsive, ensuring it looks great on any device.

Pre-Requisites

To work with this project, I have used:

1. HTML
2. CSS

If you are willing to accept this challenge, you should have a basic understanding of:

1. HTML
2. CSS
3. Optional: JavaScript for adding additional interactivity

Familiarity with version control using Git and GitHub is recommended for cloning and managing the repository.

File Structure

    Social-Links-Profile/
        |-- index.html                           # Main HTML File
        |-- styles.css                           # CSS File
        |-- images                               # Image Folder 
            |-- User Profile Image               # User Profile Image   

Tools

1. Text Editor: I have used Visual Studio Code for this challenge.

   You can choose any text editor or Integrated Development Environment (IDE) you prefer:

   • Visual Studio Code
   • Sublime Text
   • Atom
   • Notepad++
2. Version Control: I have used:
   • Git
   • GitHub

   You can also use:

   • GitLab
   • Or any other platform

Preview

Below is the Desktop Preview for Social Links Profile:

Below is the Mobile Preview for Social Links Profile:

You can also view it live on my CodePen: https://codepen.io/Yashi-the-lessful/pen/XWwQBOy

Contributing

Feel free to contribute to improve the Social Links Profile Challenge! Here's how you can contribute:

How to Contribute

1. Fork the Repository: Start by forking the repository to your GitHub account.
2. Clone the Repository: Clone the forked repository to your local machine using Git.

   git clone https://github.com/Yashi-Singh-1/Social-Links-Profile.git

3. Create a Branch: Create a new branch for your feature or bug fix.

   git checkout -b feature/your-feature-name

4. Make Changes: Implement your changes to the codebase. Ensure your code aligns with the challenge's coding style and guidelines.
5. Commit Changes: Commit your changes with a descriptive commit message.

   git commit -m "Add feature: description of your changes"

6. Push Changes: Push your changes to your forked repository.

   git push origin feature/your-feature-name

7. Submit a Pull Request: Finally, submit a pull request (PR) from your branch to the main branch of the main repository. Provide a clear description of your changes and why they should be merged.

Thank you for contributing to the improvement of the Social Links Profile challenge.

Credits

Credits go to Frontend Mentor for their innovative ideas.

Author

I (Yashi Singh) accepted and completed this challenge on 27/06/2024.