├── .github
    ├── pull_request_template.md
    └── workflows
    │   ├── checker.yml
    │   └── main.yml
├── .vscode
    └── settings.json
├── CNAME
├── CONTRIBUTING.md
├── GITHUB.MD
├── HACTOBERFEST.md
├── LICENSE
├── README.md
├── favicon.png
├── index.html
├── index.js
└── styles.css


/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | ## Description
 2 | 
 3 | _Give a summary of the change that you have made_ <br />
 4 | 
 5 | Fixes #[ISSUENO]
 6 | 
 7 | ## Mentions
 8 | 
 9 | _Mention and tag the people_
10 | 
11 | ## Screenshots of relevant screens
12 | 
13 | _Add screenshots of relevant screens_
14 | 
15 | ## Developer's checklist
16 | 
17 | - [ ] My PR follows the style guidelines of this project
18 | - [ ] I have performed a self-check on my work
19 | 
20 | **If changes are made in the code:**
21 | 
22 | - [ ] I have followed the [coding guidelines](https://google.github.io/styleguide/jsguide.html)
23 | - [ ] My changes in code generate no new warnings
24 | - [ ] My changes are breaking another fix/feature of the project
25 | - [ ] I have added test cases to show that my feature works
26 | - [ ] I have added relevant screenshots in my PR
27 | 


--------------------------------------------------------------------------------
/.github/workflows/checker.yml:
--------------------------------------------------------------------------------
 1 | 
 2 | name: PR has a valid Issue?
 3 | 
 4 | on:
 5 |   pull_request_target:
 6 |     types: [ edited, synchronize, opened, reopened ]
 7 | 
 8 | jobs:
 9 |   checker:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       
15 |       - name: Issue Validator
16 |         uses: HarshCasper/validate-issues-over-pull-requests@v0.1.1
17 |         id: validator
18 |         with:
19 |           prbody: ${{ github.event.pull_request.body }}
20 |           prurl: ${{ github.event.pull_request.url }}
21 |           
22 |       - name: PR has a valid Issue
23 |         if: ${{ steps.validator.outputs.valid == 1 }}
24 |         env:
25 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
26 |           PRNUM: ${{ github.event.pull_request.number }}
27 |         run: |
28 |           gh pr edit $PRNUM --add-label "PR:Ready-to-Review"
29 |           gh pr edit $PRNUM --add-label "hacktoberfest-accepted"
30 |           gh pr edit $PRNUM --remove-label "PR:No-Issue"
31 |           
32 |       - name: PR has no valid Issue
33 |         if: ${{ steps.validator.outputs.valid == 0 }}
34 |         env:
35 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36 |           PRNUM: ${{ github.event.pull_request.number }}
37 |         run: |
38 |           gh pr comment $PRNUM --body "PR is not linked to any issue, please make the corresponding changes in the body."
39 |           gh pr edit $PRNUM --add-label "PR:No-Issue"
40 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: 'Add contributors to readme'
 2 | on:
 3 |     push:
 4 |         branches: [ master ]
 5 | 
 6 | jobs:
 7 |     contrib-readme-job:
 8 |         runs-on: ubuntu-latest
 9 |         name: A job to automate contrib in readme
10 |         steps:
11 |             - name: Contribute List
12 |               uses: akhilmhdh/contributors-readme-action@v2.3.6
13 |               env:
14 |                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
15 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5502
3 | }
4 | 


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | devtrack.club
2 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.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 | ## Code Standards
 40 | - Every addressed issue solution must be within its own folder.
 41 | - Every folder must contain a README.md file with the problem statement and guides to run your code.
 42 | - Put requirements.txt file in the folder if the solution requires any external libraries.
 43 | - The code must be written in Python 3.
 44 | 
 45 | ## Enforcement Responsibilities
 46 | 
 47 | Community leaders are responsible for clarifying and enforcing our standards of
 48 | acceptable behavior and will take appropriate and fair corrective action in
 49 | response to any behavior that they deem inappropriate, threatening, offensive,
 50 | or harmful.
 51 | 
 52 | Community leaders have the right and responsibility to remove, edit, or reject
 53 | comments, commits, code, wiki edits, issues, and other contributions that are
 54 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 55 | decisions when appropriate.
 56 | 
 57 | ## Scope
 58 | 
 59 | This Code of Conduct applies within all community spaces, and also applies when
 60 | an individual is officially representing the community in public spaces.
 61 | Examples of representing our community include using an official e-mail address,
 62 | posting via an official social media account, or acting as an appointed
 63 | representative at an online or offline event.
 64 | 
 65 | ## Enforcement
 66 | 
 67 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 68 | reported to the community leaders responsible for enforcement at @anshrathod1999 on twitter.
 69 | All complaints will be reviewed and investigated promptly and fairly.
 70 | 
 71 | All community leaders are obligated to respect the privacy and security of the
 72 | reporter of any incident.
 73 | 
 74 | ## Enforcement Guidelines
 75 | 
 76 | Community leaders will follow these Community Impact Guidelines in determining
 77 | the consequences for any action they deem in violation of this Code of Conduct:
 78 | 
 79 | ### 1. Correction
 80 | 
 81 | **Community Impact**: Use of inappropriate language or other behavior deemed
 82 | unprofessional or unwelcome in the community.
 83 | 
 84 | **Consequence**: A private, written warning from community leaders, providing
 85 | clarity around the nature of the violation and an explanation of why the
 86 | behavior was inappropriate. A public apology may be requested.
 87 | 
 88 | ### 2. Warning
 89 | 
 90 | **Community Impact**: A violation through a single incident or series
 91 | of actions.
 92 | 
 93 | **Consequence**: A warning with consequences for continued behavior. No
 94 | interaction with the people involved, including unsolicited interaction with
 95 | those enforcing the Code of Conduct, for a specified period of time. This
 96 | includes avoiding interactions in community spaces as well as external channels
 97 | like social media. Violating these terms may lead to a temporary or
 98 | permanent ban.
 99 | 
100 | ### 3. Temporary Ban
101 | 
102 | **Community Impact**: A serious violation of community standards, including
103 | sustained inappropriate behavior.
104 | 
105 | **Consequence**: A temporary ban from any sort of interaction or public
106 | communication with the community for a specified period of time. No public or
107 | private interaction with the people involved, including unsolicited interaction
108 | with those enforcing the Code of Conduct, is allowed during this period.
109 | Violating these terms may lead to a permanent ban.
110 | 
111 | ### 4. Permanent Ban
112 | 
113 | **Community Impact**: Demonstrating a pattern of violation of community
114 | standards, including sustained inappropriate behavior,  harassment of an
115 | individual, or aggression toward or disparagement of classes of individuals.
116 | 
117 | **Consequence**: A permanent ban from any sort of public interaction within
118 | the community.
119 | 
120 | ## Attribution
121 | 
122 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
123 | version 2.0, available at
124 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
125 | 
126 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
127 | enforcement ladder](https://github.com/mozilla/diversity).
128 | 
129 | [homepage]: https://www.contributor-covenant.org
130 | 
131 | For answers to common questions about this code of conduct, see the FAQ at
132 | https://www.contributor-covenant.org/faq. Translations are available at
133 | https://www.contributor-covenant.org/translations.
134 | 


--------------------------------------------------------------------------------
/GITHUB.MD:
--------------------------------------------------------------------------------
  1 | # **Steps to Contribute**
  2 | To contribute to this project and other open-source projects, you need to have knowledge of Git and GitHub/Gitlab.
  3 | You need to have Git installed on your system. To check whether your system has Git installed, run  `git --version`. If you get any version, it means Git is installed on your system otherwise it is not.
  4 | To install Git, visit https://git-scm.com/downloads and follow the instructions. <br><br>
  5 | 
  6 | To make your own local copy of this repository, open up your terminal/ command-line.
  7 | 
  8 | ### **1. Clone the Repository**
  9 | We'll use the `git clone` command to clone the repository on our local system.
 10 | Copy the repository HTTPS URL and then run the following command: `git clone https://github.com/DevTrackClub/DevTrackWebsite.git`.
 11 | 
 12 | ### **2. Make a new branch**
 13 | To create your branch, from your terminal window, change your directory so that you are working in the directory of the repository. Be sure to use the actual name of the repository (i.e. Hacktoberfest-22) to change into that directory.
 14 | 
 15 | ```
 16 | cd DevTrackWebsite
 17 | ```
 18 | 
 19 | Now, we’ll create our new branch with the `git branch` command. Make sure you name it descriptively so that others working on the project understand what you are working on.
 20 | 
 21 | ```
 22 | git branch new-branch
 23 | ```
 24 | 
 25 | Now that our new branch is created, we can switch to make sure that we are working on that branch by using the git checkout command:
 26 | 
 27 | ```
 28 | git checkout new-branch
 29 | ```
 30 | 
 31 | Once you enter the git checkout command, you will receive the following output:
 32 | 
 33 | ```
 34 | Output:
 35 | Switched to branch 'new-branch'
 36 | ```
 37 | 
 38 | At this point, you can now modify existing files or add new files to the project on your own branch.
 39 | 
 40 | ### **3. Make Changes Locally**
 41 | 
 42 | Once you have added new files to the project, you can add them to your local repository, which you can do with the `git add` command. Let’s add the `-A` flag to add all changes that we have made:
 43 | 
 44 | ```
 45 | git add -A
 46 | ```
 47 | or
 48 | ```
 49 | git add .
 50 | ```
 51 | 
 52 | Next, we’ll want to record the changes that we made to the repository with the git commit command.
 53 | 
 54 | The commit message is an important aspect of your code contribution; it helps the other contributors fully understand the change you have made, why you made it, and how significant it is. Additionally, commit messages provide a historical record of the changes for the project at large, helping future contributors along the way.
 55 | 
 56 | If you have a very short message, you can record that with the `-m` flag and the message in quotes:
 57 | 
 58 | Example:
 59 | 
 60 | ```
 61 | git commit -m "Updated Readme.md"
 62 | ```
 63 | 
 64 | At this point you can use the `git push` command to push the changes to the current branch of your forked repository:
 65 | 
 66 | Example:
 67 | 
 68 | ```
 69 | git push --set-upstream origin new-branch
 70 | ```
 71 | 
 72 | ### **4. Update Local Repository**
 73 | 
 74 | While you are working on a project alongside other contributors, it is important for you to keep your local repository up-to-date with the project as you don’t want to make a pull request for code that will cause conflicts. To keep your local copy of the code base updated, you’ll need to sync changes.
 75 | 
 76 | We’ll first go over configuring a remote for the fork, then syncing the fork.
 77 | 
 78 | ### **5. Configure a Remote for the Fork**
 79 | 
 80 | Next, you’ll have to specify a new remote upstream repository for us to sync with the fork. This will be the original repository that you forked from. You’ll have to do this with the  `git remote add`  command.
 81 | 
 82 | ```
 83 | git remote add upstream https://github.com/DevTrackClub/DevTrackWebsite.git
 84 | ```
 85 | 
 86 | In this example, `upstream` is the shortname we have supplied for the remote repository since in terms of Git, “upstream” refers to the repository that you cloned from. If you want to add a remote pointer to the repository of a collaborator, you may want to provide that collaborator’s username or a shortened nickname for the shortname.
 87 | 
 88 | ### **6. Sync the Fork**
 89 | 
 90 | Once you have configured a remote that references the upstream and original repository on GitHub, you are ready to sync your fork of the repository to keep it up-to-date.
 91 | 
 92 | To sync your fork, from the directory of your local repository in a terminal window, you’ll have to use the `git fetch` command to fetch the branches along with their respective commits from the upstream repository. Since you used the shortname “upstream” to refer to the upstream repository, you’ll have to pass that to the command:
 93 | 
 94 | ```
 95 | git fetch upstream
 96 | ```
 97 | 
 98 | Switch to the local master branch of our repository:
 99 | 
100 | ```
101 | git checkout master
102 | ```
103 | 
104 | You’ll now have to merge any changes that were made in the original repository’s master branch, that you will access through your local upstream/master branch, with your local master branch:
105 | 
106 | ```
107 | git merge upstream/master
108 | ```
109 | 
110 | ### **7. Create Pull Request**
111 | 
112 | At this point, you are ready to make a pull request to the original repository.
113 | 
114 | You should navigate to your forked repository, click on the Contribute button and Open a new PR ( Pull Request ).
115 | 


--------------------------------------------------------------------------------
/HACTOBERFEST.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center"> 🎃 HacktoberFest-2022 🎃</h1>
 2 | 
 3 | ![Opensource](https://img.shields.io/badge/openSource-%E2%9D%A4-blue) ![PR](https://img.shields.io/badge/PRs-welcome-green) ![hacktoberfest](https://img.shields.io/badge/Hacktoberfest-2022-red) ![friendly](https://img.shields.io/badge/beginner-friendly-l)
 4 | 
 5 | # What is HacktoberFest?
 6 | 
 7 | Hacktoberfest is a month long event where people are awarded for contributing to open source projects 🙌, and we're joining the party .Hosted by DigitalOcean for the 8th year in a row, Hacktoberfest encourages participation in giving back to the open source community by completing pull requests, participating in events, and donating to open source projects.
 8 | 
 9 | # More details
10 | 
11 | Hacktoberfest is open to everyone in our global community. Whether you’re a seasoned contributor or looking for projects to contribute to for the first time, you’re welcome to participate.
12 | 
13 | Pull requests can be made in any participating GitHub or GitLab hosted repository/project. Look for the 'hacktoberfest' topic to know if a repository/project is participating in Hacktoberfest. Pull requests must be approved by a maintainer of the repository/project to count.
14 | 
15 | You can sign up anytime between October 1 and October 31. Just be sure to sign up on the official Hacktoberfest website for your pull requests to count.
16 | 
17 | # Rules for participation
18 | 
19 | * Pull requests can be submitted to any opted-in repository on GitHub or GitLab.
20 | * The pull request must contain commits you made yourself.
21 | * If a maintainer reports your pull request as spam, it will not be counted toward your participation in Hacktoberfest.
22 | * If a maintainer reports behavior that’s not in line with the project’s code of conduct, you will be ineligible to participate.
23 | * To get a shirt, you must make four approved pull requests (PRs) on opted-in projects between October 1-31 in any time zone.
24 | * This year, the first 55,000 participants can earn a T-shirt.
25 | 
26 | # Quality Guidelines
27 | 
28 | * Pull requests that are automated e.g. scripted opening pull requests to remove whitespace / fix typos / optimize images.
29 | * Pull requests that are disruptive e.g. taking someone else's branch/commits and making a pull request.
30 | * Pull requests that are regarded by a project maintainer as a hindrance vs. helping.
31 | * Something that's clearly an attempt to simply +1 your pull request count for October.
32 | * Last but not least, one pull request to fix a typo is fine, but 5 pull requests to remove a stray whitespace is not.
33 | 
34 | ### Note
35 | 
36 | **A pull request is considered approved once it has an overall approving review from maintainers, or has been merged by maintainers, or has been given the 'hacktoberfest-accepted' label. A pull request with any label containing the word 'spam' or 'invalid' will be considered ineligible for Hacktoberfest.**
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 < Dev / Track >
 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 | <h1 align=center> DevTrack </h1>
 2 | 
 3 | **A Student centric club that aspires to help and encourage students to build projects** <br>
 4 | **This repo is of our official website, [DEVTRACK](https://devtrack.tech)**
 5 | 
 6 | 
 7 | <p align="center">
 8 |   <a href="https://github.com/DevTrackClub/DevTrackWebsite/issues"><img src="https://img.shields.io/github/issues/DevTrackClub/DevTrackwebsite.svg?style=for-the-badge&logo=appveyor" /></a>&nbsp;&nbsp;
 9 |     <a href="https://github.com/DevTrackClub/DevTrackwebsite/fork"><img src="https://img.shields.io/github/forks/DevTrackClub/DevTrackwebsite.svg?style=for-the-badge&logo=appveyor" /></a>&nbsp;&nbsp;
10 |   <a href="#"><img src="https://img.shields.io/github/stars/DevTrackClub/DevTrackwebsite.svg?style=for-the-badge&logo=appveyor" /></a>&nbsp;&nbsp;
11 |   <a href="https://github.com/DevTrackClub/DevTrackwebsite/blob/master/LICENSE"><img src="https://img.shields.io/github/license/DevTrackClub/DevTrackwebsite.svg?style=for-the-badge&logo=appveyor" /></a>&nbsp;&nbsp;
12 |   </p>
13 |   
14 | <p align="center"> 
15 |   <a href="#"><img src="https://forthebadge.com/images/badges/built-by-developers.svg" /></a>&nbsp;&nbsp;
16 |   <a href="#"><img src="https://forthebadge.com/images/badges/built-with-love.svg" /></a>&nbsp;&nbsp;
17 | </p>
18 | 
19 | # How to start
20 | 
21 | * It's easy, all you need to know is basic html, css and js to work on this repo.
22 | * I am attaching few links that you could refer to.
23 |   * [Refer here for getting the basics](https://www.w3schools.com/)
24 |   * [Video tutorial](https://scrimba.com/learn/htmlandcss)
25 |   * [Another tutorial](https://scrimba.com/learn/learnjavascript)
26 | * That's it, you are good to fork.
27 | 
28 | ## Hacktoberfest 2022 Update
29 | 
30 | **See full details and guidelines on**
31 |   * [Hacktober cheat sheet](https://github.com/DevTrackClub/DevTrackWebsite/blob/main/HACTOBERFEST.md) 
32 |   * [Official website](https://hacktoberfest.digitalocean.com/)
33 |   
34 | <h1 align=center> How to Contribute 🤔 </h1>
35 | 
36 | * Look out for the issues in the issues section.
37 | * If you find a bug or you can enhance the existing code then open a issue and the following.
38 |   1. What's the problem with the existing code. (necessary screenshot along with it could do much better)
39 |   2. What are you planning to do.
40 | * Once done, you can follow these [instructions](https://github.com/DevTrackClub/DevTrackWebsite/blob/main/GITHUB.MD) to do a pull request (Important).
41 | 
42 | ## Here are the steps to make a contribution 👣
43 | 
44 | - [x] Take a look at [Contributing Guide](https://github.com/DevTrackClub/DevTrackWebsite/blob/main/CONTRIBUTING.md) (Necessary)
45 | - [x] Look out the issue section for any new issues. If you can do it, then ask to assign it to you. (**Note:** It's **goodToFirst**)
46 | - [x] If you find a bug or you wanna enhance the code then create an issue for making any change to code. Once the issue is approved you can make a change.
47 | - [x] Pull latest change from upstream branch before starting the changing code.
48 | - [x] Mention what you have changed with relevant **screenshots**.
49 | - [x] Add your **issue number** along with your pull request.
50 | 
51 | # Congratulations!🤩🥳
52 | 
53 | Congratulation! You just made your first pull request and if it gets merged, you can view it using this link [https://hacktoberfest.com](https://hacktoberfest.com)
54 | 
55 | # Contributors 🤩👩‍💻👨‍💻
56 | Kudos to all our contributors. This wouldn't be be possible without you guys. 🎉👏
57 | 
58 | <!-- readme: contributors -start -->
59 | <a href="https://github.com/DevTrackClub/DevTrackWebsite/graphs/contributors">
60 |   <img src="https://contrib.rocks/image?repo=DevTrackClub/DevTrackWebsite" />
61 | </a>
62 | <!-- readme: contributors -end -->
63 | 


--------------------------------------------------------------------------------
/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevTrackClub/DevTrackWebsite/d4cd4be88f6f25a51f14d5d7348487adb95e9401/favicon.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 |    <head>
  5 |       <meta charset="UTF-8">
  6 |       <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |       <title>DEV/TRACK</title>
  9 |       <link rel="stylesheet" href="styles.css">
 10 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>
 11 |       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
 12 |       <link rel="icon" type="image/x-icon" href="favicon.png">
 13 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
 14 |       <!-- Global site tag (gtag.js) - Google Analytics -->
 15 |       <script async src="https://www.googletagmanager.com/gtag/js?id=G-DY377Z805P"></script>
 16 |       <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
 17 |    </head>
 18 |    <body>
 19 |       <!-- Srinidhi  https://github.com/Srinidhi182 --><section>
 20 |       <div id="home">
 21 |          <!-- <div class="topnav"></div>
 22 |          <nav>
 23 |              <div class="navitem">
 24 |                  <div class="item1 active">Home</div>
 25 |              </div>
 26 |              <div class="navitem">
 27 |                  <p>.</p>
 28 |                  <div class="item2"></div>
 29 |              </div>
 30 |              <div class="navitem">
 31 |                  <p>.</p>
 32 |                  <div class="item3"></div>
 33 |              </div>
 34 |              <div class="navitem">
 35 |                  <p>.</p>
 36 |                  <div class="item4"></div>
 37 |              </div>
 38 |          </nav> -->
 39 |          <div class="homewrap">
 40 |              <h1>DEV/TRACK</h1>
 41 |              <p style="font-family: Montserrat;">A  community driven programming and designing club, encouraging hackers to shape their ideas</p>
 42 |              
 43 |              </div>
 44 |             </section>
 45 |       <section>
 46 |          <div class="container">
 47 |             <div class="box">
 48 |                <span></span>
 49 |                <div class="content">
 50 |                   <h2 style="font-size: 2rem;">WHO ARE WE ?</h2>
 51 |                   <br><br>
 52 |                   <p style="font-family:Montserrat;font-size:18px">Dev/Track is our university's premiere student circle to ideate, innovate and 
 53 |                      implement various solutions to tackle real-world problems in different tracks including 
 54 |                      AI/ML, web3, Mobile App Development, and Web development. 
 55 |                      Our mission revolves around connecting enthusiastic minds seeking opportunities 
 56 |                      to collaborate and contribute. Dev/Track provides a forum for students to showcase 
 57 |                      their skills while building their repertoire and Resume.  
 58 |                      We aim to sculpt an environment to help students realize their potential and encourage them
 59 |                      to contribute to a broader tech eco-space.
 60 |                   </p>
 61 |                </div>
 62 |             </div>
 63 |             <div class="box">
 64 |                <span></span>
 65 |                <div class="content">
 66 |                   <h2 style="font-size: 2rem">WHAT WE DO</h2>
 67 |                   <br><br>
 68 |                   <p style="font-family:Montserrat;">We at Dev/track are dedicated to helping students upskill their stacks while diversifying
 69 |                      their portfolios.Each idea comes to life in the form of "Projects", each track at D/T has 
 70 |                      a set of projects under it led by a "Project Lead" under the guidance of a "Project Guide".<br> 
 71 |                      Working on various projects under Dev/Track instills a sense of responsibility among students
 72 |                      and gives them a taste of working in a tech eco-space.<br>The process of Development is held in
 73 |                      "cycles" with each cycle resulting in an addition to your repo. By the end of an academic year, 
 74 |                      students will have a sizable amount of contributions under their name and a sharp set of skills.
 75 |                      Experiences at DevTrack cultivate qualities like problem-solving, resourcefulness, collaboration,
 76 |                      and many more, which are considered very much essential in a workforce.
 77 |                      Ultimately Dev/track tries to prepare students for their eventual careers, careers that are 
 78 |                      more than just a job.
 79 |                   </p>
 80 |                </div>
 81 |             </div>
 82 |          </div>
 83 |          <!-- Adnan D3LTA   https://github.com/adnandelta/ -->
 84 |       </section>
 85 |       <section class="tracks-section" id="tracks" >
 86 |          <h1 class="trackh1">Tracks</h1>
 87 |       <div class="containerms">
 88 |          <div class="box">
 89 |            <span></span>
 90 |            <div class="content">
 91 |              <h2>  AI/ML </h2>
 92 |              <p>Procure, train, integrate and deploy innovative AI-Based solutions for problems of the past, present, and Future.</p>
 93 |              <a href="https://github.com/DevTrackClub/DevTrackWebsite">Visit Github</a>
 94 |            </div>
 95 |          </div>
 96 |          <div class="box">
 97 |             <span></span>
 98 |             <div class="content">
 99 |               <h2>Android Development</h2>
100 |               <p>The advent of technology has furthered the reach and accessibility of Mobile devices. This track is instrumental in providing solutions that are accessible to the masses</p>
101 |               <a href="https://github.com/DevTrackClub/DevTrackWebsite">Visit Github</a>
102 |             </div>
103 |           </div>
104 |          <div class="box">
105 |            <span></span>
106 |            <div class="content">
107 |              <h2>UI / UX</h2>
108 |              <p>A good UI goes a long way in attracting a user base to your projects. Provide engaging solutions that keep your user base invested in your applications.</p>
109 |              <a href="https://github.com/DevTrackClub/DevTrackWebsite">Visit Github</a>
110 |            </div>
111 |          </div>
112 |          <div class="box">
113 |             <span></span>
114 |             <div class="content">
115 |               <h2>WEB 2.0</h2>
116 |               <p>Being the most popular track in the market, Web 2.0 is still the go-to approach for most solutions. Build cutting-edge sites that solve more than just a problem.</p>
117 |               <a href="https://github.com/DevTrackClub/DevTrackWebsite">Visit Github</a>
118 |             </div>
119 |           </div>
120 |          <div class="box">
121 |            <span></span>
122 |            <div class="content">
123 |              <h2>WEB 3.0</h2>
124 |              <p>Provide secure, robust, and decentralized solutions for everyday problems. Adopt the WEB 3 paradigm in future-proof projects.</p>
125 |              <a href="https://github.com/DevTrackClub/DevTrackWebsite">Visit Github</a>
126 |            </div>
127 |          </div>
128 |        </div>
129 |       </section>
130 |       <!-- Sonal https://github.com/Sonaljothylingam -->
131 |       <section>
132 |          <div class="containersh">
133 |             <footer>
134 |                <h1 class="trackh1">FAQ</h1>
135 | 
136 |                <div class="container-fluid">
137 |                  
138 |                   <div class="accordion">
139 |                      <div class="icon"></div>
140 |                      <h5>Who are We?</h5>
141 |                   </div>
142 |                   <div class="panel">
143 |                      <p>We are Dev/Track, REVA University's premiere tech club focused on solving problems through projects that make a difference.</p>
144 |                   </div>
145 |                   <div class="accordion">
146 |                      <div class="icon"></div>
147 |                      <h5>How will Dev/Track help me?</h5>
148 |                   </div>
149 |                   <div class="panel">
150 |                      <p>By exploring various domains, Dev/Track helps you "Find your Track". Tracks that you can build your careers over.</p>
151 |                   </div>
152 |                   <div class="accordion">
153 |                      <div class="icon"></div>
154 |                      <h5>How do I join Dev/Track?</h5>
155 |                   </div>
156 |                   <div class="panel">
157 |                      <p> Applications are open! You can apply <a href="https://bit.ly/apDT">here.</a></p>
158 |                   </div>
159 |                   <div class="accordion">
160 |                      <div class="icon"></div>
161 |                      <h5>How many tracks are available at Dev/Track?</h5>
162 |                   </div>
163 |                   <div class="panel">
164 |                      <p>We have 5 tracks to choose from namely,
165 |                          AI/ML
166 |                          Web-dev
167 |                          App-dev
168 |                          Web3
169 |                          UI/UX</p>
170 |                   </div>
171 |                   <div class="accordion">
172 |                     <div class="icon"></div>
173 |                     <h5>What if I'm put on a track I'm not interested in?</h5>
174 |                  </div>
175 |                  <div class="panel">
176 |                     <p> Fret not fren, track listings keep cycling every project cycle. You'll get a taste of every track, diversifying your repo.</p>
177 |                  </div>
178 |                  <div class="accordion">
179 |                     <div class="icon"></div>
180 |                     <h5>I didn't make it into Dev/Track what now :(?</h5>
181 |                  </div>
182 |                  <div class="panel">
183 |                     <p>We have outreach groups for non-club members, we also plan to conduct large-scale events for everyone.</p>
184 |                  </div>
185 |                  <div class="accordion">
186 |                     <div class="icon"></div>
187 |                     <h5>What does "Track" mean?</h5>
188 |                  </div>
189 |                  <div class="panel">
190 |                     <p>Domains at Dev/Track are dubbed as "tracks". After all, they pave the path to your future.</p>
191 |                  </div>
192 |                  <div class="accordion">
193 |                     <div class="icon"></div>
194 |                     <h5>How do I reach out to your guys?</h5>
195 |                  </div>
196 |                  <div class="panel">
197 |                     <p>You can join our <a href="https://discord.gg/NF9NBwX37d">Discord server</a> or follow us on <a href="https://www.instagram.com/dev.track">Instagram</a>. You can always reach out to us at <a href="mailto:contact@devtrack.club">contact@devtrack.club</a>.</p>
198 |                  </div>
199 |                  <div class="accordion">
200 |                     <div class="icon"></div>
201 |                     <h5>Who decides what projects we work on?</h5>
202 |                  </div>
203 |                  <div class="panel">
204 |                     <p>Ideally, your project lead picks a project from the pool submissions received. But, Hey if you think you have an idea that makes a difference? you are more than welcome to share it with us.</p>
205 |                  </div>
206 |                  <div class="accordion">
207 |                     <div class="icon"></div>
208 |                     <h5>When do I get to see the projects?</h5>
209 |                  </div>
210 |                  <div class="panel">
211 |                     <p>At the end of each project cycle, our teams will exhibit their efforts in a project showcase.</p>
212 |                  </div>
213 |                      <div class="accordion">
214 |                     <div class="icon"></div>
215 |                     <h5>How will Dev/Track help my career prospects?</h5>
216 |                  </div>
217 |                  <div class="panel">
218 |                     <p>At Dev/Track you get to expand your network by working alongside smart and talented individuals. We have various collaborations planned, that'll come in handy when looking for a job.</p>
219 |                  </div>
220 |                </div>
221 |               
222 |             </footer>
223 |             <div class="so">
224 |                <div class="wrapper">
225 |                   <div class="button" >
226 |                      <div class="icon" id="fb" >
227 |                         <i class="fab fa-linkedin"></i>
228 |                      </div>
229 |                      <a style="text-decoration: none" href="https://www.linkedin.com/company/dev-track/">
230 |                      <span>LinkedIn</span></a>
231 |                   </div>
232 |                   <div class="button" >
233 |                      <div class="icon" id="tw">
234 |                         <i class="fab fa-twitter"></i>
235 |                      </div>
236 |                      <span>Twitter</span>
237 |                   </div>
238 |                   <div class="button">
239 |                      <div class="icon" id="ig">
240 |                         <i class="fab fa-instagram"></i>
241 |                      </div>
242 |                      <a style="text-decoration: none" href="https://instagram.com/dev.track?igshid=OGQ2MjdiOTE=">
243 |                      <span>Instagram</span></a>
244 |                   </div>
245 |                   <div class="button">
246 |                      <div class="icon" id="di">
247 |                         <i class="fab fa-discord"></i>
248 |                      </div>
249 |                      <span>Discord</span>
250 |                   </div>
251 |                </div>
252 |             </div>
253 |          </div>
254 |    
255 |          </div>
256 |          <div class="text-center p-4" style="color: white; text-align: center;margin: 40px; font-family: Arial, Helvetica, sans-serif;">
257 |             <span class="font-semibold text-cyan-500">&lt;/&gt; </span> with <span class="footer-heart">❤️</span> <span>by Team DevTrack</span>          
258 |           </div>
259 |       </section>
260 |       <button class="btn-go-top btn-hidden">&#11014</button>
261 |       <script src="index.js"></script>
262 |    </body>
263 | </html>
264 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | window.dataLayer = window.dataLayer || [];
  2 | function gtag() {
  3 | 	dataLayer.push(arguments);
  4 | }
  5 | gtag("js", new Date());
  6 | 
  7 | gtag("config", "G-DY377Z805P");
  8 | 
  9 | // 2nd part
 10 | var scene = new THREE.Scene();
 11 | var camera = new THREE.PerspectiveCamera(
 12 | 	62,
 13 | 	window.innerWidth / window.innerHeight,
 14 | 	0.1,
 15 | 	1000
 16 | );
 17 | var mouseX;
 18 | var mouseY;
 19 | document.addEventListener("mousemove", onMouseMove, false);
 20 | var renderer = new THREE.WebGLRenderer({ alpha: true });
 21 | renderer.setSize(window.innerWidth, window.innerHeight);
 22 | document.getElementById("home").appendChild(renderer.domElement); // Appending here
 23 | 
 24 | window.addEventListener("resize", function () {
 25 | 	camera.aspect = window.innerWidth / window.innerHeight;
 26 | 	camera.updateProjectionMatrix();
 27 | 	renderer.setSize(window.innerWidth, window.innerHeight);
 28 | });
 29 | 
 30 | var distance = Math.min(200, window.innerWidth / 4);
 31 | var geometry = new THREE.Geometry();
 32 | 
 33 | for (var i = 0; i < 1600; i++) {
 34 | 	var vertex = new THREE.Vector3();
 35 | 
 36 | 	// var theta = THREE.Math.randFloatSpread(360);
 37 | 	var theta = Math.acos(THREE.Math.randFloatSpread(2));
 38 | 	var phi = THREE.Math.randFloatSpread(360);
 39 | 
 40 | 	vertex.x = distance * Math.sin(theta) * Math.cos(phi);
 41 | 	vertex.y = distance * Math.sin(theta) * Math.sin(phi);
 42 | 	vertex.z = distance * Math.cos(theta);
 43 | 
 44 | 	geometry.vertices.push(vertex);
 45 | }
 46 | var particles = new THREE.Points(
 47 | 	geometry,
 48 | 	new THREE.PointsMaterial({ color: 0xa020f0, size: 2 })
 49 | );
 50 | particles.boundingSphere = 50;
 51 | 
 52 | var renderingParent = new THREE.Group();
 53 | renderingParent.add(particles);
 54 | 
 55 | var resizeContainer = new THREE.Group();
 56 | resizeContainer.add(renderingParent);
 57 | scene.add(resizeContainer);
 58 | 
 59 | camera.position.z = 400;
 60 | 
 61 | var animate = function () {
 62 | 	requestAnimationFrame(animate);
 63 | 	renderer.render(scene, camera);
 64 | };
 65 | var myTween;
 66 | function onMouseMove(event) {
 67 | 	if (myTween) myTween.kill();
 68 | 
 69 | 	mouseX = (event.clientX / window.innerWidth) * 2 - 1;
 70 | 	mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
 71 | 	myTween = gsap.to(particles.rotation, {
 72 | 		duration: 0.1,
 73 | 		x: mouseY * -1,
 74 | 		y: mouseX,
 75 | 	});
 76 | 	//particles.rotation.x = mouseY*-1;
 77 | 	//particles.rotation.y = mouseX;
 78 | }
 79 | animate();
 80 | var animProps = { scale: 1, xRot: 0, yRot: 0 };
 81 | if (window.innerWidth <= 750) {
 82 | 	gsap.to(animProps, {
 83 | 		duration: 10,
 84 | 		scale: 2.5,
 85 | 		repeat: -1,
 86 | 		yoyo: true,
 87 | 		ease: "sine",
 88 | 		onUpdate: function () {
 89 | 			renderingParent.scale.set(
 90 | 				animProps.scale,
 91 | 				animProps.scale,
 92 | 				animProps.scale
 93 | 			);
 94 | 		},
 95 | 	});
 96 | } else {
 97 | 	gsap.to(animProps, {
 98 | 		duration: 7,
 99 | 		scale: 1.5,
100 | 		repeat: -1,
101 | 		yoyo: true,
102 | 		ease: "sine",
103 | 		onUpdate: function () {
104 | 			renderingParent.scale.set(
105 | 				animProps.scale,
106 | 				animProps.scale,
107 | 				animProps.scale
108 | 			);
109 | 		},
110 | 	});
111 | }
112 | 
113 | gsap.to(animProps, {
114 | 	duration: 110,
115 | 	xRot: Math.PI * 2,
116 | 	yRot: Math.PI * 5,
117 | 	repeat: -1,
118 | 	yoyo: true,
119 | 	ease: "none",
120 | 	onUpdate: function () {
121 | 		renderingParent.rotation.set(animProps.xRot, animProps.yRot, 0);
122 | 	},
123 | });
124 | 
125 | // 3rd part
126 | window.onscroll = function () {
127 | 	navfunction();
128 | };
129 | 
130 | function navfunction() {
131 | 	var winScroll =
132 | 		document.body.scrollTop || document.documentElement.scrollTop;
133 | 	let height =
134 | 		document.documentElement.scrollHeight -
135 | 		document.documentElement.clientHeight;
136 | 	let trackHeight = document.getElementById("tracks").scrollHeight - 60;
137 | 	let teamHeight =
138 | 		document.getElementById("team").offsetTop -
139 | 		document.getElementById("team").scrollTop +
140 | 		document.getElementById("team").clientTop -
141 | 		60;
142 | 	let faqHeight =
143 | 		document.getElementById("FAQ").offsetTop -
144 | 		document.getElementById("FAQ").scrollTop +
145 | 		document.getElementById("FAQ").clientTop -
146 | 		560;
147 | 	let footer =
148 | 		document.getElementById("footer").offsetTop -
149 | 		document.getElementById("footer").scrollTop +
150 | 		document.getElementById("footer").clientTop -
151 | 		460;
152 | 	// console.log(trackHeight,winScroll);
153 | 	if (winScroll >= trackHeight) {
154 | 		document.getElementsByClassName("item2")[0].classList.add("active");
155 | 		document.getElementsByClassName("item2")[0].innerHTML = "Tracks";
156 | 		document.getElementsByClassName("item1")[0].innerHTML = "";
157 | 		document.getElementsByClassName("item3")[0].innerHTML = "";
158 | 		document.getElementsByClassName("item4")[0].innerHTML = "";
159 | 		document.getElementsByClassName("item1")[0].classList.remove("active");
160 | 		document.getElementsByClassName("item3")[0].classList.remove("active");
161 | 		document.getElementsByClassName("item4")[0].classList.remove("active");
162 | 	}
163 | 	if (winScroll < trackHeight) {
164 | 		document.getElementsByClassName("item1")[0].classList.add("active");
165 | 		document.getElementsByClassName("item2")[0].classList.remove("active");
166 | 		document.getElementsByClassName("item3")[0].classList.remove("active");
167 | 		document.getElementsByClassName("item4")[0].classList.remove("active");
168 | 		document.getElementsByClassName("item2")[0].innerHTML = "";
169 | 		document.getElementsByClassName("item3")[0].innerHTML = "";
170 | 		document.getElementsByClassName("item4")[0].innerHTML = "";
171 | 		document.getElementsByClassName("item1")[0].innerHTML = "Home";
172 | 	}
173 | 	if (winScroll >= teamHeight) {
174 | 		document.getElementsByClassName("item3")[0].classList.add("active");
175 | 		document.getElementsByClassName("item3")[0].innerHTML = "Sponsors";
176 | 		document.getElementsByClassName("item1")[0].innerHTML = "";
177 | 		document.getElementsByClassName("item2")[0].innerHTML = "";
178 | 		document.getElementsByClassName("item4")[0].innerHTML = "";
179 | 		document.getElementsByClassName("item1")[0].classList.remove("active");
180 | 	}
181 | 	if (winScroll >= faqHeight) {
182 | 		document.getElementsByClassName("item4")[0].classList.add("active");
183 | 		document.getElementsByClassName("item4")[0].innerHTML = "FAQ";
184 | 		document.getElementsByClassName("item1")[0].innerHTML = "";
185 | 		document.getElementsByClassName("item2")[0].innerHTML = "";
186 | 		document.getElementsByClassName("item3")[0].innerHTML = "";
187 | 		document.getElementsByClassName("item1")[0].classList.remove("active");
188 | 	}
189 | 	if (winScroll >= footer) {
190 | 		// document.getElementsByClassName('item4')[0].classList.add('active');
191 | 		document.getElementsByClassName("item4")[0].innerHTML = "";
192 | 		document.getElementsByClassName("item1")[0].innerHTML = "";
193 | 		document.getElementsByClassName("item2")[0].innerHTML = "";
194 | 		document.getElementsByClassName("item3")[0].innerHTML = "";
195 | 		document.getElementsByClassName("item1")[0].classList.remove("active");
196 | 	}
197 | }
198 | 
199 | // 4th part
200 | const accordionItemHeaders = document.querySelectorAll(".accordion");
201 | 
202 | accordionItemHeaders.forEach((accordionItemHeader) => {
203 | 	accordionItemHeader.addEventListener("click", (event) => {
204 | 		accordionItemHeader.classList.toggle("active");
205 | 		const accordionItemBody = accordionItemHeader.nextElementSibling;
206 | 		if (accordionItemHeader.classList.contains("active")) {
207 | 			accordionItemBody.style.maxHeight =
208 | 				accordionItemBody.scrollHeight + "px";
209 | 		} else {
210 | 			accordionItemBody.style.maxHeight = 0;
211 | 		}
212 | 	});
213 | });
214 | 
215 | // Go top btn
216 | function goTopBtn(btn){
217 | 	const scrollBtn = document.querySelector(btn);
218 | 
219 | 	window.addEventListener("scroll", e =>{
220 | 		let scrollTop = window.pageYOffset||document.scrollTop;
221 | 		if(scrollTop > 800){
222 | 			scrollBtn.classList.remove("btn-hidden");
223 | 		} else{
224 | 			scrollBtn.classList.add("btn-hidden");
225 | 		}
226 | 	})
227 | 	document.addEventListener("click", e =>{
228 | 		if (e.target.matches(btn)) {
229 | 			window.scrollTo({
230 | 				behavior:"smooth",
231 | 				top:0,
232 | 			})
233 | 		}
234 | 	})
235 | }
236 | 
237 | document.addEventListener("DOMContentLoaded", (e)=>{
238 | 	goTopBtn(".btn-go-top");
239 | })
240 | 
241 | let alreadyOnCard = false;
242 | let isPlaying = false;
243 | let lastCardFront = true;
244 | let lastCard;
245 | 
246 | function flip(){
247 |     if(isPlaying) return;
248 |     let elements = document.querySelectorAll(":hover");
249 |     for(let element of elements) if (element.classList.contains("card-flip")){
250 |         if(isPlaying || alreadyOnCard) return;
251 |         isPlaying = true;
252 |         alreadyOnCard = true;
253 |         anime({
254 |             targets: element,
255 |             rotateY: {value: '+=180', delay: 200},
256 |             easing: 'easeInOutSine',
257 |             duration: 400,
258 |             complete: function(anim){
259 |             isPlaying = false;
260 |             lastCardFront=false;
261 |             lastCard=element;
262 |             }
263 |         });
264 |         return;
265 |     }
266 |     alreadyOnCard = false;
267 |     if(!lastCardFront && !isPlaying){
268 |         isPlaying=true;
269 |         anime({
270 |             targets: lastCard,
271 |             rotateY: {value: '+=180', delay: 200},
272 |             easing: 'easeInOutSine',
273 |             duration: 400,
274 |             complete: function(anim){
275 |             isPlaying = false;
276 |             lastCardFront = true;
277 |             }
278 |         });
279 |     }
280 | }
281 | 
282 | document.addEventListener('mousemove', flip);


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
   1 | 
   2 | 
   3 | 
   4 | 
   5 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Finlandica:ital@1&display=swap');
   6 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
   7 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100,500,300;400&display=swap');
   8 | @property --rotate {
   9 |   syntax: "<angle>";
  10 |   initial-value: 132deg;
  11 |   inherits: false;
  12 | }
  13 | 
  14 | 
  15 | 
  16 | body {
  17 |     margin: 0;
  18 |     padding: 0;
  19 |     overflow-x: hidden;
  20 |     background: linear-gradient(to right, #0b0028, #2e012a);
  21 | }
  22 | 
  23 | canvas {
  24 |     width: 100%;
  25 |     height: 100%;
  26 |     background: linear-gradient(to right, #0b0028, #2e012a);
  27 | }
  28 | 
  29 | body::-webkit-scrollbar {
  30 |     width: 5px;
  31 | }
  32 | 
  33 | body::-webkit-scrollbar-track {
  34 |     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  35 | }
  36 | 
  37 | body::-webkit-scrollbar-thumb {
  38 |     background-color: #2c012a;
  39 |     border-bottom-right-radius: 5px;
  40 |     /* outline: 1px solid rgb(0, 128, 36); */
  41 | }
  42 | 
  43 | .homewrap {
  44 |     position: absolute;
  45 |     top: 0;
  46 |     left: 0;
  47 |     height: 100vh;
  48 |     width: 100vw;
  49 |     display: flex;
  50 |     align-items: center;
  51 |     justify-content: center;
  52 |     flex-direction: column;
  53 |     padding-top: 30px;
  54 |     z-index: 2;
  55 | }
  56 | 
  57 | .scaleanim {
  58 |     transform: scale(5.5);
  59 |     animation-name: scaling;
  60 |     animation-duration: 1s;
  61 |     animation-fill-mode: forwards;
  62 | }
  63 | 
  64 | @keyframes scaling {
  65 |     from {
  66 |         transform: scale(1);
  67 |     }
  68 | 
  69 |     to {
  70 |         transform: scale(19.5);
  71 |     }
  72 | }
  73 | 
  74 | h1 {
  75 |     color: white;
  76 |     font-family: Arial, Helvetica, sans-serif;
  77 |     letter-spacing: 6px;
  78 |     font-size: 80px;
  79 |     font-weight: 100;
  80 | }
  81 | 
  82 | h1::before {
  83 |     content: "2023";
  84 |     position: absolute;
  85 |     color: rgba(255, 255, 255, 0.146);
  86 |     font-size: 150px;
  87 |     margin-top: -50px;
  88 |     left: calc(50% - 160px);
  89 |     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  90 |     font-weight: 400;
  91 |     text-align: center;
  92 | }
  93 | 
  94 | .homewrap>p {
  95 |     color: white;
  96 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  97 |     width: 35vw;
  98 |     font-size: 15px;
  99 |     text-align: center;
 100 |     margin-top: 10px;
 101 | }
 102 | 
 103 | 
 104 | 
 105 | nav {
 106 |     position: fixed;
 107 |     left: 0;
 108 |     max-width: 10vw;
 109 |     height: 50vw;
 110 |     display: flex;
 111 |     flex-direction: column;
 112 |     align-items: flex-start;
 113 |     justify-content: center;
 114 |     padding-left: 30px;
 115 |     z-index: 5;
 116 |     /* backdrop-filter: blur(3px); */
 117 |     /* background-color: #a020f073; */
 118 | }
 119 | 
 120 | .navitem>div {
 121 |     height: 50px;
 122 |     border-left: 1px solid rgba(81, 81, 218, 0.718);
 123 |     margin-top: 0px;
 124 |     padding-left: 5px;
 125 |     margin-left: 5px;
 126 |     cursor: pointer;
 127 |     display: flex;
 128 |     align-items: center;
 129 |     margin-top: -40px;
 130 |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 131 |     font-size: 15px;
 132 |     color: rgba(255, 255, 255, 0.448);
 133 | }
 134 | 
 135 | .navitem>p {
 136 |     color: white;
 137 |     font-size: 36px;
 138 | }
 139 | 
 140 | #home {
 141 |     overflow: hidden;
 142 | }
 143 | 
 144 | .navitem>p {
 145 |     margin-top: -25px;
 146 |     color: white;
 147 |     margin-left: 1px;
 148 | }
 149 | 
 150 | /* .navitem:hover{
 151 |     cursor: pointer;
 152 | } */
 153 | .active {
 154 |     border-left: 2px solid rgba(81, 81, 218, 0.718) !important;
 155 | }
 156 | 
 157 | .wrap1{
 158 |     margin-left: 30vw;
 159 |     display: flex;
 160 |     flex-direction: column;
 161 |     /* align-items: center; */
 162 |     height: 40vh;
 163 |     margin-top: 10vh;
 164 |     justify-content: space-between;
 165 | }
 166 | .wrap1>p{
 167 |     font-family: Arial, Helvetica, sans-serif;
 168 |     font-size: 16px;
 169 |     color: rgb(189, 205, 224);
 170 |     line-height: 40px;
 171 | }
 172 | .wrap1>p>span{
 173 |     /* margin-left: 5px; */
 174 |     color: rgb(230, 230, 156);
 175 |     font-size: 15px;
 176 | }
 177 | 
 178 | @media only screen and (max-width: 800px) {
 179 |   h1 {
 180 |     color: white;
 181 |     font-family: Arial, Helvetica, sans-serif;
 182 |     letter-spacing: 6px;
 183 |     font-size: 55px;
 184 |     font-weight: 100;
 185 | }
 186 | 
 187 | h1::before {
 188 |     content: "2023";
 189 |     position: absolute;
 190 |     color: rgba(255, 255, 255, 0.146);
 191 |     font-size: 150px;
 192 |     margin-top: -50px;
 193 |     left: calc(50% - 160px);
 194 |     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 195 |     font-weight: 400;
 196 |     text-align: center;
 197 | }
 198 |   .content{
 199 |     padding: 0;
 200 | 
 201 |   }
 202 |  .container .box{
 203 | 
 204 |   width: 520px;
 205 |   height: 900px;
 206 |   color: rgb(88, 6, 6);
 207 |    
 208 | }
 209 |   .container .box .content{
 210 |     font-size: 0.85em;
 211 |     color: fff;
 212 |     margin-bottom: 10px;
 213 |     line-height: 1em;
 214 |     word-wrap: normal;
 215 |     font-family: Georgia;
 216 |      position: relative;
 217 |    z-index: 10;
 218 |    padding: 10px 0px;
 219 |    align-content: center;
 220 |  }
 221 |  /* text aligment issue fix */
 222 |  .container .box .content h2{
 223 |   white-space: nowrap;
 224 |   font-size: 0.85em;
 225 |   font-family: 'Poppins', 'Roboto', Nunito;
 226 | 
 227 | }
 228 | .containersh .container-fluid{
 229 |   width: 80%;
 230 | }
 231 | 
 232 | 
 233 | 
 234 |   
 235 | }
 236 | 
 237 | /* SRINIDHI CSS */
 238 | *{
 239 |     margin: 0;
 240 |     padding: 0;
 241 |     box-sizing: border-box;
 242 |     font-family:'Franklin Gothic Medium';
 243 | }
 244 |  body{
 245 |   
 246 |     justify-content: center;
 247 |     align-items: center;
 248 |     min-height: 100vh;
 249 |     background: #111;
 250 |     background: linear-gradient(to right, #0b0028, #2e012a);
 251 | 
 252 |  }
 253 |  .container{
 254 |     position: relative;
 255 |     display: flex;
 256 |     justify-content: center;
 257 |     align-items: center;
 258 |     padding: 40px 0;
 259 |     flex-wrap: wrap;
 260 |  }
 261 |  .container .box{
 262 |     position: relative; 
 263 |     width: 520px;
 264 |     height: 700px;
 265 |     color: #fff;
 266 |     background: #111;
 267 |     display: flex;
 268 |     justify-content: center;
 269 |     align-items: center;
 270 |     margin: 20px 30px;
 271 |     transition: 0.5s;    
 272 |  }
 273 |  .container .box:hover
 274 |  {
 275 |         transform: translateY(-15px);
 276 |  }
 277 |  .container .box::before{
 278 |     content: '';
 279 |     position: absolute;
 280 |     top: 0;
 281 |     left: 0;
 282 |     width: 100%;
 283 |     height: 100%;
 284 |     background: linear-gradient(45deg,#be93d4,#710193);
 285 |  }
 286 |  .container .box::after{
 287 |     content: '';
 288 |     position: absolute;
 289 |     top: 0;
 290 |     left: 0;
 291 |     width: 100%;
 292 |     height: 100%;
 293 |     background: linear-gradient(45deg,#be93d4,#710193);
 294 |     filter: blur(15px);
 295 |  }
 296 |  .container .box:nth-child(2)::before,
 297 |  .container .box:nth-child(2)::after
 298 |  {
 299 |     background: linear-gradient(315deg,#be93d4,#8b008b);
 300 |  }
 301 |  .container .box span{
 302 |     position: absolute;
 303 |     top: 2px;
 304 |     left: 2px;
 305 |     right: 2px;
 306 |     bottom: 2px;
 307 |     background: rgba(0,0,0,0.6);
 308 |     z-index: 2;
 309 |  }
 310 |  container .box span::before{
 311 |     content: '';
 312 |     position: absolute;
 313 |     top: 0;
 314 |     left: 0;
 315 |     width: 50%;
 316 |     height: 100%;
 317 |     pointer-events:none;
 318 |  }
 319 |  .container .box .content
 320 |  {
 321 |     position: relative;
 322 |     z-index: 10;
 323 |     padding: 20px 40px;
 324 |     align-content: center;
 325 |  }
 326 |  .content .box .content h2
 327 |  {
 328 |     font-size: 4em;
 329 |     color: #fff;
 330 |     margin-bottom: 50px;
 331 |     padding-top: 10px;
 332 |  }
 333 |  .container .box .content p{
 334 |     font-size: 1.1em;
 335 |     color: fff;
 336 |     margin-bottom: 30px;
 337 |     line-height: 1.4em;
 338 |     word-wrap: normal;
 339 |     font-family: Georgia;
 340 |  }
 341 | 
 342 |  /* CSS for footer heart */
 343 | 
 344 | @keyframes footer-heart-beat {
 345 |   0% {
 346 |     transform: scale(1);
 347 |   }
 348 |   69% {
 349 |     transform: scale(1.23);
 350 |   }
 351 |   100% {
 352 |     transform: scale(1);
 353 |   }
 354 | }
 355 | 
 356 | .footer-heart{
 357 |   display: inline-block;
 358 | }
 359 | 
 360 | .footer-heart:hover{
 361 |   animation-name: footer-heart-beat;
 362 |   animation-duration: 800ms;
 363 |   animation-timing-function: ease-in-out;
 364 |   animation-iteration-count: infinite;
 365 |   cursor: default;
 366 | }
 367 | 
 368 | 
 369 |  /*adnaa css*/
 370 |  
 371 | :root {
 372 |     --card-height: 300px;
 373 |     --card-width: calc(var(--card-height) / 1.5);
 374 |   }
 375 |    .card {
 376 |     background: #191c29;
 377 |     width: var(--card-width);
 378 |     height: var(--card-height);
 379 |     padding: 3px;
 380 |     position: relative;
 381 |     border-radius: 6px;
 382 |     justify-content: center;
 383 |     align-items: center;
 384 |     text-align: left;
 385 |     display: block;
 386 |     font-size: 16px;
 387 |     padding-top: 12px;
 388 |     padding-left: 12px;
 389 |     color: rgba(216, 228, 233, 0);
 390 |     cursor: pointer;
 391 |     
 392 |   }
 393 |   
 394 |   .card:hover {
 395 |     color: rgb(88 199 250 / 100%);
 396 |     transition: color 1s;
 397 |   }
 398 |   .card:hover:before, .card:hover:after {
 399 |     animation: none;
 400 |     opacity: 0;
 401 |   }
 402 |   
 403 |   
 404 |   .card::before {
 405 |     content: "";
 406 |     width: 104%;
 407 |     height: 102%;
 408 |     border-radius: 8px;
 409 |     background-image: linear-gradient(
 410 |       var(--rotate)
 411 |       , #5ddcff, #3c67e3 43%, #4e00c2);
 412 |       position: absolute;
 413 |       z-index: -1;
 414 |       top: -1%;
 415 |       left: -2%;
 416 |       animation: spin 2.5s linear infinite;
 417 |   }
 418 |   
 419 |   .card::after {
 420 |     position: absolute;
 421 |     content: "";
 422 |     top: calc(var(--card-height) / 6);
 423 |     left: 0;
 424 |     right: 0;
 425 |     z-index: -1;
 426 |     height: 100%;
 427 |     width: 100%;
 428 |     margin: 0 auto;
 429 |     transform: scale(0.8);
 430 |     filter: blur(calc(var(--card-height) / 6));
 431 |     background-image: linear-gradient(
 432 |       var(--rotate)
 433 |       , #5ddcff, #3c67e3 43%, #4e00c2);
 434 |       opacity: 1;
 435 |     transition: opacity .5s;
 436 |     animation: spin 2.5s linear infinite;
 437 |   }
 438 |   
 439 |   @keyframes spin {
 440 |     0% {
 441 |       --rotate: 0deg;
 442 |     }
 443 |     100% {
 444 |       --rotate: 360deg;
 445 |     }
 446 |   }
 447 |   
 448 |   .card:hover .track-p{
 449 |     visibility:hidden ;
 450 |    
 451 |   }
 452 |   .track-p {
 453 |     position:absolute;
 454 |     display: inline;
 455 |     
 456 |     bottom:30%;
 457 |     top: 40%;
 458 |     color: #c2c8dd;
 459 |     font-size: 24px;
 460 |     text-decoration: none;
 461 |     font-family: sans-serif;
 462 |     font-weight: bold;
 463 |     
 464 |   
 465 |     margin: auto;
 466 |     text-align: center;
 467 |    
 468 |   }
 469 |   .trackh1{
 470 |     color: #fff;
 471 |    
 472 |       font-weight: 100;
 473 |     text-align: center;
 474 |     text-transform: uppercase;
 475 |     font-size: 48px;
 476 |   
 477 |   }
 478 |   /* SONAL CSS */
 479 |  footer{
 480 |     background: transparent;
 481 |   
 482 |    }
 483 |    .container-fluid{
 484 |     font-family: 'Baloo Bhai 2', cursive;
 485 |     background: transparent;
 486 |   
 487 |     width: 40%;
 488 |      margin: 0 auto;
 489 |      margin-top: 100px;
 490 |    }
 491 |    p{
 492 |      color: white; /*This is the color of the answers and can change when wanted*/
 493 |    }
 494 |    .container-fluid h1{
 495 |      color: #9D00FF; /*This is the color of the heading FAQs and can change when wanted*/
 496 |      position: relative;
 497 |      width: 23rem;
 498 |    }
 499 |    /* This is the dash which comes under h2 (add if needed)*/
 500 |    /*.container-fluid h1::after{
 501 |      content: " ";
 502 |      position: absolute;
 503 |      bottom: 0;
 504 |      right: 300px;
 505 |      width:67px;
 506 |      height: 2px;
 507 |      background-color: #9D00FF;
 508 |    }*/
 509 |    .accordion{
 510 |      width:100%;
 511 |      border:2px solid white; /*bordercolor is white of the questions*/
 512 |      cursor: pointer;
 513 |      padding:3px;
 514 |      background-color: rgba(193, 210, 236, 0.13);
 515 |      border-radius: 50px;
 516 |      display: flex;
 517 |      margin: 10px 0;
 518 |      align-items: center;
 519 |      text-align: left;
 520 |    }
 521 |    .accordion .icon{
 522 |      margin: 0 15px 0 0;
 523 |      width: 50px; 
 524 |      border-radius: 50%;
 525 |      float: left;
 526 |      background:  8px 5px white;
 527 |    }
 528 |    .accordion .active .icon{
 529 |      background:8px 5px black ;
 530 |    }
 531 |    .accordion .icon:after {
 532 |      content: '\002B'; /*+ sign*/
 533 |      font-weight: 1000;
 534 |      font-size: 30px;
 535 |      margin-left: 15px;/*placement of icon inside the white circle*/
 536 |      transition: all .5s ease;
 537 |      color: black;
 538 |    }
 539 |    .active .icon:after {
 540 |      content: '\2212';
 541 |      font-size: 30px;
 542 |      font-weight: bolder;
 543 |      color: black;
 544 |    }
 545 |    
 546 |    .accordion h5{
 547 |      font-size: 22px; /*font size of questions*/
 548 |      margin: 0;
 549 |      padding: 3px 0 0 0;
 550 |      font-weight: normal;
 551 |      color: white; /*Color of questions*/
 552 |    }
 553 |    .panel{
 554 |      padding: 0 15px;
 555 |      border-left: 1px solid white;
 556 |      margin-left: 25px;
 557 |      font-size: 14px;
 558 |      text-align: justify;
 559 |      overflow: hidden;
 560 |      max-height: 0; /*height of answers*/
 561 |      transition: all .5s ease-in;
 562 |    
 563 |    }
 564 |   .containersh{
 565 |     position: relative;
 566 |     justify-content: center;
 567 |     align-items: center;
 568 |     padding: 40px 0;
 569 |    }
 570 | 
 571 |   .so {
 572 |        margin: 0;
 573 |        padding: 0;
 574 |        box-sizing: border-box;
 575 |        font-family: 'Poppins', sans-serif;
 576 |      }
 577 |      .so .wrapper{
 578 |        padding-left: 625px;
 579 |        overflow:auto;
 580 |        background: transparent;
 581 | 
 582 |        padding-top: 50px;
 583 |        padding-bottom: 50px;
 584 |      }
 585 |      .wrapper .button{
 586 |        display: inline-block;
 587 |        height: 60px;
 588 |        width: 60px;
 589 |        float: left;
 590 |        margin: 0 5px;
 591 |        overflow: hidden;
 592 |        background:rgba(255, 255, 255, .15);
 593 |        backdrop-filter: saturate(180%) blur(10px);
 594 |        border-radius: 50px;
 595 |        cursor: pointer;
 596 |        box-shadow: 0px 10px 10px rgba(9, 9, 9, 0.1);
 597 |        transition: all 0.3s ease-out;
 598 |      }
 599 |      .wrapper .button:hover{
 600 |        width: 200px;
 601 |      }
 602 |      .wrapper .button .icon{
 603 |        display: inline-block;
 604 |        height: 60px;
 605 |        width: 60px;
 606 |        text-align: center;
 607 |        border-radius: 50px;
 608 |        box-sizing: border-box;
 609 |        line-height: 60px;
 610 |        transition: all 0.3s ease-out;
 611 |        
 612 |      }
 613 |      .wrapper .button:nth-child(1):hover .icon{
 614 |        background: #4267B2;
 615 |      }
 616 |      .wrapper .button:nth-child(2):hover .icon{
 617 |        background: #1DA1F2;
 618 |      }
 619 |      .wrapper .button:nth-child(3):hover .icon{
 620 |        background: #E1306C;
 621 |      }
 622 |      .wrapper .button:nth-child(4):hover .icon{
 623 |        background: #A020F0;
 624 |      }
 625 |      
 626 |      .so .wrapper .button .icon i{
 627 |        font-size: 25px;
 628 |        line-height: 60px;
 629 |        transition: all 0.3s ease-out;
 630 |      }
 631 |      .wrapper .button:hover .icon i{
 632 |        color: white;
 633 |      }
 634 |      .so .wrapper .button span{
 635 |        font-size: 20px;
 636 |        font-weight: 500;
 637 |        line-height: 60px;
 638 |        margin-left: 10px;
 639 |        transition: all 0.3s ease-out;
 640 |      }
 641 |      .so .wrapper .button:nth-child(1) span{
 642 |        color: #4267B2;
 643 |      }
 644 |      .wrapper .button:nth-child(2) span{
 645 |        color: #1DA1F2;
 646 |      }
 647 |      .wrapper .button:nth-child(3) span{
 648 |        color: #E1306C;
 649 |      }
 650 |      .wrapper .button:nth-child(4) span{
 651 |        color: #A020F0;
 652 |      }
 653 |       #fb
 654 |      {
 655 |          color: #006fff;
 656 |          text-shadow: 0 0 30px #006fff;
 657 |      }
 658 |      #ig
 659 |      {
 660 |          color: #ff5f40;
 661 |          text-shadow: 0 0 30px #ff5f40;
 662 |      }
 663 |      #tw
 664 |      {
 665 |          color: #00acff;
 666 |          text-shadow: 0 0 30px #00acff;
 667 |      }
 668 |      #di
 669 |      {
 670 |          color: #9D00FF;
 671 |          text-shadow: 0 0 30px #9D00FF;
 672 |      }
 673 |    @media only screen and (max-width:1062px){
 674 | 
 675 |         .so .wrapper{
 676 |           padding-left: 25%;
 677 |           overflow:auto;
 678 |           padding-top: 50px;
 679 |           padding-bottom: 50px;
 680 |         }
 681 |       
 682 |     }
 683 | 
 684 |     /* CSS for heart in footer */
 685 |     @keyframes footer-heart-beat {
 686 |       0% {
 687 |         transform: scale(1);
 688 |       }
 689 |       69% {
 690 |         transform: scale(1.23);
 691 |       }
 692 |       100% {
 693 |         transform: scale(1);
 694 |       }
 695 |     }
 696 |     
 697 |     .footer-heart{
 698 |       display: inline-block;
 699 |     }
 700 |     
 701 |     .footer-heart:hover{
 702 |       animation-name: footer-heart-beat;
 703 |       animation-duration: 800ms;
 704 |       animation-timing-function: ease-in-out;
 705 |       animation-iteration-count: infinite;
 706 |       cursor: default;
 707 |     }
 708 |     
 709 | 
 710 | 
 711 |   
 712 | /* Go top btn styles */
 713 | 
 714 | .btn-go-top{
 715 |   position: fixed;
 716 |   bottom: 2vh;
 717 |   right: 2vh;
 718 |   width: 3.8rem;
 719 |   height: 3.8rem;
 720 |   font-size: 3rem;
 721 |   font-weight: bold;
 722 |   border: 0;
 723 |   outline: 0;
 724 |   background: none;
 725 |   color: white;
 726 |   cursor: pointer;
 727 |   transition: all 0.3s ease-out;
 728 | }
 729 | 
 730 | .btn-go-top:hover{
 731 |   color: rgb(67, 20, 184);
 732 | }
 733 | 
 734 | .btn-hidden{
 735 |   visibility: hidden;
 736 |   opacity: 0;
 737 | }
 738 | 
 739 | 
 740 | 
 741 | 
 742 | 
 743 | .containerms body
 744 | {
 745 |   display: flex;
 746 |   justify-content: center;
 747 |   align-items: center;
 748 |   min-height: 100vh;
 749 |   background: #1d061a
 750 | }
 751 | .containerms
 752 | {
 753 |   display: flex;
 754 |   justify-content: center;
 755 |   align-items: center;
 756 |   flex-wrap: wrap;
 757 |   padding: 40px 0;
 758 | }
 759 | 
 760 | .containerms .box
 761 | {
 762 |   position: relative;
 763 |   width: 320px;
 764 |   height: 400px;
 765 |   display: flex;
 766 |   justify-content: center;
 767 |   align-items: center;
 768 |   margin: 40px 30px;
 769 |   transition: 0.5s;
 770 | }
 771 | 
 772 | .containerms .box::before
 773 | {
 774 |   content:' ';
 775 |   position: absolute;
 776 |   top: 0;
 777 |   left: 50px;
 778 |   width: 50%;
 779 |   height: 100%;
 780 |   text-decoration: none;
 781 |   background: #fff;
 782 |   border-radius: 8px;
 783 |   transform: skewX(15deg);
 784 |   transition: 0.5s;
 785 | }
 786 | 
 787 | .containerms .box::after
 788 | {
 789 |   content:'';
 790 |   position: absolute;
 791 |   top: 0;
 792 |   left: 50;
 793 |   width: 50%;
 794 |   height: 100%;
 795 |   background: #fff;
 796 |   border-radius: 8px;
 797 |   transform: skewX(15deg);
 798 |   transition: 0.5s;
 799 |   filter: blur(30px);
 800 | }
 801 | 
 802 | .containerms .box:hover:before,
 803 | .containerms .box:hover:after
 804 | {
 805 |   transform: skewX(0deg);
 806 |   left: 20px;
 807 |   width: calc(100% - 90px);
 808 |   
 809 | }
 810 | 
 811 | .containerms .box:nth-child(1):before,
 812 | .containerms .box:nth-child(1):after
 813 | {
 814 |   background: linear-gradient(315deg, #ffbc00, #ff0058)
 815 | }
 816 | 
 817 | .containerms .box:nth-child(2):before,
 818 | .containerms .box:nth-child(2):after
 819 | {
 820 |   background: linear-gradient(315deg, #03a9f4, #ff0058)
 821 | }
 822 | 
 823 | .containerms .box:nth-child(3):before,
 824 | .containerms .box:nth-child(3):after
 825 | {
 826 |   background: linear-gradient(315deg, #4dff03, #00d0ff)
 827 | }
 828 | .containerms .box:nth-child(4):before,
 829 | .containerms .box:nth-child(4):after
 830 | {
 831 |   background: linear-gradient(315deg, #f203ff, #ffea00)
 832 | }
 833 | .containerms .box:nth-child(5):before,
 834 | .containerms .box:nth-child(5):after
 835 | {
 836 |   background: linear-gradient(315deg, #8103ff, #00f7ff)
 837 | }
 838 | .containerms .box span
 839 | {
 840 |   display: block;
 841 |   position: absolute;
 842 |   top: 0;
 843 |   left: 0;
 844 |   right: 0;
 845 |   bottom: 0;
 846 |   z-index: 5;
 847 |   pointer-events: none;
 848 | }
 849 | 
 850 | .containerms .box span::before
 851 | {
 852 |   content:'';
 853 |   position: absolute;
 854 |   top: 0;
 855 |   left: 0;
 856 |   width: 0;
 857 |   height: 0;
 858 |   border-radius: 8px;
 859 |   background: rgba(255, 255, 255, 0.1);
 860 |   backdrop-filter: blur(10px);
 861 |   opacity: 0;
 862 |   transition: 0.1s;  
 863 |   animation: animate 2s ease-in-out infinite;
 864 |   box-shadow: 0 5px 15px rgba(0,0,0,0.08)
 865 | }
 866 | 
 867 | .containerms .box:hover span::before
 868 | {
 869 |   top: -50px;
 870 |   left: 50px;
 871 |   width: 100px;
 872 |   height: 100px;
 873 |   opacity: 1;
 874 | }
 875 | 
 876 | .containerms .box span::after
 877 | {
 878 |   content:'';
 879 |   position: absolute;
 880 |   bottom: 0;
 881 |   right: 0;
 882 |   width: 100%;
 883 |   height: 100%;
 884 |   border-radius: 8px;
 885 |   background: rgba(255, 255, 255, 0.1);
 886 |   backdrop-filter: blur(10px);
 887 |   opacity: 0;
 888 |   transition: 0.5s;
 889 |   animation: animate 2s ease-in-out infinite;
 890 |   box-shadow: 0 5px 15px rgba(0,0,0,0.08);
 891 |   animation-delay: -1s;
 892 | }
 893 | 
 894 | .containerms .box:hover span:after
 895 | {
 896 |   bottom: -50px;
 897 |   right: 50px;
 898 |   width: 100px;
 899 |   height: 100px;
 900 |   opacity: 1;
 901 | }
 902 | 
 903 | @keyframes animate
 904 | {
 905 |   0%, 100%
 906 |   {
 907 |     transform: translateY(10px);
 908 |   }
 909 |   
 910 |   50%
 911 |   {
 912 |     transform: translate(-10px);
 913 |   }
 914 | }
 915 | 
 916 | .containerms .box .content
 917 | {
 918 |   position: relative;
 919 |   left: 0;
 920 |   padding: 20px 40px;
 921 |   background: rgba(255, 255, 255, 0.05);
 922 |   backdrop-filter: blur(10px);
 923 |   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 924 |   border-radius: 8px;
 925 |   z-index: 1;
 926 |   transform: 0.5s;
 927 |   color: #fff;
 928 | }
 929 | 
 930 | .containerms .box:hover .content
 931 | {
 932 |   left: -25px;
 933 |   padding: 60px 40px;
 934 | }
 935 | 
 936 | .containerms .box .content h2
 937 | {
 938 |   font-size: 2em;
 939 |   color: #fff;
 940 |   margin-bottom: 10px;
 941 | }
 942 | 
 943 | .containerms .box .content p
 944 | {
 945 |   font-size: 1.1em;
 946 |   margin-bottom: 10px;
 947 |   line-height: 1.4em;
 948 | }
 949 | 
 950 | .containerms .box .content a
 951 | {
 952 |   display: inline-block;
 953 |   font-size: 1.1em;
 954 |   color: #111;
 955 |   background: #fff;
 956 |   padding: 10px;
 957 |   border-radius: 4px;
 958 |   text-decoration: none;
 959 |   font-weight: 700;
 960 |   margin-top: 5px;
 961 | }
 962 | 
 963 | .containerms .box .content a:hover
 964 | {
 965 |   background: #ffcf4d;
 966 |   border: 1px solid rgba(255, 0, 88, 0.4);
 967 |   box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
 968 | }
 969 | =======
 970 | 
 971 | 
 972 | 
 973 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Finlandica:ital@1&display=swap');
 974 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 975 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100,500,300;400&display=swap');
 976 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
 977 | @property --rotate {
 978 |   syntax: "<angle>";
 979 |   initial-value: 132deg;
 980 |   inherits: false;
 981 | }
 982 | 
 983 | 
 984 | 
 985 | body {
 986 |     margin: 0;
 987 |     padding: 0;
 988 |     overflow-x: hidden;
 989 |     background: linear-gradient(to right, #0b0028, #2e012a);
 990 | }
 991 | 
 992 | canvas {
 993 |     width: 100%;
 994 |     height: 100%;
 995 |     background: linear-gradient(to right, #0b0028, #2e012a);
 996 | }
 997 | 
 998 | body::-webkit-scrollbar {
 999 |     width: 5px;
1000 | }
1001 | 
1002 | body::-webkit-scrollbar-track {
1003 |     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
1004 | }
1005 | 
1006 | body::-webkit-scrollbar-thumb {
1007 |     background-color: #2c012a;
1008 |     border-bottom-right-radius: 5px;
1009 |     /* outline: 1px solid rgb(0, 128, 36); */
1010 | }
1011 | 
1012 | .homewrap {
1013 |     position: absolute;
1014 |     top: 0;
1015 |     left: 0;
1016 |     height: 100vh;
1017 |     width: 100vw;
1018 |     display: flex;
1019 |     align-items: center;
1020 |     justify-content: center;
1021 |     flex-direction: column;
1022 |     padding-top: 30px;
1023 |     z-index: 2;
1024 | }
1025 | 
1026 | .scaleanim {
1027 |     transform: scale(5.5);
1028 |     animation-name: scaling;
1029 |     animation-duration: 1s;
1030 |     animation-fill-mode: forwards;
1031 | }
1032 | 
1033 | @keyframes scaling {
1034 |     from {
1035 |         transform: scale(1);
1036 |     }
1037 | 
1038 |     to {
1039 |         transform: scale(19.5);
1040 |     }
1041 | }
1042 | 
1043 | h1 {
1044 |     color: white;
1045 |     font-family: Arial, Helvetica, sans-serif;
1046 |     letter-spacing: 6px;
1047 |     font-size: 80px;
1048 |     font-weight: 100;
1049 | }
1050 | 
1051 | h1::before {
1052 |     content: "2023";
1053 |     position: absolute;
1054 |     color: rgba(255, 255, 255, 0.146);
1055 |     font-size: 150px;
1056 |     margin-top: -50px;
1057 |     left: calc(50% - 160px);
1058 |     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
1059 |     font-weight: 400;
1060 |     text-align: center;
1061 | }
1062 | 
1063 | .homewrap>p {
1064 |     color: white;
1065 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
1066 |     width: 35vw;
1067 |     font-size: 15px;
1068 |     text-align: center;
1069 |     margin-top: 10px;
1070 | }
1071 | 
1072 | 
1073 | 
1074 | nav {
1075 |     position: fixed;
1076 |     left: 0;
1077 |     max-width: 10vw;
1078 |     height: 50vw;
1079 |     display: flex;
1080 |     flex-direction: column;
1081 |     align-items: flex-start;
1082 |     justify-content: center;
1083 |     padding-left: 30px;
1084 |     z-index: 5;
1085 |     /* backdrop-filter: blur(3px); */
1086 |     /* background-color: #a020f073; */
1087 | }
1088 | 
1089 | .navitem>div {
1090 |     height: 50px;
1091 |     border-left: 1px solid rgba(81, 81, 218, 0.718);
1092 |     margin-top: 0px;
1093 |     padding-left: 5px;
1094 |     margin-left: 5px;
1095 |     cursor: pointer;
1096 |     display: flex;
1097 |     align-items: center;
1098 |     margin-top: -40px;
1099 |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
1100 |     font-size: 15px;
1101 |     color: rgba(255, 255, 255, 0.448);
1102 | }
1103 | 
1104 | .navitem>p {
1105 |     color: white;
1106 |     font-size: 36px;
1107 | }
1108 | 
1109 | #home {
1110 |     overflow: hidden;
1111 | }
1112 | 
1113 | .navitem>p {
1114 |     margin-top: -25px;
1115 |     color: white;
1116 |     margin-left: 1px;
1117 | }
1118 | 
1119 | /* .navitem:hover{
1120 |     cursor: pointer;
1121 | } */
1122 | .active {
1123 |     border-left: 2px solid rgba(81, 81, 218, 0.718) !important;
1124 | }
1125 | 
1126 | .wrap1{
1127 |     margin-left: 30vw;
1128 |     display: flex;
1129 |     flex-direction: column;
1130 |     /* align-items: center; */
1131 |     height: 40vh;
1132 |     margin-top: 10vh;
1133 |     justify-content: space-between;
1134 | }
1135 | .wrap1>p{
1136 |     font-family: Arial, Helvetica, sans-serif;
1137 |     font-size: 16px;
1138 |     color: rgb(189, 205, 224);
1139 |     line-height: 40px;
1140 | }
1141 | .wrap1>p>span{
1142 |     /* margin-left: 5px; */
1143 |     color: rgb(230, 230, 156);
1144 |     font-size: 15px;
1145 | }
1146 | 
1147 | @media only screen and (max-width: 800px) {
1148 |   h1 {
1149 |     color: white;
1150 |     font-family: Arial, Helvetica, sans-serif;
1151 |     letter-spacing: 6px;
1152 |     font-size: 55px;
1153 |     font-weight: 100;
1154 | }
1155 | 
1156 | h1::before {
1157 |     content: "2023";
1158 |     position: absolute;
1159 |     color: rgba(255, 255, 255, 0.146);
1160 |     font-size: 8rem;
1161 |     margin-top: -50px;
1162 |     left: calc(50% - 160px);
1163 |     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
1164 |     font-weight: 400;
1165 |     text-align: center;
1166 | }
1167 |   .content{
1168 |     padding: 0;
1169 | 
1170 |   }
1171 |  .container .box{
1172 | 
1173 |   width: 520px;
1174 |   height: 900px;
1175 |   color: rgb(88, 6, 6);
1176 |    
1177 | }
1178 |   .container .box .content{
1179 |     font-size: 0.85em;
1180 |     color: fff;
1181 |     margin-bottom: 10px;
1182 |     line-height: 1em;
1183 |     word-wrap: normal;
1184 |     font-family: Georgia;
1185 |      position: relative;
1186 |    z-index: 10;
1187 |    padding: 10px 0px;
1188 |    align-content: center;
1189 |  }
1190 |  .container .box .content h2{
1191 |   font-size: 0.85em;
1192 |   font-family: 'Poppins', 'Roboto', Nunito;
1193 | 
1194 | }
1195 | .containersh .container-fluid{
1196 |   width: 80%;
1197 | }
1198 | 
1199 | 
1200 | 
1201 |   
1202 | }
1203 | 
1204 | /* SRINIDHI CSS */
1205 | *{
1206 |     margin: 0;
1207 |     padding: 0;
1208 |     box-sizing: border-box;
1209 |     font-family:'Franklin Gothic Medium';
1210 | }
1211 |  body{
1212 |   
1213 |     justify-content: center;
1214 |     align-items: center;
1215 |     min-height: 100vh;
1216 |     background: #111;
1217 |     background: linear-gradient(to right, #0b0028, #2e012a);
1218 | 
1219 |  }
1220 |  .container{
1221 |     position: relative;
1222 |     display: flex;
1223 |     justify-content: center;
1224 |     align-items: center;
1225 |     padding: 40px 0;
1226 |     flex-wrap: wrap;
1227 |  }
1228 |  .container .box{
1229 |     position: relative; 
1230 |     width: 520px;
1231 |     height: 700px;
1232 |     color: #fff;
1233 |     background: #111;
1234 |     display: flex;
1235 |     justify-content: center;
1236 |     align-items: center;
1237 |     margin: 20px 30px;
1238 |     transition: 0.5s;    
1239 |  }
1240 |  .container .box:hover
1241 |  {
1242 |         transform: translateY(-15px);
1243 |  }
1244 |  .container .box::before{
1245 |     content: '';
1246 |     position: absolute;
1247 |     top: 0;
1248 |     left: 0;
1249 |     width: 100%;
1250 |     height: 100%;
1251 |     background: linear-gradient(45deg,#be93d4,#710193);
1252 |  }
1253 |  .container .box::after{
1254 |     content: '';
1255 |     position: absolute;
1256 |     top: 0;
1257 |     left: 0;
1258 |     width: 100%;
1259 |     height: 100%;
1260 |     background: linear-gradient(45deg,#be93d4,#710193);
1261 |     filter: blur(15px);
1262 |  }
1263 |  .container .box:nth-child(2)::before,
1264 |  .container .box:nth-child(2)::after
1265 |  {
1266 |     background: linear-gradient(315deg,#be93d4,#8b008b);
1267 |  }
1268 |  .container .box span{
1269 |     position: absolute;
1270 |     top: 2px;
1271 |     left: 2px;
1272 |     right: 2px;
1273 |     bottom: 2px;
1274 |     background: rgba(0,0,0,0.6);
1275 |     z-index: 2;
1276 |  }
1277 |  container .box span::before{
1278 |     content: '';
1279 |     position: absolute;
1280 |     top: 0;
1281 |     left: 0;
1282 |     width: 50%;
1283 |     height: 100%;
1284 |     pointer-events:none;
1285 |  }
1286 |  .container .box .content
1287 |  {
1288 |     position: relative;
1289 |     z-index: 10;
1290 |     padding: 20px 40px;
1291 |     align-content: center;
1292 |  }
1293 |  .content .box .content h2
1294 |  {
1295 |     font-size: 4em;
1296 |     color: #fff;
1297 |     margin-bottom: 50px;
1298 |     padding-top: 10px;
1299 |  }
1300 |  .container .box .content p{
1301 |     font-size: 1.1em;
1302 |     color: fff;
1303 |     margin-bottom: 30px;
1304 |     line-height: 1.4em;
1305 |     word-wrap: normal;
1306 |     font-family: Georgia;
1307 |  }
1308 | 
1309 |  /* CSS for footer heart */
1310 | 
1311 | @keyframes footer-heart-beat {
1312 |   0% {
1313 |     transform: scale(1);
1314 |   }
1315 |   69% {
1316 |     transform: scale(1.23);
1317 |   }
1318 |   100% {
1319 |     transform: scale(1);
1320 |   }
1321 | }
1322 | 
1323 | .footer-heart{
1324 |   display: inline-block;
1325 | }
1326 | 
1327 | .footer-heart:hover{
1328 |   animation-name: footer-heart-beat;
1329 |   animation-duration: 800ms;
1330 |   animation-timing-function: ease-in-out;
1331 |   animation-iteration-count: infinite;
1332 |   cursor: default;
1333 | }
1334 | 
1335 | 
1336 |  /*adnaa css*/
1337 |  
1338 | :root {
1339 |     --card-height: 300px;
1340 |     --card-width: calc(var(--card-height) / 1.5);
1341 |   }
1342 |    .card {
1343 |     background: #191c29;
1344 |     width: var(--card-width);
1345 |     height: var(--card-height);
1346 |     padding: 3px;
1347 |     position: relative;
1348 |     border-radius: 6px;
1349 |     justify-content: center;
1350 |     align-items: center;
1351 |     text-align: left;
1352 |     display: block;
1353 |     font-size: 16px;
1354 |     padding-top: 12px;
1355 |     padding-left: 12px;
1356 |     color: rgba(216, 228, 233, 0);
1357 |     cursor: pointer;
1358 |     
1359 |   }
1360 |   
1361 |   .card:hover {
1362 |     color: rgb(88 199 250 / 100%);
1363 |     transition: color 1s;
1364 |   }
1365 |   .card:hover:before, .card:hover:after {
1366 |     animation: none;
1367 |     opacity: 0;
1368 |   }
1369 |   
1370 |   
1371 |   .card::before {
1372 |     content: "";
1373 |     width: 104%;
1374 |     height: 102%;
1375 |     border-radius: 8px;
1376 |     background-image: linear-gradient(
1377 |       var(--rotate)
1378 |       , #5ddcff, #3c67e3 43%, #4e00c2);
1379 |       position: absolute;
1380 |       z-index: -1;
1381 |       top: -1%;
1382 |       left: -2%;
1383 |       animation: spin 2.5s linear infinite;
1384 |   }
1385 |   
1386 |   .card::after {
1387 |     position: absolute;
1388 |     content: "";
1389 |     top: calc(var(--card-height) / 6);
1390 |     left: 0;
1391 |     right: 0;
1392 |     z-index: -1;
1393 |     height: 100%;
1394 |     width: 100%;
1395 |     margin: 0 auto;
1396 |     transform: scale(0.8);
1397 |     filter: blur(calc(var(--card-height) / 6));
1398 |     background-image: linear-gradient(
1399 |       var(--rotate)
1400 |       , #5ddcff, #3c67e3 43%, #4e00c2);
1401 |       opacity: 1;
1402 |     transition: opacity .5s;
1403 |     animation: spin 2.5s linear infinite;
1404 |   }
1405 |   
1406 |   @keyframes spin {
1407 |     0% {
1408 |       --rotate: 0deg;
1409 |     }
1410 |     100% {
1411 |       --rotate: 360deg;
1412 |     }
1413 |   }
1414 |   
1415 |   .card:hover .track-p{
1416 |     visibility:hidden ;
1417 |    
1418 |   }
1419 |   .track-p {
1420 |     position:absolute;
1421 |     display: inline;
1422 |     
1423 |     bottom:30%;
1424 |     top: 40%;
1425 |     color: #c2c8dd;
1426 |     font-size: 24px;
1427 |     text-decoration: none;
1428 |     font-family: sans-serif;
1429 |     font-weight: bold;
1430 |     
1431 |   
1432 |     margin: auto;
1433 |     text-align: center;
1434 |    
1435 |   }
1436 |   .trackh1{
1437 |     color: #fff;
1438 |    
1439 |       font-weight: 100;
1440 |     text-align: center;
1441 |     text-transform: uppercase;
1442 |     font-size: 48px;
1443 |   
1444 |   }
1445 |   /* SONAL CSS */
1446 |  footer{
1447 |     background: transparent;
1448 |   
1449 |    }
1450 |    .container-fluid{
1451 |     font-family: 'Baloo Bhai 2', cursive;
1452 |     background: transparent;
1453 |   
1454 |     width: 40%;
1455 |      margin: 0 auto;
1456 |      margin-top: 100px;
1457 |    }
1458 |    p{
1459 |      color: white; /*This is the color of the answers and can change when wanted*/
1460 |    }
1461 |    .container-fluid h1{
1462 |      color: #9D00FF; /*This is the color of the heading FAQs and can change when wanted*/
1463 |      position: relative;
1464 |      width: 23rem;
1465 |    }
1466 |    /* This is the dash which comes under h2 (add if needed)*/
1467 |    /*.container-fluid h1::after{
1468 |      content: " ";
1469 |      position: absolute;
1470 |      bottom: 0;
1471 |      right: 300px;
1472 |      width:67px;
1473 |      height: 2px;
1474 |      background-color: #9D00FF;
1475 |    }*/
1476 |    .accordion{
1477 |      width:100%;
1478 |      border:2px solid white; /*bordercolor is white of the questions*/
1479 |      cursor: pointer;
1480 |      padding:3px;
1481 |      background-color: rgba(193, 210, 236, 0.13);
1482 |      border-radius: 50px;
1483 |      display: flex;
1484 |      margin: 10px 0;
1485 |      align-items: center;
1486 |      text-align: left;
1487 |      gap:3px;
1488 |    }
1489 |    .accordion .icon{
1490 |      margin: 0 15px 0 0;
1491 |      width: 50px; 
1492 |      border-radius: 50%;
1493 |      background:  8px 5px white;
1494 |    }
1495 |    .accordion .active .icon{
1496 |      background:8px 5px black ;
1497 |    }
1498 |    .accordion .icon:after {
1499 |      content: '\002B'; /*+ sign*/
1500 |      font-weight: 1000;
1501 |      font-size: 30px;
1502 |      margin-left: 13.5px;/*placement of icon inside the white circle*/
1503 |      transition: all .5s ease;
1504 |      color: black;
1505 |    }
1506 |    .active .icon:after {
1507 |      content: '\2212';
1508 |      font-size: 30px;
1509 |      font-weight: bolder;
1510 |      color: black;
1511 |    }
1512 |    
1513 |    .accordion h5{
1514 |      font-size: 22px; /*font size of questions*/
1515 |      margin: 0;
1516 |      padding: 3px 0 0 0;
1517 |      font-weight: normal;
1518 |      color: white; /*Color of questions*/
1519 |    }
1520 |    .panel{
1521 |      padding: 0 15px;
1522 |      border-left: 1px solid white;
1523 |      margin-left: 25px;
1524 |      font-size: 14px;
1525 |      text-align: justify;
1526 |      overflow: hidden;
1527 |      max-height: 0; /*height of answers*/
1528 |      transition: all .5s ease-in;
1529 |      
1530 |    }
1531 |   .containersh{
1532 |     position: relative;
1533 |     justify-content: center;
1534 |     align-items: center;
1535 |     padding: 40px 0;
1536 |    }
1537 | 
1538 |   .so {
1539 |        margin: 0;
1540 |        padding: 0;
1541 |        box-sizing: border-box;
1542 |        font-family: 'Poppins', sans-serif;
1543 |      }
1544 |      .so .wrapper{
1545 |        padding-left: 625px;
1546 |        overflow:auto;
1547 |        background: transparent;
1548 |   
1549 |        padding-top: 50px;
1550 |        padding-bottom: 50px;
1551 |      }
1552 |      .wrapper .button{
1553 |        display: inline-block;
1554 |        height: 60px;
1555 |        width: 60px;
1556 |        float: left;
1557 |        margin: 0 5px;
1558 |        overflow: hidden;
1559 |        background:rgba(255, 255, 255, .15);
1560 |        backdrop-filter: saturate(180%) blur(10px);
1561 |        border-radius: 50px;
1562 |        cursor: pointer;
1563 |        box-shadow: 0px 10px 10px rgba(9, 9, 9, 0.1);
1564 |        transition: all 0.3s ease-out;
1565 |      }
1566 |      .wrapper .button:hover{
1567 |        width: 200px;
1568 |      }
1569 |      .wrapper .button .icon{
1570 |        display: inline-block;
1571 |        height: 60px;
1572 |        width: 60px;
1573 |        text-align: center;
1574 |        border-radius: 50px;
1575 |        box-sizing: border-box;
1576 |        line-height: 60px;
1577 |        transition: all 0.3s ease-out;
1578 |        
1579 |      }
1580 |      .wrapper .button:nth-child(1):hover .icon{
1581 |        background: #4267B2;
1582 |      }
1583 |      .wrapper .button:nth-child(2):hover .icon{
1584 |        background: #1DA1F2;
1585 |      }
1586 |      .wrapper .button:nth-child(3):hover .icon{
1587 |        background: #E1306C;
1588 |      }
1589 |      .wrapper .button:nth-child(4):hover .icon{
1590 |        background: #A020F0;
1591 |      }
1592 |      
1593 |      .so .wrapper .button .icon i{
1594 |        font-size: 25px;
1595 |        line-height: 60px;
1596 |        transition: all 0.3s ease-out;
1597 |      }
1598 |      .wrapper .button:hover .icon i{
1599 |        color: white;
1600 |      }
1601 |      .so .wrapper .button span{
1602 |        font-size: 20px;
1603 |        font-weight: 500;
1604 |        line-height: 60px;
1605 |        margin-left: 10px;
1606 |        transition: all 0.3s ease-out;
1607 |      }
1608 |      .so .wrapper .button:nth-child(1) span{
1609 |        color: #4267B2;
1610 |      }
1611 |      .wrapper .button:nth-child(2) span{
1612 |        color: #1DA1F2;
1613 |      }
1614 |      .wrapper .button:nth-child(3) span{
1615 |        color: #E1306C;
1616 |      }
1617 |      .wrapper .button:nth-child(4) span{
1618 |        color: #A020F0;
1619 |      }
1620 |       #fb
1621 |      {
1622 |          color: #006fff;
1623 |          text-shadow: 0 0 30px #006fff;
1624 |      }
1625 |      #ig
1626 |      {
1627 |          color: #ff5f40;
1628 |          text-shadow: 0 0 30px #ff5f40;
1629 |      }
1630 |      #tw
1631 |      {
1632 |          color: #00acff;
1633 |          text-shadow: 0 0 30px #00acff;
1634 |      }
1635 |      #di
1636 |      {
1637 |          color: #9D00FF;
1638 |          text-shadow: 0 0 30px #9D00FF;
1639 |      }
1640 |    @media only screen and (max-width:1062px){
1641 | 
1642 |         .so .wrapper{
1643 |           padding-left: 25%;
1644 |           overflow:auto;
1645 |           padding-top: 50px;
1646 |           padding-bottom: 50px;
1647 |         }
1648 |       
1649 |     }
1650 | 
1651 | 
1652 | 
1653 | 
1654 | .card-flip-wrap
1655 | {
1656 |     font-family: 'Open Sans', sans serif;
1657 |     font-size: 24px;
1658 |     text-align: center;
1659 |     color: #c2c8dd;
1660 |     font-weight: bold;
1661 |     width: 210px;
1662 |     height: 310px;
1663 |     margin: 80px auto;
1664 |     border-radius: 10px;
1665 |     perspective: 1400px;
1666 |     cursor: pointer;
1667 |     margin: 60px;
1668 | }
1669 | 
1670 | .card-flip
1671 | {
1672 |     position: relative;
1673 |     height: 100%;
1674 |     border-radius: 10px;
1675 |     width: 100%;
1676 |     transform-style: preserve-3d;
1677 | }
1678 | 
1679 | .card-front,
1680 | .card-back
1681 | {
1682 |     display: flex;
1683 |     width: 100%;
1684 |     height: 100%;
1685 |     border-radius: 10px;
1686 |     justify-content: center;
1687 |     align-items: center;
1688 |     backface-visibility: hidden;
1689 | }
1690 | 
1691 | .card-front
1692 | {
1693 |     background: #191c29;
1694 | }
1695 | 
1696 | .card-back
1697 | {
1698 |     position: absolute;
1699 |     top: 0;
1700 |     left: 0;
1701 |     transform: rotateY(180deg);
1702 |     font-size: 1rem;
1703 |     text-align: start;
1704 |     flex-direction: column;
1705 |     justify-content: space-between;
1706 |     padding: 1rem;
1707 | }
1708 | 
1709 | .card-front::before, .card-back::before {
1710 |     content: "";
1711 |     width: 104%;
1712 |     height: 102%;
1713 |     border-radius: 8px;
1714 |     background-image: linear-gradient(
1715 |       var(--rotate)
1716 |       , #5ddcff, #3c67e3 43%, #4e00c2);
1717 |       position: absolute;
1718 |       z-index: -1;
1719 |       top: -1%;
1720 |       left: -2%;
1721 |       animation: spin 2.5s linear infinite;
1722 | }
1723 | 
1724 | .card-flip-wrap::after {
1725 |     position: absolute;
1726 |     content: "";
1727 |     top: calc(var(--card-height) / 6);
1728 |     left: 0;
1729 |     right: 0;
1730 |     z-index: -1;
1731 |     height: 100%;
1732 |     width: 100%;
1733 |     margin: 0 auto;
1734 |     transform: scale(0.8);
1735 |     filter: blur(calc(var(--card-height) / 6));
1736 |     background-image: linear-gradient(
1737 |       var(--rotate)
1738 |       , #5ddcff, #3c67e3 43%, #4e00c2);
1739 |       opacity: 1;
1740 |     transition: opacity .5s;
1741 |     animation: spin 2.5s linear infinite;
1742 | }
1743 | 
1744 | .card-github{
1745 |     border: 0.15rem solid #c2c8dd;
1746 |     padding: 1rem 1.5rem;
1747 |     border-radius: 5rem;
1748 | }
1749 | 
1750 | 
1751 | 
1752 |     /* CSS for heart in footer */
1753 |     @keyframes footer-heart-beat {
1754 |       0% {
1755 |         transform: scale(1);
1756 |       }
1757 |       69% {
1758 |         transform: scale(1.23);
1759 |       }
1760 |       100% {
1761 |         transform: scale(1);
1762 |       }
1763 |     }
1764 |     
1765 |     .footer-heart{
1766 |       display: inline-block;
1767 |     }
1768 |     
1769 |     .footer-heart:hover{
1770 |       animation-name: footer-heart-beat;
1771 |       animation-duration: 800ms;
1772 |       animation-timing-function: ease-in-out;
1773 |       animation-iteration-count: infinite;
1774 |       cursor: default;
1775 |     }
1776 |     
1777 | 
1778 | 
1779 |   
1780 | /* Go top btn styles */
1781 | 
1782 | .btn-go-top{
1783 |   position: fixed;
1784 |   bottom: 2vh;
1785 |   right: 2vh;
1786 |   width: 3rem;
1787 |   height: 2.5rem;
1788 |   font-size: 2rem;
1789 |   font-weight: bold;
1790 |   cursor: pointer;
1791 |   color: white;
1792 |     bottom: 20px;
1793 |     border-radius: 20%;
1794 |     background-color: #4c2862;
1795 |     border: #a639ea 3px;   
1796 |    box-shadow: 0px 4px 0px #83658b;
1797 |   transition: all 0.2s ease-out;
1798 |   opacity: 50%;
1799 | }
1800 | 
1801 | .btn-go-top:hover{
1802 |   background: #d3c5c5;
1803 |   font-weight: 600;
1804 |   transition: all 0.2s ease-in-out; 
1805 |   color:#320f48;
1806 | }
1807 | 
1808 | .btn-go-top:active{
1809 |   box-shadow: 0 4px #3d2f41;
1810 |   transition: all 0.2s ease-in-out;
1811 |   transform: translateY(4px);
1812 | }
1813 | 
1814 | .btn-hidden{
1815 |   visibility: hidden;
1816 |   opacity: 0;
1817 | }
1818 | .FaqAns{
1819 |   font-family: 'Quicksand', sans-serif;
1820 | }
1821 | 
1822 | 
1823 | 
1824 | /* Media Query */
1825 | @media screen and (max-width: 510px) {
1826 | 
1827 |   h1 {
1828 |     font-size: 3rem;
1829 |   }
1830 | 
1831 |   h2{
1832 |     font-size:1rem;
1833 |     width:calc(100% + 20px);
1834 |   }
1835 | 
1836 |   .container .box {
1837 |     padding-top: 40px;
1838 |     height: 100%;
1839 |   }
1840 | 
1841 |   .so .wrapper{
1842 |     padding-left: 5px;
1843 |     padding-right: 5px;
1844 |     display: flex;
1845 |     align-items: center;
1846 |     justify-content:center;
1847 |   }
1848 | 
1849 |  
1850 |   .accordion h5{
1851 |     max-width: 210px;
1852 |     width:100%;
1853 |     font-size: 19px; /*font size of questions*/
1854 |   }
1855 |  
1856 | }
1857 | 


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