Giter Club home page Giter Club logo

yashi-singh-1 / social-links-profile Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 1.36 MB

This challenge is a simple yet stylish Social Link Sharing Profile, perfect for showcasing and sharing all your social media profiles. The design focuses on usability, ensuring a great user experience with interactive elements.

HTML 24.64% CSS 75.36%
css css3 front-end front-end-challenge front-end-development frontend frontend-challenge frontend-development frontendchallenge frontenddevelopment

social-links-profile's Introduction

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:

Desktop Preview

Below is the Mobile Preview for Social Links Profile:

Mobile Preview

Live Demo

You can also view it live: https://social-link-profile-by-yashi.netlify.app/

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.

social-links-profile's People

Contributors

yashi-singh-1 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.