[FEATURE] Create Social Media Icon container using HTML/CSS for Front Panel

[Param302]

Create Social Media Icon container using HTML/CSS for Front Panel

Overview

Create the social media icon container(s) for front panel as provided in the below image:

Complete front panel looks like:

Requirements

• The container li should have a social media app in it using img tag.
• Use HTML/CSS for creating and designing the container.
• Must follow the Code Guidelines provided.
• Each container should be a list item (li) as a part of unordered list (ul) element.
• The unordered list (ul) element should be inside the edit section in HTML.

  <section id="home">
      <h2>Front Panel</h2>
  </section>

  • The ul can be a grid having 4 rows and columns.
• To test the code, setup the extension by following these steps.
• Use the Color Palette provided. You can add a light purple color as the background of container.
• Don't use favicons for arrow, rather download the relevant png arrow icon and store it in logos folder.
• Add sample 2-3 social media icons in assets/logos folder.
  • Make sure the icon must be of png format.
  • The icons should be transparent.
  • The icon must not be more than 256x256 pixels.
  • Icons should be named as social-media-name.png (e.g. twitter.png, github.png).

Additional

• Apply focus, hover effect.
• Add padding for better visual of icons.
• Replicate the containers to get visual appeal.
• Show Copied to Clipboard on bottom of front panel on icon click.

P.S: This is just the designing part, no need to add any functionality as of now.

If you have any suggestion or idea, you're welcome to share.

Let's design the SocialRepo's social media container 🙌

[Ayush031]

Would like to contribute

[Param302]

Would like to contribute

Hey @Ayush031 , I am assigning you the issue, go ahead!

If you need any help, feel free to reply.

Happy Contributing!

[Jay-ARORA-5572]

I would like to contribute in this issue. Please assign to me #GSSoC2024

[Param302]

I would like to contribute in this issue. Please assign to me #GSSoC2024

Hey @Jay-ARORA-5572 , Good to see that you want to contribute in this issue. But let me clarify you that this is not under GSSOC or any other program.

Let me know your confirmation and I will assign you this issue.

[Param302]

Would like to contribute

Hey @Ayush031 , What's the progress? Please share.

[Ayush031]

@Param302 Basic Structure is ready and will make a initial pull request by May15.

[Jay-ARORA-5572]

Ok if not from GSSoC then It's Ok I still want to contribute.

[Param302]

@Param302 Basic Structure is ready and will make a initial pull request by May15.

Hey, can you do it a little early?😅

Hey @Ayush031 , please update the status, as only front panel is left.

[Param302]

Ok if not from GSSoC then It's Ok I still want to contribute.

Hey @Jay-ARORA-5572 , It's great to see your enthusiasm to contribute, but this issue is already assigned. You can work on other issues. There are 7 issues listed as of now. Check all the issues here: https://github.com/Param302/SocialRepo/issues/

[Param302]

Hey @Ayush031 , Any updates?

[Ayush031]

@Param302 , regarding the images, would there be any issue if a add one more attribute in social-links.json, for the source of their logos. With this logos can be fetched easily

[Param302]

@Param302 , regarding the images, would there be any issue if a add one more attribute in social-links.json, for the source of their logos. With this logos can be fetched easily

I guess there is no need, as a function named getSocialLinks() is already there, which returns the object/dict, you can use it.

[Ayush031]

@Param302 kindly check the PR. Let me know if you have any update through text.