├── .gitattributes
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.yml
    │   └── feature_request.yml
    └── workflows
    │   └── jekyll-gh-pages.yml
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── css
    ├── faq.css
    ├── style.css
    ├── style_footer.css
    └── team_list_style.css
├── data
    ├── Contributors.json
    ├── FAQ.json
    ├── Maintainers.json
    └── RulesForAddingData.md
├── images
    ├── Api Programming logo.png
    ├── Extras
    │   └── favicon.png
    ├── FC.png
    ├── GPA.png
    ├── ML.png
    ├── icon
    │   ├── favicon125x125.png
    │   └── icon.png
    ├── illustrations
    │   ├── Get in touch.png
    │   └── goals.png
    └── logo
    │   ├── github-logo.svg
    │   ├── github.png
    │   └── linkedin.png
├── index.html
├── javascript
    ├── faq.js
    ├── index.js
    ├── menu.js
    └── team_list.js
└── team_list.html


/.gitattributes:
--------------------------------------------------------------------------------
1 | *.svg filter=lfs diff=lfs merge=lfs -text
2 | *.png filter=lfs diff=lfs merge=lfs -text
3 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.yml:
--------------------------------------------------------------------------------
 1 | name: 🐛 Bug  
 2 | description: Report a bug and help improve the project!
 3 | labels: ["bug"]
 4 | title: "[BUG 🐞] <description>"
 5 | body:
 6 |   - type: textarea
 7 |     id: description
 8 |     attributes:
 9 |       label: Description
10 |       description: A brief description of the bug.
11 |       placeholder: Enter your description
12 |     validations:
13 |       required: true
14 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.yml:
--------------------------------------------------------------------------------
 1 | 
 2 | name: 💡 Feature Request
 3 | description: Have a new idea suggest it to us!
 4 | labels: ["enhancement"]
 5 | title: "[FEATURE 💡] <description>"
 6 | body:
 7 |   - type: textarea
 8 |     id: description
 9 |     attributes:
10 |       label: Description
11 |       description: A brief description of the Feature you want. 
12 |       placeholder: Enter your description
13 |     validations:
14 |       required: true
15 | 


--------------------------------------------------------------------------------
/.github/workflows/jekyll-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Jekyll site to GitHub Pages
 2 | name: Deploy Jekyll with GitHub Pages dependencies preinstalled
 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 |   # Build job
26 |   build:
27 |     runs-on: ubuntu-latest
28 |     steps:
29 |       - name: Checkout
30 |         uses: actions/checkout@v3
31 |       - name: Setup Pages
32 |         uses: actions/configure-pages@v3
33 |       - name: Build with Jekyll
34 |         uses: actions/jekyll-build-pages@v1
35 |         with:
36 |           source: ./
37 |           destination: ./_site
38 |       - name: Upload artifact
39 |         uses: actions/upload-pages-artifact@v2
40 | 
41 |   # Deployment job
42 |   deploy:
43 |     environment:
44 |       name: github-pages
45 |       url: ${{ steps.deployment.outputs.page_url }}
46 |     runs-on: ubuntu-latest
47 |     needs: build
48 |     steps:
49 |       - name: Deploy to GitHub Pages
50 |         id: deployment
51 |         uses: actions/deploy-pages@v2
52 | 


--------------------------------------------------------------------------------
/CODE_OF_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 in
 63 | `Discussion Section`.
 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.


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## How to contribute 
 2 | - Fork the repo 
 3 | ## Follow the steps below to setup Open Code Era in your local system.
 4 | 
 5 | ## Clone Repo or Download Files
 6 | 
 7 | To begin, your first step is to clone the GitHub repository at [OpenCodeEra/OpenCodeEra]() or alternatively, you have the option to download the files.
 8 | 
 9 | If you don't know how to clone or where to download the code the watch this video.
10 | 
11 | - [How to Clone a GitHub Repo](https://www.youtube.com/watch?v=CKcqniGu3tA)
12 | - [Blog on the same topic, official GitHub Docs](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
13 | 
14 | Or you can run this code in your PC/Laptop terminal
15 | 
16 | ```
17 | git clone https://github.com/OpenCodeEra/OpenCodeEra.git
18 | ```
19 | 
20 | ## Finding a issue
21 | - look for a issue to solve ( you can also submit a feature request or bug using issue section and then solve it )
22 | - open a PR (Pull Request) 
23 | 
24 | ### Tips to find your first issue to solve  
25 | - look at the list of `Good First Issues` here - https://github.com/OpenCodeEra/OpenCodeEra/contribute
26 | - To check status of all tasks - https://github.com/orgs/OpenCodeEra/projects/1
27 | 
28 | 
29 | ### Tasks of a maintainer  
30 | - Opening well explained issues with appropriate tags 
31 | - Reviewing PR's and making sure you don't push any breaking changes into the `main` branch. 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Open Code Era
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # OpenCODE-Homepage
 2 | This repository contains the files of the homepage at https://opencodeera.pages.dev/. It uses HTML, CSS, Javascript and a couple of google fonts. 
 3 | ![image](https://github.com/OpenCodeEra/OpenCodeEra/assets/100958893/55dcc586-3333-4fae-8b3a-dc9f99595cee)
 4 | ## Stats 
 5 | 
 6 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 7 | [![GitHub forks](https://img.shields.io/github/forks/OpenCodeEra/OpenCodeEra?style=social)](https://github.com/OpenCodeEra/OpenCodeEra/network/members)
 8 | [![GitHub stars](https://img.shields.io/github/stars/OpenCodeEra/OpenCodeEra?style=social)](https://github.com/OpenCodeEra/OpenCodeEra/stargazers)
 9 | [![GitHub issues](https://img.shields.io/github/issues/OpenCodeEra/OpenCodeEra.svg)](https://github.com/OpenCodeEra/OpenCodeEra/issues/)
10 | [![GitHub pull-requests](https://img.shields.io/github/issues-pr/OpenCodeEra/OpenCodeEra.svg)](https://github.com/OpenCodeEra/OpenCodeEra/pull/)
11 | [![GitHub pull-requests](https://img.shields.io/github/issues-pr-closed/OpenCodeEra/OpenCodeEra.svg)](https://github.com/OpenCodeEra/OpenCodeEra/pulls?q=is%3Apr+is%3Aclosed)
12 | [![GitHub Contributors](https://img.shields.io/github/contributors/OpenCodeEra/OpenCodeEra.svg)](https://github.com/OpenCodeEra/OpenCodeEra/graphs/contributors)
13 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
14 | ### You can contribute to this project under Hacktoberfest 2023 ✨
15 | 
16 | ![Hacktoberfest Banner](https://i.ibb.co/RTk279G/hf10-banner-sponsors-1032x600.png)
17 | 
18 | <h2 align='center'> Project maintainers </h2>
19 | <table align='center'>
20 | <tr>
21 |     <td align="center">
22 |         <a href="https://github.com/AdarshRawat1">
23 |             <img src="https://avatars.githubusercontent.com/u/100958893?v=4" width="100;" alt="Adarsh Rawat"/>
24 |             <br />
25 |             <sub><b></b></sub>
26 |         </a>
27 |     </td>
28 |   </tr>
29 | </table>
30 | 
31 | ## How to contribute? 🧐
32 | 
33 | We recommend you to go through the [CONTRIBUTING.md](/CONTRIBUTING.md) file, where we have guided you step by step to make your contribution.
34 | 
35 | Once the pull request is merged, it will start counting toward your Hacktoberfest progress.
36 | 
37 | ## Thanks to all contributors ❤
38 | 
39 |  <a href = "https://github.com/OpenCodeEra/OpenCodeEra/graphs/contributors">
40 |    <img src = "https://contrib.rocks/image?repo=OpenCodeEra/OpenCodeEra"/>
41 |  </a>
42 | 


--------------------------------------------------------------------------------
/css/faq.css:
--------------------------------------------------------------------------------
 1 | #faq{
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 | }
 7 | #faq_box{
 8 |     width: 70vw;
 9 | }
10 | #faq h2{
11 |     margin-bottom: 8px;
12 | }
13 | #questions{
14 |     display: flex;
15 |     justify-content: space-between;
16 |     align-items: center;
17 | }
18 | /* #questions p{
19 |     color: white;
20 | } */
21 | .close{
22 |     display: none;
23 |     background-color: rgb(24, 25, 26);
24 |     cursor: pointer;
25 | }
26 | .open{
27 |     cursor: pointer;
28 | }
29 | .answer{
30 |     display: none;
31 |     color: white;
32 |     font-size: 1.5vw;
33 | }
34 | .content{
35 |     border-bottom: 2px solid gray;
36 |     margin-bottom: 1vw;
37 | }
38 | #icon{
39 |     display: flex;
40 |     align-items: center;
41 |     justify-content: center;
42 | }


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   display: flex;
  9 |   flex-direction: column;
 10 |   justify-content: space-between;
 11 | }
 12 | 
 13 | img,
 14 | .disable-selection,
 15 | br {
 16 |   user-select: none;
 17 | }
 18 | 
 19 | html {
 20 |   scroll-behavior: smooth;
 21 |   overflow-x: hidden;
 22 |   scroll-snap-type: y proximity;
 23 | }
 24 | 
 25 | body {
 26 |   background-color: rgb(24, 25, 26);
 27 |   color: rgb(16, 138, 228);
 28 |   font-family: "Poppins", sans-serif;
 29 | }
 30 | 
 31 | h2::selection {
 32 |   color: rgb(255, 255, 255);
 33 |   background: rgba(0, 136, 255, 0.25);
 34 | }
 35 | 
 36 | p::selection {
 37 |   color: rgb(255, 255, 255);
 38 |   background: rgba(0, 136, 255, 0.2);
 39 | }
 40 | 
 41 | p {
 42 |   font-size: 1.6rem;
 43 | }
 44 | 
 45 | h2 {
 46 |   font-size: 2rem;
 47 |   color: rgb(255, 255, 255);
 48 | }
 49 | 
 50 | body::-webkit-scrollbar {
 51 |   width: 0.25rem;
 52 | }
 53 | 
 54 | body::-webkit-scrollbar-track {
 55 |   background: #18191a;
 56 | }
 57 | 
 58 | body::-webkit-scrollbar-thumb {
 59 |   background: #329cee17;
 60 | }
 61 | 
 62 | .header-push-down {
 63 |   height: 0%;
 64 | }
 65 | 
 66 | header {
 67 |   position: sticky;
 68 |   top: 0;
 69 |   width: 100%;
 70 |   z-index: 1;
 71 | }
 72 | 
 73 | main hr {
 74 |   border: 0;
 75 |   background-color: aliceblue;
 76 |   height: 0.8px;
 77 |   margin: 28px 80px;
 78 | }
 79 | 
 80 | nav {
 81 |   display: flex;
 82 |   justify-content: space-between;
 83 |   align-items: center;
 84 |   height: 70px;
 85 |   background-color: #18191a;
 86 |   padding: 0 40px;
 87 | 
 88 |   position: fixed;
 89 |   width: 100%;
 90 |   z-index: 9999;
 91 | }
 92 | 
 93 | .close{
 94 |   background-color:black;
 95 |   color: #000;
 96 | }
 97 | 
 98 | nav ul {
 99 |   display: flex;
100 |   justify-content: center;
101 |   list-style: none;
102 | }
103 | 
104 | nav ul li {
105 |   list-style: none;
106 |   margin: 0 30px;
107 | }
108 | 
109 | nav ul li[href="services.html"] {
110 |   margin-right: 80px;
111 | }
112 | 
113 | nav ul li a {
114 |   text-decoration: none;
115 |   color: rgba(255, 255, 255, 0.829);
116 | }
117 | 
118 | nav ul li a:hover {
119 |   text-decoration: underline;
120 |   color: rgb(16, 138, 228);
121 |   transition: 0.4s;
122 | }
123 | 
124 | .menubar {
125 |   cursor: pointer;
126 |   display: none;
127 | }
128 | 
129 | .left {
130 |   display: flex;
131 |   justify-content: space-evenly;
132 |   align-items: center;
133 | }
134 | 
135 | .left img {
136 |   height: 80px;
137 | }
138 | 
139 | .left .blue {
140 |   font-size: 2rem;
141 |   font-weight: 100;
142 |   margin: 0 5px;
143 |   color: rgb(17, 135, 223);
144 | }
145 | 
146 | .left .white {
147 |   font-size: 2rem;
148 |   font-weight: 100;
149 |   margin: 0 5px;
150 |   color: aliceblue;
151 | }
152 | 
153 | .left a {
154 |   text-decoration: none;
155 | }
156 | 
157 | .firstsection {
158 |   display: flex;
159 |   padding: 1.5vh 0;
160 |   justify-content: space-around;
161 |   align-items: center;
162 |   height: 90vh;
163 |   scroll-snap-align: start;
164 | }
165 | 
166 | .firstsection .leftSection {
167 |   display: flex;
168 |   align-items: center;
169 |   width: 57%;
170 |   margin: 0 50px;
171 |   color: floralwhite;
172 |   font-size: 2.5rem;
173 |   pointer-events: none;
174 | }
175 | 
176 | .leftSection .blue {
177 |   font-size: 3rem;
178 |   font-weight: 100;
179 |   color: rgb(101 171 224);
180 | }
181 | 
182 | .leftSection .focus-gradient {
183 |   color: rgb(131 191 236);
184 |   font-weight: bold;
185 |   background: linear-gradient(to left, rgb(17, 135, 223), floralwhite);
186 |   background-clip: text;
187 |   -webkit-background-clip: text;
188 |   -webkit-text-fill-color: transparent;
189 | }
190 | 
191 | #element {
192 |   font-weight: bold;
193 |   background: linear-gradient(to left, rgb(17, 135, 223), floralwhite);
194 |   background-clip: text;
195 |   -webkit-background-clip: text;
196 |   -webkit-text-fill-color: transparent;
197 | }
198 | 
199 | .leftSection .white {
200 |   font-size: 2.5rem;
201 | }
202 | 
203 | .rightSection img {
204 |   width: 90%;
205 |   margin: 0 0 0 50px;
206 | }
207 | 
208 | /* Second Section */
209 | 
210 | .secondSection {
211 |   display: flex;
212 |   align-items: center;
213 |   justify-content: center;
214 |   width: 100vw;
215 |   height: 85vh;
216 |   pointer-events: none;
217 |   padding-top: 20px;
218 |   scroll-snap-align: start;
219 | }
220 | 
221 | .second-section-container {
222 |   height: 70%;
223 |   width: 80%;
224 |   display: flex;
225 | }
226 | 
227 | .second-section-container .leftSection {
228 |   display: flex;
229 |   align-items: center;
230 |   justify-content: right;
231 |   width: 45%;
232 |   pointer-events: none;
233 | }
234 | 
235 | .second-section-container .rightSection {
236 |   display: flex;
237 |   flex-direction: column;
238 |   justify-content: center;
239 |   width: 35%;
240 |   flex-grow: 1;
241 | }
242 | 
243 | .second-section-container img {
244 |   margin-right: 3%;
245 |   height: 80%;
246 | }
247 | 
248 | .second-section-container h1 {
249 |   font-size: 3rem;
250 |   font-weight: bold;
251 |   color: aliceblue;
252 | }
253 | 
254 | .text-gradient-blue-white {
255 |   background: linear-gradient(to left, rgb(96 186 253), floralwhite);
256 |   background-clip: text;
257 |   -webkit-background-clip: text;
258 |   -webkit-text-fill-color: transparent;
259 |   font-weight: 500;
260 | }
261 | 
262 | /* project section styles */
263 | #projects{
264 |    scroll-snap-align: start;
265 |    padding-top: 100px;
266 | }
267 | #projects>h2 {
268 |   text-align: center;
269 |   margin-bottom: 10px;
270 |   font-weight: bold;
271 | }
272 | 
273 | #projects p {
274 |   font-size: 1rem;
275 |   color: white;
276 | }
277 | 
278 | .project-container {
279 |   max-width: 1170px;
280 |   margin: auto;
281 |   display: flex;
282 |   flex-wrap: wrap;
283 |   justify-content: space-around;
284 | }
285 | 
286 | .cardP {
287 |   flex-basis: 30%;
288 |   text-align: center;
289 |   margin: 12px 10px;
290 |   border: 2px solid white;
291 |   border-radius: 8px;
292 |   padding: 8px;
293 |   box-shadow: 5px 5px 5px rgb(17, 135, 223);
294 |   color: white;
295 | }
296 | 
297 | .card-content {
298 |   font-size: 14px;
299 |   padding: 10px;
300 | }
301 | 
302 | .cardP img {
303 |   height: 80px;
304 | }
305 | 
306 | .project-tags::before {
307 |   content: "Tags: ";
308 | }
309 | 
310 | @media only screen and (min-width: 200px) and (max-width: 767px) {
311 | 
312 |   .project-container {
313 |     width: 100%;
314 |     flex-direction: column;
315 |   }
316 | }
317 | 
318 | /* Style for the Contact Section */
319 | .contactSection {
320 |   box-sizing: border-box;
321 |   width: 100vw;
322 |   padding: 130px 10vw;
323 |   text-align: center;
324 |   display: flex;
325 |   justify-content: center;
326 |   align-items: center;
327 |   gap: 8%;
328 |   transition: 0.5s;
329 |   scroll-snap-align: start;
330 | }
331 | 
332 | .contactSection div p {
333 |   color: rgb(144, 198, 239);
334 |   margin: 15px 0 25px;
335 | }
336 | 
337 | .leftContact {
338 |   width: 60%;
339 | }
340 | 
341 | .rightContact {
342 |   width: 40%;
343 | }
344 | 
345 | .leftContact img {
346 |   width: 70%;
347 |   object-fit: contain;
348 | }
349 | 
350 | /* Style for the form */
351 | .rightContact {
352 |   width: 400px;
353 |   background: linear-gradient(#212121, #212121) padding-box,
354 |     linear-gradient(145deg, transparent 35%, #334bff, #40c9ff) border-box;
355 |   border: 3px solid transparent;
356 |   padding: 12px 24px;
357 |   font-size: 14px;
358 |   font-family: inherit;
359 |   color: white;
360 |   display: flex;
361 |   flex-direction: column;
362 |   gap: 20px;
363 |   box-sizing: border-box;
364 |   border-radius: 16px;
365 | }
366 | 
367 | input[type="text"],
368 | input[type="email"],
369 | form textarea {
370 |   margin: 5px 5px;
371 |   box-sizing: border-box;
372 |   width: 100%;
373 |   padding: 12px 16px;
374 |   border-radius: 8px;
375 |   color: #fff;
376 |   font-family: inherit;
377 |   background-color: transparent;
378 |   border: 1px solid #414141;
379 |   font-size: 20px;
380 | }
381 | 
382 | input:focus,
383 | form textarea:focus {
384 |   outline: none;
385 |   border-color: #1c99ff;
386 | }
387 | 
388 | input::selection,
389 | form textarea::selection {
390 |   color: rgb(255, 255, 255);
391 |   background: rgb(12, 134, 153);
392 | }
393 | 
394 | form textarea {
395 |   resize: none;
396 | }
397 | 
398 | 
399 | form button,
400 | #close {
401 | 
402 |   background-color: #007bff;
403 |   color: #fff;
404 |   padding: 10px 20px;
405 |   border: none;
406 |   border-radius: 12px;
407 |   font-size: 20px;
408 |   font-weight: bolder;
409 |   cursor: pointer;
410 |   user-select: none;
411 |   transition: background-color 0.15s;
412 | }
413 | 
414 | form button[type="submit"]:hover,
415 | #close:hover {
416 |   background-color: #0056b3;
417 | }
418 | 
419 | 
420 | #popup {
421 |   position: fixed;
422 |   top: 50%;
423 |   left: 50%;
424 |   transform: translate(-50%, -50%);
425 |   background-color: #242526;
426 |   padding: 40px;
427 |   box-shadow: 2px 2px 15px 0px #243f59;
428 |   color: white;
429 |   visibility: hidden;
430 |   opacity: 0;
431 |   transition: 0.5s;
432 |   border-radius: 2%;
433 |   z-index: 2;
434 | }
435 | 
436 | #popup p {
437 |   font-size: 1rem;
438 | }
439 | 
440 | #close {
441 |   width: 100%;
442 |   margin: 0 auto;
443 | }
444 | 
445 | .blurred {
446 |   filter: blur(2px);
447 |   pointer-events: none;
448 |   user-select: none;
449 |   overflow: hidden;
450 |   transition: 0.5s;
451 | }
452 | 
453 | #popup.active {
454 |   visibility: visible;
455 |   opacity: 1;
456 |   transition: 0.5s;
457 | }
458 | 
459 | /* Responsive styles */
460 | @media (max-width: 768px) {
461 |   .contactContainer {
462 |     display: block;
463 |     padding: 20px;
464 |   }
465 | 
466 |   form {
467 |     padding: 0 10px;
468 |   }
469 | }
470 | 
471 | /* .footer {
472 |     flex-wrap: wrap;
473 |   }
474 | 
475 |   .footer-fourth {
476 |     padding-top: 20px;
477 |   }
478 | }
479 | 
480 | footer {
481 |   background-color: #242526;
482 |   height: 180px;
483 | }
484 | 
485 | .footer {
486 |   display: flex;
487 |   padding: 20px 50px;
488 |   justify-content: space-evenly;
489 | }
490 | 
491 | .footer ul {
492 |   text-decoration: none;
493 |   list-style: none;
494 | }
495 | 
496 | footer .footer-rights {
497 |   text-align: center;
498 |   color: grey;
499 | 
500 | }
501 | 
502 | .footer-fourth {
503 |   display: flex;
504 | }
505 | 
506 | .footer-fourth a {
507 |   display: flex;
508 |   align-items: center;
509 | }
510 | 
511 | .footer-fourth a:hover img {
512 |   opacity: 0.7;
513 |   transition: 0.5s;
514 | }
515 | 
516 | .footer-fourth a img {
517 |   width: 40px;
518 | } */
519 | footer {
520 |   background-color: #242526;
521 |   padding: 2% 3% 3%;
522 |   margin: 0;
523 |   width: 100%;
524 | }
525 | 
526 | .row {
527 |   width: 100%;
528 | }
529 | 
530 | #footer-logo {
531 |   width: 22%;
532 | }
533 | 
534 | #footer-name {
535 |   font-size: 210%;
536 |   font-weight: 600;
537 |   letter-spacing: 1px;
538 |   margin-bottom: 0;
539 | }
540 | 
541 | #footer-name>span {
542 |   color: #f0f0f0;
543 | }
544 | 
545 | #mail-footer {
546 |   color: #757575;
547 |   text-decoration: none;
548 |   font-size: 17px;
549 | }
550 | 
551 | .copy-right {
552 |   font-size: 12px;
553 |   color: #757575;
554 |   text-align: center;
555 |   margin-top: 5%;
556 | }
557 | 
558 | .touch {
559 |   color: #f0f0f0;
560 |   margin-top: 16px;
561 |   font-weight: 600;
562 | }
563 | 
564 | #socials {
565 |   width: 100%;
566 |   display: flex;
567 |   flex-direction: row;
568 |   align-items: flex-start;
569 |   justify-content: flex-start;
570 |   margin-bottom: 5%;
571 | }
572 | 
573 | #socials a {
574 |   font-size: 32px;
575 |   margin-right: 10%;
576 |   color: #000;
577 |   background-color: #f0f0f0;
578 |   padding: 4px 14px;
579 |   border-radius: 100%;
580 | }
581 | 
582 | .contribute-head {
583 |   color: #979494;
584 |   font-weight: bold;
585 |   margin-bottom: 0;
586 | }
587 | 
588 | #contribute-tag {
589 |   font-size: 15px;
590 |   color: #757575;
591 |   margin-top: 2%;
592 |   /* margin-bottom: 0; */
593 | }
594 | 
595 | #contribute-link {
596 |   color: #898787;
597 |   font-size: 32px;
598 |   font-weight: 600;
599 |   text-decoration: none;
600 | }
601 | 
602 | #nav-footer {
603 |   display: flex;
604 |   flex-direction: column;
605 |   align-items: flex-start;
606 |   justify-content: space-around;
607 | }
608 | 
609 | .ql-head {
610 |   color: #f0f0f0;
611 |   margin-top: 16px;
612 |   font-weight: 600;
613 |   margin-bottom: 0;
614 | }
615 | 
616 | #nav-footer a {
617 |   color: #979494;
618 |   font-weight: 600;
619 |   text-decoration: none;
620 |   font-size: 20px;
621 | }
622 | 
623 | #nav-footer a:hover,
624 | #contribute-link:hover,
625 | #socials a:hover {
626 |   color: #007bff;
627 | }
628 | 
629 | @media only screen and (max-width: 750px) {
630 |   #footer .footer-div {
631 |     margin-bottom: 24px;
632 |   }
633 | }
634 | article {
635 |   --img-scale: 1.001;
636 |   --title-color: #fff;
637 |   --link-icon-translate: -20px;
638 |   --link-icon-opacity: 0;
639 |   position: relative;
640 |   border-radius: 16px;
641 |   box-shadow: 5px 5px 5px rgb(17, 135, 223);
642 |   background: rgb(24, 25, 26);
643 |   transform-origin: center;
644 |   transition: all 0.4s ease-in-out;
645 |   overflow: hidden;
646 | }
647 | 
648 | article a::after {
649 |   position: absolute;
650 |   inset-block: 0;
651 |   inset-inline: 0;
652 |   cursor: pointer;
653 |   content: "";
654 | }
655 | 
656 | /* basic article elements styling */
657 | article h2 {
658 |   margin: 0 0 18px 0;
659 |   font-size: 1.9rem;
660 |   letter-spacing: 0.06em;
661 |   color: var(--title-color);
662 |   transition: color 0.3s ease-out;
663 | }
664 | 
665 | figure {
666 |   margin: 0;
667 |   padding: 0;
668 |   aspect-ratio: 16 / 9;
669 |   overflow: hidden;
670 | }
671 | 
672 | article img {
673 |   max-width: 100%;
674 |   transform-origin: center;
675 |   transform: scale(var(--img-scale));
676 |   transition: transform 0.4s ease-in-out;
677 | }
678 | 
679 | .article-body {
680 |   padding: 24px;
681 |   position: relative;
682 |   min-height: 250px;
683 | }
684 | 
685 | 
686 | article a {
687 |   display: inline-flex;
688 |   align-items: center;
689 |   text-decoration: none;
690 |   color: #1187df;
691 |   position: absolute;
692 |   bottom: 20px;
693 | }
694 | 
695 | article a:focus {
696 |   outline: 1px dotted #1187df;
697 | }
698 | 
699 | article a .icon,
700 | .view_more__projects .icon {
701 |   min-width: 24px;
702 |   width: 24px;
703 |   height: 24px;
704 |   margin-left: 5px;
705 |   transform: translateX(var(--link-icon-translate));
706 |   opacity: var(--link-icon-opacity);
707 |   transition: all 0.3s;
708 | }
709 | 
710 | /* using the has() relational pseudo selector to update our custom properties */
711 | article:has(:hover, :focus) {
712 |   --img-scale: 1.1;
713 |   --title-color: rgb(17, 135, 223);
714 |   --link-icon-translate: 0;
715 |   --link-icon-opacity: 1;
716 |   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
717 | }
718 | 
719 | *,
720 | *::before,
721 | *::after {
722 |   box-sizing: border-box;
723 | }
724 | 
725 | .projects_body {
726 |   margin: 0;
727 |   padding: 48px 0;
728 |   font-size: 1.2rem;
729 |   line-height: 1.6rem;
730 | }
731 | 
732 | .articles {
733 |   display: grid;
734 |   max-width: 1200px;
735 |   margin-inline: auto;
736 |   padding-inline: 24px;
737 |   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
738 |   gap: 24px;
739 | }
740 | 
741 | @media screen and (max-width: 960px) {
742 |   article {
743 |     container: card/inline-size;
744 |   }
745 |   .article-body p {
746 |     display: none;
747 |   }
748 | }
749 | 
750 | @container card (min-width: 380px) {
751 |   .article-wrapper {
752 |     display: grid;
753 |     grid-template-columns: 100px 1fr;
754 |     gap: 16px;
755 |   }
756 | 
757 |   .article-body {
758 |     padding-left: 0;
759 |   }
760 | 
761 |   figure {
762 |     width: 100%;
763 |     height: 100%;
764 |     overflow: hidden;
765 |   }
766 | 
767 |   figure img {
768 |     height: 100%;
769 |     aspect-ratio: 1;
770 |     object-fit: cover;
771 |   }
772 | }
773 | 
774 | .sr-only:not(:focus):not(:active) {
775 |   clip: rect(0 0 0 0);
776 |   clip-path: inset(50%);
777 |   height: 1px;
778 |   overflow: hidden;
779 |   position: absolute;
780 |   white-space: nowrap;
781 |   width: 1px;
782 | }
783 | 
784 | .view_more__projects {
785 |   display: block;
786 |   max-width: 200px;
787 |   margin: 0 auto;
788 | }
789 | 
790 | .view_more__projects>a {
791 |   text-align: center;
792 |   /* display: block; */
793 |   text-decoration: none;
794 |   font-weight: bold;
795 | }
796 | .menubar{
797 |   display: none;
798 | }
799 | @media screen and (max-width:430px) {
800 |   .menubar{
801 |     display: block;
802 |     cursor: pointer;
803 |     padding-left: space-evenly;
804 |   }
805 | 
806 | 
807 |   .navul{
808 |     position: absolute;
809 |     top: 100px;
810 |     right: 10px;
811 |     display: none;
812 |   }
813 |   nav ul {
814 |     background-color: black;
815 |     display: flex;
816 |     flex-direction: column;
817 |     justify-content: space-evenly;
818 |     width: 125px;
819 |     border: 1px solid;
820 |     border-radius: 10px;
821 |     box-shadow: 0px 0px 4px 2px;
822 |   }
823 |   nav ul li {
824 |     font-size: 1.15rem;
825 |     list-style: none;
826 |     margin: 12px -26px;
827 |   }
828 | }
829 | 
830 | @media screen and (min-width:431px) {
831 |   #nav{
832 |     display: flex !important;
833 |   }
834 |   .navul{
835 |     display: flex !important;
836 |   }
837 | }
838 | 
839 | @media only screen and (max-width:1032px) {
840 | 
841 |   .header-push-down {
842 |       height: 0vh;
843 |   }
844 |   .left {
845 |       display: flex;
846 |       justify-content: space-evenly;
847 |       align-items: center;
848 |   }
849 |   .left img {
850 |       height: 40px;
851 |       margin-left: -20px;
852 |   }
853 |   .left a {
854 |       display: flex;
855 |       text-decoration: none;
856 |   }
857 |   .left .blue {
858 |       font-size: 1.5rem;
859 |       font-weight: 100;
860 |       margin: 0 5px;
861 |       color: rgb(17, 135, 223);
862 |   }
863 |   .left .white {
864 |       font-size: 1.5rem;
865 |       font-weight: 100;
866 |       margin: 0 5px;
867 |       color: aliceblue;
868 |   }
869 |   .left .blue {
870 |       font-size: 1.5rem;
871 |       font-weight: 100;
872 |       margin: 0 5px;
873 |       color: rgb(17, 135, 223);
874 |   }
875 | 
876 | 
877 |   .firstsection {
878 |       display: flex;
879 |       flex-direction: column;
880 |       padding: 1.5vh 0;
881 |       justify-content: space-around;
882 |       align-items: center;
883 |       height: 75vh;
884 |   }
885 |   .firstsection .leftSection {
886 |       display: flex;
887 |       align-items: center;
888 |       width: 57%;
889 |       margin: 0 50px;
890 |       color: floralwhite;
891 |       font-size: 2.5rem;
892 |       pointer-events: none;
893 |   }
894 |   .leftSection .white {
895 |       font-size: 1.5rem;
896 |       margin-left:-25px;
897 |   }
898 |   .leftSection .blue {
899 |       font-size: 2.4rem;
900 |       font-weight: 100;
901 |       color: rgb(101 171 224);
902 |   }
903 | 
904 |   .rightSection{
905 |     white-space: normal;
906 |    overflow: hidden;
907 |   }
908 | 
909 |   .rightSection img {
910 |     width: 90%;
911 |     margin: 0 0 0 9px;
912 |   }
913 | 
914 |   .contactSection {
915 |       box-sizing: border-box;
916 |       width: 100vw;
917 |       padding: 130px 10vw;
918 |       text-align: center;
919 |       display: flex;
920 |       justify-content: center;
921 |       align-items: center;
922 |       gap: 8%;
923 |       transition: 0.5s;
924 |       flex-direction: column;
925 |   }
926 |   .rightContact {
927 |       margin-top: 15px;
928 |       margin-left: 22px;
929 |       width: 345px;
930 |       background: linear-gradient(#212121, #212121) padding-box, linear-gradient(145deg, transparent 35%, #334bff, #40c9ff) border-box;
931 |       border: 3px solid transparent;
932 |       padding: 12px 24px;
933 |       font-size: 14px;
934 |       font-family: inherit;
935 |       color: white;
936 |       display: flex;
937 |       flex-direction: column;
938 |       gap: 16px;
939 |       box-sizing: border-box;
940 |       border-radius: 19px;
941 |   }
942 |   footer {
943 |       margin-top:10px;
944 |       background-color: #242526;
945 |       padding: 2% 5% 4%;
946 |       margin: 0;
947 |       width: 106%;
948 |   }
949 |   #faq h2 {
950 |     margin-bottom: 8px;
951 |     margin-left: 54px;
952 |   }
953 | 
954 | 
955 | 
956 | 
957 | 
958 | }
959 | 


--------------------------------------------------------------------------------
/css/style_footer.css:
--------------------------------------------------------------------------------
 1 | footer {
 2 |   border-top:1px solid azure;
 3 |   background-color: #242526;
 4 |   height: 180px;
 5 | }
 6 | 
 7 | .footer {
 8 |   display: flex;
 9 |   padding: 20px 50px;
10 |   justify-content: space-evenly;
11 |   align-items: center;
12 | }
13 | 
14 | .footer img {
15 |   width: 2vw;
16 | }
17 | 
18 | .footer ul {
19 |   text-decoration: none;
20 |   list-style: none;
21 | }
22 | 
23 | footer .footer-rights {
24 |   text-align: center;
25 |   color: grey;
26 | }
27 | 
28 | .footer a {
29 |   text-decoration: none;
30 |   color: white;
31 | }
32 | 
33 | .footer a:hover {
34 |   text-decoration: none;
35 |   color: rgb(16, 138, 228);
36 |   transition: 0.5s
37 | }
38 | 
39 | 


--------------------------------------------------------------------------------
/css/team_list_style.css:
--------------------------------------------------------------------------------
 1 | p {
 2 |     color: white;
 3 |     font-weight: 600;
 4 | 
 5 | }
 6 | 
 7 | .cards {
 8 |     width: 100vw;
 9 |     padding: 20px;
10 |     display: flex;
11 |     align-items: center;
12 |     flex-wrap: wrap;
13 |     justify-content: space-evenly;
14 | }
15 | 
16 | #maintainers,
17 | .card_main,
18 | #contributors {
19 |     display: flex;
20 |     flex-direction: column;
21 |     align-items: center;
22 |     justify-content: center;
23 | }
24 | 
25 | #team a {
26 |     text-decoration: none;
27 | }
28 | 
29 | .card_main {
30 |     height: 30vh;
31 |     width: 43vh;
32 |     box-shadow: 0px 0px 10px 3px #699cc8;
33 |     background: azure;
34 |     /* fallback for old browsers */
35 |     background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
36 |     /* Chrome 10-25, Safari 5.1-6 */
37 |     background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
38 |     /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
39 |     border-radius: 50%;
40 |     padding: 30px;
41 |     margin: 30px;
42 |     justify-content: space-evenly;
43 |     transition: 1s;
44 | }
45 | 
46 | .card_main:hover{
47 |     height: 35vh;
48 |     width: 46vh;
49 |     box-shadow: 0px 0px 15px 6px #699cc8;
50 | 
51 | }
52 | 
53 | #contributors .card_main {
54 |     background: white;
55 | }
56 | 
57 | .card_main p {
58 |     color: black;
59 |     font-weight: 400;
60 |     font-style:italic;
61 | }
62 | 
63 | #profile_img {
64 | 
65 |     width: 6vw;
66 |     border-radius: 50%;
67 | }
68 | 
69 | #social img {
70 |     width: 2vw;
71 |     margin: 2px;
72 |     border-radius: 10px;
73 | }
74 | #social img:hover{
75 |     transform: scale(1.2);
76 |     border:1px solid rgb(112, 112, 212);
77 |   }
78 | .card_main p :hover{
79 |    font-weight:700;
80 |   }
81 | 
82 | 


--------------------------------------------------------------------------------
/data/Contributors.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "name": "Vijay Gunwant",
 4 |         "github": "https://github.com/Vijay-Gunwant",
 5 |         "linkedin": "https://www.linkedin.com/in/vijay-gunwant/"
 6 |     },
 7 |     {
 8 |         "name": "Pruthviraj Ilegaonkar",
 9 |         "github":"https://github.com/CodeTorso",
10 |         "linkedin":"https://www.linkedin.com/in/pruthviraj-ilegaonkar-6b5237274/"
11 |     },
12 |     {
13 |         "name": "Rohit Mahant",
14 |         "github":"https://github.com/Semicile17",
15 |         "linkedin":"https://www.linkedin.com/in/rohit-mahant?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app"
16 |     },
17 |     {
18 |         "name":"Kamal Koranga",
19 |         "github":"https://github.com/Kamalkoranga",
20 |         "linkedin":"https://www.linkedin.com/in/kamalkoranga/"
21 | 
22 |     },
23 |     {
24 |         "name":"Ritik Bhasarkar",
25 |         "github":"https://github.com/Ritik-Bhasarkar",
26 |         "linkedin":"https://www.linkedin.com/in/www.linkedin.com/in/ritik-bhasarkar"
27 |     },
28 |     {
29 |         "name":"Yash Raj",
30 |         "github":"https://github.com/yr1404",
31 |         "linkedin":"https://www.linkedin.com/in/yr1404"
32 |         },
33 |     {
34 |         "name":"Shovit Bhatta",
35 |         "github":"https://github.com/Virtual4087",
36 |         "linkedin":"https://www.linkedin.com/in/shovit-bhatta-117101248/"
37 |     },
38 |     {
39 |         "name":"Suyash Dabral",
40 |         "github":"https://github.com/s-dabral",
41 |         "linkedin":""
42 |     },
43 |     {
44 |         "name":"Khushi Sharma",
45 |         "github":"https://github.com/CoderKhu",
46 |         "linkedin":"https://www.linkedin.com/in/khushi-sharma-b68651233/"
47 |     },
48 |     {
49 |         "name":"Tarun",
50 |         "github":"https://github.com/tarunnayakar",
51 |         "linkedin":""
52 |     },
53 |     {
54 |         "name":"Annay Paul",
55 |         "github":"https://github.com/Paul-Annay",
56 |         "linkedin":""
57 |     },
58 |     {
59 |         "name":"Vanshaj Gupta",
60 |         "github":"https://github.com/vanshajgupta37",
61 |         "linkedin":""
62 |     },
63 |     {
64 |         "name":"Lokesh",
65 |         "github":"https://github.com/Lokesh-MV",
66 |         "linkedin":""
67 |     },
68 |     {
69 |         "name":"Anirudh Gupta",
70 |         "github":"https://github.com/ani-netizen",
71 |         "linkedin":""
72 |     }
73 | ]
74 | 
75 | 


--------------------------------------------------------------------------------
/data/FAQ.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "question":"What is Open Code Era?",
 4 |         "answer":"We are a dynamic hub where creativity meets collaboration. Our mission is to create an inclusive environment that celebrates the spirit of open-source development. By advocating for transparency, sharing, and co-creation, we're reshaping the way software is built, one line of code at a time."
 5 |     },
 6 |     {
 7 |         "question":"What is Open Source?",
 8 |         "answer":"The term Open-source is closely related to Open-source software (OSS). Open-source software is a type of computer software that is released under a license, but the source code is made available to all the users. The copyright holders of such software allow the users to use it and do some valuable modifications in its source code to add some new features, to improve the existing features, and to fix bugs if there are any. Because of this reason only Open-source software is mostly developed collaboratively."
 9 |     },
10 |     {
11 |         "question":"What is Hactoberfest?",
12 |         "answer":"Hacktoberfest is a month-long celebration of open-source projects, their maintainers, and the entire community of contributors."
13 |     }
14 | 
15 | ]


--------------------------------------------------------------------------------
/data/Maintainers.json:
--------------------------------------------------------------------------------
1 | [
2 |     {
3 |         "name": "Adarsh Rawat",
4 |         "github": "https://github.com/AdarshRawat1",
5 |         "linkedin": "https://www.linkedin.com/in/adarsh-rawat/"
6 |     }
7 | ]


--------------------------------------------------------------------------------
/data/RulesForAddingData.md:
--------------------------------------------------------------------------------
 1 | If you are a contributor then add your information in data/Contributor.json file
 2 | 
 3 | If you are a Maintainer then add your information in data/Maintainers.json file
 4 | 
 5 | ## Important - Do not change the content of any of the files mentioned above
 6 | 
 7 | ## Don't remove the comma at the starting
 8 | 
 9 | ## Add data after the "}" breacket and not after "]" bracket
10 | 
11 | Format to add data -
12 | 
13 | ,{
14 | name = "your name",
15 | github = "yourgithublink",
16 | linkedin = "yourlinkedinurl",
17 | }
18 | 


--------------------------------------------------------------------------------
/images/Api Programming logo.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:b91772805f303658ef0a573fb0e672694ca31eaf5066ae55af943b700832979e
3 | size 374052
4 | 


--------------------------------------------------------------------------------
/images/Extras/favicon.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:7b8ea6c676b905bb50fddb4146514b588d19337e46cf3f9efb7ae399169d4900
3 | size 25047
4 | 


--------------------------------------------------------------------------------
/images/FC.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:9d898af1a1e04effdbae73198a2c15f572a7597212dcdfc764688b0b5dadfd28
3 | size 54403
4 | 


--------------------------------------------------------------------------------
/images/GPA.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:0a9729dd682dc501fd9b2822a33b0cf752a07e379ee1a9f63f9074d528387291
3 | size 140241
4 | 


--------------------------------------------------------------------------------
/images/ML.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:bdb1b3218440500b667b829fe282c5be35449342b3fe0db77b6128f0b7e2a686
3 | size 92526
4 | 


--------------------------------------------------------------------------------
/images/icon/favicon125x125.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:975b78d800d45c43a9bf781d5042719224d1a92acd93cf11427575e8540abca2
3 | size 15746
4 | 


--------------------------------------------------------------------------------
/images/icon/icon.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:cc94ceecb6c3adc42b5bb5bcf29735b7a3b89b3abdf011fbdb7f344441814fab
3 | size 119835
4 | 


--------------------------------------------------------------------------------
/images/illustrations/Get in touch.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:c543c261d0e20b258fa88929fdc0eeef5a02d38f80c2ffef8866cf31b4ae99cd
3 | size 824337
4 | 


--------------------------------------------------------------------------------
/images/illustrations/goals.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:6145416cd10e9b4e0e9371e9d731d75c4901717ef6e97e51caecb04b71eed1c3
3 | size 866886
4 | 


--------------------------------------------------------------------------------
/images/logo/github-logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10 |    width="1024"
11 |    height="1024"
12 |    viewBox="0 0 1024 1024"
13 |    fill="none"
14 |    version="1.1"
15 |    id="svg835"
16 |    sodipodi:docname="Octicons-mark-github.svg"
17 |    inkscape:version="1.0.2 (e86c8708, 2021-01-15)">
18 |   <metadata
19 |      id="metadata841">
20 |     <rdf:RDF>
21 |       <cc:Work
22 |          rdf:about="">
23 |         <dc:format>image/svg+xml</dc:format>
24 |         <dc:type
25 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
26 |       </cc:Work>
27 |     </rdf:RDF>
28 |   </metadata>
29 |   <defs
30 |      id="defs839" />
31 |   <sodipodi:namedview
32 |      pagecolor="#ffffff"
33 |      bordercolor="#666666"
34 |      borderopacity="1"
35 |      objecttolerance="10"
36 |      gridtolerance="10"
37 |      guidetolerance="10"
38 |      inkscape:pageopacity="0"
39 |      inkscape:pageshadow="2"
40 |      inkscape:window-width="1440"
41 |      inkscape:window-height="798"
42 |      id="namedview837"
43 |      showgrid="false"
44 |      inkscape:zoom="0.60449219"
45 |      inkscape:cx="512"
46 |      inkscape:cy="512"
47 |      inkscape:window-x="0"
48 |      inkscape:window-y="25"
49 |      inkscape:window-maximized="0"
50 |      inkscape:current-layer="svg835" />
51 |   <path
52 |      fill-rule="evenodd"
53 |      clip-rule="evenodd"
54 |      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
55 |      transform="scale(64)"
56 |      fill="#1B1F23"
57 |      id="path833"
58 |      style="fill:#ffffff;fill-opacity:1" />
59 | </svg>
60 | 


--------------------------------------------------------------------------------
/images/logo/github.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:2325ef947c5254ebfbe5af01ec2a628b5ed640f97de4cdc9a0aadc25f11a7496
3 | size 253515
4 | 


--------------------------------------------------------------------------------
/images/logo/linkedin.png:
--------------------------------------------------------------------------------
1 | version https://git-lfs.github.com/spec/v1
2 | oid sha256:7dcbc6147b5ba1f1da63566505a0bee3a7c044fc9c9ab8935f8298eb6b231340
3 | size 11481
4 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <title>OpenCodeEra: Open Source Organisation</title>
  6 |   <!-- Meta Tags -->
  7 |   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  8 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  9 |   <meta name="description"
 10 |     content="OpenCodeEra is an open source organisation aimed at making open source software more accessible and to help developers build better software." />
 11 |   <meta name="keywords"
 12 |     content="Open source,Open code era ,Open source company ,OpenSource,Contribution , community , Open source projects, education, collaboration, organisation, Web developement, Open source project,hacktoberfest" />
 13 |   <meta name="robots" content="INDEX, FOLLOW" />
 14 | 
 15 |   <!-- Linking external CSS  -->
 16 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
 17 |   <!-- Bootstrap CSS -->
 18 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
 19 |     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
 20 |   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
 21 |   <link rel="stylesheet" href="css/faq.css">
 22 | 
 23 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 24 |   <!-- <link
 25 |             rel="stylesheet"
 26 |             href="css/style_footer.css"
 27 |             type="text/css"
 28 |             media="screen"
 29 |         /> -->
 30 | 
 31 |   <!-- linking External JavaScript -->
 32 |   <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
 33 | 
 34 |   <!-- Favicon -->
 35 |   <link rel="icon" type="image/x-icon" href="/images/icon/favicon125x125.png" />
 36 |   <link rel="stylesheet"
 37 |     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
 38 | 
 39 |   <!-- Fonts -->
 40 |   <link rel="preconnect" href="https://fonts.googleapis.com" />
 41 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 42 |   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet" />
 43 |   <style>
 44 |     span {
 45 |         cursor: pointer;
 46 |     }
 47 | </style>
 48 | </head>
 49 | 
 50 | <body>
 51 |   <!-- This div pushes down header a little bit so that header is not sticky from start -->
 52 |   <div class="header-push-down"></div>
 53 | 
 54 |   <header class="blur disable-selection">
 55 |     <nav>
 56 |       <div class="left">
 57 |         <a href="">
 58 |           <img src="images/icon/icon.png" alt="OpenCodeEra logo" />
 59 |         </a>
 60 |         <a href="index.html">
 61 |           <span class="blue">Open</span>
 62 |           <span class="white">Code</span>
 63 |           <span class="blue">Era</span>
 64 |         </a>
 65 |       </div>
 66 | 
 67 |       <div class="right">
 68 |         <ul class="navul" id="nav">
 69 |           <li class="navli" class="about"><a  href="#about">About</a></li>
 70 |           <li class="navli" class="services"><a  href="javascript:void(0);" onclick="ScrollToProject()">Projects</a></li>
 71 |           <li class="navli"><a href="team_list.html"> Team </a></li>
 72 |           <li class="navli" class="contact-us"><a  href="#contact">Contact Us</a></li>
 73 |           <li class="navli" class="about"><a  href="#faq">FAQ</a></li>
 74 |         </ul>
 75 |       </div>
 76 |     </nav>
 77 | 
 78 |   </header>
 79 |   <main class="blur">
 80 |     <section class="firstsection disable-selection">
 81 |       <div class="leftSection">
 82 |         <div class="white">
 83 |           <span class="blue">Welcome ! </span>Contributors, Elevate Your Impact
 84 |           with <span class="focus-gradient">Open Source</span>
 85 |           <span id="element"></span>
 86 |          </div>
 87 |       </div>
 88 | 
 89 |       <div class="rightSection">
 90 |         <img src="images/Api Programming logo.png" alt="Open Code Era logo" />
 91 |       </div>
 92 |     </section>
 93 | 
 94 |     <hr />
 95 | 
 96 |     <section class="secondSection" id="about">
 97 |       <div class="second-section-container">
 98 |         <div class="leftSection">
 99 |           <!-- image from template.net -->
100 |           <img src="images/illustrations/goals.png" alt="goals" />
101 |         </div>
102 | 
103 |         <div class="rightSection">
104 |           <h2>Our Mission</h2>
105 |           <span class="text-gradient-blue-white">
106 |             <p>
107 |               Open Code Era fosters open source culture, encouraging
108 |               collaboration in software development within the developer
109 |               community.
110 |             </p>
111 |           </span>
112 |         </div>
113 |       </div>
114 |     </section>
115 | 
116 |     <hr />
117 | 
118 |     <section id="projects">
119 |       <h2>Our Projects</h2>
120 |       <div class="projects_body">
121 |         <section class="articles">
122 |           <article>
123 |             <div class="article-wrapper">
124 |               <figure>
125 |                 <img src="images/FC.png" alt="" />
126 |               </figure>
127 |               <div class="article-body">
128 |                 <h2>First-Contribution</h2>
129 |                 <p>
130 |                   A repo where you can make your first open source contribution and get a contributors card in our website.
131 |                 </p>
132 |                 <a href="https://github.com/OpenCodeEra/First-Contribution" class="read-more" target="_blank">
133 |                   Check out GitHub Repo <span class="sr-only">about this is some title</span>
134 |                   <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
135 |                     <path fill-rule="evenodd"
136 |                       d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
137 |                       clip-rule="evenodd" />
138 |                   </svg>
139 |                 </a>
140 |               </div>
141 |             </div>
142 |           </article>
143 |           <article>
144 |             <div class="article-wrapper">
145 |               <figure>
146 |                 <img src="images/GPA.png" alt="" />
147 |               </figure>
148 |               <div class="article-body">
149 |                 <h2>GitHub-Profile-Achievements</h2>
150 |                 <p>
151 |                   A collection listing all Achievements available on the GitHub profile and how to earn them.
152 |                 </p>
153 |                 <a href="https://github.com/OpenCodeEra/GitHub-Profile-Achievements" class="read-more" target="_blank">
154 |                   Check out GitHub Repo <span class="sr-only">about this is some title</span>
155 |                   <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
156 |                     <path fill-rule="evenodd"
157 |                       d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
158 |                       clip-rule="evenodd" />
159 |                   </svg>
160 |                 </a>
161 |               </div>
162 |             </div>
163 |           </article>
164 |           <article>
165 |             <div class="article-wrapper">
166 |               <figure>
167 |                 <img src="images/ML.png" alt="" />
168 |               </figure>
169 |               <div class="article-body">
170 |                 <h2>ML-X</h2>
171 |                 <p>
172 |                   Dive into a rich assortment of machine learning models, perfect for learners and experts alike.
173 |                 </p>
174 |                 <a href="https://github.com/OpenCodeEra/ML-X" class="read-more" target="_blank">
175 |                   Check out GitHub Repo <span class="sr-only">about this is some title</span>
176 |                   <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
177 |                     <path fill-rule="evenodd"
178 |                       d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
179 |                       clip-rule="evenodd" />
180 |                   </svg>
181 |                 </a>
182 |               </div>
183 |             </div>
184 |           </article>
185 |         </section>
186 |       </div>
187 |       <div class="view_more__projects">
188 |         <a href="https://github.com/orgs/OpenCodeEra/repositories" target="_blank">View More</a>
189 |         <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
190 |           <path fill-rule="evenodd"
191 |             d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
192 |             clip-rule="evenodd" />
193 |         </svg>
194 |       </div>
195 |     </section>
196 | 
197 |     <hr />
198 | 
199 |     <section class="contactSection" id="contact">
200 |       <div class="leftContact">
201 |         <h2>Get in Touch!</h2>
202 |         <p>
203 |           If you have any questions or inquiries, please feel free to get in
204 |           touch with us.
205 |         </p>
206 |         <!-- image from freepik -->
207 |         <img src="./images/illustrations/Get in touch.png" alt="Get In Touch" />
208 |       </div>
209 | 
210 |       <div class="rightContact">
211 |         <form id="messageForm" action="https://formspree.io/f/mwkdbzaq" method="POST">
212 |           <input type="text" name="name" placeholder="Name" required="" />
213 |           <input type="email" name="email" placeholder="Email" required="" />
214 |           <textarea rows="8" name="message" placeholder="Message" required=""></textarea>
215 |           <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission [OpenCodeEra]" />
216 |           <button id="submit" id="submit">Submit</button>
217 |         </form>
218 |       </div>
219 |     </section>
220 | 
221 |     <hr />
222 | 
223 |     <section id="faq">
224 |       <h2>Frequently Asked Question</h2>
225 |       <div id="faq_box">
226 |         <div class="content">
227 |           <div id="questions">
228 |             <p>
229 |               What is Open Code Era?
230 |             </p>
231 |             <p id="icon">
232 |               <span class="material-symbols-outlined open">
233 |                 expand_more
234 |               </span>
235 |               <span class="material-symbols-outlined close">
236 |                 close
237 |               </span>
238 |             </p>
239 |           </div>
240 |           <p class="answer">
241 |             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam pariatur corrupti sequi consequuntur qui,
242 |             dolorem repellendus eligendi iusto perferendis expedita maiores voluptate architecto rerum iure et numquam
243 |             quam explicabo dolore.
244 |           </p>
245 |         </div>
246 |       </div>
247 |     </section>
248 |   </main>
249 | 
250 |   <div id="popup">
251 |     <h2 id="form-status">Thanks for your submission!</h2>
252 |     <br />
253 |     <button id="close" onclick="toggle()">Close</button>
254 |   </div>
255 | 
256 |   <!-- <footer class="blur disable-selection">
257 |         <div class="footer">
258 |             <div class="footer-first">
259 |                 <h3 class="footer-header">Open Code Era</h3>
260 |             </div>
261 |             
262 |             <div class="footer-rights">
263 |                 Copyright &#169 opencodeera.pages.dev | All Rights Reserved
264 |             </div>
265 | 
266 |             <div class="footer-second">
267 |                 <a class="github-action" href="https://github.com/OpenCodeEra/OpenCodeEra">
268 |                   <img src="images/logo/github-logo.svg" alt="github-logo">
269 |                   <span class="img-text"> Improve this page on GitHub </span>
270 |                 </a>
271 |             </div>
272 |         </div>
273 |     </footer> -->
274 | 
275 |   <footer>
276 |     <div class="row">
277 |       <div class="col-md-4 col-sm-6 footer-div" style="text-align: center">
278 |         <img src="images/icon/icon.png" id="footer-logo" />
279 |         <p id="footer-name">Open <span>Code</span> Era</p>
280 |         <a href="mailto:openera@myyahoo.com" id="mail-footer">
281 |           <i class="fa-regular fa-envelope"></i> openera@myyahoo.com
282 |         </a>
283 |       </div>
284 |       <div class="col-md-4 col-sm-6 footer-div" id="nav-footer">
285 |         <p class="ql-head">Quick Links</p>
286 |         <a href="team_list.html" class="nav-footer-link"> Our Team </a>
287 |         <a href="https://github.com/orgs/OpenCodeEra/repositories" class="nav-footer-link">
288 |           Projects</a>
289 |         <a href="#contact" class="nav-footer-link"> Contact </a>
290 |       </div>
291 |       <div class="col-md-4 footer-div" id="socials-div">
292 |         <p class="touch">Get in Touch</p>
293 |         <div id="socials">
294 |           <a href="https://www.linkedin.com/company/open-code-era/" target="_blank">
295 |             <i class="fa-brands fa-linkedin-in"></i>
296 |           </a>
297 |           <a href="https://github.com/OpenCodeEra" target="_blank">
298 |             <i class="fa-brands fa-github"> </i>
299 |           </a>
300 |           <!-- <a href="#">
301 |             <i class="fa-brands fa-x-twitter"></i>
302 |           </a>
303 |           <a href="#">
304 |             <i class="fa-brands fa-instagram"></i>
305 |           </a> -->
306 |         </div>
307 | 
308 |         <div id="contribution-div">
309 |           <p class="contribute-head">Looking to contribute ?</p>
310 |           <p id="contribute-tag">Feel free to make your contributions</p>
311 |           <a href="https://github.com/OpenCodeEra/OpenCodeEra" id="contribute-link">
312 |             <i class="fa-brands fa-github" style="font-size: 40px"> </i>
313 |             OpenCodeEra
314 |           </a>
315 |         </div>
316 |       </div>
317 |     </div>
318 |     <p class="copy-right">
319 |       Copyright © opencodeera.pages.dev | All Rights Reserved
320 |     </p>
321 |   </footer>
322 |   <script src="./javascript/index.js"></script>
323 |   <script src="javascript/faq.js"></script>
324 |   <script src="javascript/menu.js"></script>
325 | </body>
326 | 
327 | </html>


--------------------------------------------------------------------------------
/javascript/faq.js:
--------------------------------------------------------------------------------
 1 | console.log("running");
 2 | fetch('data/FAQ.json')
 3 |   .then(response => response.json())
 4 |   .then(dataArray => {
 5 |     const faqBox = document.getElementById("faq_box");
 6 | 
 7 |     dataArray.forEach((data, index) => {
 8 |       const contentDiv = document.createElement("div");
 9 |       contentDiv.classList.add("content");
10 | 
11 |       const questionsDiv = document.createElement("div");
12 |       questionsDiv.id = "questions";
13 | 
14 |       const questionP = document.createElement("p");
15 |       questionP.textContent = data.question;
16 | 
17 |       const iconP = document.createElement("p");
18 |       iconP.id = "icon";
19 | 
20 |       const openSpan = document.createElement("span");
21 |       openSpan.classList.add("material-symbols-outlined", "open");
22 |       openSpan.id = `open${index}`;
23 |       openSpan.textContent = "expand_more";
24 |       openSpan.addEventListener("click", () => showFAQ(index));
25 | 
26 |       const closeSpan = document.createElement("span");
27 |       closeSpan.classList.add("close");
28 |       closeSpan.id = `close${index}`;
29 |       closeSpan.textContent = "x";
30 |       closeSpan.style.display = "none";
31 |       closeSpan.addEventListener("click", () => closeFAQ(index));
32 | 
33 |       iconP.appendChild(openSpan);
34 |       iconP.appendChild(closeSpan);
35 | 
36 |       questionsDiv.appendChild(questionP);
37 |       questionsDiv.appendChild(iconP);
38 | 
39 |       const answerP = document.createElement("p");
40 |       answerP.classList.add("answer");
41 |       answerP.id = `answer${index}`;
42 |       answerP.textContent = data.answer;
43 |       answerP.style.display = "none";
44 | 
45 |       contentDiv.appendChild(questionsDiv);
46 |       contentDiv.appendChild(answerP);
47 | 
48 |       faqBox.appendChild(contentDiv);
49 |     });
50 |   })
51 |   .catch(error => {
52 |     console.error('Error fetching JSON:', error);
53 |   });
54 | 
55 | function showFAQ(index) {
56 |   const openSpan = document.getElementById(`open${index}`);
57 |   const closeSpan = document.getElementById(`close${index}`);
58 |   const answerP = document.getElementById(`answer${index}`);
59 | 
60 |   openSpan.style.display = "none";
61 |   closeSpan.style.display = "block";
62 |   answerP.style.display = "block";
63 | }
64 | 
65 | function closeFAQ(index) {
66 |   const openSpan = document.getElementById(`open${index}`);
67 |   const closeSpan = document.getElementById(`close${index}`);
68 |   const answerP = document.getElementById(`answer${index}`);
69 | 
70 |   openSpan.style.display = "block";
71 |   closeSpan.style.display = "none";
72 |   answerP.style.display = "none";
73 | }


--------------------------------------------------------------------------------
/javascript/index.js:
--------------------------------------------------------------------------------
 1 | var typed = new Typed("#element", {
 2 |   strings: ["Projects", "Community", "Innovation", "Contribution"],
 3 |   typeSpeed: 50,
 4 | });
 5 | 
 6 | const elements = document.getElementsByClassName("blur");
 7 | 
 8 | function ScrollToProject(){
 9 |   const projects = document.querySelector("#projects")
10 |   const position = projects.offsetTop - document.querySelector("nav").clientHeight;
11 | 
12 |   window.scrollTo({
13 |     top: position - 40, // To adjust the position with <hr> tag
14 |     behavior: "smooth"
15 |   })
16 | }
17 | 
18 | function toggle(x) {
19 |   if (x) {
20 |     for (let i = 0; i < elements.length; i++) {
21 |       elements[i].classList.add("blurred");
22 |     }
23 |     document.getElementById("popup").classList.add("active");
24 |     document.getElementById("contact").scrollIntoView();
25 |   } else {
26 |     for (let i = 0; i < elements.length; i++) {
27 |       elements[i].classList.remove("blurred");
28 |     }
29 |     document.getElementById("popup").classList.remove("active");
30 |   }
31 | }
32 | 
33 | var form = document.getElementById("messageForm");
34 | 
35 | async function handleSubmit(event) {
36 |   event.preventDefault();
37 |   const status = document.getElementById("form-status");
38 |   var data = new FormData(event.target);
39 |   fetch(event.target.action, {
40 |     method: form.method,
41 |     body: data,
42 |     headers: {
43 |       Accept: "application/json",
44 |     },
45 |   })
46 |     .then((response) => {
47 |       if (response.ok) {
48 |         status.innerHTML = "Thanks for your submission!";
49 |         toggle("body");
50 |         form.reset();
51 |       } else {
52 |         response.json().then((data) => {
53 |           if (Object.hasOwn(data, "errors")) {
54 |             status.innerHTML = data["errors"]
55 |               .map((error) => error["message"])
56 |               .join(", ");
57 |             toggle("body");
58 |           } else {
59 |             status.innerHTML =
60 |               "Oops! Too many requests. Please try again later.";
61 |             toggle("body");
62 |           }
63 |         });
64 |       }
65 |     })
66 |     .catch((error) => {
67 |       status.innerHTML = "Oops! There was a problem submitting your form";
68 |       toggle("body");
69 |     });
70 | }
71 | form.addEventListener("submit", handleSubmit);
72 | menuimg=document.querySelector('.menuimg');
73 | navul=document.querySelector('.navul');
74 | navlis=document.querySelectorAll('.navli');
75 | 


--------------------------------------------------------------------------------
/javascript/menu.js:
--------------------------------------------------------------------------------
 1 | function show() {
 2 |   document.getElementById("menu").style.display = "none";
 3 |   document.getElementById("close").style.display = "block";
 4 |   document.getElementById("nav").style.display = "flex";
 5 | 
 6 | }
 7 | function hide() {
 8 |   document.getElementById("menu").style.display = "block";
 9 |   document.getElementById("close").style.display = "none";
10 |   document.getElementById("nav").style.display = "none";
11 | }


--------------------------------------------------------------------------------
/javascript/team_list.js:
--------------------------------------------------------------------------------
 1 | let str = "";
 2 | console.log("running");
 3 | fetch('data/Maintainers.json')
 4 |   .then(response => response.json())
 5 |   .then(dataArray => {
 6 |     // Loop through each maintainer's data
 7 |     dataArray.forEach(maintainer => {
 8 |         str +=
 9 |         `
10 |         <div class="card_main">
11 |           <img src="https://robohash.org/${maintainer.name}" alt="Icon" id="profile_img">
12 |           <p>
13 |             ${maintainer.name}
14 |           </p>
15 |           <div id="social">
16 |             <a href="${maintainer.linkedin}" target="_blank">
17 |               <img src="images/logo/linkedin.png" alt="Linkedin">
18 |             </a>
19 |             <a href="${maintainer.github}" target="_blank">
20 |               <img src="images/logo/github.png" alt="GitHub">
21 |             </a>
22 |           </div>
23 |         </div>
24 |         `;
25 |     });
26 | 
27 |     // Set the HTML content of the 'card' element
28 |     const card = document.getElementById("cards_maintianer");
29 |     card.innerHTML = str;
30 |   })
31 |   .catch(error => {
32 |     console.error('Error fetching JSON:', error);
33 |   });
34 | 
35 | 
36 |   let str2 = "";
37 |   console.log("running");
38 |   fetch('data/Contributors.json')
39 |     .then(response => response.json())
40 |     .then(dataArray => {
41 |       // Loop through each contributor's data
42 |       dataArray.forEach(contributor => {
43 |           str2 +=
44 |           `
45 |           <div class="card_main">
46 |             <img src="https://robohash.org/${contributor.name}" alt="Icon" id="profile_img">
47 |             <p>
48 |               ${contributor.name}
49 |             </p>
50 |             <div id="social">
51 |               <a href="${contributor.linkedin}" target="_blank">
52 |                 <img src="images/logo/linkedin.png" alt="Linkedin">
53 |               </a>
54 |               <a href="${contributor.github}" target="_blank">
55 |                 <img src="images/logo/github.png" alt="GitHub">
56 |               </a>
57 |             </div>
58 |           </div>
59 |           `;
60 |       });
61 |   
62 |       // Set the HTML content of the 'card' element
63 |       const card = document.getElementById("cards_contributor");
64 |       card.innerHTML = str2;
65 |     })
66 |     .catch(error => {
67 |       console.error('Error fetching JSON:', error);
68 |     });
69 |   


--------------------------------------------------------------------------------
/team_list.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta  http-equiv="content-type" content="text/html; charset=UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  7 |   <meta name="description"
  8 |     content="OpenCodeEra is an open source organisation aimed at making open source software more accessible and to help developers build better software.">
  9 |   <meta name="keywords"
 10 |     content="Open source,Open code era ,Open source company ,OpenSource,Contribution , community , Open source projects, education, collaboration, organisation, Web developement, Open source project,hacktoberfest">
 11 |   <meta name="robots" content="INDEX, FOLLOW">
 12 |   <!-- Linking external CSS -->
 13 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
 14 |   <!-- Bootstrap CSS -->
 15 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
 16 |     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
 17 |   <!-- <link rel="stylesheet" href="css/style_footer.css" type="text/css" media="screen" /> -->
 18 |   <link rel="stylesheet" href="css/team_list_style.css">
 19 |   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
 20 | 
 21 | 
 22 |   <!-- Favicon -->
 23 |   <link rel="icon" type="image/x-icon" href="/images/icon/favicon125x125.png" />
 24 | 
 25 |   <!-- Fonts -->
 26 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 27 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 28 |   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
 29 | 
 30 |   <title>Our Team | Open Code Era</title>
 31 | </head>
 32 | 
 33 | <body>
 34 | 
 35 |   <!-- This div pushes down header a little bit so that header is not sticky from start -->
 36 |   <header class="blur disable-selection">
 37 |     <nav>
 38 |       <div class="left">
 39 |         <img src="images/icon/icon.png" alt="OpenCodeEra logo" />
 40 |         <a href="index.html">
 41 |           <span class="blue">Open</span>
 42 |           <span class="white">Code</span>
 43 |           <span class="blue">Era</span>
 44 |         </a>
 45 |       </div>
 46 |       <div class="right">
 47 |         <ul>
 48 |           <li class="about"><a  href="index.html#about">About</a></li>
 49 |           <li class="services"><a href="index.html#projects">Projects</a></li>
 50 |           <li><a href="/team_list.html">Team</a></li>
 51 |           <li class="contact-us"><a  href="index.html#contact">Contact Us</a></li>
 52 |           <li class="about"><a  href="index.html#faq">FAQ</a></li>
 53 |         </ul>
 54 |       </div>
 55 |     </nav>
 56 |   </header>
 57 | 
 58 |   <div id="team">
 59 |     <div id="maintainers">
 60 |       <p>
 61 |         Our Maintainers
 62 |       </p>
 63 |       <div id="cards_maintianer" class="cards">
 64 |         <p style="font-weight: 300; color: rgb(189, 189, 182);">
 65 |           "There is Some Error in Maintianers.json File"
 66 |         </p>
 67 |       </div>
 68 |     </div>
 69 |     <div id="contributors">
 70 |       <p>
 71 |         Our Contributors
 72 |       </p>
 73 |       <div id="cards_contributor" class="cards">
 74 |         <p style="font-weight: 300; color: rgb(189, 189, 182);">
 75 |           "There is Some Error in Contributors.json File"
 76 |         </p>
 77 |       </div>
 78 |     </div>
 79 |   </div>
 80 |   </d
 81 | 
 82 |   <footer>
 83 |     <div class="row">
 84 |       <div class="col-md-4 col-sm-6 footer-div" style="text-align: center">
 85 |         <img src="images/icon/icon.png" id="footer-logo" alt="icon" />
 86 |         <p id="footer-name">Open Code Era</p>
 87 |         <a href="mailto:openera@myyahoo.com" id="mail-footer">
 88 |           <i class="fa-regular fa-envelope"></i> openera@myyahoo.com
 89 |         </a>
 90 |       </div>
 91 |       <div class="col-md-4 col-sm-6 footer-div" id="nav-footer">
 92 |         <p class="ql-head">Quick Links</p>
 93 |         <a href="team_list.html" class="nav-footer-link"> Our Team </a>
 94 |         <a href="https://github.com/orgs/OpenCodeEra/repositories" class="nav-footer-link">
 95 |           Projects</a>
 96 |         <a href="#contact" class="nav-footer-link"> Contact </a>
 97 |       </div>
 98 |       <div class="col-md-4 footer-div" id="socials-div">
 99 |         <p class="touch">Get in Touch</p>
100 |         <div id="socials">
101 |           <a href="https://www.linkedin.com/company/open-code-era/" target="_blank">
102 |             <i class="fa-brands fa-linkedin-in"></i>
103 |           </a>
104 |           <a href="https://github.com/OpenCodeEra" target="_blank">
105 |             <i class="fa-brands fa-github"> </i>
106 |           </a>
107 |           <a href="#">
108 |             <i class="fa-brands fa-x-twitter"></i>
109 |           </a>
110 |           <a href="#">
111 |             <i class="fa-brands fa-instagram"></i>
112 |           </a>
113 |         </div>
114 | 
115 |         <div id="contribution-div">
116 |           <p class="contribute-head">Looking to contribute ?</p>
117 |           <p id="contribute-tag">Feel free to make your contributions</p>
118 |           <a href="https://github.com/OpenCodeEra/OpenCodeEra" id="contribute-link">
119 |             <i class="fa-brands fa-github" style="font-size: 40px"> </i>
120 |             OpenCodeEra
121 |           </a>
122 |         </div>
123 |       </div>
124 |     </div>
125 |     <p class="copy-right">
126 |       Copyright © opencodeera.pages.dev | All Rights Reserved
127 |     </p>
128 |   </footer>
129 |   </header>
130 | </body>
131 | <script src="javascript/team_list.js"></script>
132 | 
133 | </html>


--------------------------------------------------------------------------------