├── .github
├── Contributing.md
├── conduct.md
└── workflows
│ ├── pr_greeting.yml
│ └── static.yml
├── README.md
├── components.css
├── components.html
├── components.json
├── components
├── Login_page
│ ├── image
│ │ └── view.jpg
│ ├── index.html
│ └── style2.css
├── Signup_SignIn_page
│ ├── index.html
│ ├── script.js
│ └── style.css
├── contact_form
│ └── index.html
└── react
│ ├── .gitignore
│ ├── README.md
│ ├── build
│ ├── asset-manifest.json
│ ├── index.html
│ ├── manifest.json
│ └── static
│ │ ├── css
│ │ ├── main.693f2cad.css
│ │ └── main.693f2cad.css.map
│ │ └── js
│ │ ├── main.7087bd13.js
│ │ ├── main.7087bd13.js.LICENSE.txt
│ │ └── main.7087bd13.js.map
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── index.html
│ └── manifest.json
│ └── src
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ └── pages
│ ├── error
│ ├── Error.jsx
│ └── error.css
│ ├── layout
│ ├── Layout.jsx
│ └── layout.css
│ ├── pagination
│ ├── Pagination.jsx
│ └── pagination.css
│ └── slider
│ ├── Slider.jsx
│ └── slider.css
├── images
├── Signup_SignIn_page.png
├── contact.png
├── pagination.png
├── pexels-bich-tran-2481177.jpg
├── slider.png
├── view.jpg
└── wb.png
├── index.html
├── script.js
└── style.css
/.github/Contributing.md:
--------------------------------------------------------------------------------
1 | # **Contributing Guidelines** 📄
2 |
3 | This documentation contains a set of guidelines to help you during the contribution process.
4 | We are happy to welcome all the contributions from anyone willing to improve/add new scripts to this project.
5 | Thank you for helping out and remember, **no contribution is too small.**
6 |
7 | Please note we have a [code of conduct](CODE_OF_CONDUCT.md) please follow it in all your interactions with the project.
8 |
9 |
10 |
11 |
12 |
13 | ## **Need some help regarding the basics?🤔**
14 |
15 |
16 | You can refer to the following articles on basics of Git and Github and also contact the Project Mentors,
17 | in case you are stuck:
18 |
19 | - [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)
20 | - [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-an-issue-or-pull-request)
21 | - [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github)
22 | - [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6)
23 | - [Learn GitHub from Scratch](https://lab.github.com/githubtraining/introduction-to-github)
24 |
25 |
26 |
27 |
28 | ## **Pull Request Process 🚀**
29 |
30 | 1. Make sure to first review your code before creating a PR 😀
31 | 2. Make sure you have added the proper description for the functionality of the code
32 | 3. Make sure to add a README file in your repository .
33 | 4. Make sure to add an image in the ```images``` for website preview
34 | 5. Submit your PR by giving the necesarry information and hang tight while we review it 🚀
35 |
36 |
37 |
38 | # **Happy Developing 💗**
39 |
--------------------------------------------------------------------------------
/.github/conduct.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | .
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/.github/workflows/pr_greeting.yml:
--------------------------------------------------------------------------------
1 | name: Comment on PR Creation
2 | on:
3 | pull_request_target:
4 | types:
5 | - opened
6 |
7 | jobs:
8 | comment:
9 | runs-on: ubuntu-latest
10 |
11 | steps:
12 | - name: Comment on PR
13 | uses: actions/github-script@v4
14 | with:
15 | github-token: ${{ secrets.GITHUB_TOKEN }} # Use secrets.GITHUB_TOKEN
16 | script: |
17 | const { owner, repo, number } = context.issue;
18 | const commentAuthor = context.payload.sender.login;
19 | const commentBody = `Hello! 👋 Thank you @${commentAuthor} for your pull request! \n We appreciate your contribution to "Frontend-Treasure" for Hacktoberfest. Your effort helps make our project better. 🌟 \nOur team will review your PR soon. In the meantime, feel free to explore more ways to contribute or join our community discussions. Your involvement is important to us! \n Keep up the great work! 🚀`;
20 |
21 | await github.issues.createComment({ owner, repo, issue_number: number, body: commentBody });
22 | console.log(`Commented on the PR: ${commentBody}.`);
--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
1 | # Simple workflow for deploying static content to GitHub Pages
2 | name: Deploy static content to Pages
3 |
4 | on:
5 | # Runs on pushes targeting the default branch
6 | push:
7 | branches: ["main"]
8 |
9 | # Allows you to run this workflow manually from the Actions tab
10 | workflow_dispatch:
11 |
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 | contents: read
15 | pages: write
16 | id-token: write
17 |
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 | group: "pages"
22 | cancel-in-progress: false
23 |
24 | jobs:
25 | # Single deploy job since we're just deploying
26 | deploy:
27 | environment:
28 | name: github-pages
29 | url: ${{ steps.deployment.outputs.page_url }}
30 | runs-on: ubuntu-latest
31 | steps:
32 | - name: Checkout
33 | uses: actions/checkout@v3
34 | - name: Setup Pages
35 | uses: actions/configure-pages@v3
36 | - name: Upload artifact
37 | uses: actions/upload-pages-artifact@v2
38 | with:
39 | # Upload entire repository
40 | path: '.'
41 | - name: Deploy to GitHub Pages
42 | id: deployment
43 | uses: actions/deploy-pages@v2
44 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 📦 Frontend-Treasure 🌟
2 |
3 | # Introduction
4 | Welcome to Frontend Treasure , a goldmine of web development projects carefully crafted to enhance your frontend skills. Whether you're a budding coder or a seasoned frontend wizard, this open-source repository is your gateway to honing your skills and making valuable contributions to the world of web development. Remember, the path to mastery is paved with hands-on experience! Don't hesitate to dive right in and kickstart your journey to making impactful contributions to this project ✨.
5 |
6 | # Why Explore the Treasure?
7 | * 🌐 Dive into a world of web projects designed to challenge and inspire.
8 | * 🚀 Elevate your frontend skills through hands-on practice and collaboration.
9 | * ⭐ Join our community, star the repository, and share the love for open-source.
10 |
11 | Unlock the chest of knowledge, embark on your journey to mastery, and start making waves in the frontend development universe. Your contributions can shape the future of web design and development! 🌟✨
12 |
13 | # Why Open Source in Frontend Development?
14 |
15 | Open source in frontend development is a gateway to growth. Here's why:
16 | * **Collaborative Learning:** Join a diverse community of developers to learn from real-world projects and best practices.
17 | * **Hands-on Experience:** Gain practical skills by working on projects that mimic production environments.
18 | * **Networking:** Connect with like-minded individuals and mentors who share your passion for frontend development.
19 |
20 |
61 |
62 | #### Select an existing issue or create a new issue. Then follow the below steps:
63 |
64 | **1. Fork the repository:**
65 | - Go to the GitHub repository you want to contribute to.
66 | - Click the "Fork" button in the upper right corner to create a fork of the repository on your GitHub account.
67 |
68 |
69 | **2. Clone this repository:**
70 | - Open your terminal.
71 | - Navigate to the directory where you want to clone the repository.
72 | - Use the following command to clone your forked repository to your local machine:
73 | - `git clone "url of the repository"`
74 |
75 |
76 | **3. Create your new branch:**
77 | - Navigate into the cloned repository directory.
78 | - Use the following command to create a new branch for your changes
79 | - `git checkout -b ` or `git switch -c `
80 |
81 |
82 | **4. Make changes and commit:**
83 | - Make your desired changes to the files in your local repository.
84 | - New component should be added in this manner only : *`components/`* with having index.html file inside it. Do some required changes in **components.json** file and add Name , URL (*Same as folder name of the component*) , Author name and Image-URL . Your changes should be like this :
85 | ```
86 | {
87 | "name" : "Name of the component",
88 | "url" : "Component's folder name",
89 | "authorName" : "My Name",
90 | "imgUrl" : "./images/example.jpg"
91 | }
92 | ```
93 | - Use the following commands to stage and commit your changes:
94 | - `git add.`
95 | - `git commit -m "Your message"`
96 |
97 |
98 | **5. Push the branch to your fork on GitHub:**
99 | - Use the following command to push your new branch to your forked repository on GitHub (replace branch-name with your branch name):
100 | - `git push origin `
101 |
102 |
103 | **6. Create a PR:**
104 | - Visit the original repository (the one you forked from) on GitHub.
105 | - GitHub will typically detect the new branch you pushed and display a "Compare & pull request" button.
106 | - Click on it to create a pull request, review the changes, and submit the request to the original repository.
107 |
108 |
109 | - Submit your changes for review by creating a PR
110 | - And you are done !
111 | - We will review and merge your code to the main branch of this repository and you will notified for the same
112 | - If you having queries in basic flow of github, you can learn it from [CONTRIBUTING GUIDELINE](.github/Contributing.md)
113 |
114 |
115 |
Contributing Guidelines
116 |
117 |
118 |
119 |
120 |
121 | - Explore our [CONTRIBUTING GUIDELINE](.github/Contributing.md) to discover comprehensive information on how to contribute to Frontend-Treasure.
122 | - Familiarize yourself with the development process and the essential insights required for contributing to our project.
123 | - Should you have any questions, be sure to consult the provided resources within the guidelines.
124 |
125 |
126 |
127 |
128 |
129 |
130 |
Code of Conduct
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 | - Please be aware that this project operates under a [CODE OF CONDUCT](.github/conduct.md). By taking part in this project, you are expected to adhere to these guidelines and agree to conduct yourself accordingly
140 |
141 |
142 |
143 | ## License
144 | [](https://opensource.org/licenses/Apache-2.0)
145 |
146 | Terms and conditions for use, reproduction and distribution are under the [Apache-2.0 License](https://opensource.org/license/apache-2-0/).
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
Contributors
156 |
157 |
158 |
159 |
160 | - We extend our heartfelt gratitude to all our contributors for their invaluable contributions to our project.
161 | - Please consider showing your support by giving our repository a ⭐ star. Your appreciation means the world to us!
162 |
163 |
164 |
165 |
75 | Frontend Treasure: Simplify web development. Copy, paste, and create
76 | stunning websites effortlessly. Explore, customize, and bring your
77 | ideas to life.
78 |
Tech Stacks
42 | 
43 | 
44 | 
45 | 
46 |
47 | [](https://reactjs.org/)
48 | [](https://angular.io/)
49 | [](https://vuejs.org/)
50 | [](https://emberjs.com/)
51 | [](https://www.typescriptlang.org/)
52 |
53 | 
Let's start exploring 
Contributing Guidelines 
133 | 
Contributors 
71 | 