├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ └── general_issue.md └── workflow │ └── autoLabel.yaml ├── .gitignore ├── .prettierrc ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── assets ├── GCI.png └── oppcal.png ├── contributing.md ├── package-lock.json ├── package.json ├── public ├── GCI.png ├── _redirects ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.css ├── App.js ├── Assets ├── AboutUs.gif ├── AboutUsImg.3bed171e.png ├── GCI.png ├── NotFound.svg ├── amazon.png ├── amdocs.png ├── arrow.png ├── arrowup.png ├── banner-large.png ├── banner-small.png ├── banner.gif ├── banner.png ├── banner_bg.svg ├── codearduino.png ├── coding-large.png ├── coding-small.png ├── conference-large.png ├── conference-small.png ├── first.png ├── fte.svg ├── hackathon-large.png ├── hackathon-small.png ├── hacked.png ├── hnc.png ├── intel.png ├── internships-large.png ├── internships-small.png ├── login.svg ├── morganStanley.png ├── open.png ├── recorem.jpeg ├── scholarship-large.png ├── scholarship-small.png ├── signup.svg └── uber.png ├── CSS ├── AboutUs.module.css ├── Banner.module.css ├── ContactUs.module.css ├── FAQ.module.css ├── Footer.module.css ├── Forget.module.css ├── KnowAbout.module.css ├── KnowAboutCard.module.css ├── Navbar.module.css ├── Newsletter.module.css ├── Opportunity.module.css ├── PageNotFound.module.css ├── PostForm.module.css ├── ScrollTop.module.css ├── SignupLogin.module.css └── SocialIcons.module.css ├── Components ├── Error │ └── PageNotFound.js ├── Footer │ └── Footer.js ├── Forget │ ├── Forget.js │ └── forget.png ├── HomePage │ ├── HomePage.js │ └── Sections │ │ ├── AboutUs.js │ │ ├── Banner.js │ │ ├── ContactUs.js │ │ ├── FAQ_Cards.js │ │ ├── FAQ_Data.js │ │ ├── FAQ_main.js │ │ ├── KnowAbout.js │ │ ├── KnowAboutCard.js │ │ ├── KnowAboutData.js │ │ ├── Navbar.js │ │ └── Newsletter.js ├── PostOpportunity │ ├── AddDiv.js │ ├── Navbar.js │ ├── PostOpportunity.js │ └── PostOpportunityForm.js ├── ScrollTop │ └── ScrollTop.js ├── SignupLogin │ ├── Login.js │ └── SignUp.js ├── SocialIcons │ └── SocialIcons.js └── ViewOpportunity │ ├── CommonComponents.js │ ├── Navbar.js │ ├── OpportunityCard.js │ └── index.js ├── Hooks ├── reducer.js ├── stateProvider.js └── user.actions.js ├── __tests__ ├── Footer │ └── Footer.test.js ├── HomePage │ ├── HomePage.test.js │ └── Sections │ │ ├── Banner.test.js │ │ ├── KnowAboutCard.test.js │ │ └── Navbar.test.js └── PostOpportunity │ ├── Forms.test.js │ └── Navbar.test.js └── index.js /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | ### **Describe the bug:** 10 | 11 | A clear and concise description of what the bug is. 12 | 13 | ### **To Reproduce:** 14 | 15 | Steps to reproduce the behavior: 16 | 17 | 1. Go to '...' 18 | 2. Click on '....' 19 | 3. Scroll down to '....' 20 | 4. See an error 21 | 22 | ### **Expected behavior:** 23 | 24 | A clear and concise description of what you expected to happen. 25 | 26 | ### **Screenshots:** 27 | 28 | If applicable, add screenshots to help explain your problem. 29 | 30 | ### **Additional context:** 31 | 32 | Add any other context about the problem here. 33 | 34 |
35 | 36 | **Note:** 37 | 38 | - If you want to work on an issue, you should check if it has already been assigned to anyone. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | ### **Feature request**: 10 | 11 | A clear and concise description of the feature. 12 | 13 | ### **Is your feature request related to a problem? Please describe. (optional)**: 14 | 15 | A clear and concise description of what the problem is. 16 | 17 | ### **Describe the solution you'd like**: 18 | 19 | A clear and concise description of what you want to happen. 20 | 21 | ### **Describe alternatives you've considered**: 22 | 23 | A clear and concise description of any alternative solutions or features you've considered. 24 | 25 | ### **Describe how this feature will be useful to our readers**: 26 | 27 | A clear and concise description of how this feature will be useful for our other readers. 28 | 29 | ### **Additional context:** 30 | 31 | Add any other context or screenshots about the feature request here. 32 | 33 |
34 | 35 | **Note:** 36 | 37 | - If you want to work on an issue, you should check if it has already been assigned to anyone. 38 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/general_issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: General issue 3 | about: Suggest an issue for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | # Prerequisites: 10 | 11 | Please answer the following questions for yourself before submitting an issue. **YOU MAY DELETE THE PREREQUISITES SECTION.** 12 | 13 | 14 | 15 | - [ ] I checked to make sure that this issue has not already been filed. 16 | 17 | - [ ] I'm reporting the issue to the correct repository (for multi-repository projects) **(optional)** 18 | 19 | # Expected Behavior: 20 | 21 | Please describe the behavior you are expecting. 22 | 23 | # Current Behavior: 24 | 25 | What is the current behavior? 26 | 27 | # Solution: 28 | 29 | Please describe what will you do to solve this issue or your approach to solve this issue. 30 | 31 | # Screenshots (optional): 32 | -------------------------------------------------------------------------------- /.github/workflow/autoLabel.yaml: -------------------------------------------------------------------------------- 1 | 2 | name: Labeling new issue 3 | on: 4 | issues: 5 | types: ['opened'] 6 | jobs: 7 | build: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: Renato66/auto-label@v2 11 | with: 12 | repo-token: ${{ secrets.GITHUB_TOKEN }} 13 | ignore-comments: true 14 | labels-synonyms: '{"GSSOC21":["GSSOC","GSSOC21","gssoc21","Gssoc21"]}' 15 | configuration-path: .github/workflow/autoLabel.yaml 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # Local Netlify folder 26 | .netlify 27 | 28 | # project uses npm. so ignore yarn.lock 29 | yarn.lock 30 | 31 | # editor sessions 32 | .vim-session.vim 33 | 34 | yarn.lock 35 | 36 | 37 | # yarn.lock 38 | yarn.lock 39 | 40 | .idea/ 41 | 42 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Girl Code It 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. -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | Please include a summary of the change and which issue is fixed. List any dependencies that are required for this change. 4 | 5 | Fixed # (issue) (e.g. Fixed #8) 6 | 7 | ## Type of change 8 | 9 | Please check options that are relevant to your PR. 10 | 11 | - [ ] Bug fix (non-breaking change which fixes an issue) 12 | - [ ] New feature (non-breaking change which adds functionality) 13 | - [ ] This change requires a documentation update 14 | 15 | # Checklist: 16 | 17 | - [ ] I have pulled the latest changes in the repository 18 | - [ ] I have squashed my commits 19 | - [ ] My code follows the style guidelines of this project 20 | - [ ] I have performed a self-review of my own code 21 | - [ ] I have commented my code, particularly in hard-to-understand areas 22 | - [ ] I have made corresponding changes to the documentation 23 | - [ ] My changes generate no new warnings 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://github.com/Girl-Code-It/Opportunity-Calendar-Backend/raw/master/assets/oppcal.png) 2 | 3 | ## Opportunity Calendar 4 | 5 | Opportunity Calendar is the one-stop place to refer important opportunites available in tech-space like newly posted jobs, internships, hackathons, tech-conferences, scholarhsips etc. 6 | 7 | [![Issues](https://img.shields.io/github/issues/Girl-Code-It/Opportunity-Calendar-Frontend)](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend/issues) 8 | [![PRs](https://img.shields.io/github/issues-pr/Girl-Code-It/Opportunity-Calendar-Frontend)](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend/pulls) 9 | [![Maintenance](https://img.shields.io/maintenance/yes/2021?color=green&logo=github)](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend) 10 | [![Forks](https://img.shields.io/github/forks/Girl-Code-It/Opportunity-Calendar-Frontend?style=social)](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend) 11 | [![Stars](https://img.shields.io/github/stars/Girl-Code-It/Opportunity-Calendar-Frontend?style=social)](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend) 12 | [![Watchers](https://img.shields.io/github/watchers/Girl-Code-It/Opportunity-Calendar-Frontend?style=social)](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend) 13 | 14 |

We're a part of these Open Source programs

15 | 16 |

17 | 18 | 19 | 20 |

21 | 22 |
23 | 24 | 25 | ## Table of Contents 26 | 27 | 1. [Install](#install) 28 | 2. [Introduction](#introduction) 29 | 3. [Technology Stack](#Technology-Stack) 30 | 4. [Guidelines for GSSOC Participants](#Guidelines-for-GSSOC-Participants) 31 | 5. [Designs](#Designs) 32 | 6. [Bugs and Feature Requests](#Bugs-and-Feature-Requests) 33 | 7. [Contributing](#contributing) 34 | 8. [Copyright and license](#copyright-and-license) 35 | 36 |

Install

37 | 38 | ``` 39 | Step 1: Fork the project. 40 | 41 | Step 2: Clone it to your local system. 42 | 43 | Step 3: Check if Node is installed in your Operating system. 44 | 45 | a) To check if Node is installed, open the command prompt or similar command line tool and type 'node -v'. This should print a version number which means Node is successfully installed. 46 | 47 | b) If you see an error, it means that Node is not installed in your OS. You can download Node.js from 'https://nodejs.org/en/download/'. After completing the installation repeat the part (a) of step 3. 48 | 49 | Step 4: On command prompt under your cloned folder directory path, run 'npm install' to install all the dependencies. 50 | 51 | Step 5: Finally run 'npm start' to start the application. 52 | 53 | Step 6: Visit localhost:3000 in your browser. 54 | 55 | ``` 56 | 57 |

Introduction

58 | Opportunity Calendar provides instant information on newly posted opportunuties for techies. There are times when applicants miss deadlines or get to know about available opportunties only after the deadline of their application passes. 59 | Updates about following opportunities are available: 60 | 61 | - Full Time Job Opportunties 62 | - Internship Opportunties 63 | - Scholarships 64 | - Tech-Conferences 65 | - Coding Competitions 66 | - Hackathons 67 | 68 |

Technology Stack

69 | 70 | - **Wireframing & Designing** - AdobeXD 71 | - **Library** - ReactJs 72 | - **Framework** - React-Bootstrap 73 |

74 | Adobe XD React React Bootstrap JavaScript CSS3 HTML5 75 |

Guidelines for GSSOC Participants

76 | 77 | We are glad to have your contributions to the project, Please make sure to read the following guidelines for the contributors. 78 | 79 | ### Community 80 | 81 | - Join #opportunity-calendar-frontend channel on Discord Server and feel free to ask any doubts regarding the project. 82 | - Mentors are happy to help if you get stuck while making a PR, all of them are available on Discord channel. 83 | 84 | | GitHub Usernames | Domain | 85 | | ---------------------------------------------- | -------------------- | 86 | | [@abdus](https://github.com/abdus) | FullStack | 87 | | [@Surajbokde](https://github.com/Surajbokde) | Frontend Development | 88 | | [@DeepanshiD](https://github.com/DeepanshiD) | Design | 89 | | [@vaishali614](https://github.com/vaishali614) | Frontend Development | 90 | | [@Manvityagi](https://github.com/Manvityagi) | FullStack | 91 | 92 | ### Rules 93 | 94 | - Only 1 issue will be assigned to a participant at a time on FCFS(first come first serve) basis. 95 | - Comment on a particular issue to get it assigned to you and start working on it after it is assigned to you. 96 | - If you are creating a new issue, then please also comment on it mentioning that You want to work on it. 97 | - If any issue is assigned to you, make sure you complete it before deadline. 98 | - Deadline for issues: 99 | 100 | | Issue Level | Max. no. of days to submit a PR | Points | 101 | | ----------- | ------------------------------- | ------ | 102 | | Level 0 | 2 | 5 | 103 | | Level 1 | 2 | 10 | 104 | | Level 2 | 3 | 25 | 105 | | Level 3 | 5 | 45 | 106 | 107 | - If you fail to make a PR within the deadline, then the issue will be assigned to another person in the queue. 108 | 109 |

Designs

110 | 111 | - [**HomePage**](https://xd.adobe.com/view/c0932765-884f-4cb5-7799-3d58ca6a1e8e-b6a2/?fullscreen) 112 | - [**View Opportunities**](https://xd.adobe.com/view/c0932765-884f-4cb5-7799-3d58ca6a1e8e-b6a2/screen/6c24433f-7f7e-433d-9fbd-9b08bd8c47cf/?fullscreen) 113 | - [**Post Opportunity**](https://xd.adobe.com/view/c0932765-884f-4cb5-7799-3d58ca6a1e8e-b6a2/screen/7bd973ee-1fab-4d8b-961c-028e2bf5296c/?fullscreen) 114 | 115 |

Bugs and Feature Requests

116 | 117 | Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend/blob/develop/contributing.md) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend/issues/new). 118 | 119 |

Contributing

120 | 121 | We want contributing to Opportunity Calendar to be enjoyable and educational for everyone. We would love to have your contributions. 122 | To get started have a look at our [documentation on contributing](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend/blob/develop/contributing.md). 123 | 124 |

Copyright and license

125 | 126 | Code released under the [MIT License](https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend/blob/develop/LICENSE). 127 | 128 |

Contributor

129 |

Credit goes to these people:✨

130 | 131 | 132 | 133 | 138 | 139 |
134 | 135 | 136 | 137 |
140 | -------------------------------------------------------------------------------- /assets/GCI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/assets/GCI.png -------------------------------------------------------------------------------- /assets/oppcal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/assets/oppcal.png -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contribution is fun! :green_heart: 2 | 3 | From opening a bug report to creating a pull request: every contribution is appreciated and welcome. If you're planning to implement a new feature or change the api please create an issue first. This way we can ensure that your precious work is not in vain. 4 | 5 | Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. 6 | 7 | Happy Contributing :slightly_smiling_face: 8 | 9 | ## Creating Issues 10 | 11 | ### Bug Reports 12 | 13 | A bug is a _demonstrable problem_ that is caused by the code in the repository. 14 | Good bug reports are extremely helpful, so thanks! 15 | 16 | ### Feature requests 17 | 18 | Feature requests are welcome. But take a moment to find out whether your idea 19 | fits with the scope and aims of the project. It's up to _you_ to make a strong 20 | case to convince the project's developers of the merits of this feature. Please 21 | provide as much detail and context as possible. 22 | 23 | In order to make the contribution 24 | process easy and effective for everyone involved, Please follow the instructions mentioned below! 25 | 26 | ## Pull Requests 27 | 28 | ## :arrow_down: Installation 29 | 30 | - First, fork this repository :fork_and_knife: and follow the given instructions: 31 | 32 | ```bash 33 | # clone the repository to your local machine 34 | $ git clone https://github.com//Opportunity-Calendar-Frontend.git 35 | 36 | # navigate to the project's directory and install all the relevant dev-dependencies 37 | $ cd Opportunity-Calendar-Frontend 38 | 39 | # add upstream 40 | $ git remote add upstream https://github.com/Girl-Code-It/Opportunity-Calendar-Frontend 41 | 42 | # include all the latest changes from the remote repository 43 | $ git fetch upstream 44 | $ git merge upstream/develop 45 | ``` 46 | 47 | Checkout to develop branch 48 | `$ git checkout develop` 49 | 50 | Next, create a new branch for the particular issue - `$ git checkout -b ` and make PR from that branch while leaving other branches unchanged :white_check_mark: 51 | 52 | - Branch name should be feature/FeatureName or fix/FixName 53 | 54 | - Once you have made your changes, run the following command: 55 | 56 | ```bash 57 | # add your changes 58 | $ git add . 59 | 60 | # make your commit 61 | $ git commit -m "" 62 | The commit message should be in the format - `(feature/try) - Added try component` 63 | 64 | #push your changes 65 | git push -u origin NEW-BRANCH-NAME 66 | ``` 67 | 68 | > Think you're ready :grey_question: Make the PR :tropical_drink: 69 | > Always make PRs to develop branch 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "opportunity-calendar-frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/user-event": "^7.2.1", 7 | "audit": "^0.0.6", 8 | "axios": "^0.21.0", 9 | "node-modules": "^0.0.1", 10 | "prettier": "^2.2.1", 11 | "react": "^16.13.1", 12 | "react-bootstrap": "^1.3.0", 13 | "react-dom": "^16.13.1", 14 | "react-google-login": "^5.2.2", 15 | "react-icons": "^3.11.0", 16 | "react-router-dom": "^5.2.0", 17 | "react-scripts": "^4.0.3", 18 | "react-scroll": "^1.8.1", 19 | "reactjs-popup": "^2.0.4", 20 | "reactstrap": "^8.9.0" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": "react-app" 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | }, 43 | "devDependencies": { 44 | "@testing-library/jest-dom": "^5.11.9", 45 | "@testing-library/react": "^11.2.5", 46 | "gh-pages": "^3.1.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /public/GCI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/public/GCI.png -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | 28 | 29 | 30 | 31 | 32 | 38 | Opportunity Calendar 39 | 40 | 41 | 42 |
43 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | /* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap'); */ 2 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap'); 3 | ::-webkit-scrollbar { 4 | width: 10px; 5 | } 6 | 7 | ::-webkit-scrollbar-track { 8 | background: #efefef; 9 | } 10 | 11 | ::-webkit-scrollbar-thumb { 12 | background-color: #c4c4c4; 13 | border-radius: 20px; 14 | box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%), 15 | inset -2px -2px 2px rgb(0 0 0 / 25%); 16 | } 17 | 18 | .add_post{ 19 | margin-top: 150px; 20 | background: #0084BA; 21 | border-radius: 0 200px 200px 0; 22 | align-items: center; 23 | padding: 10px 0; 24 | display: flex; 25 | justify-content: center; 26 | } 27 | 28 | .post_text{ 29 | position: absolute; 30 | width: 992px; 31 | height: 84px; 32 | left: 211px; 33 | top: 135px; 34 | 35 | font-family: Roboto; 36 | font-style: italic; 37 | font-weight: 300; 38 | font-size: 50px; 39 | line-height: 22px; 40 | /* or 44% */ 41 | 42 | letter-spacing: 0.15px; 43 | font-feature-settings: 'pnum' on, 'lnum' on; 44 | 45 | color: #FFFFFF; 46 | } 47 | 48 | .text-box{ 49 | width: 65%; 50 | padding: 15px 15px 15px 0; 51 | } 52 | 53 | .text-line{ 54 | 55 | font-family: Roboto; 56 | font-style: italic; 57 | font-weight: 300; 58 | font-size: 50px; 59 | line-height: 65px; 60 | color: white; 61 | letter-spacing: 0.15px; 62 | } 63 | @media only screen and (max-width: 991px) { 64 | .text-line{ 65 | font-size: 2em; 66 | line-height: 45px; 67 | } 68 | 69 | .text-box{ 70 | width: 80%; 71 | padding: 15px 15px 15px 0; 72 | } 73 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | // import axios from 'axios' 4 | import HomePage from './Components/HomePage/HomePage'; 5 | import SocialIcons from './Components/SocialIcons/SocialIcons'; 6 | import PostOpportunity from './Components/PostOpportunity/PostOpportunity'; 7 | import ScrollTop from './Components/ScrollTop/ScrollTop'; 8 | import { ViewOpportunity } from './Components/ViewOpportunity/'; 9 | import Footer from './Components/Footer/Footer'; 10 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 11 | import SignUp from './Components/SignupLogin/SignUp'; 12 | import Login from './Components/SignupLogin/Login'; 13 | import PageNotFound from './Components/Error/PageNotFound'; 14 | import Forget from './Components/Forget/Forget'; 15 | 16 | 17 | function App() { 18 | return ( 19 | 20 |
21 | 22 | ( 26 |
27 | 28 | 29 |
30 | )} 31 | /> 32 | 33 | 34 | 35 | 36 | ( 40 |
41 | 42 |
43 | )} 44 | /> 45 | ( 49 |
50 | 51 |
52 | )} 53 | /> 54 | ( 58 |
59 | 60 |
61 | )} 62 | /> 63 | ( 67 |
68 | 69 |
70 | )} 71 | /> 72 | ( 76 |
77 | 78 |
79 | )} 80 | /> 81 | ( 85 |
86 | {/**/} 87 | 88 |
89 | )} 90 | /> 91 | ( 95 |
96 | {/* 97 | 98 | */} 99 | 100 |
101 | )} 102 | /> 103 | ( 107 |
108 | 109 |
110 | )} 111 | /> 112 | ( 116 |
117 | 118 |
119 | )} 120 | /> 121 | ( 125 |
126 | 127 |
128 | )} 129 | /> 130 | ( 134 |
135 | 136 |
137 | )} 138 | /> 139 | ( 143 |
144 | 145 |
146 | )} 147 | /> 148 | ( 152 |
153 | 154 |
155 | )} 156 | /> 157 | ( 161 |
162 | 163 |
164 | )} 165 | /> 166 | 167 | ( 169 |
170 | 171 |
172 | )} 173 | /> 174 | 175 | 176 |
177 |
178 | 179 | ); 180 | } 181 | 182 | export default App; 183 | -------------------------------------------------------------------------------- /src/Assets/AboutUs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/AboutUs.gif -------------------------------------------------------------------------------- /src/Assets/AboutUsImg.3bed171e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/AboutUsImg.3bed171e.png -------------------------------------------------------------------------------- /src/Assets/GCI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/GCI.png -------------------------------------------------------------------------------- /src/Assets/amazon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/amazon.png -------------------------------------------------------------------------------- /src/Assets/amdocs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/amdocs.png -------------------------------------------------------------------------------- /src/Assets/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/arrow.png -------------------------------------------------------------------------------- /src/Assets/arrowup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/arrowup.png -------------------------------------------------------------------------------- /src/Assets/banner-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/banner-large.png -------------------------------------------------------------------------------- /src/Assets/banner-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/banner-small.png -------------------------------------------------------------------------------- /src/Assets/banner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/banner.gif -------------------------------------------------------------------------------- /src/Assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/banner.png -------------------------------------------------------------------------------- /src/Assets/banner_bg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Assets/codearduino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/codearduino.png -------------------------------------------------------------------------------- /src/Assets/coding-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/coding-large.png -------------------------------------------------------------------------------- /src/Assets/coding-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/coding-small.png -------------------------------------------------------------------------------- /src/Assets/conference-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/conference-large.png -------------------------------------------------------------------------------- /src/Assets/conference-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/conference-small.png -------------------------------------------------------------------------------- /src/Assets/first.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/first.png -------------------------------------------------------------------------------- /src/Assets/fte.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Assets/hackathon-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/hackathon-large.png -------------------------------------------------------------------------------- /src/Assets/hackathon-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/hackathon-small.png -------------------------------------------------------------------------------- /src/Assets/hacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/hacked.png -------------------------------------------------------------------------------- /src/Assets/hnc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/hnc.png -------------------------------------------------------------------------------- /src/Assets/intel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/intel.png -------------------------------------------------------------------------------- /src/Assets/internships-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/internships-large.png -------------------------------------------------------------------------------- /src/Assets/internships-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/internships-small.png -------------------------------------------------------------------------------- /src/Assets/login.svg: -------------------------------------------------------------------------------- 1 | SING UP -------------------------------------------------------------------------------- /src/Assets/morganStanley.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/morganStanley.png -------------------------------------------------------------------------------- /src/Assets/open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/open.png -------------------------------------------------------------------------------- /src/Assets/recorem.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/recorem.jpeg -------------------------------------------------------------------------------- /src/Assets/scholarship-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/scholarship-large.png -------------------------------------------------------------------------------- /src/Assets/scholarship-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/scholarship-small.png -------------------------------------------------------------------------------- /src/Assets/uber.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Assets/uber.png -------------------------------------------------------------------------------- /src/CSS/AboutUs.module.css: -------------------------------------------------------------------------------- 1 | .body { 2 | padding-top: 0px; 3 | background-color: #ffffff; 4 | } 5 | 6 | .AboutUs_heading { 7 | margin-top: 3.5rem; 8 | margin-bottom: 2rem; 9 | font-weight: 390; 10 | font-size: 2.3rem; 11 | font-family: 'Poppins', sans-serif; 12 | letter-spacing: 0; 13 | text-align: center; 14 | } 15 | 16 | .AboutUs_About { 17 | margin: 10px; 18 | color: #000; 19 | font-weight: 500; 20 | font-size: 50px; 21 | letter-spacing: 0; 22 | } 23 | 24 | .AboutUs_Us { 25 | color: #008dc8; 26 | font-weight: 500; 27 | font-size: 50px; 28 | letter-spacing: 0; 29 | } 30 | 31 | .AboutUs_AboutImage { 32 | margin-top: 4rem; 33 | } 34 | 35 | .AboutUs_description { 36 | font-size: 1.1rem; 37 | font-family: 'Inter', sans-serif; 38 | text-align: justify; 39 | } 40 | 41 | .AboutUs_rectangle { 42 | position: relative; 43 | bottom: 22px; 44 | float: right; 45 | width: 170px; 46 | height: 5px; 47 | margin-left: 83%; 48 | background-color: #008dc8; 49 | } 50 | 51 | .AboutUs_knowMore { 52 | position: relative; 53 | float: left; 54 | margin-right: 10%; 55 | margin-bottom: 10%; 56 | padding: 5px 30px 5px 30px; 57 | color: #fff; 58 | font-size: 20px; 59 | text-align: center; 60 | background-color: #008dc8; 61 | border: none; 62 | border-radius: 50px; 63 | box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7); 64 | cursor: pointer; 65 | transition: all 0.5s; 66 | } 67 | 68 | .AboutUs_knowMore a:hover { 69 | border: none; 70 | } 71 | 72 | .AboutUs_knowMore:hover { 73 | color: #fff; 74 | text-decoration: none; 75 | background: #55b1eb; 76 | background-image: -webkit-linear-gradient(top, #55b1eb, #2389c4); 77 | background-image: -moz-linear-gradient(top, #55b1eb, #2389c4); 78 | background-image: -ms-linear-gradient(top, #55b1eb, #2389c4); 79 | background-image: -o-linear-gradient(top, #55b1eb, #2389c4); 80 | background-image: linear-gradient(to bottom, #55b1eb, #2389c4); 81 | } 82 | 83 | .AboutUs_knowMore:focus { 84 | outline: none; 85 | } 86 | 87 | @media screen and (max-width: 430px) { 88 | .AboutUs_AboutImage { 89 | margin-top: 0; 90 | } 91 | 92 | .AboutUs_rectangle { 93 | display: none; 94 | } 95 | 96 | .AboutUs_knowMore { 97 | position: unset; 98 | } 99 | } 100 | 101 | @media screen and (max-width: 991px) { 102 | .AboutUs_AboutImage { 103 | margin-top: 0; 104 | } 105 | 106 | .AboutUs_description { 107 | margin-top: 10%; 108 | } 109 | } 110 | 111 | @media screen and (max-width: 320px) { 112 | .AboutUs_AboutImage { 113 | margin-top: 0; 114 | position: unset; 115 | } 116 | 117 | .AboutUs_knowMore { 118 | position: unset; 119 | left: 20%; 120 | } 121 | } 122 | 123 | @media screen and (max-width: 360px) { 124 | .AboutUs_AboutImage { 125 | margin-top: 0; 126 | } 127 | 128 | .AboutUs_knowMore { 129 | top: 100%; 130 | position: unset; 131 | } 132 | } 133 | 134 | @media screen and (max-width: 1192px) and (min-width: 992px) { 135 | .AboutUs_AboutImage { 136 | margin-top: 0; 137 | } 138 | 139 | .AboutUs_description { 140 | font-size: 90%; 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /src/CSS/Banner.module.css: -------------------------------------------------------------------------------- 1 | .Jumbotron { 2 | margin-top: 30px; 3 | padding-top: 80px; 4 | background-color: white; 5 | padding-bottom: 0px; 6 | } 7 | 8 | .Heading { 9 | z-index: 100; 10 | font-weight: 700; 11 | font-size: 70px; 12 | font-family: Arial, Helvetica, sans-serif; 13 | color: black; 14 | } 15 | 16 | .TagLine { 17 | font-size: 45px; 18 | font-family: Arial, Helvetica, sans-serif; 19 | } 20 | 21 | .Rectangle { 22 | width: 250px; 23 | height: 5px; 24 | margin-bottom: 20px; 25 | background-color: #008dc8; 26 | } 27 | 28 | .Button { 29 | position: relative; 30 | float: right; 31 | margin-top: 20px; 32 | margin-right: 10%; 33 | padding: 5px 30px 5px 30px; 34 | color: #fff; 35 | font-size: 20px; 36 | text-align: center; 37 | background-color: #008dc8; 38 | border: none; 39 | border-radius: 50px; 40 | box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7); 41 | cursor: pointer; 42 | transition: all 0.5s; 43 | } 44 | 45 | .Button:hover { 46 | text-decoration: none; 47 | background: #55b1eb; 48 | background-image: -webkit-linear-gradient(top, #55b1eb, #2389c4); 49 | background-image: -moz-linear-gradient(top, #55b1eb, #2389c4); 50 | background-image: -ms-linear-gradient(top, #55b1eb, #2389c4); 51 | background-image: -o-linear-gradient(top, #55b1eb, #2389c4); 52 | background-image: linear-gradient(to bottom, #55b1eb, #2389c4); 53 | } 54 | 55 | /* make outline none when button gets clicked */ 56 | .Button:focus { 57 | outline: none; 58 | } 59 | 60 | .BannerImage { 61 | z-index: 10; 62 | width: 100%; 63 | height: 525px; 64 | margin-top: -15%; 65 | } 66 | 67 | .BannerImage2 { 68 | display: none; 69 | } 70 | 71 | @media only screen and (max-width: 767px) { 72 | .BannerRow { 73 | flex-direction: column; 74 | align-items: center; 75 | justify-content: center; 76 | margin-left: 20px; 77 | } 78 | 79 | .BannerImage { 80 | display: none; 81 | } 82 | 83 | .BannerImage2 { 84 | display: block; 85 | width: 80%; 86 | height: auto; 87 | margin: 20px; 88 | } 89 | 90 | .Button { 91 | float: left; 92 | } 93 | } 94 | 95 | @media only screen and (max-width: 700px) { 96 | .Heading { 97 | font-weight: 700; 98 | font-size: 50px; 99 | } 100 | 101 | .TagLine { 102 | font-size: 30px; 103 | } 104 | } 105 | 106 | @media only screen and (max-width: 500px) { 107 | .Heading { 108 | font-weight: 700; 109 | font-size: 40px; 110 | } 111 | 112 | .TagLine { 113 | font-size: 25px; 114 | } 115 | } 116 | 117 | @media only screen and (max-width: 400px) { 118 | .Heading { 119 | font-weight: 700; 120 | font-size: 35px; 121 | } 122 | 123 | .TagLine { 124 | font-size: 20px; 125 | } 126 | 127 | .BannerRow { 128 | margin-left: 0; 129 | } 130 | 131 | .Button { 132 | margin-left: 10px; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /src/CSS/ContactUs.module.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); 3 | 4 | .Heading { 5 | font-weight: bold; 6 | font-size: 40px; 7 | font-family: 'Poppins', sans-serif; 8 | letter-spacing: 0px; 9 | text-align: center; 10 | } 11 | 12 | ::placeholder, 13 | :placeholder-shown { 14 | font-size: 1.2rem; 15 | font-family: 'Inter', sans-serif; 16 | } 17 | 18 | .Button { 19 | position: relative; 20 | float: right; 21 | margin-top: 20px; 22 | margin-right: 10%; 23 | padding: 5px 30px 5px 30px; 24 | color: #fff; 25 | font-size: 20px; 26 | text-align: center; 27 | background-color: #008dc8; 28 | border: none; 29 | border-radius: 50px; 30 | box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7); 31 | cursor: pointer; 32 | transition: all 0.5s; 33 | } 34 | 35 | .Button:hover { 36 | text-decoration: none; 37 | background: #55b1eb; 38 | background-image: -webkit-linear-gradient(top, #55b1eb, #2389c4); 39 | background-image: -moz-linear-gradient(top, #55b1eb, #2389c4); 40 | background-image: -ms-linear-gradient(top, #55b1eb, #2389c4); 41 | background-image: -o-linear-gradient(top, #55b1eb, #2389c4); 42 | background-image: linear-gradient(to bottom, #55b1eb, #2389c4); 43 | } 44 | 45 | .Button:focus { 46 | outline: none; 47 | } 48 | 49 | textarea { 50 | resize: none; 51 | } 52 | 53 | .iconSpan { 54 | padding: 0.375rem 0.75rem; 55 | background-color: #008dc8; 56 | border: none; 57 | border-radius: 0.3rem 0 0 0.3rem; 58 | display: grid; 59 | place-items: center; 60 | } 61 | 62 | .contactIcon { 63 | color: white; 64 | } 65 | -------------------------------------------------------------------------------- /src/CSS/FAQ.module.css: -------------------------------------------------------------------------------- 1 | .head { 2 | font-weight: 390; 3 | font-size: 40px; 4 | letter-spacing: 0; 5 | text-align: center; 6 | } 7 | .onHover:hover { 8 | text-decoration: none; 9 | } 10 | .image { 11 | margin-left: 25%; 12 | cursor: pointer; 13 | zoom: 0.8; 14 | } 15 | .faqs { 16 | align-items: center; 17 | width: 54%; 18 | margin: 0.4%; 19 | margin-left: 22%; 20 | padding: 10px; 21 | background-color: rgb(255, 255, 255); 22 | border-radius: 5px; 23 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 24 | } 25 | .question { 26 | color: #000000; 27 | font-weight: 370; 28 | font-size: 1.5rem; 29 | letter-spacing: 0; 30 | cursor: pointer; 31 | transition: all 0.4s ease; 32 | } 33 | .answer { 34 | width: 54%; 35 | max-height: 0; 36 | margin-left: 22%; 37 | overflow-y: hidden; 38 | opacity: 0; 39 | transition: all 0.4s ease-in; 40 | } 41 | .answeropen { 42 | align-items: center; 43 | width: 54%; 44 | margin-left: 22%; 45 | padding: 10px; 46 | color: #204967; 47 | font-size: 1.2rem; 48 | background-color: #f4f5f6; 49 | border: 0.1px solid #000029; 50 | border-radius: 10px; 51 | box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); 52 | transition: all 0.4s ease-out; 53 | } 54 | @media screen and (max-width: 991px) { 55 | .faqs { 56 | width: 70%; 57 | margin-left: 15%; 58 | } 59 | .answeropen { 60 | width: 70%; 61 | margin-left: 15%; 62 | } 63 | } 64 | @media screen and (max-width: 510px) { 65 | .question { 66 | font-size: 1.3rem; 67 | } 68 | .image { 69 | zoom: 0.7; 70 | } 71 | .answeropen { 72 | font-size: 1.1rem; 73 | } 74 | } 75 | @media screen and (max-width: 440px) { 76 | .faqs { 77 | width: 82%; 78 | margin-left: 10%; 79 | padding: 7px; 80 | padding-left: 0px; 81 | } 82 | .question { 83 | font-size: 1.25rem; 84 | } 85 | .answeropen { 86 | width: 82%; 87 | margin-left: 10%; 88 | font-size: 1.05rem; 89 | } 90 | } 91 | @media screen and (max-width: 366px) { 92 | .faqs { 93 | width: 90%; 94 | margin-left: 4%; 95 | padding: 5px; 96 | padding-left: 0px; 97 | } 98 | .question { 99 | font-size: 1.2rem; 100 | } 101 | .answeropen { 102 | width: 90%; 103 | margin-left: 4%; 104 | font-size: 1rem; 105 | } 106 | .image { 107 | zoom: 0.65; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/CSS/Footer.module.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | overflow-x: hidden; 4 | } 5 | .Jumbotron { 6 | margin: 0px; 7 | padding: 20px; 8 | padding-left: 0px; 9 | /* padding-bottom: 0px; */ 10 | } 11 | .ImgColumn { 12 | display: flex; 13 | justify-content: center; 14 | margin-left: 100px; 15 | } 16 | 17 | .ImgColumn a:hover { 18 | background-color: transparent; 19 | color: transparent; 20 | border-bottom: transparent; 21 | } 22 | 23 | .ContactCol { 24 | justify-content: center; 25 | margin-top: 20px; 26 | margin-left: 12px; 27 | } 28 | .ContactRow { 29 | justify-content: center; 30 | margin-top: 20px; 31 | margin-left: 2%; 32 | } 33 | .ContactRow p { 34 | padding-right: 20px; 35 | } 36 | .Logo { 37 | justify-content: center; 38 | /* height: 180px; */ 39 | width: 70%; 40 | } 41 | .Top1 { 42 | align-items: center; 43 | margin-bottom: 1px; 44 | } 45 | .Bottom2, 46 | .Top2 { 47 | display: none; 48 | } 49 | h5 { 50 | margin-bottom: 0px; 51 | color: #008dc8; 52 | font-family: Arial, Helvetica, sans-serif; 53 | } 54 | .Rectangle { 55 | position: absolute; 56 | right: 50%; 57 | left: 0; 58 | margin-left: 120px; 59 | border-bottom: 2px #008dc8 solid; 60 | } 61 | 62 | .Rectangle2 { 63 | position: absolute; 64 | right: 60%; 65 | left: 0; 66 | margin-left: 143px; 67 | border-bottom: 2px #008dc8 solid; 68 | } 69 | .Rectangle3 { 70 | position: absolute; 71 | width: 98px; 72 | margin-left: 500px; 73 | border-bottom: 2px #008dc8 solid; 74 | } 75 | 76 | p { 77 | margin-top: 10px; 78 | font-size: 16px; 79 | font-family: Arial, Helvetica, sans-serif; 80 | } 81 | .Bottom1 { 82 | margin-top: 1px; 83 | margin-left: 37%; 84 | padding: 0px; 85 | } 86 | .SocialLinks { 87 | justify-content: center; 88 | margin-top: 0px; 89 | margin-right: 2px; 90 | text-align: end; 91 | } 92 | .Shift { 93 | margin-top: 0px; 94 | margin-left: 40px; 95 | color: black; 96 | font-size: 25px; 97 | } 98 | .Shift:hover { 99 | border: none; 100 | } 101 | 102 | a:hover, 103 | Link:hover { 104 | cursor: pointer; 105 | } 106 | 107 | @media only screen and (max-width: 1201px) { 108 | .Rectangle { 109 | margin-left: 128px; 110 | } 111 | .Rectangle2 { 112 | margin-left: 152px; 113 | } 114 | .Bottom1 { 115 | margin-left: 36.5%; 116 | } 117 | } 118 | @media only screen and (max-width: 1199px) { 119 | .Rectangle { 120 | margin-left: 98px; 121 | } 122 | .Rectangle2 { 123 | margin-left: 126px; 124 | } 125 | .Bottom1 { 126 | margin-left: 34%; 127 | } 128 | } 129 | @media only screen and (max-width: 1167x) { 130 | .Bottom1 { 131 | margin-left: 35%; 132 | } 133 | } 134 | @media only screen and (max-width: 1163px) { 135 | .Bottom1 { 136 | margin-left: 34%; 137 | } 138 | } 139 | @media only screen and (max-width: 1025px) { 140 | .Bottom1 { 141 | margin-top: 1px; 142 | margin-left: 35%; 143 | padding: 0px; 144 | } 145 | .Rectangle { 146 | margin-left: 98px; 147 | } 148 | .Rectangle2 { 149 | margin-left: 122px; 150 | } 151 | .Rectangle3 { 152 | margin-left: 405px; 153 | } 154 | .ContactCol { 155 | margin-left: 22px; 156 | } 157 | .ContactRow { 158 | margin-left: 50px; 159 | } 160 | } 161 | @media only screen and (max-width: 1010px) { 162 | .Bottom1 { 163 | margin-left: 35%; 164 | } 165 | .Rectangle2 { 166 | margin-left: 120px; 167 | } 168 | } 169 | @media (max-width: 992px) { 170 | .Rectangle2 { 171 | margin-left: 116px; 172 | } 173 | .Rectangle { 174 | margin-left: 92px; 175 | } 176 | .Bottom1 { 177 | margin-left: 35%; 178 | } 179 | } 180 | @media (max-width: 991px) { 181 | .Rectangle2 { 182 | margin-left: 80px; 183 | } 184 | .Rectangle { 185 | margin-left: 56px; 186 | } 187 | .Bottom1 { 188 | margin-left: 29%; 189 | } 190 | .Logo { 191 | width: 95%; 192 | margin-left: 0px; 193 | } 194 | .ContactCol { 195 | margin-left: 14px; 196 | } 197 | } 198 | @media (max-width: 970px) { 199 | .Rectangle2 { 200 | margin-left: 82px; 201 | } 202 | .Bottom1 { 203 | margin-left: 29%; 204 | } 205 | .ContactCol { 206 | margin-left: 12px; 207 | } 208 | .ContactRow { 209 | margin-left: 46px; 210 | } 211 | } 212 | @media (max-width: 966px) { 213 | .Bottom1 { 214 | margin-left: 29%; 215 | } 216 | } 217 | @media (max-width: 956px) { 218 | .Rectangle2 { 219 | margin-left: 84px; 220 | } 221 | .Bottom1 { 222 | margin-left: 29.5%; 223 | } 224 | } 225 | @media (max-width: 941px) { 226 | .Rectangle { 227 | margin-left: 60px; 228 | } 229 | .Bottom1 { 230 | margin-left: 29%; 231 | } 232 | } 233 | @media (max-width: 931px) { 234 | .Rectangle { 235 | margin-left: 60px; 236 | } 237 | .Rectangle2 { 238 | margin-left: 82px; 239 | } 240 | .Rectangle3 { 241 | margin-left: 290px; 242 | } 243 | .ImgColumn { 244 | margin-left: 26px; 245 | } 246 | .Bottom1 { 247 | margin-left: 30%; 248 | } 249 | } 250 | @media (max-width: 866px) { 251 | .Top1 { 252 | display: flex; 253 | justify-content: center; 254 | } 255 | .Rectangle { 256 | margin-left: 60px; 257 | } 258 | .Rectangle2 { 259 | margin-left: 82px; 260 | } 261 | .Bottom1 { 262 | margin-left: 30%; 263 | } 264 | .ContactCol { 265 | margin-left: 15px; 266 | } 267 | } 268 | @media (max-width: 851px) { 269 | .Top1 { 270 | margin-left: 1px; 271 | } 272 | .Rectangle { 273 | margin-left: 56px; 274 | } 275 | .Rectangle2 { 276 | margin-left: 80px; 277 | } 278 | .Bottom1 { 279 | margin-left: 30%; 280 | } 281 | .ContactCol { 282 | margin-left: 4px; 283 | } 284 | .ContactRow { 285 | margin-left: 36px; 286 | } 287 | } 288 | @media (max-width: 769px) { 289 | .Top1 { 290 | justify-content: space-evenly; 291 | } 292 | .Column1, 293 | .Column2 { 294 | font-size: 1px; 295 | } 296 | .Rectangle { 297 | margin-left: 26px; 298 | } 299 | .Rectangle2 { 300 | margin-left: 50px; 301 | } 302 | .Rectangle3 { 303 | margin-left: 283px; 304 | } 305 | .Logo { 306 | width: 165%; 307 | margin-left: -61px; 308 | padding: 20%; 309 | } 310 | .Bottom1 { 311 | margin-left: 22%; 312 | } 313 | } 314 | @media only screen and (max-width: 751px) { 315 | .Bottom1 { 316 | margin-left: 23%; 317 | } 318 | .ContactRow { 319 | margin-left: 40px; 320 | } 321 | } 322 | @media only screen and (max-width: 618px) { 323 | .Top1 { 324 | display: flex; 325 | flex-direction: column; 326 | justify-content: space-evenly; 327 | } 328 | .Column1, 329 | .Column2 { 330 | margin-bottom: 0px; 331 | margin-left: 15px; 332 | } 333 | .Bottom1 p { 334 | max-width: 100%; 335 | margin-left: 13px; 336 | } 337 | .SocialLinks { 338 | margin-left: 18px; 339 | } 340 | .ContactCol { 341 | margin-left: 18px; 342 | } 343 | .ContactRow { 344 | margin-left: 78px; 345 | } 346 | .ImgColumn { 347 | width: 45%; 348 | height: 10%; 349 | margin-left: -12px; 350 | } 351 | .Logo { 352 | width: 150%; 353 | height: 90%; 354 | margin-left: -11px; 355 | } 356 | .Rectangle { 357 | margin-left: 200px; 358 | } 359 | .Rectangle2 { 360 | margin-left: 226px; 361 | } 362 | .Rectangle3 { 363 | margin-left: 122px; 364 | } 365 | } 366 | @media (max-width: 596px) { 367 | .Rectangle { 368 | margin-left: 202px; 369 | } 370 | .Rectangle2 { 371 | margin-left: 226px; 372 | } 373 | .ContactCol { 374 | margin-left: 15px; 375 | } 376 | .ContactRow { 377 | margin-left: 62px; 378 | } 379 | .Bottom1 p { 380 | max-width: 100%; 381 | margin-left: 4px; 382 | } 383 | } 384 | @media (max-width: 576px) { 385 | .Rectangle { 386 | margin-left: 208px; 387 | } 388 | .Rectangle2 { 389 | margin-left: 232px; 390 | } 391 | .Bottom1 p { 392 | max-width: 100%; 393 | margin-left: 8px; 394 | } 395 | } 396 | @media (max-width: 565px) { 397 | .Rectangle { 398 | margin-left: 204px; 399 | } 400 | .Rectangle2 { 401 | margin-left: 226px; 402 | } 403 | .Bottom1 p { 404 | max-width: 100%; 405 | margin-left: 1px; 406 | } 407 | } 408 | @media (max-width: 554px) { 409 | .Rectangle { 410 | margin-left: 196px; 411 | } 412 | .Rectangle2 { 413 | margin-left: 222px; 414 | } 415 | .Bottom1 p { 416 | max-width: 100%; 417 | margin-left: 1px; 418 | } 419 | } 420 | @media (max-width: 546px) { 421 | .Rectangle { 422 | margin-left: 192px; 423 | } 424 | .Rectangle2 { 425 | margin-left: 216px; 426 | } 427 | .Logo { 428 | margin-left: -39px; 429 | } 430 | .Rectangle3 { 431 | margin-left: 188px; 432 | } 433 | .Bottom1 p { 434 | max-width: 100%; 435 | margin-left: 1px; 436 | } 437 | } 438 | @media (max-width: 539px) { 439 | .Rectangle { 440 | margin-left: 192px; 441 | } 442 | .Rectangle2 { 443 | margin-left: 214px; 444 | } 445 | .Rectangle3 { 446 | margin-left: 189px; 447 | } 448 | .Bottom1 p { 449 | max-width: 100%; 450 | margin-left: 1px; 451 | } 452 | } 453 | @media (max-width: 530px) { 454 | .Rectangle { 455 | margin-left: 184px; 456 | } 457 | .Rectangle2 { 458 | margin-left: 210px; 459 | } 460 | .Bottom1 p { 461 | max-width: 100%; 462 | margin-left: 0px; 463 | } 464 | } 465 | @media (max-width: 523px) { 466 | .Rectangle { 467 | margin-left: 182px; 468 | } 469 | .Rectangle2 { 470 | margin-left: 206px; 471 | } 472 | .Bottom1 p { 473 | max-width: 100%; 474 | margin-right: 10px; 475 | margin-left: 0px; 476 | } 477 | } 478 | @media (max-width: 517px) { 479 | .Rectangle { 480 | margin-left: 178px; 481 | } 482 | .Rectangle2 { 483 | margin-left: 204px; 484 | } 485 | .Bottom1 p { 486 | max-width: 100%; 487 | margin-right: 50px; 488 | margin-left: 0px; 489 | } 490 | } 491 | @media (max-width: 510px) { 492 | .Rectangle { 493 | margin-left: 174px; 494 | } 495 | .Rectangle2 { 496 | margin-left: 200px; 497 | } 498 | .Bottom1 p { 499 | justify-content: space-evenly; 500 | max-width: 100%; 501 | margin-left: 0px; 502 | text-align: center; 503 | } 504 | } 505 | @media (max-width: 507px) { 506 | .Rectangle { 507 | margin-left: 172px; 508 | } 509 | .Rectangle2 { 510 | margin-left: 198px; 511 | } 512 | .Bottom1 p { 513 | justify-content: space-evenly; 514 | max-width: 100%; 515 | margin-left: 0px; 516 | } 517 | } 518 | @media (max-width: 499px) { 519 | .Rectangle { 520 | margin-left: 170px; 521 | } 522 | .Rectangle2 { 523 | margin-left: 194px; 524 | } 525 | } 526 | @media (max-width: 490px) { 527 | .Rectangle { 528 | margin-left: 166px; 529 | } 530 | .Rectangle2 { 531 | margin-left: 190px; 532 | } 533 | } 534 | @media (max-width: 482px) { 535 | .Rectangle { 536 | margin-left: 160px; 537 | } 538 | .Rectangle2 { 539 | margin-left: 186px; 540 | } 541 | } 542 | @media (max-width: 470px) { 543 | .Rectangle { 544 | margin-left: 154px; 545 | } 546 | .Rectangle2 { 547 | margin-left: 180px; 548 | } 549 | .ContactRow { 550 | justify-content: space-evenly; 551 | } 552 | } 553 | @media (max-width: 460px) { 554 | .Rectangle { 555 | margin-left: 148px; 556 | } 557 | .Rectangle2 { 558 | margin-left: 172px; 559 | } 560 | } 561 | @media (max-width: 452px) { 562 | .Rectangle { 563 | margin-left: 144px; 564 | } 565 | .Rectangle2 { 566 | margin-left: 170px; 567 | } 568 | } 569 | @media (max-width: 444px) { 570 | .Rectangle { 571 | margin-left: 140px; 572 | } 573 | .Rectangle2 { 574 | margin-left: 166px; 575 | } 576 | } 577 | @media (max-width: 435px) { 578 | .Rectangle { 579 | margin-left: 138px; 580 | } 581 | .Rectangle2 { 582 | margin-left: 162px; 583 | } 584 | } 585 | @media (max-width: 430px) { 586 | .Rectangle { 587 | margin-left: 134px; 588 | } 589 | .Rectangle2 { 590 | margin-left: 158px; 591 | } 592 | } 593 | @media (max-width: 420px) { 594 | .Rectangle { 595 | margin-left: 129px; 596 | } 597 | .Rectangle2 { 598 | margin-left: 154px; 599 | } 600 | } 601 | @media (max-width: 415px) { 602 | .Rectangle { 603 | margin-left: 126px; 604 | } 605 | .Rectangle2 { 606 | margin-left: 150px; 607 | } 608 | .Rectangle3 { 609 | margin-left: 123px; 610 | } 611 | .Logo { 612 | margin-left: -23px; 613 | } 614 | } 615 | @media (max-width: 411px) { 616 | .Rectangle { 617 | margin-left: 124px; 618 | } 619 | .Rectangle2 { 620 | margin-left: 150px; 621 | } 622 | .Rectangle3 { 623 | margin-left: 124px; 624 | } 625 | .Logo { 626 | margin-left: -25px; 627 | } 628 | } 629 | @media (max-width: 396px) { 630 | .Rectangle { 631 | margin-left: 114px; 632 | } 633 | .Rectangle2 { 634 | margin-left: 140px; 635 | } 636 | } 637 | @media (max-width: 381px) { 638 | .Rectangle { 639 | margin-left: 110px; 640 | } 641 | .Rectangle2 { 642 | margin-left: 136px; 643 | } 644 | } 645 | @media only screen and (max-width: 376px) { 646 | .Rectangle { 647 | margin-left: 106px; 648 | } 649 | .Rectangle2 { 650 | margin-left: 132px; 651 | } 652 | .Rectangle3 { 653 | margin-left: 107px; 654 | } 655 | .Bottom1 p { 656 | margin-left: 10px; 657 | } 658 | } 659 | @media only screen and (max-width: 361px) { 660 | .Rectangle { 661 | margin-left: 100px; 662 | } 663 | .Rectangle2 { 664 | margin-left: 128px; 665 | } 666 | .Rectangle3 { 667 | margin-left: 106px; 668 | } 669 | .ImgColumn { 670 | margin-left: -34px; 671 | } 672 | .Logo { 673 | margin-left: -5px; 674 | } 675 | .Bottom1 p { 676 | margin-left: 16px; 677 | } 678 | } 679 | @media only screen and (max-width: 351px) { 680 | .Rectangle { 681 | margin-left: 96px; 682 | } 683 | .Rectangle2 { 684 | margin-left: 122px; 685 | } 686 | .Bottom1 p { 687 | margin-left: 16px; 688 | } 689 | } 690 | @media only screen and (max-width: 343px) { 691 | .Rectangle { 692 | margin-left: 90px; 693 | } 694 | .Rectangle2 { 695 | margin-left: 118px; 696 | } 697 | .Bottom1 p { 698 | margin-left: 16px; 699 | } 700 | } 701 | @media only screen and (max-width: 333px) { 702 | .Rectangle { 703 | margin-left: 86px; 704 | } 705 | .Rectangle2 { 706 | margin-left: 112px; 707 | } 708 | .Bottom1 p { 709 | margin-left: 24px; 710 | } 711 | } 712 | @media only screen and (max-width: 323px) { 713 | .Rectangle { 714 | margin-left: 80px; 715 | } 716 | .Rectangle2 { 717 | margin-left: 106px; 718 | } 719 | .Rectangle3 { 720 | margin-left: 78px; 721 | } 722 | .ImgColumn { 723 | margin-left: -3px; 724 | } 725 | .Logo { 726 | margin-left: -20px; 727 | } 728 | .Bottom1 p { 729 | margin-left: 24px; 730 | } 731 | } 732 | @media only screen and (max-width: 313px) { 733 | .Rectangle { 734 | margin-left: 76px; 735 | } 736 | .Rectangle2 { 737 | margin-left: 100px; 738 | } 739 | .Bottom1 p { 740 | margin-left: 24px; 741 | } 742 | } 743 | @media only screen and (max-width: 303px) { 744 | .Rectangle { 745 | margin-left: 68px; 746 | } 747 | .Rectangle2 { 748 | margin-left: 94px; 749 | } 750 | .Bottom1 p { 751 | margin-left: 24px; 752 | } 753 | } 754 | @media only screen and (max-width: 291px) { 755 | .Rectangle { 756 | margin-left: 64px; 757 | } 758 | .Rectangle2 { 759 | margin-left: 90px; 760 | } 761 | .ContactRow { 762 | display: flex; 763 | flex-direction: row; 764 | width: 100%; 765 | margin-left: 35px; 766 | } 767 | .Bottom1 p { 768 | margin-left: 24px; 769 | } 770 | } 771 | @media only screen and (max-width: 281px) { 772 | .Rectangle { 773 | margin-left: 60px; 774 | } 775 | .Rectangle2 { 776 | margin-left: 86px; 777 | } 778 | .Rectangle3 { 779 | margin-left: 58px; 780 | } 781 | .Logo { 782 | margin-left: -13px; 783 | } 784 | } 785 | @media only screen and (max-width: 271px) { 786 | .Rectangle { 787 | margin-left: 52px; 788 | } 789 | .Rectangle2 { 790 | margin-left: 80px; 791 | } 792 | .Rectangle3 { 793 | margin-left: 58px; 794 | } 795 | } 796 | @media only screen and (max-width: 271px) { 797 | .Rectangle { 798 | margin-left: 42px; 799 | } 800 | .Rectangle2 { 801 | margin-left: 70px; 802 | } 803 | } 804 | -------------------------------------------------------------------------------- /src/CSS/Forget.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: space-between; 6 | padding: 10px; 7 | width: 500px; 8 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 9 | } 10 | 11 | h1 { 12 | color: #008dc8; 13 | } 14 | 15 | Form { 16 | padding-top: 20px; 17 | padding-right: 40px; 18 | padding-bottom: 10px; 19 | padding-left: 40px; 20 | } 21 | 22 | .button { 23 | position: relative; 24 | /* float: right; */ 25 | margin-top: 20px; 26 | /* margin-right: 10%; */ 27 | padding: 5px 30px 5px 30px; 28 | color: #fff; 29 | font-size: 20px; 30 | text-align: center; 31 | background-color: #008dc8; 32 | border: none; 33 | border-radius: 50px; 34 | box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7); 35 | cursor: pointer; 36 | transition: all 0.5s; 37 | } 38 | 39 | .button:hover { 40 | text-decoration: none; 41 | background: #55b1eb; 42 | background-image: -webkit-linear-gradient(top, #55b1eb, #2389c4); 43 | background-image: -moz-linear-gradient(top, #55b1eb, #2389c4); 44 | background-image: -ms-linear-gradient(top, #55b1eb, #2389c4); 45 | background-image: -o-linear-gradient(top, #55b1eb, #2389c4); 46 | background-image: linear-gradient(to bottom, #55b1eb, #2389c4); 47 | } 48 | 49 | /* make outline none when button gets clicked */ 50 | .button:focus { 51 | outline: none; 52 | } 53 | 54 | .card a { 55 | color: #008dc8; 56 | text-decoration: none !important; 57 | cursor: pointer; 58 | } 59 | 60 | .card a:hover { 61 | text-decoration: none; 62 | } 63 | 64 | .reactIcons { 65 | cursor: pointer; 66 | } 67 | .inputitem { 68 | width: 350px; 69 | } 70 | -------------------------------------------------------------------------------- /src/CSS/KnowAbout.module.css: -------------------------------------------------------------------------------- 1 | .Jumbotron { 2 | padding-top: 0px; 3 | background-color: white; 4 | /* justify-content: center; */ 5 | } 6 | 7 | .Heading { 8 | font-size: 50px; 9 | text-align: center; 10 | } 11 | 12 | .About { 13 | color: #008dc8; 14 | } 15 | 16 | .jus_content { 17 | justify-content: center; 18 | } 19 | 20 | @media only screen and (max-width: 531px) { 21 | .Heading { 22 | font-size: 40px; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/CSS/KnowAboutCard.module.css: -------------------------------------------------------------------------------- 1 | .Box { 2 | /* justify-content: center; */ 3 | /* margin: 5% 5% 5% 5%; */ 4 | margin: 5%; 5 | /* margin-bottom: 5%; */ 6 | } 7 | 8 | .Card { 9 | width: 200px; 10 | border-radius: 2%; 11 | box-shadow: 0px 3px 4px 0px #ccc; 12 | /* margin-left: 50%; */ 13 | transition: all 0.6s; 14 | } 15 | 16 | .Card:hover { 17 | z-index: 99; 18 | box-shadow: 2px 2px 30px #b9b9b9; 19 | transform: scale(1.2); 20 | transition: all 1s; 21 | } 22 | 23 | .CardTitle { 24 | color: black; 25 | font-size: 23px; 26 | text-align: left; 27 | } 28 | 29 | a:hover { 30 | text-decoration: none; 31 | } 32 | 33 | .CardImage { 34 | width: 200px; 35 | height: 200px; 36 | padding: 20px; 37 | padding-bottom: 0px; 38 | } 39 | 40 | .Rectangle { 41 | width: 155px; 42 | height: 3px; 43 | margin-bottom: 20px; 44 | background-color: #008dc8; 45 | } 46 | 47 | @keyframes card-ani { 48 | 0% { 49 | transform: translateY(-20px); 50 | } 51 | 50% { 52 | transform: translateY(10px); 53 | } 54 | 100% { 55 | transform: translateY(-20px); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/CSS/Navbar.module.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Inconsolata:700'); 2 | .NavBar { 3 | margin: 0 0; 4 | background-color: white !important; 5 | } 6 | 7 | a:not([href]) { 8 | color: black; 9 | text-decoration: none; 10 | } 11 | a:not([href]):hover { 12 | color: #008dc8; 13 | transition: 0.5s; 14 | } 15 | 16 | .NavLinks { 17 | text-decoration: none; 18 | color: rgba(255, 255, 255, 0.5); 19 | position: relative; 20 | display: inline-block; 21 | list-style: none; 22 | cursor: pointer; 23 | 24 | margin: 0 10px; 25 | font-weight: 500; 26 | font-size: 17px; 27 | letter-spacing: 0px; 28 | } 29 | 30 | .NavLinks::before { 31 | content: attr(data-text); 32 | position: absolute; 33 | left: 0; 34 | top: 0%; 35 | width: 0%; 36 | white-space: nowrap; 37 | overflow: hidden; 38 | transition: 0.5s; 39 | border-bottom: 3px solid #008dc8; 40 | margin-top: 22px; 41 | } 42 | .NavLinks:hover::before { 43 | width: 100%; 44 | } 45 | 46 | .Brand { 47 | color: black !important ; 48 | } 49 | 50 | .Brand:hover { 51 | text-decoration: none; 52 | border: none; 53 | } 54 | 55 | .navbar-default { 56 | background-color: #f8f8f8; 57 | border-color: #e7e7e7; 58 | } 59 | 60 | .Logo { 61 | padding-left: 20px; 62 | font-weight: 390; 63 | font-size: 2.3rem; 64 | font-family: Arial; 65 | letter-spacing: 0px; 66 | } 67 | 68 | .Middle { 69 | margin-right: inherit; 70 | margin-left: inherit; 71 | } 72 | 73 | .ShiftRight { 74 | display: flex; 75 | justify-content: flex-end; 76 | } 77 | 78 | .searchContainer { 79 | margin-right: 10px; 80 | align-self: center; 81 | padding-left: 10px; 82 | border-radius: 5px; 83 | background-color: #f0f0f0; 84 | } 85 | .searchContainer input { 86 | outline: none; 87 | } 88 | .searchBar { 89 | /* height: 2.25rem; */ 90 | width: 250px; 91 | background-color: #f0f0f0; 92 | border: none; 93 | border-radius: 5px; 94 | padding: 3px 5px; 95 | } 96 | 97 | .searchBar::placeholder { 98 | font-size: 15px; 99 | font-family: Arial, Helvetica, sans-serif; 100 | color: #7a7a7a; 101 | } 102 | 103 | .Title { 104 | margin-right: 10px; 105 | 106 | margin-right: 10px; 107 | color: white; 108 | font-size: 20px; 109 | font-family: Arial, Helvetica, sans-serif; 110 | } 111 | 112 | .Dropdown { 113 | float: right; 114 | margin-left: 500px; 115 | color: #fff; 116 | font-size: 20px; 117 | background-color: #008dc8; 118 | border: none; 119 | border-radius: 5px; 120 | cursor: pointer; 121 | } 122 | 123 | .Button { 124 | padding: 5px 30px 5px 30px; 125 | color: #fff; 126 | font-size: 17px; 127 | text-align: center; 128 | background-color: #008dc8; 129 | border: none; 130 | cursor: pointer; 131 | transition: all 0.5s; 132 | margin-right: 10px; 133 | } 134 | .atag{ 135 | color: #008dc8; 136 | } 137 | 138 | .outline { 139 | color: #008dc8; 140 | background: #fff; 141 | border: 1px solid #008dc8; 142 | margin-right: 1rem; 143 | } 144 | 145 | .Button:hover { 146 | text-decoration: none; 147 | background: #55b1eb; 148 | background-image: -webkit-linear-gradient(top, #55b1eb, #2389c4); 149 | background-image: -moz-linear-gradient(top, #55b1eb, #2389c4); 150 | background-image: -ms-linear-gradient(top, #55b1eb, #2389c4); 151 | background-image: -o-linear-gradient(top, #55b1eb, #2389c4); 152 | background-image: linear-gradient(to bottom, #55b1eb, #2389c4); 153 | } 154 | 155 | .outline:hover { 156 | text-decoration: none; 157 | color: #008dc8; 158 | background: #d3e5f0; 159 | background-image: -webkit-linear-gradient(top, #fff, #e1ecf3); 160 | background-image: -moz-linear-gradient(top, #fff, #e1ecf3); 161 | background-image: -ms-linear-gradient(top, #fff, #e1ecf3); 162 | background-image: -o-linear-gradient(top, #fff, #e1ecf3); 163 | background-image: linear-gradient(to bottom, #fff, #e1ecf3); 164 | } 165 | 166 | /* make outline none when button gets clicked */ 167 | .Button:focus { 168 | outline: none; 169 | } 170 | 171 | .link { 172 | align-self: center; 173 | } 174 | 175 | .link:hover { 176 | border: none; 177 | } 178 | 179 | @media screen and (max-width: 991px) { 180 | .container { 181 | width: 280px; 182 | height: 45px; 183 | } 184 | .search { 185 | width: 48px; 186 | height: 48px; 187 | } 188 | .search::before { 189 | top: 17px; 190 | left: 18px; 191 | width: 12px; 192 | height: 1.5px; 193 | } 194 | .search::after { 195 | width: 22.5px; 196 | height: 21.5px; 197 | } 198 | .inp { 199 | width: 30px; 200 | height: 30px; 201 | } 202 | .inp:focus { 203 | width: 200px; 204 | cursor: text; 205 | opacity: 1; 206 | } 207 | .inp:focus ~ .search { 208 | right: -170px; 209 | background: #008dc8; 210 | opacity: 0; 211 | } 212 | } 213 | 214 | @media screen and (max-width: 360px) { 215 | .container { 216 | width: 260px; 217 | height: 37px; 218 | } 219 | .search { 220 | width: 45px; 221 | height: 45px; 222 | } 223 | .search::before { 224 | top: 14px; 225 | left: 20px; 226 | width: 10px; 227 | height: 1px; 228 | } 229 | .search::after { 230 | width: 20.5px; 231 | height: 19.5px; 232 | } 233 | .inp { 234 | width: 30px; 235 | height: 25px; 236 | } 237 | .inp:focus { 238 | width: 180px; 239 | cursor: text; 240 | opacity: 1; 241 | } 242 | .inp:focus ~ .search { 243 | right: -150px; 244 | background: #008dc8; 245 | opacity: 0; 246 | } 247 | } 248 | 249 | /* Older SearchButton: */ 250 | 251 | /* .Search { 252 | border-radius: 8px 0px 0px 8px; 253 | margin-top: auto; 254 | 255 | } */ 256 | 257 | /* .SearchButton { 258 | position: relative; 259 | padding: 4px 10px 4px 10px; 260 | color: white; 261 | font-size: 20px; 262 | background-color: #008dc8; 263 | border: none; 264 | border-radius: 0px 8px 8px 0px; 265 | 266 | margin-top: auto; 267 | font-size: 20px; 268 | position: relative; 269 | height: 2.9rem; 270 | width: 2.9rem; 271 | 272 | } */ 273 | 274 | @media (max-width: 360px) { 275 | .Logo { 276 | position: relative; 277 | 278 | font-size: 2rem; 279 | } 280 | } 281 | 282 | @media (max-width: 992px) { 283 | /* make outline none when button gets clicked */ 284 | .Button:focus { 285 | outline: none; 286 | } 287 | 288 | .searchContainer { 289 | align-self: flex-start; 290 | margin-left: 20px; 291 | padding-left: 10px; 292 | background-color: #f0f0f0; 293 | } 294 | .link { 295 | align-self: flex-start; 296 | margin-left: 20px; 297 | } 298 | 299 | @media only screen and (max-width: 993px) { 300 | .Middle { 301 | margin-right: 10px; 302 | } 303 | } 304 | 305 | @media only screen and (max-width: 991px) { 306 | .Middle { 307 | margin-left: 0px; 308 | } 309 | 310 | .ShiftRight { 311 | margin-top: 10px; 312 | margin-left: 0px; 313 | } 314 | 315 | .Dropdown { 316 | width: 15rem; 317 | margin-top: 10px; 318 | margin-bottom: 0.5rem; 319 | margin-left: 0px; 320 | } 321 | 322 | .SearchButton { 323 | width: 7rem; 324 | padding: 4px 10px 4px 10px; 325 | color: white; 326 | font-size: 20px; 327 | background-color: #008dc8; 328 | border: none; 329 | border-radius: 0px 8px 8px 0px; 330 | } 331 | 332 | .Search { 333 | width: 4rem; 334 | } 335 | } 336 | 337 | @media (max-width: 992px) { 338 | /* make outline none when button gets clicked */ 339 | .Button:focus { 340 | outline: none; 341 | } 342 | .Middle { 343 | margin-right: 10px; 344 | } 345 | 346 | @media only screen and (max-width: 993px) { 347 | .Middle { 348 | margin-right: 10px; 349 | } 350 | } 351 | 352 | @media only screen and (max-width: 991px) { 353 | .Middle { 354 | margin-left: 0px; 355 | } 356 | 357 | .ShiftRight { 358 | margin-top: 10px; 359 | margin-left: 0px; 360 | } 361 | 362 | .Dropdown { 363 | width: 15rem; 364 | margin-top: 10px; 365 | margin-bottom: 0.5rem; 366 | margin-left: 0px; 367 | } 368 | 369 | .SearchButton { 370 | width: 5rem; 371 | padding: 4px 10px 4px 10px; 372 | color: white; 373 | font-size: 20px; 374 | background-color: #008dc8; 375 | border: none; 376 | border-radius: 0px 8px 8px 0px; 377 | } 378 | 379 | .Button { 380 | margin-top: 10px; 381 | } 382 | .Search { 383 | width: 7rem; 384 | } 385 | } 386 | 387 | @media only screen and (max-width: 450px) { 388 | .ShiftRight { 389 | padding-left: 10px; 390 | font-size: 0.9rem; 391 | } 392 | 393 | .Button, 394 | .Middle { 395 | font-size: 1rem; 396 | } 397 | 398 | .NavBar a { 399 | padding: 5px; 400 | font-size: 0.9rem; 401 | } 402 | 403 | .Title { 404 | padding: 0; 405 | font-size: 1rem; 406 | } 407 | .Search { 408 | width: 5rem; 409 | } 410 | } 411 | } 412 | 413 | @media screen and (max-width: 450px) { 414 | .searchContainer { 415 | margin-left: 25px; 416 | } 417 | } 418 | 419 | @media only screen and (max-width: 360px) { 420 | .Logo { 421 | position: relative; 422 | width: 15rem; 423 | transition: all 0.5s; 424 | } 425 | .Search { 426 | width: 5rem; 427 | } 428 | } 429 | } 430 | 431 | @media only screen and (max-width: 3280px) { 432 | .NavBar { 433 | padding: 8px 10px 8px 4px; 434 | } 435 | .Middle { 436 | margin-right: inherit; 437 | } 438 | } 439 | -------------------------------------------------------------------------------- /src/CSS/Newsletter.module.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 420px) { 2 | .sub_text fieldset button{ 3 | font-size: 20px; 4 | height: 35px; 5 | padding: 2px 12px 2px 12px; 6 | border-radius: 4px; 7 | } 8 | .sub_text fieldset input{ 9 | 10 | margin-right: 1.7rem; 11 | margin-bottom: 2rem; 12 | height: 40px; 13 | width: 200px; 14 | border: 1px solid gray; 15 | border-radius: 4px; 16 | } 17 | .sub_text fieldset{ 18 | margin-left: 10%; 19 | padding: 8%; 20 | margin-bottom: 4%; 21 | } 22 | .sub_text h4{ 23 | padding: 2%; 24 | } 25 | .subscribe h1{ 26 | margin-left: 20%; 27 | } 28 | 29 | } 30 | 31 | @media (min-width: 420px) { 32 | .field{ 33 | margin-left: 0.2rem; 34 | } 35 | .sub_text fieldset button{ 36 | font-size: 20px; 37 | height: 40px; 38 | padding: 3px 15px 3px 15px; 39 | } 40 | .sub_text fieldset input{ 41 | height: 40px; 42 | width: 200px; 43 | border: 1px solid gray; 44 | border-radius: 4px; 45 | } 46 | .field{ 47 | display: flex; 48 | flex-direction: row; 49 | } 50 | 51 | .subscribe h1{ 52 | margin-left: 36%; 53 | } 54 | .sub_text fieldset{ 55 | margin-left: 16%; 56 | padding: 8%; 57 | margin-bottom: 4%; 58 | } 59 | .sub_text h4{ 60 | padding: 2%; 61 | } 62 | } 63 | @media (min-width: 992px) { 64 | .field{ 65 | margin-left: 12rem; 66 | } 67 | .sub_text fieldset button{ 68 | font-size: 20px; 69 | height: 45px; 70 | padding: 5px 30px 5px 30px; 71 | } 72 | .sub_text fieldset input{ 73 | height: 45px; 74 | width: 280px; 75 | border: 1px solid grey; 76 | border-radius: 4px; 77 | } 78 | .field{ 79 | display: flex; 80 | flex-direction: row; 81 | } 82 | 83 | .subscribe h1{ 84 | margin-left: 38%; 85 | } 86 | .sub_text fieldset{ 87 | margin-left: 30%; 88 | padding: 8%; 89 | margin-bottom: 4%; 90 | } 91 | .sub_text h4{ 92 | padding: 2%; 93 | } 94 | } 95 | @media (min-width: 1200px) { 96 | .field{ 97 | margin-left: 17rem; 98 | } 99 | .field{ 100 | display: flex; 101 | flex-direction: row; 102 | } 103 | .sub_text fieldset input{ 104 | height: 45px; 105 | width: 300px; 106 | border: 1px solid grey; 107 | border-radius: 4px; 108 | } 109 | .sub_text fieldset button{ 110 | padding: 5px 30px 5px 30px; 111 | font-size: 20px; 112 | height: 45px; 113 | } 114 | .subscribe h1{ 115 | margin-left: 42%; 116 | } 117 | .sub_text h4{ 118 | padding: 2%; 119 | } 120 | .sub_text fieldset{ 121 | margin-left: 32%; 122 | padding: 10%; 123 | margin-bottom: 4%; 124 | } 125 | } 126 | .heading{ 127 | color: '#008dc8'; 128 | font-weight: bold; 129 | font-size: 40px; 130 | font-family: 'Poppins', sans-serif; 131 | letter-spacing: 0px; 132 | text-align: center; 133 | } 134 | .sub_text h4{ 135 | font-family: 'Poppins', sans-serif; 136 | letter-spacing: 0px; 137 | text-align: center; 138 | } 139 | .sub_text fieldset{ 140 | padding: 2rem; 141 | } 142 | .sub_text fieldset button{ 143 | float: right; 144 | margin-right: 10%; 145 | color: #fff; 146 | text-align: center; 147 | background-color: #008dc8; 148 | border: none; 149 | } 150 | 151 | -------------------------------------------------------------------------------- /src/CSS/Opportunity.module.css: -------------------------------------------------------------------------------- 1 | .ColumnCard { 2 | max-width: 80%; 3 | } 4 | 5 | .ColumnPost { 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: flex-start; 10 | max-width: 20%; 11 | padding-top: 20px; 12 | } 13 | 14 | .Card { 15 | width: 100%; 16 | margin-top: 3rem; 17 | border-radius: 15px; 18 | border-radius: 15px; 19 | box-shadow: 0px 12px 12px -10px #ccc; 20 | transition: all 0.6s; 21 | background-color: #FBFCFC ; 22 | 23 | } 24 | .Card:hover { 25 | z-index: 99; 26 | box-shadow: 2px 2px 30px #b9b9b9; 27 | transform: scale(1.05); 28 | transition: all 1s; 29 | } 30 | 31 | .CardTitle { 32 | text-align: left; 33 | } 34 | 35 | a:hover { 36 | text-decoration: none; 37 | } 38 | 39 | .headingContainer { 40 | align-items: center; 41 | } 42 | 43 | .CardImage { 44 | margin-left: 20px; 45 | border-radius: 50%; 46 | margin-top: 2rem; 47 | text-align: start; 48 | height: 80px; 49 | width: 80px; 50 | padding-bottom: 0px; 51 | box-shadow: 0px 12px 12px -10px lightgray; 52 | } 53 | 54 | .Rectangle { 55 | width: 155px; 56 | height: 3px; 57 | margin-bottom: 20px; 58 | background-color: #008dc8; 59 | } 60 | 61 | .HeadingRow { 62 | flex-wrap: nowrap; 63 | align-items: center; 64 | } 65 | 66 | .Title { 67 | display: inline-block; 68 | margin-top: 2rem; 69 | color: #008dc8; 70 | margin-left: 10px; 71 | font-size: 1.5em; 72 | word-wrap: break-word; 73 | word-break: normal; 74 | overflow-wrap: break-word; 75 | overflow-wrap: break-word; 76 | -webkit-hyphen: none; 77 | -moz-hyphen: none; 78 | } 79 | 80 | .titleContainer { 81 | align-items: flex-start; 82 | } 83 | 84 | .Subtitle { 85 | font-size: 1.1em; 86 | margin-left: 5px; 87 | color: gray; 88 | } 89 | 90 | .Description { 91 | margin-top: 15px; 92 | margin-bottom: 35px; 93 | color: #4c5052; 94 | hyphens: none; 95 | line-break: auto; 96 | } 97 | 98 | .Heading { 99 | color: #008dc8; 100 | margin-top: 5px; 101 | margin-left: 0px; 102 | font-size: 1.1rem; 103 | } 104 | 105 | .Value { 106 | margin-top: 5px; 107 | margin-left: 5px; 108 | color: black; 109 | font-size: 1.1rem; 110 | } 111 | 112 | .Button { 113 | position: relative; 114 | margin-top: 20px; 115 | padding: 5px 30px 5px 30px; 116 | color: #fff; 117 | font-size: 1em; 118 | text-align: center; 119 | background-color: #008dc8; 120 | border: none; 121 | border-radius: 50px; 122 | box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7); 123 | cursor: pointer; 124 | transition: all 0.5s; 125 | } 126 | 127 | .Button:hover { 128 | text-decoration: none; 129 | background: #55b1eb; 130 | background-image: -webkit-linear-gradient(top, #55b1eb, #2389c4); 131 | background-image: -moz-linear-gradient(top, #55b1eb, #2389c4); 132 | background-image: -ms-linear-gradient(top, #55b1eb, #2389c4); 133 | background-image: -o-linear-gradient(top, #55b1eb, #2389c4); 134 | background-image: linear-gradient(to bottom, #55b1eb, #2389c4); 135 | } 136 | 137 | 138 | /* make outline none when button gets clicked */ 139 | 140 | .Button:focus { 141 | outline: none; 142 | } 143 | 144 | .Button1 { 145 | margin-top: 10px; 146 | display: flex; 147 | justify-content: center; 148 | align-items: center; 149 | margin-right: 5px; 150 | float: right; 151 | font-size: 1.1em; 152 | padding: 5px 35px; 153 | border: 1px solid #008cd8; 154 | text-align: center; 155 | border-radius: 5px; 156 | color: #008cd8; 157 | cursor: pointer; 158 | } 159 | 160 | .Button1:hover { 161 | text-decoration: none; 162 | box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; 163 | background-color: #008cd8; 164 | } 165 | 166 | 167 | /* make outline none when button gets clicked */ 168 | 169 | .Button1:focus { 170 | outline: none; 171 | } 172 | 173 | .BannerImage { 174 | width: 7rem; 175 | height: 15rem; 176 | margin-top: 100px; 177 | margin-left: 200px; 178 | } 179 | 180 | .BannerText { 181 | background-color: #e2f3fb; 182 | margin-top: 4.5rem; 183 | height: 10rem; 184 | box-shadow: 0 8px 6px -4px #c7c7c7; 185 | } 186 | 187 | .cardText { 188 | font-weight: bold; 189 | font-size: 2.7em; 190 | color: #0084ba; 191 | margin-top: 25px; 192 | } 193 | 194 | .fallbackText { 195 | text-align: center; 196 | margin-top: 220px; 197 | margin-bottom: 200px; 198 | } 199 | 200 | .opportunityBody { 201 | background-color: white; 202 | padding-top: 3rem; 203 | margin-bottom: 0px; 204 | padding-bottom: 0px; 205 | } 206 | 207 | .Dropdown { 208 | width: auto; 209 | min-width: 200px; 210 | color: #fff; 211 | background-color: #f0f0f0; 212 | border: none; 213 | border-radius: 5px 5px 5px 5px; 214 | cursor: pointer; 215 | transition: all 0.5s; 216 | font-size: 1.1rem; 217 | font-family: Arial, Helvetica, sans-serif; 218 | margin-right: 10px; 219 | margin-top: 0; 220 | } 221 | 222 | .Dropdown a { 223 | border: none; 224 | color: #7a7a7a; 225 | text-decoration: none; 226 | } 227 | 228 | .Dropdown a::after { 229 | margin-left: 2em; 230 | } 231 | 232 | .btn { 233 | width: auto; 234 | min-width: 200px; 235 | color: #fff; 236 | background-color: #f0f0f0; 237 | border: none; 238 | border-radius: 5px 5px 5px 5px; 239 | cursor: pointer; 240 | transition: all 0.5s; 241 | font-size: 1.1rem; 242 | font-family: Arial, Helvetica, sans-serif; 243 | margin-top: -40px; 244 | margin-left: 940px; 245 | 246 | } 247 | .atag{ 248 | color: #7a7a7a; 249 | text-decoration: none; 250 | border: none; 251 | text-align: center; 252 | } 253 | .btn:hover{ 254 | background-color: #f0f0f0; 255 | color: #7a7a7a; 256 | } 257 | .atag:hover{ 258 | 259 | color: #7a7a7a; 260 | } -------------------------------------------------------------------------------- /src/CSS/PageNotFound.module.css: -------------------------------------------------------------------------------- 1 | .Jumbotron { 2 | justify-content: center; 3 | padding: 6.5rem 2.5rem; 4 | background-color: white; 5 | } 6 | 7 | .Container { 8 | width: 100%; 9 | margin-top: 8% auto auto; 10 | padding-right: 15px; 11 | padding-left: 15px; 12 | text-align: center; 13 | } 14 | 15 | @media (max-width: 993px) { 16 | .Container { 17 | max-width: 100%; 18 | height: auto; 19 | } 20 | } 21 | 22 | @media (max-width: 760px) { 23 | .Container { 24 | max-width: 100%; 25 | height: auto; 26 | margin-top: 12%; 27 | } 28 | } 29 | 30 | @media (max-width: 993px) { 31 | .NotFoundImage { 32 | max-width: 90%; 33 | height: auto; 34 | } 35 | } 36 | 37 | @media (max-width: 760px) { 38 | .NotFoundImage { 39 | max-width: 90%; 40 | height: auto; 41 | } 42 | } 43 | 44 | .ImgColumn { 45 | display: flex; 46 | justify-content: center; 47 | padding-top: 5rem; 48 | } 49 | 50 | .NotFoundMessage { 51 | margin-top: auto; 52 | margin-bottom: auto; 53 | font-weight: lighter; 54 | font-size: 1.8rem; 55 | font-family: 'Poppins', sans-serif; 56 | line-height: 160%; 57 | text-align: center; 58 | } 59 | 60 | @media (max-width: 993px) { 61 | .NotFoundMessage { 62 | max-width: 100%; 63 | font-size: 1.5rem; 64 | text-align: center; 65 | } 66 | } 67 | 68 | @media (max-width: 760px) { 69 | .NotFoundMessage { 70 | font-size: 1.2rem; 71 | letter-spacing: 0.2rem; 72 | text-align: center; 73 | } 74 | } 75 | 76 | .NotFoundButtonDiv { 77 | margin-top: 2.5rem; 78 | } 79 | 80 | .NotFoundButtonLink { 81 | position: relative; 82 | padding: 5px 30px 5px 30px; 83 | color: #fff; 84 | font-size: 20px; 85 | text-align: center; 86 | background-color: #008dc8; 87 | border: none; 88 | border-radius: 50px; 89 | box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7); 90 | cursor: pointer; 91 | transition: all 0.5s; 92 | } 93 | 94 | .NotFoundButtonLink:hover { 95 | color: #fff; 96 | text-decoration: none; 97 | background: #55b1eb; 98 | background-image: -webkit-linear-gradient(top, #55b1eb, #2389c4); 99 | background-image: -moz-linear-gradient(top, #55b1eb, #2389c4); 100 | background-image: -ms-linear-gradient(top, #55b1eb, #2389c4); 101 | background-image: -o-linear-gradient(top, #55b1eb, #2389c4); 102 | background-image: linear-gradient(to bottom, #55b1eb, #2389c4); 103 | } 104 | 105 | .NotFoundButtonLink:focus { 106 | outline: none; 107 | } 108 | -------------------------------------------------------------------------------- /src/CSS/PostForm.module.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'); 2 | .CardTitle { 3 | color: black; 4 | font-size: 33px; 5 | text-align: left; 6 | } 7 | 8 | a:hover { 9 | text-decoration: none; 10 | } 11 | 12 | .CardImage { 13 | width: 200px; 14 | height: 200px; 15 | padding: 20px; 16 | padding-bottom: 0px; 17 | } 18 | 19 | .form_group { 20 | margin: 20px 0; 21 | padding: 0 20px; 22 | } 23 | .form_header { 24 | font-family: Roboto; 25 | font-style: normal; 26 | font-weight: normal; 27 | font-size: 30px; 28 | width: auto; 29 | margin-left: 20px; 30 | line-height: 55px; 31 | border-bottom: #008dc8 solid 5px; 32 | color: #000000; 33 | } 34 | 35 | .label { 36 | font-family: Roboto; 37 | font-style: normal; 38 | font-size: 18px; 39 | line-height: 16px; 40 | /* or 89% */ 41 | 42 | letter-spacing: 0.15px; 43 | font-feature-settings: 'pnum' on, 'lnum' on; 44 | 45 | /* Charcoal */ 46 | 47 | color: #384248; 48 | } 49 | .Input { 50 | border-top-width: 0in; 51 | border-right-width: 0in; 52 | border-left-width: 0in; 53 | } 54 | 55 | .RectangleEligibility { 56 | width: 105px; 57 | height: 5px; 58 | margin-bottom: 20px; 59 | background-color: #008dc8; 60 | } 61 | 62 | .RectangleBasicDetails { 63 | width: 300px; 64 | height: 3px; 65 | margin-bottom: 20px; 66 | background-color: #008dc8; 67 | } 68 | 69 | .RectangleJobDescription { 70 | width: 195px; 71 | height: 5px; 72 | margin-bottom: 20px; 73 | background-color: #008dc8; 74 | } 75 | 76 | .RectangleRounds { 77 | width: 95px; 78 | height: 5px; 79 | margin-bottom: 20px; 80 | background-color: #008dc8; 81 | } 82 | 83 | .Button { 84 | padding: 5px 30px; 85 | font-size: 17px; 86 | position: relative; 87 | float: right; 88 | margin-top: 10px; 89 | margin-left: 20px; 90 | color: #fff; 91 | text-align: center; 92 | background-color: #008dc8; 93 | border: none; 94 | box-shadow: 0 10px 20px -8px rgb(0 0 0 / 70%); 95 | transition: all .5s; 96 | } 97 | 98 | /* make outline none when button gets clicked */ 99 | .Button:focus { 100 | outline: none; 101 | } 102 | 103 | .PostFormComponent { 104 | width: 100%; 105 | padding: 10px; 106 | margin: 80px 0 0 0; 107 | background: #e2f3fb; 108 | } 109 | 110 | /* @media only screen and (max-width: 1113px) { 111 | .PostFormComponent { 112 | width: 60%; 113 | margin: 120px auto 20px; 114 | padding-left: 3%; 115 | } */ 116 | /* } */ 117 | 118 | /* @media only screen and (max-width: 1000px) { 119 | .PostFormComponent { 120 | width: 65%; 121 | margin: 120px auto 20px; 122 | padding-left: 2%; 123 | } 124 | } 125 | 126 | @media only screen and (max-width: 801px) { 127 | .PostFormComponent { 128 | width: 70%; 129 | margin: 120px auto 20px; 130 | padding-left: 0; 131 | } 132 | } 133 | 134 | @media only screen and (max-width: 650px) { 135 | .PostFormComponent { 136 | width: 75%; 137 | margin: 120px auto 20px; 138 | padding-right: 40px; 139 | } 140 | } */ 141 | 142 | @media only screen and (max-width: 578px) { 143 | .switch { 144 | margin: 20px 0; 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /src/CSS/ScrollTop.module.css: -------------------------------------------------------------------------------- 1 | .scrollTopButton { 2 | position: fixed; 3 | right: 30px; 4 | bottom: 20px; 5 | z-index: 99; 6 | width: 45px; 7 | height: 45px; 8 | font-size: 18px; 9 | background-color: #008dc8; 10 | border: none; 11 | border-radius: 50px; 12 | outline: none; 13 | cursor: pointer; 14 | } 15 | 16 | .scrollTopButton:hover { 17 | background-color: #55b1eb; 18 | outline: none; 19 | } 20 | 21 | .upArrow { 22 | display: inline-block; 23 | padding: 3px; 24 | border: solid white; 25 | border-width: 0 5px 5px 0; 26 | -webkit-transform: rotate(-135deg); 27 | transform: rotate(-135deg); 28 | } 29 | -------------------------------------------------------------------------------- /src/CSS/SignupLogin.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: space-between; 6 | padding: 10px; 7 | width: 500px; 8 | margin-top: 20px; 9 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 10 | } 11 | .card2 { 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: space-between; 16 | padding: 10px; 17 | width: 500px; 18 | margin-top: 20px; 19 | margin-bottom: 22px; 20 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); 21 | } 22 | 23 | h1 { 24 | color: #008dc8; 25 | } 26 | 27 | Form { 28 | padding-top: 20px; 29 | padding-right: 40px; 30 | padding-bottom: 10px; 31 | padding-left: 40px; 32 | } 33 | 34 | .button { 35 | position: relative; 36 | /* float: right; */ 37 | margin-top: 20px; 38 | /* margin-right: 10%; */ 39 | padding: 5px 30px 5px 30px; 40 | color: #fff; 41 | font-size: 20px; 42 | text-align: center; 43 | background-color: #008dc8; 44 | border: none; 45 | border-radius: 50px; 46 | box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7); 47 | cursor: pointer; 48 | transition: all 0.5s; 49 | } 50 | 51 | .button:hover { 52 | text-decoration: none; 53 | background: #55b1eb; 54 | background-image: -webkit-linear-gradient(top, #55b1eb, #2389c4); 55 | background-image: -moz-linear-gradient(top, #55b1eb, #2389c4); 56 | background-image: -ms-linear-gradient(top, #55b1eb, #2389c4); 57 | background-image: -o-linear-gradient(top, #55b1eb, #2389c4); 58 | background-image: linear-gradient(to bottom, #55b1eb, #2389c4); 59 | } 60 | 61 | /* make outline none when button gets clicked */ 62 | .button:focus { 63 | outline: none; 64 | } 65 | 66 | .card a { 67 | color: #008dc8; 68 | text-decoration: none !important; 69 | cursor: pointer; 70 | } 71 | 72 | .card a:hover { 73 | text-decoration: none; 74 | } 75 | 76 | .reactIcons { 77 | cursor: pointer; 78 | } 79 | .inputitem { 80 | width: 350px; 81 | } 82 | .img { 83 | margin-top: -10px; 84 | } 85 | -------------------------------------------------------------------------------- /src/CSS/SocialIcons.module.css: -------------------------------------------------------------------------------- 1 | .socialIcons { 2 | position: fixed; 3 | top: 30%; 4 | left: 0%; 5 | width: 82px; 6 | display: flex; 7 | flex-direction: column; 8 | } 9 | .socialIcons a { 10 | padding: 10px; 11 | padding-top: 6px; 12 | padding-bottom: 6px; 13 | font-size: 17px; 14 | background-color: #008dc8; 15 | margin: 2px; 16 | text-align: right; 17 | border-radius: 0px 33px 33px 0px; 18 | transform: translate(-32px, 0px); 19 | transition: all 0.5s; 20 | } 21 | .socialIcons a:hover { 22 | transform: translate(-12px, 0px); 23 | } 24 | .icons { 25 | margin-left: 25px; 26 | background-color: white; 27 | height: 32px; 28 | width: 34px; 29 | color: black; 30 | padding: 6px; 31 | text-align: center; 32 | line-height: 40px; 33 | border-radius: 33%; 34 | transition: all 0.5s; 35 | } 36 | 37 | .socialIcons a:hover .icons { 38 | transform: rotate(360deg); 39 | } 40 | -------------------------------------------------------------------------------- /src/Components/Error/PageNotFound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import NotFound from '../../Assets/NotFound.svg'; 3 | import { Jumbotron, Col, Image } from 'react-bootstrap'; 4 | import Navbar from '../../Components/HomePage/Sections/Navbar'; 5 | import { Link } from 'react-router-dom'; 6 | import styles from '../../CSS/PageNotFound.module.css'; 7 | 8 | const PageNotFound = () => { 9 | return ( 10 |
11 |
12 | {' '} 13 | {' '} 14 |
{' '} 15 | 16 |
17 | 18 | Page Not Found 23 | {' '} 24 |

25 | The page you are looking for doesn’ t exist! 26 |

{' '} 27 |

28 | You may have mistyped the address or page maybe removed.{' '} 29 |

30 |
31 | 32 | {' '} 33 | Take me home{' '} 34 | {' '} 35 |
{' '} 36 |
{' '} 37 | {' '} 38 |
39 | ); 40 | }; 41 | 42 | export default PageNotFound; 43 | -------------------------------------------------------------------------------- /src/Components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Container, Jumbotron, Row, Col, Image } from 'react-bootstrap'; 3 | import Logo from '../../Assets/GCI.png'; 4 | import styles from '../../CSS/Footer.module.css'; 5 | import { 6 | FaLinkedinIn, 7 | FaInstagram, 8 | FaTwitter, 9 | FaPhoneAlt, 10 | FaGithub, 11 | } from 'react-icons/fa'; 12 | // import { BiCopyright } from 'react-icons/bi'; 13 | import { GrMail } from 'react-icons/gr'; 14 | import { Link } from 'react-router-dom'; 15 | 16 | function Footer() { 17 | return ( 18 | 19 | 20 | 21 | 22 |
Products
23 |
24 | 25 |

28 | CodeMaps 29 |

30 | 31 | 32 |

35 | {' '} 36 | Opportuntiy Calendar{' '} 37 |

38 | 39 | 40 | 41 | 42 | 43 | 44 | Logo 45 | 46 | 47 | 48 | 49 |
Links
50 |
51 |

52 | {' '} 53 | Terms and Condition{' '} 54 |

55 |

Privacy Policy

56 | Feedback Form 57 | 58 | 59 | 60 | 61 | 66 | {' '} 67 | {' '} 68 | 69 | 74 | {' '} 75 | {' '} 76 | 77 | 82 | {' '} 83 | {' '} 84 | 85 | 90 | {' '} 91 | {' '} 92 | 93 | 94 | 95 | 96 | 97 |
Contact Us
98 |
99 | 100 | 101 | 102 | 103 |

104 | {' '} 105 | (+91) - 83848-13292{' '} 106 |

107 |

108 | {' '} 109 | girlcodeit@gmail.com{' '} 110 |

111 | 112 | 113 | 114 | 115 |

116 | © {new Date().getFullYear()} Girl Code It | All rights 117 | reserved. 118 |

119 | 120 | 121 | 122 | 123 | ); 124 | } 125 | 126 | export default Footer; 127 | -------------------------------------------------------------------------------- /src/Components/Forget/Forget.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import styles from '../../CSS/Forget.module.css'; 3 | import { Navbar, Form, Card, Button, Row, InputGroup } from 'react-bootstrap'; 4 | import { BsEye, BsEyeSlash } from 'react-icons/bs'; 5 | import forget from '../Forget/forget.png'; 6 | 7 | const Forget = () => { 8 | const [showPassword, setShowPassword] = useState(false); 9 | const handleShowPassword = () => 10 | setShowPassword((prevShowPassword) => !prevShowPassword); 11 | 12 | return ( 13 | <> 14 | 15 | 16 | 21 | Girl 22 | Code 23 | It 24 | 25 | 26 | 27 |

28 | 29 | 30 |

31 |
Forgot Password
32 | Illustration by Freepik Storyset 39 |
40 | 41 | 46 | 47 | 48 | 49 | 54 | 55 | 56 | 57 | 58 | 63 | 67 | 68 | {showPassword ? : } 69 | 70 | 71 | 72 | 73 | 74 | 75 | 80 | 81 |
82 | 87 |

88 | 89 | 90 |



91 | 92 | ); 93 | }; 94 | 95 | export default Forget; 96 | -------------------------------------------------------------------------------- /src/Components/Forget/forget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Girl-Code-It/Opportunity-Calendar-Frontend/73bb1dabb630acbd31de998f01caf18ff1953bb9/src/Components/Forget/forget.png -------------------------------------------------------------------------------- /src/Components/HomePage/HomePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Navbar from './Sections/Navbar'; 3 | import Banner from './Sections/Banner'; 4 | import KnowAbout from './Sections/KnowAbout'; 5 | import Faq from './Sections/FAQ_main'; 6 | import AboutUs from './Sections/AboutUs'; 7 | import ContactUs from './Sections/ContactUs'; 8 | import Newsletter from './Sections/Newsletter' 9 | 10 | function HomePage() { 11 | return ( 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | ); 22 | } 23 | 24 | export default HomePage; 25 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/AboutUs.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Jumbotron, Container, Image, Row, Col } from 'react-bootstrap'; 3 | import styles from '../../../CSS/AboutUs.module.css'; 4 | import AboutUsImg from '../../../Assets/AboutUs.gif'; 5 | 6 | export default function AboutUs() { 7 | return ( 8 | 9 | 10 |

11 | About 12 | Us 13 |

14 | 15 | 16 | 21 | 22 | 23 |

24 |
25 |
26 | If you feel like you keep missing on good opportunities that 27 | others grab easily only because you never find out about them in 28 | time, we got you covered!! 29 |
30 |
31 |
32 | Opportunity Calendar provides instant information on newly posted 33 | opportunities for techies. Now you won't miss another deadline for 34 | applying to your dream companies. The calendar is your one-stop 35 | solution to know all about the latest Job openings, Internships, 36 | Scholarships, and all tech events including Tech Conferences, 37 | Hackathons, and other Coding Competitions. 38 |
39 |
40 |

41 |
42 |
43 |
44 | 48 | Know More 49 | 50 | 51 | 52 | 53 | 54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/Banner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../../../CSS/Banner.module.css'; 3 | import { Container, Row, Col, Jumbotron, Image } from 'react-bootstrap'; 4 | import BannerImage from '../../../Assets/banner.gif'; 5 | 6 | function Banner() { 7 | return ( 8 | 9 | 10 | 11 | 12 |

13 | Opportunity 14 |

15 | Calendar 16 |

17 |
18 |
19 | BannerImage 25 |
26 |

27 | Know right opportunities 28 |

29 | at the right time! 30 |

31 | 32 | 33 | 34 | 35 | 36 | BannerImage 42 | 43 | 44 | 45 | 46 | ); 47 | } 48 | 49 | export default Banner; 50 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/ContactUs.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { FaUserAlt, FaEnvelope, FaPencilAlt } from 'react-icons/fa'; 3 | import axios from 'axios'; 4 | import { Jumbotron, Container, Row, Col, Form, Button } from 'react-bootstrap'; 5 | import styles from '../../../CSS/ContactUs.module.css'; 6 | 7 | export default function ContactUs() { 8 | const [serverState, setServerState] = useState({ 9 | submitting: false, 10 | status: null, 11 | }); 12 | 13 | const handleServerResponse = (ok, msg, form) => { 14 | setServerState({ 15 | submitting: false, 16 | status: { ok, msg }, 17 | }); 18 | if (ok) { 19 | form.reset(); 20 | } 21 | }; 22 | 23 | const handleSubmit = (e) => { 24 | e.preventDefault(); 25 | const form = e.target; 26 | setServerState({ submitting: true }); 27 | axios({ 28 | method: 'post', 29 | url: 'https://formspree.io/' + process.env.FORMSPREE_API_KEY, 30 | data: new FormData(form), 31 | }) 32 | .then((r) => { 33 | handleServerResponse(true, 'Thanks!', form); 34 | }) 35 | .catch((r) => { 36 | handleServerResponse(false, r.response.data.error, form); 37 | }); 38 | }; 39 | 40 | return ( 41 | 45 | 46 |

47 | Get In Touch 48 |

49 | 53 | 54 |
55 | 56 | 57 | 58 | 59 | 65 | 66 | 70 | 71 | 72 | 73 | 80 | 81 | 82 | 83 | 84 | 85 | 93 | 94 | 95 | 98 | {serverState.status && ( 99 |

100 | {serverState.status.msg} 101 |

102 | )} 103 | 104 |
105 | 106 | 107 | 108 | 109 | ); 110 | } 111 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/FAQ_Cards.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../../../CSS/FAQ.module.css'; 3 | import { Container, Row, Col } from 'react-bootstrap'; 4 | import arrow from '../../../Assets/arrow.png'; 5 | import arrowup from '../../../Assets/arrowup.png'; 6 | 7 | function FAQCard(props) { 8 | const { open } = props.item; 9 | return ( 10 |
props.handleChange(props.item.id)}> 11 | 12 | 13 | 14 |
{props.item.question}
15 | 16 | 17 | arrow 23 | 24 | 25 | 26 | 27 |
28 | {props.item.answer} 29 |
30 | 31 | 32 | 33 |
34 | ); 35 | } 36 | export default FAQCard; 37 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/FAQ_Data.js: -------------------------------------------------------------------------------- 1 | var FAQData = [ 2 | { 3 | id: 1, 4 | open: false, 5 | question: 'What is Opportunity Calendar?', 6 | answer: 7 | "Exactly what the title says : It's a calendar filled with opportunities in the tech industry for you!", 8 | }, 9 | { 10 | id: 2, 11 | open: false, 12 | question: 'Why is it needed?', 13 | answer: 14 | "Many a times, it's not that we don't have the right opportunities - it's that we don't know about them. The opportunity calendar serves the purpose of eliminating this hurdle- by keeping you abreast with all the latest relevant opportunities in the technology world.", 15 | }, 16 | { 17 | id: 3, 18 | open: false, 19 | question: 'How can you benefit?', 20 | answer: 21 | "The way we see it - the benefits are endless. Want to pursue your passion in coding? We're sure you'll find something here suited to your needs. Want to know what companies look for in their ideal candidate? You'll find it here! It all depends on you from there on out!", 22 | }, 23 | { 24 | id: 4, 25 | open: false, 26 | question: 'How can you contribute?', 27 | answer: 28 | 'This is the easiest job in the world. Keep your eyes and ears perked up for such opportunities, and once spotted, give one of us a heads up! As simple as that :)', 29 | }, 30 | ]; 31 | 32 | export default FAQData; 33 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/FAQ_main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FAQCard from './FAQ_Cards'; 3 | import Data from './FAQ_Data'; 4 | import styles from '../../../CSS/FAQ.module.css'; 5 | import { Container, Row } from 'react-bootstrap'; 6 | 7 | class FAQS extends React.Component { 8 | constructor() { 9 | super(); 10 | this.state = { 11 | cards: Data, 12 | }; 13 | this.handleChange = this.handleChange.bind(this); 14 | } 15 | 16 | handleChange(id) { 17 | const prevcards = [...this.state.cards]; 18 | const cards = prevcards.map((c) => { 19 | const u = { ...c }; 20 | if (c.id === id) { 21 | u.open = !u.open; 22 | } else { 23 | u.open = false; 24 | } 25 | return u; 26 | }); 27 | this.setState({ cards }); 28 | } 29 | 30 | render() { 31 | const QCards = this.state.cards.map((item) => ( 32 | 33 | )); 34 | 35 | return ( 36 |
37 | 38 |

39 | Frequently Asked{' '} 40 | Questions 41 |

42 | 43 |
{QCards}
44 | 45 | 46 |
47 | ); 48 | } 49 | } 50 | 51 | export default FAQS; 52 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/KnowAbout.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import KnowAboutCard from './KnowAboutCard'; 3 | import KnowAboutData from './KnowAboutData'; 4 | import { Container, Jumbotron, Row } from 'react-bootstrap'; 5 | import styles from '../../../CSS/KnowAbout.module.css'; 6 | 7 | class KnowAbout extends Component { 8 | constructor() { 9 | super(); 10 | this.state = { 11 | KnowAboutData, 12 | }; 13 | } 14 | 15 | render() { 16 | let KnowAboutData = this.state.KnowAboutData.map((knowAbout) => { 17 | return ( 18 | 23 | ); 24 | }); 25 | 26 | return ( 27 | 28 | 29 |

30 | Know 31 | About 32 |

33 | 37 | {KnowAboutData} 38 | 39 | 40 | 41 | ); 42 | } 43 | } 44 | 45 | export default KnowAbout; 46 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/KnowAboutCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'react-bootstrap'; 3 | import styles from '../../../CSS/KnowAboutCard.module.css'; 4 | 5 | function KnowAbout(props) { 6 | const imgModule = import(`../../../Assets/${props.knowAbout.imgUrl}`); 7 | const [imgSrc, setImgSrc] = React.useState(''); 8 | 9 | // load images 10 | React.useEffect(() => { 11 | imgModule.then((mod) => { 12 | setImgSrc(mod.default); 13 | }); 14 | }, []); 15 | 16 | return ( 17 | 37 | ); 38 | } 39 | 40 | export default KnowAbout; 41 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/KnowAboutData.js: -------------------------------------------------------------------------------- 1 | var KnowAboutData = [ 2 | { 3 | id: 1, 4 | name: 'Full Time Jobs', 5 | imgUrl: 'fte.svg', 6 | link: '/viewopportunity/fulltime', 7 | }, 8 | { 9 | id: 2, 10 | name: 'Hackathons', 11 | imgUrl: 'hackathon-small.png', 12 | link: '/viewopportunity/hackathon', 13 | }, 14 | { 15 | id: 3, 16 | name: 'Scholarships', 17 | imgUrl: 'scholarship-small.png', 18 | link: '/viewopportunity/scholarship', 19 | }, 20 | { 21 | id: 4, 22 | name: 'Coding Competitions', 23 | imgUrl: 'coding-small.png', 24 | link: '/viewopportunity/codingcomp', 25 | }, 26 | { 27 | id: 5, 28 | name: 'Tech Conferences', 29 | imgUrl: 'conference-small.png', 30 | link: '/viewopportunity/techconf', 31 | }, 32 | { 33 | id: 6, 34 | name: 'Internship Opportunities', 35 | imgUrl: 'internships-small.png', 36 | link: '/viewopportunity/internships', 37 | }, 38 | ]; 39 | 40 | export default KnowAboutData; 41 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../../../CSS/Navbar.module.css'; 3 | import { Navbar, Nav } from 'react-bootstrap'; 4 | import { Link } from 'react-scroll'; 5 | 6 | function navbar() { 7 | return ( 8 | 9 | 10 | 11 | Girl 12 | Code 13 | It 14 | 15 | 16 | 17 | 18 | 35 | 36 | 37 | ); 38 | } 39 | 40 | export default navbar; 41 | -------------------------------------------------------------------------------- /src/Components/HomePage/Sections/Newsletter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../../../CSS/Newsletter.module.css'; 3 | 4 | 5 | const newsletter = () => { 6 | return( 7 | 8 |
9 |

10 | Newsletter 11 |

12 |
13 | 14 |

Get weekly updates in your inbox!

15 |
16 |
17 |
18 | 19 | 20 |
21 |
22 |
23 | 24 | ); 25 | }; 26 | 27 | export default newsletter; -------------------------------------------------------------------------------- /src/Components/PostOpportunity/AddDiv.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function AddDiv() { 4 | return ( 5 |
6 |
7 |
Opportunities don’t knock,
8 |
9 | so build a door for the seeker!{' '} 10 |
11 |
12 |
13 | ); 14 | } 15 | 16 | export default AddDiv; 17 | -------------------------------------------------------------------------------- /src/Components/PostOpportunity/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../../CSS/Navbar.module.css'; 3 | import { Link } from 'react-router-dom'; 4 | import { Navbar, Nav, Button } from 'react-bootstrap'; 5 | // import { AiOutlineSearch } from 'react-icons/ai'; 6 | 7 | function navbar(props) { 8 | return ( 9 | 10 | 11 | 12 | Girl 13 | Code 14 | It 15 | 16 | 17 | 18 | 19 | 41 | 42 | 43 | ); 44 | } 45 | 46 | export default navbar; -------------------------------------------------------------------------------- /src/Components/PostOpportunity/PostOpportunity.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PostOpportunityForm from './PostOpportunityForm'; 3 | import styles from '../../CSS/PostForm.module.css'; 4 | import AddDiv from './AddDiv'; 5 | import Navbar from './Navbar'; 6 | 7 | function PostOpportunity(props) { 8 | let path = props.path; 9 | return ( 10 |
11 | 12 | 13 |
14 | 15 |
16 |
17 | ); 18 | } 19 | 20 | export default PostOpportunity; 21 | -------------------------------------------------------------------------------- /src/Components/PostOpportunity/PostOpportunityForm.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import axios from 'axios'; 4 | import { Form, Button,Row, Col } from 'react-bootstrap'; 5 | import styles from '../../CSS/PostForm.module.css'; 6 | 7 | //regex for url validation 8 | var pattern = new RegExp( 9 | '^(https?:\\/\\/)?' + // protocol 10 | '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name 11 | '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address 12 | '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path 13 | '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string 14 | '(\\#[-a-z\\d_]*)?$', 15 | 'i' 16 | ); 17 | const mapUrlToName = { 18 | techconf: 'Tech Conference', 19 | codingcomp: 'Coding Competition', 20 | scholarship: 'Scholarship', 21 | hackathon: 'Hackathon', 22 | internships: 'Internship Opportunity', 23 | fulltime: 'Full Time Job', 24 | }; 25 | let path; 26 | class OpportunityForm extends Component { 27 | constructor(props) { 28 | super(props); 29 | path = props.path; 30 | 31 | this.state = { 32 | type: '', 33 | title: '', 34 | url: '', 35 | company: '', 36 | date: '', 37 | description: '', 38 | jobid:'', 39 | location: '', 40 | eligibility: '', 41 | deadline: '', 42 | image: '', 43 | onlyForFemale: false, 44 | FieldEmptyError: '', 45 | URLError: '', 46 | }; 47 | } 48 | 49 | handleChange = (event) => { 50 | let itemValue = event.target.value; 51 | this.setState({ 52 | [event.target.name]: itemValue, 53 | }); 54 | }; 55 | 56 | validate = () => { 57 | let FieldEmptyError = ''; 58 | let URLError = ''; 59 | if ( 60 | !this.state.type || 61 | !this.state.title || 62 | !this.state.description || 63 | !this.state.eligibility || 64 | !this.state.location 65 | ) { 66 | FieldEmptyError = 'cannot be blank'; 67 | } 68 | if (!pattern.test(this.state.jobURL) || !pattern.test(this.state.image)) { 69 | URLError = 'Invalid URL'; 70 | } 71 | if (FieldEmptyError || URLError) { 72 | this.setState({ FieldEmptyError, URLError }); 73 | return false; 74 | } 75 | return true; 76 | }; 77 | 78 | handleSubmit = (event) => { 79 | event.preventDefault(); 80 | axios 81 | .post('https://opportunity-calendar.herokuapp.com/opportunity', { 82 | opportunityTitle: this.state.title, 83 | opportunityType: this.state.type, 84 | opportunityURL: this.state.url, 85 | opportunityOrganisation: this.state.company, 86 | opportunityDate: this.state.date, 87 | opportunityDescription: this.state.description, 88 | opportunityLocation: this.state.location, 89 | opportunityEligibility: this.state.eligibility, 90 | opportunityRegistrationDeadline: this.state.deadline, 91 | organisationLogoURL: this.state.image, 92 | onlyForFemale: this.state.onlyForFemale, 93 | }) 94 | .then( 95 | (res) => { 96 | const data = res.data; 97 | console.log(data); 98 | this.setState({ data }); 99 | }, 100 | (error) => { 101 | console.log(error); 102 | } 103 | ); 104 | this.setState({ 105 | type: '', 106 | title: '', 107 | url: '', 108 | date: '', 109 | company: '', 110 | description: '', 111 | location: '', 112 | eligibility: '', 113 | jobid:'', 114 | deadline: '', 115 | image: '', 116 | onlyForFemale: '', 117 | }); 118 | setTimeout(() => { 119 | window.location.href = `/viewopportunity/${path}`; 120 | }, 1000); 121 | }; 122 | 123 | render() { 124 | const { 125 | type, 126 | title, 127 | company, 128 | jobid, 129 | url, 130 | date, 131 | description, 132 | location, 133 | eligibility, 134 | deadline, 135 | image, 136 | } = this.state; 137 | return ( 138 |
139 |
140 | 141 | 142 | 146 | Post a {mapUrlToName[path]} 147 | 148 | 149 | 150 | 158 | 159 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | Last date to apply (YYYY-MM-DD) 178 | 179 | 189 | 190 | 191 | 192 | 193 | 194 | Logo URL 195 | 196 | 206 | 207 | 208 | 209 | 210 | {mapUrlToName[path] + ' Name'} 211 | 212 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | Location 231 | 232 | 242 | 243 | 244 | 245 | 246 | 250 | Eligibility 251 | 252 | 261 | 262 | 263 | 264 | 265 | 266 | Website 267 | 268 | 277 | 278 | 279 | 280 | 281 | 282 | {(path === 'internships' || path === 'fulltime') && ( 283 | 284 | 285 | 286 | Job Id 287 | 288 | 297 | 298 | )} 299 | 300 | {(path === 'internships' || path === 'fulltime') && ( 301 | 302 | 303 | 304 | Company name 305 | 306 | 315 | 316 | 317 | )} 318 | 319 | 320 | 321 | {(path === 'techconf' || 322 | path === 'codingcomp' || 323 | path === 'hackathon') && ( 324 | 325 | 326 | 327 | Event Date 328 | 329 | 339 | 340 | )} 341 | 342 | 343 | 344 | 345 | 346 | Description 347 | 348 | 357 | 358 | 359 | 360 | 361 | 367 | this.setState({ onlyForFemale: event.target.checked }) 368 | } 369 | /> 370 | 371 | 372 | 373 | 374 | 375 | 378 | 379 | 380 |
381 |
382 | ); 383 | } 384 | } 385 | 386 | export default OpportunityForm; 387 | -------------------------------------------------------------------------------- /src/Components/ScrollTop/ScrollTop.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import styles from '../../CSS/ScrollTop.module.css'; 3 | 4 | export default class ScrollTop extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | isVisible: false, 9 | }; 10 | } 11 | 12 | componentDidMount() { 13 | var scrollComponent = this; 14 | document.addEventListener('scroll', function (e) { 15 | scrollComponent.toggleVisibility(); 16 | }); 17 | } 18 | 19 | toggleVisibility() { 20 | if (window.pageYOffset > 50) { 21 | this.setState({ 22 | isVisible: true, 23 | }); 24 | } else { 25 | this.setState({ 26 | isVisible: false, 27 | }); 28 | } 29 | } 30 | 31 | scrollToTop() { 32 | window.scrollTo({ 33 | top: 0, 34 | behavior: 'smooth', 35 | }); 36 | } 37 | 38 | render() { 39 | return ( 40 |
41 | {this.state.isVisible && ( 42 |
this.scrollToTop()}> 43 | 46 |
47 | )} 48 |
49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/Components/SignupLogin/Login.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import styles from '../../CSS/SignupLogin.module.css'; 3 | import { Navbar, Form, Card, Button, Row,Col, InputGroup } from 'react-bootstrap'; 4 | 5 | import { GoogleLogin } from 'react-google-login'; 6 | import { BsEye, BsEyeSlash } from "react-icons/bs"; 7 | import LoginImg from '../../Assets/login.svg'; 8 | 9 | const Login = () => { 10 | const [showPassword, setShowPassword] = useState(false); 11 | const handleShowPassword = () => 12 | setShowPassword((prevShowPassword) => !prevShowPassword); 13 | 14 | return ( 15 | 16 |
17 | 18 | 19 | 24 | Girl 25 | Code 26 | It 27 | 28 | 29 | 30 | 31 |



32 |
Login
33 | Illustration by Freepik Storyset 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | {showPassword ? : } 45 | 46 | 47 | 48 | 49 | 50 | Forgot password ? 51 | 52 | 53 |
54 | 57 | 58 |

OR

59 | 60 |

61 | Don't have an Account ? Signup 62 |

63 | 64 | 65 |

66 |
67 | 68 | 69 | ); 70 | }; 71 | 72 | export default Login; -------------------------------------------------------------------------------- /src/Components/SignupLogin/SignUp.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import styles from '../../CSS/SignupLogin.module.css'; 3 | import { Form, Card, Button, Row, InputGroup,Navbar } from 'react-bootstrap'; 4 | import { GoogleLogin } from 'react-google-login'; 5 | import { BsEye, BsEyeSlash } from "react-icons/bs"; 6 | import SignupImg from '../../Assets/signup.svg'; 7 | 8 | 9 | const SignUp = () => { 10 | const [showPassword, setShowPassword] = useState(false); 11 | const handleShowPassword = () => 12 | setShowPassword((prevShowPassword) => !prevShowPassword); 13 | 14 | return ( 15 |
16 | 17 | 18 | 19 | Girl 20 | Code 21 | It 22 | 23 | 24 | 25 | 26 |



27 |
Sign Up
28 | Illustration by Freepik Storyset 29 | 30 | Please fill this form to create your account. 31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | {showPassword ? : } 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | I accept the 65 | Terms and Conditions &{' '} 66 | Privacy Policy 67 | 68 |
69 | 72 |

OR

73 | 74 |

75 | Already have an Account? Login 76 |

77 | 78 | 79 |
80 | ); 81 | }; 82 | 83 | export default SignUp; 84 | -------------------------------------------------------------------------------- /src/Components/SocialIcons/SocialIcons.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from '../../CSS/SocialIcons.module.css'; 3 | import { 4 | FaLinkedinIn, 5 | FaInstagram, 6 | FaTwitter, 7 | FaPhoneAlt, 8 | FaGithub, 9 | } from 'react-icons/fa'; 10 | 11 | export default function SocialIcons() { 12 | return ( 13 |
14 | 15 | 16 | 17 | 18 |
19 | ); 20 | } -------------------------------------------------------------------------------- /src/Components/ViewOpportunity/CommonComponents.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import axios from 'axios'; 3 | import { OpportunityCard } from './OpportunityCard'; 4 | import { 5 | Card, 6 | Col, 7 | Container, 8 | Jumbotron, 9 | Row, 10 | Image, 11 | Button, 12 | NavDropdown, 13 | } from 'react-bootstrap'; 14 | import styles from '../../CSS/Opportunity.module.css'; 15 | import Navbar from './Navbar'; 16 | 17 | const URL = window.location.href; 18 | const splitUrl = URL.split('/viewopportunity/')[1]; 19 | const mapUrlToName = { 20 | techconf: 'Tech Conferences', 21 | codingcomp: 'Coding Competitions', 22 | scholarship: 'Scholarships', 23 | hackathon: 'Hackathons', 24 | internships: 'Internship Opportunities', 25 | fulltime: 'Full Time Jobs', 26 | }; 27 | 28 | export default function CommonComponents({ onSearchFinal }) { 29 | const handleSearchString = (value) => { 30 | onSearchFinal(value) 31 | } 32 | return ( 33 | <> 34 | 35 | 36 | 37 | 38 | {mapUrlToName[splitUrl]} 39 | 40 | 41 | 42 | 43 | 44 | 45 | 50 | 51 | {' '} Full Time Jobs{' '} 52 | 53 | 54 | {' '} Hackathons{' '} 55 | 56 | 57 | {' '} Scholarships{' '} 58 | 59 | 60 | {' '} Coding Competitions{' '} 61 | 62 | 63 | {' '} Tech Conferences{' '} 64 | 65 | 66 | {' '} Internship Opportunities{' '} 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | ); 76 | } 77 | -------------------------------------------------------------------------------- /src/Components/ViewOpportunity/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from '../../CSS/Navbar.module.css'; 3 | import { Navbar, Nav, Button } from 'react-bootstrap'; 4 | import { Link } from 'react-router-dom'; 5 | import { AiOutlineSearch } from 'react-icons/ai'; 6 | 7 | function Navbar1({ onSearch }) { 8 | const [postOpportunityPath, setPostOpportunityPath] = React.useState(); 9 | 10 | // as the last chunk of ViewOpportunity and PostOpportunity is same, we can 11 | // simply extract it from the URL. passing a prop is not necessary 12 | React.useEffect(() => { 13 | const pathname = window.location.pathname; 14 | const lastChunk = pathname.split('/').pop(); 15 | lastChunk && setPostOpportunityPath(`/postopportunity/${lastChunk}`); 16 | }, []); 17 | 18 | const handleChange = (value) => onSearch(value); 19 | 20 | return ( 21 | 22 | 23 | 24 | Girl 25 | Code 26 | It 27 | 28 | 29 | 30 | 31 | 53 | 54 | 55 | ); 56 | } 57 | 58 | export default Navbar1; 59 | -------------------------------------------------------------------------------- /src/Components/ViewOpportunity/OpportunityCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card, Row, Col, Container, Image, Button } from 'react-bootstrap'; 3 | import styles from '../../CSS/Opportunity.module.css'; 4 | 5 | export function OpportunityCard(props) { 6 | const { opportunityId, 7 | opportunityType, 8 | opportunityLocation, 9 | opportunityDescription, 10 | opportunityEligibility, 11 | opportunityRegistrationDeadline, 12 | opportunityDate, 13 | opportunityTitle, 14 | opportunityOrganisation, 15 | organisationLogoURL, 16 | opportunityURL } = props.item; 17 | 18 | const changeDateFormat = (timestamp) => { 19 | const date = new Date(timestamp).toLocaleDateString().split('/'); 20 | return date[1] + '-' + date[0] + '-' + date[2]; 21 | } 22 | 23 | return ( 24 | 25 | 26 | 27 | 28 | 29 | 30 | {opportunityTitle} 36 | 37 | {opportunityTitle} 38 | { 39 | opportunityOrganisation && 40 |

{opportunityOrganisation}

41 | } 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | {opportunityDescription && ( 54 |

{opportunityDescription}

55 | )} 56 | 57 | 58 |
59 | Location: 60 | {opportunityLocation} 61 |
62 | 63 | 64 |
65 | Eligibility : 66 | {opportunityEligibility} 67 |
68 | 69 | 70 | 71 | 72 | 73 |
74 | Date : 75 | {changeDateFormat(opportunityDate)} 76 |
77 | 78 | 79 |
80 | Deadline : 81 | {changeDateFormat(opportunityRegistrationDeadline)} 82 |
83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | ); 94 | } 95 | -------------------------------------------------------------------------------- /src/Components/ViewOpportunity/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import axios from 'axios'; 3 | import { OpportunityCard } from './OpportunityCard'; 4 | import { 5 | Card, 6 | Col, 7 | Container, 8 | Jumbotron, 9 | Row, 10 | NavDropdown, 11 | } from 'react-bootstrap'; 12 | import styles from '../../CSS/Opportunity.module.css'; 13 | import Navbar from './Navbar'; 14 | import CommonComponents from './CommonComponents'; 15 | 16 | const mapPathToResource = { 17 | CONFERENCE: { image: import('../../Assets/conference-large.png') }, 18 | CODINGCOMPETITION: { image: import('../../Assets/coding-large.png') }, 19 | SCHOLARSHIP: { image: import('../../Assets/scholarship-large.png') }, 20 | HACKATHON: { image: import('../../Assets/hackathon-large.png') }, 21 | INTERNSHIP: { image: import('../../Assets/internships-large.png') }, 22 | JOB: { image: import('../../Assets/fte.svg') }, 23 | }; 24 | 25 | /** 26 | * @param {Object} props 27 | * @param {string} props.path - API path. something like `internships` 28 | */ 29 | 30 | const URL = window.location.href; 31 | const splitUrl = URL.split('/viewopportunity/')[1]; 32 | const mapUrlToName = { 33 | techconf: 'Tech Conferences', 34 | codingcomp: 'Coding Competitions', 35 | scholarship: 'Scholarships', 36 | hackathon: 'Hackathons', 37 | internships: 'Internship Opportunities', 38 | fulltime: 'Full Time Jobs', 39 | }; 40 | 41 | export function ViewOpportunity(props) { 42 | const [data, setData] = useState(null); 43 | const [imgSrc, setImgSrc] = useState(); 44 | const [filteredData, setFilteredData] = useState(data); 45 | const [searchString, setSearchString] = useState(''); 46 | 47 | React.useEffect(() => { 48 | if (searchString?.length > 0) { 49 | setFilteredData( 50 | data.results.filter((opportunity) => { 51 | if ( 52 | opportunity.opportunityTitle 53 | ?.toLowerCase() 54 | .includes(searchString.toLowerCase()) || 55 | opportunity.opportunityOrganisation 56 | ?.toLowerCase() 57 | .includes(searchString.toLowerCase()) 58 | ) { 59 | return opportunity; 60 | } 61 | }) 62 | ); 63 | } else { 64 | setFilteredData(data?.results); 65 | } 66 | }, [searchString, data]); 67 | 68 | const handleSearchString = (val) => { 69 | setSearchString(val); 70 | }; 71 | 72 | // whenever props.path changes, get latest data from backend 73 | React.useEffect(() => { 74 | axios 75 | .get(generateAPIEndpoint(props.path)) 76 | .then((res) => { 77 | setData(res.data.data); 78 | }) 79 | .catch((err) => console.log(err.stack)); 80 | }, [props.path]); 81 | 82 | // lazy load image 83 | React.useEffect(() => { 84 | mapPathToResource[props.path].image.then((mod) => setImgSrc(mod.default)); 85 | }, [props.path]); 86 | 87 | if (!data) { 88 | return ( 89 |
90 | 91 |

Loading Opportunities if any...

92 |
93 | ); 94 | } 95 | 96 | const data_length = filteredData?.length; // used to check whether opportunity count is 0 97 | 98 | return ( 99 | <> 100 | 101 | 102 | 103 | {data_length === 0 ? ( 104 |
105 |

No opportunities found!!

106 |
107 | ) : ( 108 | <> 109 | 110 | 111 | 112 | {filteredData?.map((item) => { 113 | return ; 114 | })} 115 | 116 | 117 | 118 | 119 | )} 120 | 121 | 122 | 123 | ); 124 | } 125 | 126 | /** 127 | * @param {string} pathChunk API endpoint path for this specific job listing 128 | */ 129 | function generateAPIEndpoint(TYPE) { 130 | return `https://opportunity-calendar.herokuapp.com/opportunity/?type=${TYPE}`; 131 | } 132 | -------------------------------------------------------------------------------- /src/Hooks/reducer.js: -------------------------------------------------------------------------------- 1 | import UserActionTypes from './user.actions'; 2 | 3 | export const INITIAL_STATE = { 4 | currentUser: null, 5 | } 6 | 7 | const reducer = (state = INITIAL_STATE, action) => { 8 | switch(action.type) { 9 | case UserActionTypes.SET_CURRENT_USER: 10 | return { 11 | ...state, 12 | currentUser: action.payload 13 | } 14 | default: 15 | return state; 16 | } 17 | } 18 | 19 | export default reducer; -------------------------------------------------------------------------------- /src/Hooks/stateProvider.js: -------------------------------------------------------------------------------- 1 | import React, {createContext, useContext, useReducer } from 'react'; 2 | 3 | // Prepares the dataLayer 4 | const StateContext = createContext(); 5 | 6 | // Wrap our app and Provide the Data layer 7 | export function StateProvider({ reducer, initialState, children}){ 8 | return ( 9 | 10 | {children} 11 | 12 | ) 13 | } 14 | 15 | // pull information from the data layer 16 | export const useStateValue = () => useContext(StateContext); -------------------------------------------------------------------------------- /src/Hooks/user.actions.js: -------------------------------------------------------------------------------- 1 | const UserActionTypes = { 2 | SET_CURRENT_USER: "SET_CURRENT_USER", 3 | } 4 | 5 | export default UserActionTypes; -------------------------------------------------------------------------------- /src/__tests__/Footer/Footer.test.js: -------------------------------------------------------------------------------- 1 | import Footer from '../../Components/Footer/Footer'; 2 | import React from 'react'; 3 | import { render, unmountComponentAtNode } from 'react-dom'; 4 | import { act } from 'react-dom/test-utils'; 5 | 6 | let container = null; 7 | beforeEach(() => { 8 | container = document.createElement('div'); 9 | document.body.appendChild(container); 10 | }); 11 | 12 | afterEach(() => { 13 | unmountComponentAtNode(container); 14 | container.remove(); 15 | container = null; 16 | }); 17 | 18 | it('check if footer component renders correctly', () => { 19 | act(() => { 20 | render(