Giter Club home page Giter Club logo

webdesign-switch's Introduction

🎉 Welcome to Web Button Designs! 🎊

An Open Source Website Where Developer's Can Get Pre-Designed Button's CSS Sheet .Just Can Copy the Design and Implement It

Project Repo
Project Website

Project Tech Stack

This project is built using the following technologies:

  • HTML: HTML stands for HyperText Markup Language. It's a markup language that's used to design web pages. HTML is made up of a series of elements that tell the browser how to display the content.

  • CSS: CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML). This language contains coding elements and is composed of these “cascading style sheets” which are equally called CSS files

  • JS: JavaScript, often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries.

  • Bootstrap: Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Button Adding Procedure

1.Create a CSS File

  • Create a File In design_button Sub-Directory
  • CSS File Should Be Your Github Username

2.Paste The Code In HTML Document in Row Div

<div class="col-12 col-md-3 main-row">
  <div class=" box-main">
      <a href="{CSS File Link}">  
          <button id="{github-username}">Button </button>
      </a>
      <br />
      <p1 class="designed-by">{Name Of The Designer}</p1>
      <div>
          <a href="{Github Account Link}">
              <img src="./assets/github.png" class="img-github">
          </a>
          <a href="{Linkdin Account Link}">
              <img src="./assets/linkedin.png" class="img-linkedin">
          </a>
      </div>
  </div>
</div>
  • Use Your Github Username As The Button Id And Css File Name
  • If You Have Contributed For Multiple Button Use userrname-1/userrname-2
  • Redirect To The CSS File Of The Button
  • Make Sure To Include Your Name/Github/Linkedin

How to make a Pull Request?

Local installation Guide Video # - Guide

1. Fork the Repository

  • Click on the "Fork" button in the top right corner of the repository page.
  • This will create a copy of the repository in your GitHub account.

2. Clone Your Fork

  • Open a terminal on your local machine.
  • Use the git clone command to clone your forked repository to your local machine.
    git clone https://github.com/your-username/repository.git
    cd repository
  1. Create a Branch
    • Create a new branch:
      git checkout -b branch-name

4. Make Changes

  • Open the Markdown file and make your changes.

5. Commit Changes

  • Save changes and commit:
    git add .
    git commit -m "Describe changes"

6. Push Changes

  • Push changes to your fork:
    git push origin branch-name

7. Create a Pull Request

  • Visit your fork on GitHub.
  • Switch to your branch.
  • Click "New Pull Request."

8. Compare Changes

  • Ensure the base repository and branch are correct.

9. Create Pull Request

  • Add a title and description.
  • Click "Create Pull Request."

10. Review and Merge

- Wait for review and merge by repository maintainers.

11. Sync Your Fork (Optional)

- Periodically sync your fork:
  ```bash
  git fetch upstream
  git checkout main
  git merge upstream/main
  git push origin main
  ```

Congratulations! You've made your first contribution! 🙌🏼

webdesign-switch's People

Contributors

anjalikumari123456 avatar ayesha-2101 avatar beprodeep4718 avatar broooooo avatar daksh1210jain avatar ishitamukherjee2004 avatar kom-senapati avatar krittika2004 avatar nandita27iitp avatar pranjal12-web avatar rahat2134 avatar ratnojitsaha avatar razaabbas62 avatar rimidutta avatar rupalimkrishnan avatar sanglap-halder avatar seema-bedara avatar singhcodes26 avatar sneha123-zudo avatar sohanrc avatar sruti-sahini avatar surajit0573 avatar suvayun avatar swarnade avatar tanushreeborase avatar thesri avatar this-is-yaash avatar vishal2005025 avatar yusra05 avatar zul132 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

webdesign-switch's Issues

Fix the margin and Display.....

image

In this page the button and information are so closely attached.
so I can fix this issue.....can you assign this to me when the coding phase of JWOC 24 will be started.

Working on responsiveness of the website

I would like to work on responsiveness of the website.

Screenshot 2024-01-16 160020

for this width , 4 buttons in one line looks clumpsy.So i would like to change that.

Screenshot 2024-01-16 160148

And i would also like to improve on this
Kindly assign me this issue under JWoC 24

Fix the alignments

Screenshot 2024-01-20 020140
Screenshot 2024-01-20 020231
so here i can fix those problems...
Can you assign this to me under JWOC 24......I want to contribute in this issue

Add a swipe right button

I want to add a button where color moves from left to right.

I can take this issue under JWOC.

Work on orientation of boxes

I would like to work on the orientation of the boxes as the github and LinkedIn logo on some boxes are outside the box. I would like to work on it under JWOC'24

Create 8 `Toggle-Button`

Is it okay to create Toggle Buttons instead of ordinary button.
If it's valid then assign me to work on this issue under JWOC

Change User Interface

in this website the project name should be in the bold letter and be align in the center . I can add a moving line which changes the color at a time below the heading to make UI looks better.
Please assign me this issue . I am in JWOC'24.

sizing of boxes

I would like to work on the orientation of the boxes as the github and LinkedIn logo on some boxes are outside the box. I would like to work on it under JWOC'24.

CREATE FEEDBACK PAGE

I can create an feedback page for website where users can send feedback to the designer using (HTML and CSS).

Improving the CSS of the page and adding more button styles

@swarnade I am a student of IIT Patna, and I am willing to contribute to this under JWOC. Can you assign this to me once the coding period starts?
The first issue that I want to resolve is that of overflow
Screenshot 2024-01-14 105854
Apart from this I want to improve the overall CSS of the page
The third is I want to add some more button styles that will be useful for the user

adding more neumorhic buttons

Allow me add new

My intention is to enhance the visual appeal and user experience by introducing unique button designs.

Granting me access will enable me to apply my expertise in web design and contribute to the aesthetic improvement of the site.

please assign me this issue under JWOC 2024

Emoji Powered Buttons

I'm super excited to submit this issue request for a feature that's sure to amplify the fun and expression on our buttons: Emoji-Powered Buttons! please assign me this issue @swarnade !!

Icons going out of bound

The LinkedIn and GitHub icons are available right out of the box.

photo

Therefore, this needs to be changed to improve the user-friendliness of the website.

Issue: Add Favicon to Enhance Website Branding

Improve the website's visual identity by adding a favicon. A favicon is a small icon displayed in the browser's address bar and tabs, contributing to a more professional and recognizable branding experience.
Screenshot 2024-01-15 at 12 48 25 AM
Tasks:

  1. Design or select a suitable favicon that aligns with the website's brand.
  2. Add the favicon image file to the project's assets.
  3. Update the HTML code to include the favicon and ensure proper rendering across browsers.
  4. Test the favicon's display on various devices and browsers for consistency.

New style button with hover effect

Screenshot 2024-01-20 015718
Screenshot 2024-01-20 015736

like this picture when we hover in the the 1st button then 2nd button appear.......

Can you assign this issue to me under JWOC 24.....I wand to add this button to your project

Emoji-Powered Buttons

I'm super excited to submit this issue request for a feature that's sure to amplify the fun and expression on our buttons: Emoji-Powered Buttons! please assign me this issue @swarnade !!

Add a new Liquid button

hi, I'd like to add a button which changes shape when clicked, please assign it to me under JWOC'24.

image

sizing of boxes

I would like to work on the orientation of the boxes as the github and LinkedIn logo on some boxes are outside the box. I would like to work on it under JWOC'24.

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.