├── .npmrc
├── public
├── robots.txt
├── favicon.ico
├── images
│ ├── 1.png
│ ├── 2.png
│ ├── 3.png
│ ├── 4.png
│ ├── bg1.png
│ ├── bg2.png
│ ├── bg3.png
│ ├── bg4.png
│ ├── leftarrow.png
│ ├── FIRST PAGE.png
│ ├── background.png
│ ├── gallery
│ │ ├── 1.jpeg
│ │ ├── 2.jpeg
│ │ └── website.png
│ ├── rightarrow.png
│ ├── cropimage6166.svg
│ ├── GDSC LOGO FOOTER.png
│ ├── header
│ │ ├── background.png
│ │ ├── googleHomeboy.webp
│ │ ├── background.svg
│ │ └── background_ext.svg
│ ├── assets
│ │ └── readmeImages
│ │ │ ├── Fork.png
│ │ │ ├── clone.png
│ │ │ └── gallery.png
│ ├── Copy of Copy of dsc-ecosystem-banners-linkedin-blue (1).png
│ ├── RightImage.svg
│ ├── GDSC LOGO 1.svg
│ └── LogoWithoutText.svg
├── logo192.png
├── logo512.png
├── manifest.json
└── index.html
├── src
├── Pages
│ ├── Event
│ │ ├── image 49.png
│ │ ├── image 50.png
│ │ ├── green banner png.png
│ │ ├── all_event.js
│ │ ├── MobileUpcoming.js
│ │ ├── Upcoming.js
│ │ ├── Event.js
│ │ └── Event.css
│ ├── Home.css
│ ├── Home.js
│ ├── Teams.js
│ └── Footer
│ │ ├── Footer.css
│ │ ├── Footer.jsx
│ │ └── Footer.js
├── setupTests.js
├── App.test.js
├── index.css
├── reportWebVitals.js
├── index.js
├── Components
│ ├── HeaderCss.js
│ ├── slider.css
│ ├── Alternative
│ │ ├── contributors
│ │ │ ├── contributors.js
│ │ │ └── Contributors.module.css
│ │ ├── Home
│ │ │ ├── Home.js
│ │ │ └── Home.module.css
│ │ ├── about
│ │ │ ├── about.js
│ │ │ └── about.module.css
│ │ ├── gallery
│ │ │ ├── gallery.js
│ │ │ └── gallery.module.css
│ │ ├── Header.js
│ │ └── Header.module.css
│ ├── Header.js
│ ├── AboutSection.js
│ └── SliderComponent.js
├── App.js
├── theme.js
├── logo.svg
└── App.css
├── webpack.config.js
├── .github
├── pull_request_template.md
├── workflows
│ └── greetings.yml
├── ISSUE_TEMPLATE
│ ├── feature.yaml
│ ├── documentation.yaml
│ └── bug.yaml
└── config.yml
├── .gitignore
├── Contributors.md
├── .all-contributorsrc
├── LICENSE
├── package.json
└── README.md
/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
2 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/1.png
--------------------------------------------------------------------------------
/public/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/2.png
--------------------------------------------------------------------------------
/public/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/3.png
--------------------------------------------------------------------------------
/public/images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/4.png
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/logo512.png
--------------------------------------------------------------------------------
/public/images/bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/bg1.png
--------------------------------------------------------------------------------
/public/images/bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/bg2.png
--------------------------------------------------------------------------------
/public/images/bg3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/bg3.png
--------------------------------------------------------------------------------
/public/images/bg4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/bg4.png
--------------------------------------------------------------------------------
/public/images/leftarrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/leftarrow.png
--------------------------------------------------------------------------------
/public/images/FIRST PAGE.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/FIRST PAGE.png
--------------------------------------------------------------------------------
/public/images/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/background.png
--------------------------------------------------------------------------------
/public/images/gallery/1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/gallery/1.jpeg
--------------------------------------------------------------------------------
/public/images/gallery/2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/gallery/2.jpeg
--------------------------------------------------------------------------------
/public/images/rightarrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/rightarrow.png
--------------------------------------------------------------------------------
/src/Pages/Event/image 49.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/src/Pages/Event/image 49.png
--------------------------------------------------------------------------------
/src/Pages/Event/image 50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/src/Pages/Event/image 50.png
--------------------------------------------------------------------------------
/public/images/cropimage6166.svg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/cropimage6166.svg
--------------------------------------------------------------------------------
/public/images/GDSC LOGO FOOTER.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/GDSC LOGO FOOTER.png
--------------------------------------------------------------------------------
/public/images/gallery/website.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/gallery/website.png
--------------------------------------------------------------------------------
/public/images/header/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/header/background.png
--------------------------------------------------------------------------------
/src/Pages/Event/green banner png.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/src/Pages/Event/green banner png.png
--------------------------------------------------------------------------------
/public/images/header/googleHomeboy.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/header/googleHomeboy.webp
--------------------------------------------------------------------------------
/public/images/assets/readmeImages/Fork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/assets/readmeImages/Fork.png
--------------------------------------------------------------------------------
/public/images/assets/readmeImages/clone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/assets/readmeImages/clone.png
--------------------------------------------------------------------------------
/public/images/assets/readmeImages/gallery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/assets/readmeImages/gallery.png
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | loaders: [
4 | { test: /\.css$/, loader: "style-loader!css-loader" },
5 | // ...
6 | ]
7 | }
8 | };
--------------------------------------------------------------------------------
/public/images/Copy of Copy of dsc-ecosystem-banners-linkedin-blue (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GDSCITM/GDSCITM-official-website/HEAD/public/images/Copy of Copy of dsc-ecosystem-banners-linkedin-blue (1).png
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render( );
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | padding: 0;
4 | margin: 0;
5 | scroll-behavior: smooth;
6 | font-family: 'Ubuntu', sans-serif;
7 | }
8 |
9 | html,body {
10 | max-width: 100vw;
11 | overflow-x: hidden;
12 |
13 | }
14 |
15 | code {
16 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
17 | monospace;
18 | }
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | **Description**:
4 |
5 | **Screenshots**:
6 | | Before | After|
7 | | ------ | ---- |
8 | |  |  |
9 |
10 | **System**:
11 | * Browser:
12 | * Version:
13 | * OS:
14 |
15 | **Issue**:
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 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/public/images/RightImage.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/Contributors.md:
--------------------------------------------------------------------------------
1 | # Contributors
2 |
3 | - [Yash Sharma](https://github.com/Yashsharma1911)
4 | - [Sudhanshu Dasupta](https://github.com/sudhanshutech)
5 | - [Arun Patel](https://github.com/ArunPatel02)
6 | - [Novell](https://github.com/NJ-2020)
7 | - [Mukadas Maltiti](https://github.com/mukadas026)
8 | - [Shyam Tawli](https://github.com/shyamtawli)
9 | - [Dhamkirti Sisodia](https://github.com/dhamkirti21)
10 | - [Rodrigo Luchina](https://github.com/rodrigoluchina)
11 | - [Rishav Raj](https://github.com/Rishav1707)
12 | - [Soumya Kushwaha](https://github.com/Soumya-Kushwaha)
13 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
10 |
11 |
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/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 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/src/Components/HeaderCss.js:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "@mui/styles";
2 | import { borderRadius } from "@mui/system";
3 |
4 | const useStyles = makeStyles(() => ({
5 | heading: {
6 | flexGrow: "1",
7 | cursor: "pointer",
8 | color: "#666666",
9 | fontWeight: 500,
10 | display: "flex",
11 | alignContent: "center",
12 | flexDirection: "column",
13 | fontSize: 24,
14 | },
15 | link: {
16 | textDecoration: "none",
17 | color: "#959595",
18 | fontSize: "20px",
19 | cursor: "pointer",
20 | marginLeft: 40,
21 | "&:hover": { color: "#000" },
22 | },
23 | }));
24 |
25 | export { useStyles };
26 |
--------------------------------------------------------------------------------
/src/Pages/Event/all_event.js:
--------------------------------------------------------------------------------
1 | const events = [
2 | {
3 | id: "1",
4 | date: "01",
5 | month: "sep 22",
6 | topic: "Orientation Session",
7 | text: "We are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students Clubs",
8 | topImage: "/images/bg1.png",
9 | color: "#ffd34e",
10 | },
11 |
12 | ];
13 |
14 | //Sorted the events array in ascending order of their time
15 | events.sort((a, b) => new Date(a.date + a.month) - new Date(b.date + b.month));
16 | export default events;
17 |
--------------------------------------------------------------------------------
/.github/workflows/greetings.yml:
--------------------------------------------------------------------------------
1 | name: Greetings
2 |
3 | on: [pull_request_target, issues]
4 |
5 | jobs:
6 | greeting:
7 | runs-on: ubuntu-latest
8 | permissions:
9 | issues: write
10 | pull-requests: write
11 | steps:
12 | - uses: actions/first-interaction@v1
13 | with:
14 | repo-token: ${{ secrets.GITHUB_TOKEN }}
15 | issue-message: "Hey there! Thank you for opening an issue. We're happy to have you as a contributor. If you have any questions, please don't hesitate to ask. Let's work together to make this project even better!"
16 | pr-message: "Wow, thanks for submitting a pull request! We're excited to review your contribution and see how it can improve the project. Let us know if you have any questions or concerns. Thanks again for your help!"
17 |
--------------------------------------------------------------------------------
/src/Components/slider.css:
--------------------------------------------------------------------------------
1 | .person_div {
2 | transition: all 0.3s ease-in-out;
3 | }
4 |
5 | .person_div:hover {
6 | transform: scale(1.05);
7 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
8 | }
9 |
10 | @media screen and (max-width: 600px) {
11 | /* .gridContainer {
12 | margin-left: -25px;
13 | } */
14 |
15 | .leadershipText{
16 | margin-top: 90px;
17 | /* margin-left: -10px; */
18 | font-size: 25px;
19 | margin-left: 10px;
20 | padding-left: 10px;
21 | padding-right: 20px;
22 | }
23 |
24 | .Button{
25 | margin-left: -55px;
26 | margin-top: 15px;
27 | }
28 |
29 | .Button-img{
30 | margin-left: 50px;
31 | margin-top: 65px;
32 | }
33 | .arrow-img{
34 | margin-top: 50px;
35 | }
36 | }
--------------------------------------------------------------------------------
/public/images/header/background.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import AboutSection from "./Components/AboutSection";
2 | import Header from "./Components/Header";
3 | import Home from "./Pages/Home";
4 | import Teams from "./Pages/Teams";
5 | import MainPage from "./Components/SliderComponent";
6 | import Event from "./Pages/Event/Event";
7 | import Footer from "./Pages/Footer/Footer";
8 | import { ThemeProvider } from "@mui/material/styles";
9 | import theme from "./theme";
10 | import About from "./Components/Alternative/about/about";
11 | import Gallery from "./Components/Alternative/gallery/gallery";
12 | import Contributers from "./Components/Alternative/contributors/contributors";
13 | function App() {
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | }
26 |
27 | export default App;
28 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature.yaml:
--------------------------------------------------------------------------------
1 | name: 🚀 Feature
2 | description: Report a feature
3 | title: "🚀 Feature:
"
4 | labels: [Enhancement]
5 | body:
6 | - type: textarea
7 | attributes:
8 | label: 📜 Feature Description
9 | description: Please describe the feature.;
10 | validations:
11 | required: false
12 | - type: textarea
13 | attributes:
14 | label: 🎤 Pitch
15 | description: Write your pitch here...
16 | validations:
17 | required: false
18 | - type: checkboxes
19 | attributes:
20 | label: 👀 Have you spent some time to check if this issue has been raised before?
21 | options:
22 | - label: I checked and didn't find similar issue
23 | required: true
24 | - type: checkboxes
25 | attributes:
26 | label: 🔖 Have you read the Code of Conduct?
27 | options:
28 | - label: Yes, I have read Code of Conduct.
29 | required: true
30 |
--------------------------------------------------------------------------------
/src/Pages/Home.css:
--------------------------------------------------------------------------------
1 | @media screen and (max-width: 600px){
2 |
3 | /* === for welcome message === */
4 | .welcomeMessage{
5 | position: relative;
6 | left: -80px !important;
7 | top: -50px !important;
8 | width: 300px;
9 |
10 | }
11 |
12 | /* === input field == */
13 | .css-b99x2n-MuiGrid-root{
14 |
15 | margin-left: 3px !important;
16 | width: 300px !important;
17 | }
18 | /* === know more text == */
19 | .css-vj1n65-MuiGrid-root{
20 | margin-top: 10px !important;
21 | margin-left: 25px !important;
22 | }
23 | .letsGoBtn{
24 | font-size: 15.5px !important;
25 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
26 | position: absolute;
27 | top: 55px !important;
28 | height: 100% !important;
29 | justify-content: center;
30 | width: 265px !important;
31 |
32 | }
33 | }
--------------------------------------------------------------------------------
/.all-contributorsrc:
--------------------------------------------------------------------------------
1 | {
2 | "files": [
3 | "README.md"
4 | ],
5 | "imageSize": 100,
6 | "commit": false,
7 | "commitConvention": "angular",
8 | "contributors": [
9 | {
10 | "login": "iamsid0908",
11 | "name": "SIDDHARTH CHANDRAKAR",
12 | "avatar_url": "https://avatars.githubusercontent.com/u/86674873?v=4",
13 | "profile": "https://github.com/iamsid0908",
14 | "contributions": [
15 | "code"
16 | ]
17 | },
18 | {
19 | "login": "Yashsharma1911",
20 | "name": "Yash sharma",
21 | "avatar_url": "https://avatars.githubusercontent.com/u/71271069?v=4",
22 | "profile": "https://yashsharma.netlify.app/",
23 | "contributions": [
24 | "code",
25 | "design",
26 | "bug"
27 | ]
28 | }
29 |
30 | ],
31 | "contributorsPerLine": 7,
32 | "skipCi": true,
33 | "repoType": "github",
34 | "repoHost": "https://github.com",
35 | "projectName": "GDSCITM-official-website",
36 | "projectOwner": "GDSCITM"
37 | }
38 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/documentation.yaml:
--------------------------------------------------------------------------------
1 | name: 📚 Documentation
2 | description: Report an issue related to documentation
3 | title: "📚 Documentation: "
4 | labels: [Enhancement]
5 | body:
6 | - type: textarea
7 | attributes:
8 | label: 💬 Description
9 | description: A concise description of what you're experiencing.
10 | validations:
11 | required: false
12 | - type: checkboxes
13 | attributes:
14 | label: 👀 Have you spent some time to check if this issue has been raised before?
15 | description: I checked and didn't find similar issue
16 | options:
17 | - label: I checked and didn't find similar issue
18 | required: true
19 | - type: checkboxes
20 | attributes:
21 | label: 🔖 Have you read the Code of Conduct?
22 | description: Please search to see if an issue already exists for the bug or typo error you wanna add.
23 | options:
24 | - label: Please search to see if an issue already exists for the bug or typo error you wanna add.
25 | required: true
26 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 GDSCITM
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 with the condition that they must seek permission from the copyright
8 | holder before using, copying, modifying, merging, publishing, distributing,
9 | sublicensing, and/or selling copies of the Software, and to permit persons to
10 | whom the Software is furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.github/config.yml:
--------------------------------------------------------------------------------
1 | # Comment to be posted to on PRs from first time contributors in your repository
2 | newPRWelcomeComment: |
3 | 💖 Thanks for opening this pull request! 💖
4 |
5 | Before your pull request can be merged, you should **update your pull request title** to start with a semantic prefix.
6 |
7 | Examples of Title with semantic prefixes:
8 |
9 | - `fix: If PR is about fixing a problem`
10 | - `feature: If Pr is about adding feature`
11 | - `docs: If PR is about docs`
12 |
13 | Things that will help get your PR across the finish line:
14 |
15 | - Include screenshots and animated GIFs whenever possible.
16 |
17 | # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
18 |
19 | # Comment to be posted to on pull requests merged by a first time user
20 | firstPRMergeComment: >
21 | Congrats on merging your first pull request! 🎉🎉🎉
22 |
23 | 
24 |
25 | # Users authorized to run manual trop backports
26 | authorizedUsers:
27 | - Yashsharma1911
28 |
--------------------------------------------------------------------------------
/src/Pages/Event/MobileUpcoming.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Event.css";
3 | import OpenInNewIcon from "@mui/icons-material/OpenInNew";
4 | import { useState, useEffect } from "react";
5 | const MobileUpcoming = ({ data }) => {
6 | const anime = data;
7 | return (
8 |
9 |
10 |
14 |
15 |
16 |
17 | {anime.date}
18 | {anime.month}
19 |
20 |
21 |
22 |
23 |
24 |
25 |
Orientation Session
26 |
10 -- 11 am
27 |
28 |
{anime.text}
29 |
33 |
34 |
35 | );
36 | };
37 |
38 | export default MobileUpcoming;
39 |
--------------------------------------------------------------------------------
/public/images/header/background_ext.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/Pages/Home.js:
--------------------------------------------------------------------------------
1 | import HeaderTwo from "../Components/Alternative/Header";
2 | import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
3 | import IconButton from "@mui/material/IconButton";
4 | import KeyBoardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
5 | import { makeStyles } from "@mui/styles";
6 |
7 | // About section
8 | import AboutSection from "../Components/AboutSection";
9 | import useMediaQuery from "@mui/material/useMediaQuery";
10 | import { useTheme } from "@mui/material/styles";
11 | import { useRef } from "react";
12 | import "../App.css";
13 | import "./Home.css";
14 | import HomeTwo from "../Components/Alternative/Home/Home";
15 |
16 | const useStyles = makeStyles({
17 | inputrField: {
18 | border: "1px solid #C4C4C4",
19 | borderRadius: "10px",
20 | width: "100%",
21 | letterSpacing: "0.1em",
22 | fontWeight: 400,
23 | outline: "none",
24 | },
25 | });
26 |
27 | export default function Home(props) {
28 | const classes = useStyles();
29 | const theme = useTheme();
30 |
31 | //for making responsive text
32 | const matches = useMediaQuery(theme.breakpoints.down("1100"));
33 |
34 | //for making responsive input field
35 | const input = useMediaQuery(theme.breakpoints.down("900"));
36 |
37 | let ref = useRef();
38 |
39 | return (
40 | <>
41 |
42 |
43 |
44 |
45 | >
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/Components/Alternative/contributors/contributors.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import styles from "./Contributors.module.css"
3 | import { useEffect } from "react";
4 | export default function Contributers() {
5 | const [data, setData] = useState([]);
6 | const FetchData = async () => {
7 | let fetchList = await fetch("https://api.github.com/repos/GDSCITM/GDSCITM-official-website/contributors?anon=1")
8 | let data = await fetchList.json()
9 | setData(data)
10 | }
11 | useEffect(() => {
12 | FetchData()
13 | }, [])
14 | return (
15 |
16 |
17 |
18 |
Contributors
19 |
20 |
21 |
22 | {data.length > 0 && data.map((val, index) => {
23 | return (<>
24 | {val?.avatar_url ?
25 |
26 |
{val?.login}
27 |
: ""}
28 | >
29 |
30 | )
31 | })}
32 |
33 |
34 |
35 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/Components/Alternative/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styles from "./Home.module.css"
3 | import KeyBoardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
4 | import { colors } from '@mui/material';
5 |
6 | export default function HomeTwo() {
7 | return (
8 |
9 |
10 |
11 |
12 |
come! join us in the journey of
13 |
Beginning of infinity.
14 |
15 |
16 | Let's get Started!
17 |
18 |
know more
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/Pages/Teams.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Grid } from "@mui/material";
3 | import SliderComponent from "../Components/SliderComponent";
4 |
5 | export default function Teams() {
6 | return (
7 |
8 |
11 |
22 | {/* */}
23 |
24 |
43 | Teams
44 |
45 |
46 |
47 |
48 |
49 | );
50 | }
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug.yaml:
--------------------------------------------------------------------------------
1 | name: 🐞 Bug
2 | description: File a Bug/Issue
3 | title: "🐛 Bug Report: "
4 | labels: [Bug, Need Triage]
5 | body:
6 | - type: checkboxes
7 | attributes:
8 | label: Is there an existing issue for this?
9 | description: Please search to see if an issue already exists for the bug you encountered.
10 | options:
11 | - label: I have searched the existing issues
12 | required: true
13 | - type: textarea
14 | attributes:
15 | label: Current Behavior
16 | description: A concise description of what you're experiencing.
17 | validations:
18 | required: false
19 | - type: textarea
20 | attributes:
21 | label: Expected Behavior
22 | description: A concise description of what you expected to happen.
23 | validations:
24 | required: false
25 | - type: textarea
26 | attributes:
27 | label: Steps To Reproduce
28 | description: Steps to reproduce the behavior.
29 | placeholder: |
30 | 1. In this environment...
31 | 2. With this config...
32 | 3. Run '...'
33 | 4. See error...
34 | validations:
35 | required: false
36 | - type: textarea
37 | attributes:
38 | label: Anything else?
39 | description: |
40 | Links? References? Anything that will give us more context about the issue you are encountering!
41 |
42 | Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
43 | validations:
44 | required: false
45 | - type: dropdown
46 | id: browsers
47 | attributes:
48 | label: What browsers are you seeing the problem on?
49 | multiple: true
50 | options:
51 | - Firefox
52 | - Chrome
53 | - Safari
54 | - Microsoft Edge
55 |
--------------------------------------------------------------------------------
/src/Pages/Event/Upcoming.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Event.css";
3 | import OpenInNewIcon from "@mui/icons-material/OpenInNew";
4 | import { useState, useEffect } from "react";
5 | import MobileUpcoming from "./MobileUpcoming";
6 | function Upcoming({ anime }) {
7 | // const[data1,setData]=useState([]);
8 | const [isMobile, setIsMobile] = useState(false);
9 |
10 | useEffect(() => {
11 | const handleResize = () => {
12 | setIsMobile(window.innerWidth <= 600);
13 | };
14 |
15 | window.addEventListener("resize", handleResize);
16 |
17 | return () => window.removeEventListener("resize", handleResize);
18 | }, []);
19 | return (
20 | //ismobile or not
21 |
22 | {isMobile ? (
23 |
24 | ) : (
25 |
26 |
27 |
28 |
32 | {/*
33 | */}
34 |
35 |
36 | {anime.date}
37 | {anime.month}
38 |
39 |
40 |
41 |
42 |
43 | Orientation Session
44 |
45 |
46 |
47 |
59 |
60 |
61 | )}
62 |
63 | );
64 | }
65 |
66 | export default Upcoming;
67 |
--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
1 | import { createTheme } from "@mui/material/styles";
2 |
3 | const theme = createTheme({
4 | palette: {
5 | primary: {
6 | main: "#1a73e8", // Google blue
7 | },
8 | secondary: {
9 | main: "#db4437", // Google red
10 | },
11 | warning: {
12 | main: "#fbbc05", // Google yellow
13 | },
14 | success: {
15 | main: "#34a853", // Google green
16 | },
17 | common: {
18 | black: "#000000",
19 | white: "#FFFFFF",
20 | grey: {
21 | 50: "#FAFAFA",
22 | 100: "#F6F6F6",
23 | 200: "#EAEAEA",
24 | 300: "#D4D4D4",
25 | 400: "#C4C4C4",
26 | 500: "#959595",
27 | 600: "#666666",
28 | 700: "#525252",
29 | 800: "#333333",
30 | },
31 | },
32 | eventBackground: "#F6F6F6",
33 | teamsBackground: "#EAEAEA",
34 | },
35 | typography: {
36 | fontFamily: "Google Sans",
37 | h1: {
38 | fontFamily: "Ag",
39 | fontSize: "50px",
40 | fontWeight: 400,
41 | lineHeight: "50px",
42 | },
43 | h2: {
44 | fontFamily: "Ag",
45 | fontSize: "30px",
46 | fontWeight: 500,
47 | lineHeight: "30px",
48 | },
49 | h3: {
50 | fontFamily: "Ag",
51 | fontSize: "24px",
52 | fontWeight: 600,
53 | lineHeight: "24px",
54 | },
55 | h4: {
56 | fontFamily: "Ag",
57 | fontSize: "20px",
58 | fontWeight: 500,
59 | lineHeight: "20px",
60 | },
61 | h5: {
62 | fontFamily: "Ag",
63 | fontSize: "18px",
64 | fontWeight: 600,
65 | lineHeight: "18px",
66 | },
67 | body1: {
68 | fontFamily: "Ag",
69 | fontSize: "16px",
70 | fontWeight: 400,
71 | lineHeight: "16px",
72 | },
73 | body2: {
74 | fontFamily: "Ag",
75 | fontSize: "14px",
76 | fontWeight: 400,
77 | lineHeight: "14px",
78 | },
79 | caption: {
80 | fontFamily: "Ag",
81 | fontSize: "12px",
82 | fontWeight: 500,
83 | lineHeight: "12px",
84 | textTransform: "uppercase",
85 | },
86 | },
87 | });
88 |
89 | export default theme;
90 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
22 |
26 |
27 |
36 | GDSC ITM
37 |
38 |
39 | You need to enable JavaScript to run this app.
40 |
41 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gdscweb",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@date-io/date-fns": "^2.13.2",
7 | "@emotion/styled": "latest",
8 | "@material-table/core": "^4.3.43",
9 | "@material-ui/core": "^4.12.4",
10 | "@material-ui/pickers": "^3.3.10",
11 | "@mui/icons-material": "^5.6.2",
12 | "@mui/material": "latest",
13 | "@mui/styled-engine-sc": "^5.6.1",
14 | "@mui/styles": "^5.6.2",
15 | "@mui/x-date-pickers": "latest",
16 | "@mui/x-date-pickers-pro": "latest",
17 | "@testing-library/jest-dom": "^5.16.5",
18 | "@testing-library/react": "^13.4.0",
19 | "@testing-library/user-event": "^13.5.0",
20 | "axios": "^0.27.2",
21 | "bootstrap": "^5.2.1",
22 | "boxicons": "^2.1.4",
23 | "date-fns": "latest",
24 | "material-ui-dropzone": "^3.5.0",
25 | "moment": "^2.29.4",
26 | "react": "^18.2.0",
27 | "react-date-range": "^1.4.0",
28 | "react-daterange-picker": "^2.0.1",
29 | "react-dom": "^18.2.0",
30 | "react-dropzone": "^14.2.2",
31 | "react-google-autocomplete": "^2.7.0",
32 | "react-hook-form": "^7.34.0",
33 | "react-icons": "^5.0.1",
34 | "react-redux": "^8.0.2",
35 | "react-responsive-carousel": "^3.2.23",
36 | "react-router-dom": "^6.3.0",
37 | "react-scripts": "5.0.1",
38 | "react-slick": "^0.29.0",
39 | "redux": "^4.2.0",
40 | "slick-carousel": "^1.8.1",
41 | "styled-components": "^5.3.6",
42 | "sweetalert2": "^11.4.10",
43 | "web-vitals": "^2.1.4"
44 | },
45 | "scripts": {
46 | "start": "react-scripts start",
47 | "build": "react-scripts build",
48 | "test": "react-scripts test",
49 | "eject": "react-scripts eject"
50 | },
51 | "eslintConfig": {
52 | "extends": [
53 | "react-app",
54 | "react-app/jest"
55 | ]
56 | },
57 | "browserslist": {
58 | "production": [
59 | ">0.2%",
60 | "not dead",
61 | "not op_mini all"
62 | ],
63 | "development": [
64 | "last 1 chrome version",
65 | "last 1 firefox version",
66 | "last 1 safari version"
67 | ]
68 | },
69 | "devDependencies": {
70 | "css-loader": "^6.7.3"
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | .welcomeTitle {
11 | text-align: -webkit-left;
12 | }
13 | .knowMore {
14 | margin: 20 !important;
15 | }
16 |
17 | @media (prefers-reduced-motion: no-preference) {
18 | .App-logo {
19 | animation: App-logo-spin infinite 20s linear;
20 | }
21 | }
22 |
23 | .App-header {
24 | background-color: #282c34;
25 | min-height: 100vh;
26 | display: flex;
27 | flex-direction: column;
28 | align-items: center;
29 | justify-content: center;
30 | font-size: calc(10px + 2vmin);
31 | color: white;
32 | }
33 |
34 | .App-link {
35 | color: #61dafb;
36 | }
37 |
38 | @keyframes App-logo-spin {
39 | from {
40 | transform: rotate(0deg);
41 | }
42 |
43 | to {
44 | transform: rotate(360deg);
45 | }
46 | }
47 |
48 | .aboutGrid {
49 | padding: 32px 0px 0px 35px;
50 | }
51 |
52 | .mainContentText {
53 | margin-top: 51px;
54 | margin-left: 247px;
55 | }
56 |
57 | .backgroundImage {
58 | background-size: cover;
59 | background-repeat: no-repeat;
60 | height: 600px;
61 | z-index: 2;
62 | }
63 |
64 | .welcomeMessage {
65 | margin-top: "20px";
66 | }
67 |
68 | .secondContentImage {
69 | width: 565px;
70 | height: 565px;
71 | /* margin-top: 45px; */
72 | /* margin-left: 25px; */
73 | }
74 |
75 | @media screen and (min-width: 900px) {
76 | .aboutGrid {
77 | padding: 32px 0px 0px 115px;
78 | }
79 |
80 | .mainContentText {
81 | margin-top: 50px;
82 | margin-left: 50px;
83 | }
84 | }
85 |
86 | @media screen and (max-width: 898px) {
87 | .secondContentImage {
88 | width: 450px;
89 | height: 450px;
90 | /* margin-top: 150px; */
91 | /* margin-left: 45px; */
92 | margin-bottom: 45px;
93 | max-width: 100%;
94 | height: auto;
95 | }
96 |
97 | .mainContentText {
98 | margin-top: 50px;
99 | margin-left: 50px;
100 | }
101 | }
102 |
103 | @media screen and (max-width: 600px) {
104 | .backgroundImage {
105 | height: auto;
106 | }
107 |
108 | .mainContentText {
109 | margin-top: 160px;
110 | margin-left: 80px;
111 | }
112 |
113 | .mainGrid {
114 | margin-top: 0px !important;
115 | }
116 | .welcomeMessage {
117 | margin-top: 0;
118 | }
119 | .welcomeTitle {
120 | text-align: center;
121 | }
122 | .buttonAlignment {
123 | height: 100% !important;
124 | }
125 | }
126 |
127 | @media screen and (min-width: 1200px) {
128 | .mainContentText {
129 | margin-top: 51px;
130 | margin-left: 247px;
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/src/Components/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import AppBar from "@mui/material/AppBar";
3 | import Toolbar from "@mui/material/Toolbar";
4 | import CssBaseline from "@mui/material/CssBaseline";
5 | import Typography from "@mui/material/Typography";
6 | import { Button, Grid } from "@mui/material";
7 | import { useStyles } from "./HeaderCss";
8 | import useMediaQuery from "@mui/material/useMediaQuery";
9 | import { useTheme } from "@mui/material/styles";
10 | import MenuIcon from "@mui/icons-material/Menu";
11 |
12 | export default function Header(props) {
13 | const classes = useStyles();
14 | var theme = useTheme();
15 | const matches = useMediaQuery(theme.breakpoints.up("900"));
16 | const heading = useMediaQuery(theme.breakpoints.up("sm"));
17 |
18 | return (
19 |
29 | {/* */}
30 |
31 |
32 |
33 |
37 |
Google Developer Student Club
38 |
46 | ITM Gwalior
47 |
48 |
49 |
50 |
51 |
61 | Homsse
62 | About
63 | Event
64 | Teams
65 |
66 |
67 |
68 | Join me
69 |
70 |
71 |
72 |
73 |
84 |
85 |
86 |
87 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/src/Components/Alternative/about/about.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import styles from "./about.module.css";
3 | import { Button } from "@mui/material";
4 | import OpenInNewIcon from "@mui/icons-material/OpenInNew";
5 | import KeyBoardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
6 | import KeyBoardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
7 |
8 | export default function About() {
9 | const [showHiddenContent, setShowHiddenContent] = useState(false);
10 |
11 | const toggleHiddenContent = () => {
12 | setShowHiddenContent(!showHiddenContent);
13 | };
14 |
15 | return (
16 |
17 |
18 |
19 |
About The Community
20 |
What we do and how we are so good at it... !
21 |
What is GDSC?
22 |
23 | Google collaborates with university students who are passionate
24 | about growing developer communities. GDSC is focused upon building
25 | technical and non-technical skills, which would help students to
26 | build a better community.
27 |
28 |
# Lets Learn, Grow and Innovate together.
29 |
30 | {showHiddenContent && (
31 |
32 | {/* Your hidden content goes here */}
33 |
• Mission and Goals
34 |
The mission of GDSC is to bridge the gap between theory and application of technology, empowering students to become successful developers and contributors to the tech community. The primary goals include providing a platform for learning, collaboration, and the practical application of coding skills.
35 |
• Benefits of Joining
36 |
Joining GDSC offers a range of benefits:
37 |
- Access to workshops, training sessions, and hands-on projects.
38 |
- Networking opportunities with like-minded students and industry professionals.
39 |
- Exposure to cutting-edge technologies and tools.
40 |
- The chance to work on real-world projects and contribute to open-source development.
41 |
42 |
43 | )}
44 |
45 |
}
49 | sx={{
50 | width: "150px",
51 | marginTop: "20px",
52 | fontFamily: "Roboto, Helvetica, Arial, sans-serif",
53 | }}
54 | onClick={toggleHiddenContent}
55 | >
56 | {showHiddenContent ? "Hide Details" : "Know More"} {showHiddenContent ?
:
}
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/src/Components/Alternative/gallery/gallery.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Carousel } from 'react-responsive-carousel';
3 | import 'react-responsive-carousel/lib/styles/carousel.min.css';
4 | import styles from './gallery.module.css';
5 |
6 |
7 |
8 | export default function Gallery() {
9 | const [fetchedImages, setFetchedImages] = useState([]);
10 | const [currentImageIndex, setCurrentImageIndex] = useState(0);
11 |
12 | // Fetch images asynchronously
13 | const fetchImages = async () => {
14 | try {
15 | const response = await fetch('https://raw.githubusercontent.com/GDSCITM/GDSC-dataStore/main/Gallery/data.json');
16 | const data = await response.json();
17 | setFetchedImages(data);
18 | } catch (error) {
19 | console.error('Failed to fetch images:', error);
20 | }
21 | };
22 |
23 | useEffect(() => {
24 | fetchImages();
25 |
26 | // Set up an interval to change the image every 3 seconds
27 | const intervalId = setInterval(() => {
28 | setCurrentImageIndex((prevIndex) => (prevIndex + 1) % fetchedImages.length);
29 | }, 3000);
30 |
31 | // Clean up the interval when the component unmounts or when fetchedImages changes
32 | return () => clearInterval(intervalId);
33 | }, [fetchedImages]);
34 |
35 | const handlePrevImage = () => {
36 | setCurrentImageIndex((prevIndex) => (prevIndex - 1 + fetchedImages.length) % fetchedImages.length);
37 | };
38 |
39 | const handleNextImage = () => {
40 | setCurrentImageIndex((prevIndex) => (prevIndex + 1) % fetchedImages.length);
41 | };
42 |
43 | return (
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
56 |
57 |
setCurrentImageIndex(index)}
60 | showArrows={true}
61 | showStatus={false}
62 | showIndicators={false}
63 | showThumbs={false}
64 | infiniteLoop={true}
65 | autoPlay={true}
66 | stopOnHover={true}
67 | >
68 | {fetchedImages.map((image, index) => (
69 |
70 |
71 |
72 | ))}
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
GDSC ITM
82 |
Beginning of infinity ∞
83 |
84 |
85 |
86 | GDSC's primary aim lies in empowering students with development skills and other technical abilities for growth and advancement. We believe in innovation and evolution. For students to grow their skills to tackle problems and to bring about change.
87 |
88 |
89 | The club is intended as a space for students to try out new ideas and collaborate to solve.
90 |
91 |
92 |
93 |
94 |
95 |
96 | );
97 | }
98 |
--------------------------------------------------------------------------------
/src/Components/Alternative/contributors/Contributors.module.css:
--------------------------------------------------------------------------------
1 | .main {
2 | position: relative;
3 | width: 100%;
4 | height: auto;
5 | padding: 20px;
6 | margin: 10px auto;
7 | display: flex;
8 | gap: 20px;
9 | flex-direction: column;
10 | justify-content: center;
11 | align-items: center;
12 | }
13 |
14 | .mainHeading {
15 | position: relative;
16 | width: 80%;
17 | height: auto;
18 | padding: 5px;
19 | margin: 20px auto;
20 | display: flex;
21 | gap: 20px;
22 | justify-content: center;
23 | align-items: center;
24 | text-align: center;
25 | }
26 |
27 | .mainHeading h2 {
28 | position: relative;
29 | width: auto;
30 | height: auto;
31 | font-size: 40px;
32 | font-weight: 500;
33 | }
34 |
35 | .mainHeading p {
36 | position: relative;
37 | width: 100%;
38 | height: 2px;
39 | background-color: #333;
40 | }
41 |
42 | .mainHolder {
43 | position: relative;
44 | width: 70%;
45 | height: auto;
46 | padding: 10px;
47 | display: flex;
48 | gap: 30px;
49 | flex-wrap: wrap;
50 | justify-content: center;
51 | align-items: center;
52 | }
53 |
54 | .mainHolderItem {
55 | position: relative;
56 | width: auto;
57 | height: auto;
58 | overflow: visible;
59 | display: flex;
60 | flex-direction: column;
61 | gap: 10px;
62 | justify-content: center;
63 | align-items: center;
64 | border-radius: 50%;
65 |
66 | }
67 |
68 | .mainHolderItem img {
69 | position: relative;
70 | width: 80px;
71 | height: 80px;
72 | border-radius: 50%;
73 | object-fit: cover;
74 | box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
75 | }
76 |
77 | .mainHolderItem p {
78 | position: absolute;
79 | bottom: -30px;
80 | left: 50%;
81 | transform: translateX(-50%);
82 | width: auto;
83 | height: auto;
84 | font-size: 14px;
85 | padding: 5px 10px;
86 | border-radius: 5px;
87 | background-color: rgba(0, 0, 0, .8);
88 | color: white;
89 | display: none;
90 | word-break: keep-all;
91 | }
92 |
93 | .mainHolderItem:hover {
94 | transform: scale(1.2);
95 | transition: 0.2s ease-in-out;
96 | z-index: 9999;
97 | box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
98 | }
99 |
100 | .mainHolderItem:hover p {
101 | display: block;
102 | }
103 |
104 |
105 | /* Extra small devices (phones, 600px and down) */
106 | @media only screen and (max-width: 600px) {
107 | .mainHeading {
108 | width: 100%;
109 | }
110 |
111 | .mainHeading h2 {
112 | font-size: 25px;
113 | }
114 |
115 | .main {
116 | padding: 5px;
117 | gap: 10px;
118 | }
119 |
120 | .mainHolder {
121 | width: 100%;
122 | }
123 | }
124 |
125 | /* Small devices (portrait tablets and large phones, 600px and up) */
126 | @media only screen and (min-width: 600px) {
127 | .mainHeading {
128 | width: 100%;
129 | }
130 |
131 | .main {
132 | padding: 5px;
133 | gap: 10px;
134 | }
135 |
136 | .mainHolder {
137 | width: 100%;
138 | }
139 | }
140 |
141 | /* Medium devices (landscape tablets, 768px and up) */
142 | @media only screen and (min-width: 768px) {
143 | .mainHeading {
144 | width: 90%;
145 | }
146 |
147 | .mainHolder {
148 | width: 90%;
149 | }
150 | }
151 |
152 | /* Large devices (laptops/desktops, 992px and up) */
153 | @media only screen and (min-width: 992px) {
154 | .mainHeading {
155 | width: 80%;
156 | }
157 |
158 | .mainHolder {
159 | width: 80%;
160 | }
161 | }
162 |
163 | /* Extra large devices (large laptops and desktops, 1200px and up) */
164 | @media only screen and (min-width: 1200px) {
165 | .mainHeading {
166 | width: 80%;
167 | }
168 |
169 | .mainHolder {
170 | width: 70%;
171 | }
172 | }
--------------------------------------------------------------------------------
/src/Components/AboutSection.js:
--------------------------------------------------------------------------------
1 | import { Button, Typography, Grid } from "@mui/material";
2 | import React from "react";
3 | import OpenInNewIcon from "@mui/icons-material/OpenInNew";
4 | import { makeStyles } from "@mui/styles";
5 | import "../App.css";
6 |
7 | const useStyles = makeStyles(() => ({
8 | letter: {
9 | fontSize: 48,
10 | fontWeight: "bold",
11 | fontFamily: "Google Sans",
12 | },
13 | aboutImage: {
14 | width: "100%",
15 | display: "block",
16 | margin: { sm: "auto" },
17 | // height: { lg: "100%" },
18 | },
19 | }));
20 |
21 | const AboutSection = () => {
22 | const classes = useStyles();
23 | return (
24 |
25 |
31 |
32 |
42 |
46 | A
47 |
48 | bout The Community
49 |
50 |
59 | What we do and How we are so good at it... !
60 |
61 |
62 |
74 | What is GDSC?
75 |
76 |
81 | Google collaborates with university students who are passionate
82 | about growing developer communities. GDSC is focused upon building
83 | technical and non-technical skills, which would help students to
84 | build a better community.
85 |
86 |
94 | # Lets Learn, Grow and Innovate together.
95 |
96 | }
100 | sx={{
101 | marginTop: "50px",
102 | fontFamily: "Roboto, Helvetica, Arial, sans-serif",
103 | }}
104 | >
105 | Know Moree
106 |
107 |
108 |
109 |
110 |
115 |
116 |
117 |
118 | );
119 | };
120 |
121 | export default AboutSection;
122 |
--------------------------------------------------------------------------------
/src/Components/Alternative/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "./Header.module.css";
3 | import { Button } from "@mui/material";
4 | import useMediaQuery from "@mui/material/useMediaQuery";
5 | import { useTheme } from "@mui/material/styles";
6 | import MenuIcon from "@mui/icons-material/Menu";
7 | import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
8 | import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
9 | import CalendarMonthOutlinedIcon from '@mui/icons-material/CalendarMonthOutlined';
10 | import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';
11 | import FeedbackOutlinedIcon from '@mui/icons-material/FeedbackOutlined';
12 | import QuizOutlinedIcon from '@mui/icons-material/QuizOutlined';
13 | import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
14 | import { useState } from "react";
15 |
16 |
17 |
18 | export default function HeaderTwo() {
19 | var theme = useTheme();
20 | const matches = useMediaQuery(theme.breakpoints.up("768"));
21 | const [menu, setMenu] = useState(false)
22 | return (
23 | <>
24 |
25 |
26 | {matches ? (
27 |
window.scrollTo(0, 0)}
32 | />
33 | ) : (
34 |
window.scrollTo(0, 0)}
39 | />
40 | )}
41 |
42 |
43 |
{ setMenu(!menu) }}>
44 |
45 |
46 |
47 |
58 |
59 |
62 |
63 |
64 |
65 |
{ setMenu(!menu) }}>
66 |
79 |
80 | >
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/src/Pages/Footer/Footer.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
2 |
3 |
4 | .grid_container>div{
5 | background-color: #525252;
6 | color: #D4D4D4;
7 | height: 325px;
8 | }
9 | .grid_container{
10 | background-color: #525252;
11 | min-height: min-content;
12 | margin-top: 50px;
13 | }
14 | /* === FOOTER Box 1 - Contact Section === */
15 | .grid_container__box1{
16 | display: flex;
17 | }
18 | .grid_container__box1>div{
19 | width: 350px;
20 | height: 250px;
21 | }
22 | /* ==== Footer Left Section ==== */
23 | /* === Logo Container === */
24 | .grid_container__box1__logo_container{
25 | display: flex;
26 | flex-direction: column;
27 | justify-content: space-evenly;
28 | width: 100px !important;
29 | }
30 | .grid_container__box1__logo_container>div{
31 | text-align: center;
32 | height: 50px;
33 | width: 100%;
34 | }
35 | /* === Commonn Boder to Box1(left) and Box3(right) === */
36 | .grid_container__box1,.grid_container__box3{
37 | border-bottom: 1px solid #fff;
38 | }
39 | /* === Text Container === */
40 | .grid_container__box1__text_container{
41 | display: flex;
42 | flex-direction: column;
43 | justify-content: space-evenly;
44 | }
45 | .grid_container__box1__text_container>div{
46 | width: 100%;
47 | }
48 | .grid_container__box1__text_container>.gdsc_title{
49 | color: #fff !important;
50 | }
51 | .grid_container__box1__text_container__email>div{
52 | margin-top: 10px;
53 | margin-left: -7px;
54 | }
55 | .socialIcon{
56 | font-size: 22px !important;
57 | padding-left: 10px;
58 | }
59 | /* === FOOTER Box 3 - Menu Section === */
60 | .grid_container__box3{
61 | display: flex;
62 | justify-content: center;
63 | flex-wrap: wrap;
64 | font-family: 'Poppins', sans-serif;
65 | }
66 | .grid_container__box3>div{
67 | display: flex;
68 | flex-direction: column;
69 | justify-content: space-evenly;
70 | height: 250px;
71 | width: 50%;
72 | }
73 | .grid_container__box3__programs{
74 | margin-top: 6px;
75 | margin-left: -70px;
76 | }
77 | /* ==== Box 2(middle section) ==== */
78 | .grid_container__box2{
79 | position: relative;
80 | display: flex;
81 | justify-content: center;
82 | align-items: center;
83 | width: 100%;
84 | height: 250px;
85 | }
86 | .grid_container__box2>.grid_container__box2__middle{
87 | border: 1.2px solid #fff;
88 | background-color: inherit;
89 | color: #fff;
90 | display: flex;
91 | justify-content: center;
92 | align-items: center;
93 | height: 40px;
94 | width: 140px;
95 | }
96 | .grid_container__box2>div{
97 | position: absolute;
98 | background-color: #fff;
99 | height: 1.2px;
100 | width: 191px;
101 | margin-top: 10px;
102 | }
103 | /* === Line 1 === */
104 | .grid_container__box2>.grid_container__box2__line1{
105 | top: 2.5em;
106 | left: -2.4em;
107 | width: 210px !important;
108 | transform: rotate(35deg);
109 | }
110 |
111 | /* === Line 2 === */
112 | .grid_container__box2>.grid_container__box2__line2{
113 | bottom: 3.0625em;
114 | left: -1.4375em;
115 | transform: rotate(328.5deg);
116 | }
117 | /* === Line 3 === */
118 | .grid_container__box2>.grid_container__box2__line3{
119 | top: 2.475em;
120 | right: -2.525em;
121 | transform: rotate(326deg);
122 | width: 13.25em !important;
123 | }
124 | /* === Line 4 === */
125 | .grid_container__box2>.grid_container__box2__line4{
126 | bottom: 2.85em;
127 | right: -1.6em;
128 | transform: rotate(33.7deg);
129 | width: 12.2em !important;
130 | }
131 |
132 | .grid_subcontainer__box3 {
133 | display: flex;
134 | flex-direction: column;
135 | gap: 1rem;
136 | }
137 | /* === Copy Right === */
138 | .gdsc__copyright{
139 | position: relative;
140 | bottom: 20px;
141 | left: 46%;
142 | }
143 | a{
144 | font-size: 0.9rem;
145 | color: #D4D4D4;
146 | }
147 |
148 |
149 | /* ==== Responsive ==== */
150 | @media screen and (max-width: 1000px) {
151 | /* === Left Most Box === */
152 | .grid_container__box1{
153 | align-items: center;
154 | justify-content: center;
155 | }
156 |
157 | /* === Middle Box and lines === */
158 | .grid_container__box2{
159 | background-color: #525252;
160 | height: 70px !important;
161 | }
162 | .grid_container__box2__line1,.grid_container__box2__line2,.grid_container__box2__line3,.grid_container__box2__line4{
163 | display: none;
164 | }
165 | .grid_container__box3{
166 | margin-top: -50px !important;
167 | align-items: center;
168 | background-color: #525252;
169 | flex-direction: column;
170 | justify-content: space-around;
171 | justify-content: center;
172 | text-align: center;
173 | height: 620px;
174 | }
175 |
176 | .grid_subcontainer__box3 {
177 | flex-direction: row;
178 | justify-content: center;
179 | gap: 1rem;
180 | margin-top: -15%;
181 | }
182 | .grid_container__box3__programs{
183 |
184 | margin-left: 0px !important;
185 | }
186 |
187 | /* === Commonn Boder to Box1(left) and Box3(right) === */
188 | .grid_container__box1,.grid_container__box3{
189 | border: none;
190 | }
191 | /* === Social Icon === */
192 | .grid_container__box1__text_container__email>.socialIcon{
193 | margin-top: 20px;
194 | }
195 |
196 | /* === Copy Right === */
197 | .gdsc__copyright{
198 | left: 42%;
199 | justify-content: center;
200 | }
201 |
202 |
203 | }
--------------------------------------------------------------------------------
/src/Pages/Footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import Grid from '@mui/material/Grid';
2 | import Typography from '@mui/material/Typography';
3 | import LocationOnIcon from '@mui/icons-material/LocationOn';
4 | import EmailIcon from '@mui/icons-material/Email';
5 | import InstagramIcon from '@mui/icons-material/Instagram';
6 | import YouTubeIcon from '@mui/icons-material/YouTube';
7 | import LinkedInIcon from '@mui/icons-material/LinkedIn';
8 | import TwitterIcon from '@mui/icons-material/Twitter';
9 | import { createTheme, ThemeProvider } from '@mui/material/styles';
10 | import 'boxicons'
11 | import "./Footer.css"
12 |
13 | export default function Footer() {
14 | const theme = createTheme();
15 | //for making responsive text
16 | theme.typography.h5 = {
17 | fontSize: '1.4rem',
18 | '@media (max-width:600px)': {
19 | fontSize: '1rem',
20 | }
21 | };
22 | theme.typography.subtitle2={
23 | '@media(max-width: 600px':{
24 | fontSize: '0.5rem',
25 | }
26 | };
27 | theme.typography.body2={
28 | '@media(max-width: 600px':{
29 | fontSize: '0.3rem',
30 | }
31 | };
32 | theme.typography.links={
33 | '@media(max-width: 600px':{
34 | fontSize: '0.3rem',
35 | color:'#ffffff'
36 | }
37 | };
38 |
39 |
40 |
41 | return(
42 |
43 |
44 | {/* === Footer Left Section === */}
45 |
46 |
47 | {/*=== Logo Cotainer === */}
48 |
53 | {/*=== Text Cotainer === */}
54 |
55 |
56 |
57 |
58 | Google Developer Student Club
59 |
60 |
61 | ITM Guwalior
62 |
63 |
64 |
65 |
66 |
67 | Nh 75 Opp Sithouli Railway Station
68 | Gwalior, Madhya Pradesh 475001
69 | Von Neumann Block, 3rd floor
70 |
71 |
72 |
73 |
74 |
gdsc@itm.ac.in
75 | {/* === Social Icons === */}
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 | {/* ==== Middle Box ==== */}
88 |
89 |
90 |
Join
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
Quick Links
101 |
102 | Home
103 | About
104 | Events
105 | Teams
106 |
107 |
108 |
109 | Programs
110 | Women Techmakers
111 | Google Developer Groups
112 | Google Developers Experts
113 | Accelerators
114 | Google Developer Student Clubs
115 |
116 |
117 |
118 |
119 | © 2023 GDSC ITM
120 |
121 |
122 |
123 | )
124 | }
--------------------------------------------------------------------------------
/src/Pages/Footer/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useState } from 'react';
3 | import { FaInstagram, FaYoutube, FaLinkedin, FaTwitter,FaDiscord } from 'react-icons/fa';
4 | import './Footer.css';
5 | import { Grid, Typography } from '@mui/material';
6 | import LocationOnIcon from '@mui/icons-material/LocationOn';
7 | import EmailIcon from '@mui/icons-material/Email';
8 | import { createTheme, ThemeProvider } from '@mui/material/styles';
9 |
10 | export default function Footer() {
11 | const theme = createTheme();
12 | //for making responsive text
13 | theme.typography.h5 = {
14 | fontSize: '1.4rem',
15 | '@media (max-width:600px)': {
16 | fontSize: '1rem',
17 | }
18 | };
19 | theme.typography.subtitle2 = {
20 | '@media(max-width: 600px': {
21 | fontSize: '0.5rem',
22 | }
23 | };
24 | theme.typography.body2 = {
25 | '@media(max-width: 600px': {
26 | fontSize: '0.3rem',
27 | }
28 | };
29 | theme.typography.links={
30 | '@media (max-width: 600px)': {
31 | fontSize: '0.7rem',
32 | color: '#000000'
33 | }
34 | };
35 |
36 | return (
37 |
38 |
39 | {/* === Footer Left Section === */}
40 |
41 |
42 | {/*=== Logo Cotainer === */}
43 |
48 | {/*=== Text Cotainer === */}
49 |
50 |
51 |
52 |
53 | Google Developer Student Club
54 |
55 |
56 | ITM Gwalior
57 |
58 |
59 |
60 |
61 |
62 | Nh 75 Opp Sithouli Railway Station
63 | Gwalior, Madhya Pradesh 475001
64 | Von Neumann Block, 3rd floor
65 |
66 |
67 |
68 |
69 |
gdsc@itm.ac.in
70 | {/* === Social Icons === */}
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | {/* ==== Middle Box ==== */}
83 |
84 |
85 |
Join
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
Quick Links
97 |
104 |
105 |
106 | Programs
107 | Women Techmakers
108 | Google Developer Groups
109 | Google Developers Experts
110 | Accelerators
111 | Google Developer Student Clubs
112 |
113 |
114 |
115 |
116 | © 2023 GDSC ITM
117 |
118 |
119 |
120 | )
121 | }
--------------------------------------------------------------------------------
/src/Pages/Event/Event.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useState } from 'react'
3 | import "./Event.css"
4 | import Upcoming from './Upcoming'
5 | import events from "./all_event"
6 | function Event() {
7 | const [chosen, setChosen] = useState("all"); /*a variable to keep track of the chosen section, like: 'all' or 'upcoming' or 'past' */
8 | const [allEvent, setAllEvent] = useState(events);
9 |
10 |
11 | const [upcomingdata, setUpcomingData] = useState([
12 | {
13 | id: "1", date: "11", month: "jan 23", topic: "Orientation something", text: "We are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students Clubs"
14 | , topImage: "/images/bg1.png", color: "#ffd34e"
15 | },
16 | {
17 | id: "1", date: "11", month: "jan 23", topic: "Orientation something", text: "We are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students Clubs"
18 | , topImage: "/images/bg1.png", color: "#ffd34e"
19 | },
20 | {
21 | id: "1", date: "11", month: "jan 23", topic: "Orientation something", text: "We are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students Clubs"
22 | , topImage: "/images/bg1.png", color: "#ffd34e"
23 | },
24 | {
25 | id: "1", date: "11", month: "jan 23", topic: "Orientation something", text: "We are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students Clubs"
26 | , topImage: "/images/bg1.png", color: "#ffd34e"
27 | },
28 | {
29 | id: "1", date: "11", month: "jan 23", topic: "Orientation something", text: "We are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students Clubs"
30 | , topImage: "/images/bg1.png", color: "#ffd34e"
31 | },
32 | {
33 | id: "1", date: "11", month: "jan 23", topic: "Orientation something", text: "We are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students Clubs"
34 | , topImage: "/images/bg1.png", color: "#ffd34e"
35 | },
36 |
37 |
38 | ])
39 | const [pastData, setPastData] = useState([
40 | {
41 | id: "1", date: "01", month: "sep 22", topic: "Orientation Session", text: "We are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students ClubsWe are having a live session where we will introduce you to Google Developer Students Clubs"
42 | , topImage: "/images/bg1.png", color: "#ffd34e"
43 | },
44 |
45 | ])
46 |
47 |
48 | // const allEvents = upcomingdata.concat(pastData)
49 | const allEvents = [...pastData, ...upcomingdata];
50 | /* allEvents is an array which consists of both upcoming and past events */
51 | const [allData, setAllData] = useState(allEvents)
52 |
53 | const today = new Date(2023, 0, 1);//for comparing which are the upcoming events and which are past events, can be set to current date using, new Date() only.
54 |
55 |
56 | today.setHours(0, 0, 0, 0);//as the date object created from events object, will not have time part, setting the time to 0 to variable today, so that we can compare date part of our event with today date part
57 |
58 | const filterEvent = chosen === 'all' ? allEvent : chosen === 'up' ? allEvent.filter(event => new Date(event.date + event.month) >= today) : allEvent.filter(event => new Date(event.date + event.month) < today); //A variable for storing the filtered events in response to whether upcoming or past or all was clicked
59 |
60 | return (
61 |
62 |
63 |
66 |
Events
67 |
70 |
71 |
72 |
73 |
setChosen("all")}>All
74 |
setChosen("up")}>Upcoming
75 |
setChosen("past")}>Past
76 |
77 | {chosen === "all" ?
78 |
79 | {
80 | allData.map(anime => (
81 | <>
82 |
83 | >
84 | ))
85 | }
86 |
: ""}
87 |
88 | {chosen === "up" ?
89 |
90 |
91 | {
92 | upcomingdata.map(anime => (
93 |
94 | ))
95 | }
96 |
97 | : " "
98 | }
99 | {chosen === "past" ?
100 |
101 |
102 | {
103 | filterEvent.map(anime => (
104 |
105 | ))
106 | }
107 |
108 | : " "
109 | }
110 |
111 | )
112 | }
113 |
114 | export default Event
115 |
--------------------------------------------------------------------------------
/src/Components/Alternative/Home/Home.module.css:
--------------------------------------------------------------------------------
1 | .main {
2 | position: relative;
3 | width: 100%;
4 | height: calc(100vh - 80px);
5 | display: flex;
6 | }
7 |
8 | .mainBg {
9 | position: absolute;
10 | top: 0px;
11 | left: 0px;
12 | width: 100%;
13 | height: 100%;
14 | z-index: -1;
15 | }
16 |
17 | .mainBg img {
18 | position: relative;
19 | width: 100%;
20 | height: 100%;
21 | object-fit: fill;
22 | }
23 |
24 | .mainHolder {
25 | position: relative;
26 | width: 100%;
27 | height: auto;
28 | padding: 10px;
29 | display: flex;
30 | justify-content: center;
31 | align-items: center;
32 | }
33 |
34 | .mainHolderOne {
35 | position: relative;
36 | width: 50%;
37 | height: auto;
38 | padding: 10px;
39 | display: flex;
40 | justify-content: center;
41 | align-items: center;
42 | }
43 |
44 | .mainHolderOneItem {
45 | position: relative;
46 | width: auto;
47 | height: auto;
48 | padding: 5px;
49 | display: flex;
50 | flex-direction: column;
51 | gap: 10px;
52 | }
53 | .mainHolderOneItem a{
54 | color: black;
55 | }
56 | .mainHolderOneItem p {
57 | position: relative;
58 | width: auto;
59 | height: auto;
60 | display: flex;
61 | justify-content: left;
62 | align-items: center;
63 | padding: 2px;
64 | font-size: 16px;
65 | line-height: 22px;
66 | font-weight: 500;
67 | color: black;
68 | }
69 |
70 | .mainHolderOneItem h1 {
71 | position: relative;
72 | width: auto;
73 | height: auto;
74 | padding: 2px;
75 | line-height: 80px;
76 | font-size: 60px;
77 | font-weight: 500;
78 | text-transform: capitalize;
79 | }
80 |
81 | .mainHolderOneItemInput {
82 | position: relative;
83 | width: 100%;
84 | height: auto;
85 | display: flex;
86 | gap: 5px;
87 | justify-content: space-evenly;
88 | align-items: center;
89 |
90 | }
91 |
92 | .mainHolderOneItemInput input {
93 | position: relative;
94 | width: 100%;
95 | height: auto;
96 | padding: 10px 20px;
97 | background-color: #f5f5f5;
98 | border: none;
99 | outline: none;
100 | border-radius: 5px;
101 | box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
102 | }
103 |
104 | .mainHolderOneItemInput button {
105 | position: relative;
106 | width: 100%;
107 | height: auto;
108 | padding: 10px 5px;
109 | font-size: 14px;
110 | font-weight: 500;
111 | text-transform: capitalize;
112 | border-radius: 5px;
113 | border: none;
114 | outline: none;
115 | background-color: #2785fc;
116 | color: white;
117 | }
118 |
119 | .mainHolderTwo {
120 | position: relative;
121 | width: 50%;
122 | height: auto;
123 | max-height: 100%;
124 | padding: 10px;
125 | display: flex;
126 | justify-content: center;
127 | align-items: center;
128 | }
129 |
130 | .mainHolderTwoImage {
131 | position: relative;
132 | width: 100%;
133 | height: auto;
134 | max-height: 100%;
135 | padding: 10px;
136 | display: flex;
137 | justify-content: center;
138 | align-items: center;
139 | }
140 |
141 | .mainHolderTwoImage img {
142 | position: relative;
143 | width: 100%;
144 | height: auto;
145 | max-height: 100%;
146 | object-fit: contain;
147 | line-height: 0px;
148 | }
149 |
150 |
151 |
152 | /* Extra small devices (phones, 600px and down) */
153 | @media only screen and (max-width: 600px) {
154 | .mainHolder {
155 | flex-direction: column;
156 | justify-content: space-between;
157 | }
158 |
159 | .mainHolderOne {
160 | width: 100%;
161 | height: 50%;
162 | }
163 |
164 | .mainHolderOneItem {
165 | align-items: center;
166 | }
167 |
168 | .mainHolderOneItem p {
169 | font-size: 15px;
170 | }
171 |
172 | .mainHolderOneItem h1 {
173 | line-height: 50px;
174 | font-size: 40px;
175 | text-align: center;
176 | }
177 |
178 | .mainHolderOneItemInput {
179 | flex-wrap: wrap;
180 | justify-content: center;
181 | width: 70%;
182 | margin-top: 20px;
183 | }
184 |
185 | .mainHolderOneItemInput button {
186 | width: 100%;
187 | font-size: 15px;
188 | padding: 10px 15px;
189 | margin-top: 10px;
190 | }
191 |
192 | .mainHolderTwo {
193 | width: 100%;
194 | height: 50%;
195 | max-height: 50%;
196 | padding: 0px;
197 | }
198 |
199 | .mainHolderTwoImage {
200 | position: relative;
201 | width: 100%;
202 | height: 100%;
203 | padding: 0px;
204 | max-height: 100%;
205 | }
206 |
207 | .mainHolderTwoImage img {
208 | position: relative;
209 | width: 100%;
210 | height: auto;
211 | max-height: 100%;
212 | object-fit: contain;
213 | }
214 |
215 |
216 |
217 | }
218 |
219 | /* Small devices (portrait tablets and large phones, 600px and up) */
220 | @media only screen and (max-width: 700px) {
221 | .mainHolder {
222 | flex-direction: column;
223 | justify-content: space-between;
224 | }
225 |
226 | .mainHolderOne {
227 | width: 100%;
228 | height: 50%;
229 | }
230 |
231 | .mainHolderOneItem {
232 | align-items: center;
233 | }
234 |
235 | .mainHolderOneItem p {
236 | font-size: 15px;
237 | }
238 |
239 | .mainHolderOneItem h1 {
240 | line-height: 50px;
241 | font-size: 40px;
242 | text-align: center;
243 | }
244 |
245 | .mainHolderOneItemInput {
246 | flex-wrap: wrap;
247 | justify-content: center;
248 | width: 70%;
249 | margin-top: 20px;
250 | }
251 |
252 | .mainHolderOneItemInput button {
253 | width: 100%;
254 | font-size: 15px;
255 | padding: 10px 15px;
256 | margin-top: 10px;
257 | }
258 |
259 | .mainHolderTwo {
260 | width: 100%;
261 | height: 50%;
262 | max-height: 50%;
263 | padding: 0px;
264 | }
265 |
266 | .mainHolderTwoImage {
267 | position: relative;
268 | width: 100%;
269 | height: 100%;
270 | padding: 0px;
271 | max-height: 100%;
272 | }
273 |
274 | .mainHolderTwoImage img {
275 | position: relative;
276 | width: 100%;
277 | height: auto;
278 | max-height: 100%;
279 | object-fit: contain;
280 | }
281 |
282 | }
283 |
284 | /* Medium devices (landscape tablets, 768px and up) */
285 | @media only screen and (min-width: 768px) {}
286 |
287 | /* Large devices (laptops/desktops, 992px and up) */
288 | @media only screen and (min-width: 992px) {}
289 |
290 | /* Extra large devices (large laptops and desktops, 1200px and up) */
291 | @media only screen and (min-width: 1200px) {}
--------------------------------------------------------------------------------
/src/Pages/Event/Event.css:
--------------------------------------------------------------------------------
1 | .event-ele {
2 | height: auto;
3 | margin-bottom: 20vh;
4 |
5 | }
6 | .event-tag {
7 | height: 15.75em;
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | background-color: #e3edff;
12 | }
13 | .event-tag h2 {
14 | font-size: 3.125em;
15 | font-weight: 500;
16 | }
17 | .img1 {
18 | flex: 1;
19 | }
20 | .img11 {
21 | flex: 1;
22 | background-image: url("./image\ 50.png");
23 | height: 13.6em;
24 | width: 18.75em;
25 | background-size: cover;
26 | margin-left: 5%;
27 | }
28 | .img2 {
29 | flex: 1;
30 | float: right;
31 | text-align: right;
32 | }
33 | .img22 {
34 | flex: 1;
35 | background-image: url("./image\ 49.png");
36 | height: 13.6em;
37 | width: 18.75em;
38 | background-size: cover;
39 | text-align: right;
40 | float: right;
41 | margin-right: 5%;
42 | }
43 | .list {
44 | box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
45 | display: flex;
46 | /* align-items: center; */
47 | justify-content: center;
48 | position: relative;
49 | top: -30px;
50 | background-color: #fbfbfb;
51 | height: 10vh;
52 | margin-left: 30%;
53 | margin-right: 30%;
54 | border-radius: 30px;
55 | cursor: pointer;
56 | }
57 | .all,
58 | .up,
59 | .past {
60 | display: flex;
61 | align-items: center;
62 | flex: 1;
63 | justify-content: center;
64 | }
65 | .active {
66 | display: flex;
67 | background-color: #4287f5;
68 | border-radius: 22px;
69 | color: #fafafa;
70 | align-items: center;
71 | flex: 1;
72 | justify-content: center;
73 | }
74 | .past:hover,
75 | .all:hover,
76 | .up:hover {
77 | color: rgb(44, 44, 196);
78 | }
79 | .upcomming {
80 | /* height: 800px; */
81 | height: auto;
82 | display: flex;
83 | margin-left: 11%;
84 | margin-right: 9%;
85 | flex-wrap: wrap;
86 | gap: 80px;
87 | justify-content: space-between;
88 | }
89 |
90 | /* ############################## upcoming */
91 | .card1 {
92 | margin-top: 0px;
93 | height: 330px;
94 |
95 | flex: 1;
96 | width: 300px;
97 | }
98 |
99 | .card-ele {
100 | border-radius: 20px;
101 | width: 272px;
102 | height: 330px;
103 | margin-left: 15px;
104 | box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
105 | }
106 |
107 | .card-ele:hover{
108 | transform: scale(1.05);
109 | transition: 0.2s ease-in-out;
110 | }
111 | .upcoming-img {
112 | background-size: cover;
113 | height: 119px;
114 | width: 272px;
115 | display: flex;
116 | align-items: center;
117 | justify-content: center;
118 | }
119 | .topimg {
120 | height: 119px;
121 | width: 272px;
122 | }
123 | .border {
124 | border: 1px solid white;
125 | height: 65px;
126 | margin-left: 5%;
127 | }
128 | .date h3 {
129 | font-size: 30px;
130 | font-weight: 200;
131 | color: white;
132 | }
133 | .date p {
134 | font-size: 15px;
135 | color: white;
136 |
137 | margin-top: 5px;
138 | top: -10px;
139 | position: relative;
140 | }
141 | .topic {
142 | align-items: center;
143 | color: white;
144 | margin-left: 7%;
145 | font-size: 23px;
146 | }
147 | .text-data {
148 | /* border: 1px solid red; */
149 | display: flex;
150 | overflow: hidden;
151 | height: 150px;
152 | margin-left: 5%;
153 | margin-right: 5%;
154 | margin-top: 5%;
155 | font-size: 12px;
156 | }
157 | .know-ele {
158 | margin-left: 5%;
159 | margin-right: 5%;
160 | border-radius: 10px;
161 |
162 | /* background-color: blue; */
163 | height: 34px;
164 | color: white;
165 | display: flex;
166 | align-items: center;
167 | justify-content: center;
168 | }
169 | .know-ele p {
170 | margin-left: 5%;
171 | }
172 | .topic-mobile {
173 | width: 122px;
174 | height: 16px;
175 | font-family: "Roboto";
176 | font-style: normal;
177 | font-weight: 400;
178 | font-size: 14px;
179 | line-height: 16px;
180 | display: flex;
181 | align-items: center;
182 | color: #000000;
183 | }
184 | @media screen and (max-width: 1280px) {
185 | .upcomming {
186 | height: auto;
187 | flex-direction: row;
188 | }
189 | }
190 |
191 | @media screen and (min-width: 600px) and (max-width: 800px) {
192 | .cardGrid {
193 | padding: 10px 25px;
194 | }
195 | }
196 |
197 | @media screen and (max-width: 600px) {
198 | .img11,
199 | .img22 {
200 | display: none;
201 | }
202 |
203 | .cardGrid {
204 | padding: 10px 90px;
205 | }
206 | .list {
207 | margin-left: 10%;
208 | margin-right: 10%;
209 | height: 2.3rem;
210 | }
211 | .event-tag {
212 | max-height: 89px;
213 | background: #2196f3;
214 | border-radius: 10% 10% 0px 0px;
215 | padding-bottom: 20px;
216 | }
217 | .event-tag h2 {
218 | font-family: "Roboto";
219 | font-style: normal;
220 | font-weight: 500;
221 | font-size: 28px;
222 | line-height: 33px;
223 | display: flex;
224 | align-items: center;
225 | text-align: center;
226 | letter-spacing: 0.05em;
227 | color: #fafafa;
228 | }
229 | .know-ele {
230 | margin: 0;
231 | margin-top: 16px;
232 | }
233 | .upcomming {
234 | column-gap: 0px;
235 | row-gap: 30px;
236 | margin: 0;
237 | min-width: 100%;
238 | display: flex;
239 | flex-direction: column;
240 | justify-content: center;
241 | }
242 | }
243 | /*================================Mobile design=========================*/
244 | .mobileCard {
245 | display: flex;
246 | height: 100%;
247 | background: #ffffff;
248 | box-shadow: -2.64529px 2.64529px 9.91984px rgba(0, 0, 0, 0.1);
249 | border-radius: 10px;
250 | width: 70%;
251 | max-width: 400px;
252 | margin: 0px auto;
253 | }
254 | .cardLeft__info {
255 | height: 100%;
256 | border-radius: 10px 24px 24px 10px;
257 | display: flex;
258 | align-items: center;
259 | justify-content: center;
260 | }
261 | .cardLeft-bar {
262 | width: 2px;
263 | background: #ffffff;
264 | height: 80%;
265 | margin-left: 12px;
266 | }
267 | .cardLeft-date {
268 | font-family: "Roboto";
269 | font-style: normal;
270 | font-weight: 500;
271 | font-size: 20px;
272 | line-height: 30px;
273 | letter-spacing: 0.03em;
274 | color: #ffffff;
275 | max-width: 58px;
276 | padding-left: 12px;
277 | display: flex;
278 | align-items: center;
279 | justify-content: center;
280 | }
281 | .cardLeft-date h3 p {
282 | margin: 0;
283 | }
284 | .cardRight {
285 | padding-left: 13px;
286 | padding-top: 12px;
287 | padding-right: 15px;
288 | display: flex;
289 | flex-direction: column;
290 | align-items: left;
291 | }
292 | .cardRight-name {
293 | font-family: "Roboto";
294 | font-style: normal;
295 | font-weight: 400;
296 | font-size: 14px;
297 | line-height: 16px;
298 | display: flex;
299 | align-items: center;
300 | color: #000000;
301 | }
302 | .cardRight-info {
303 | max-width: 203px;
304 | max-height: 42px;
305 | overflow: hidden;
306 | font-family: "Roboto";
307 | font-style: normal;
308 | font-weight: 400;
309 | font-size: 12px;
310 | line-height: 14px;
311 | color: #525252;
312 | }
313 | .know-ele {
314 | margin-bottom: 9px;
315 | }
316 |
317 | .cardRight_textbox {
318 | display: flex;
319 | gap: 28px;
320 | }
321 | .cardRight-time {
322 | font-family: "Roboto";
323 | font-style: normal;
324 | font-weight: 400;
325 | font-size: 14px;
326 | line-height: 16px;
327 | display: flex;
328 | align-items: center;
329 | color: #000000;
330 | }
331 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | [](https://github.com/GDSCITM/GDSCITM-official-website/blob/main/LICENSE)
7 | [![Contributors][contributors-shield]][contributors-url]
8 | [![Forks][forks-shield]][forks-url]
9 | [![Stargazers][stars-shield]][stars-url]
10 | [![Issues][issues-shield]][issues-url]
11 | ![pr-shield]
12 |
13 |
14 |
15 |
16 |
17 |
28 |
29 |
30 |
31 |
32 |
33 | Table of Contents
34 |
35 |
36 | About The Project
37 |
40 |
41 |
42 | Getting Started
43 |
48 |
49 | Contributing
50 | License
51 | Contact
52 |
53 |
54 |
55 |
56 |
57 |
58 | ## About The Project
59 |
60 | [](https://github.com/GDSCITM/GDSCITM-official-website)
61 |
62 | Google Developer Student Clubs (GDSC) ITM website is an open source website develop to help the students to get to know what and how gdsc is working. Why we need gdsc website.
63 |
64 | Here's why:
65 | * Students can give feedback
66 | * All details related to gdsc is on single page
67 | * Can get to know the current and upcoming events and how you can enroll and contribute in that evernt.
68 |
69 | ### Built With
70 |
71 | Frameworks and libraries used in project.
72 |
73 | * [![React][React.js]][React-url]
74 |
75 | * ![MaterialUi][mui]
76 |
77 |
78 |
79 |
80 | ## Getting Started
81 |
82 | To get a local copy up and running follow these simple example steps.
83 |
84 |
85 | ## Fork
86 | A fork is a copy of the original repository. Once you fork a repo, a copy is stored on your account and the changes you make to it can be incorporated into your copy of the project instead of the original repo. You then own the copy of the repository.
87 |
88 | ### Procedure
89 | * Fork the repo from the original project’s repository. The Fork button is located in the right upper corner.
90 | 
91 |
92 | * Go to your own account; there will be a copy of the project in your repositories.
93 |
94 | * Next, you can clone the repository locally by using `git clone URL` . In place of `URL`, put the forked repository’s URL. Click Code and copy the `https URL`.
95 |
96 | 
97 |
98 | ## Prerequisites
99 |
100 | Download node and npm latest version on your local machine.
101 | * npm
102 | ```sh
103 | npm install npm@latest -g
104 | ```
105 |
106 | ## Installation
107 |
108 | _Steps to set up project on your local machine ._
109 |
110 | 1. Clone the repo
111 | ```sh
112 | git clone https://github.com/your_username_/GDSC-website.git
113 | ```
114 | 2. Install NPM packages
115 | ```sh
116 | npm install
117 | ```
118 | 3. Start the project
119 | ```sh
120 | npm start
121 | ```
122 |
123 |
124 | ## Contributing
125 |
126 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
127 |
128 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
129 | Don't forget to give the project a star! Thanks again!
130 |
131 | 1. Fork the Project
132 | 2. Create your Feature Branch (`git checkout -b gdsc/featureName`)
133 | 3. Commit your Changes (`git commit -m 'Add some featureName'`)
134 | 4. Push to the Branch (`git push origin gdsc/featureName`)
135 | 5. Open a Pull Request
136 |
137 |
138 |
139 |
140 | ## License
141 |
142 | Distributed under the MIT License. See `LICENSE.txt` for more information.
143 |
144 |
145 |
146 |
147 | ## 🔗 Contact Us
148 | [](gdsc.tech@itmgoi.in)
149 |
150 | [](https://www.linkedin.com/groups/9220794)
151 |
152 | [](https://twitter.com/GDSCITM?t=hS78uYXiSkN1sHhrs5jELQ&s=08)
153 |
154 | [](https://www.instagram.com/gdscitm?r=nametag)
155 |
156 | [](https://discord.com/invite/agGwYPhk9k)
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 | [contributors-shield]: https://img.shields.io/github/contributors/GDSCITM/GDSCITM-official-website?style=plastic?style=plastic
165 | [contributors-url]: https://github.com/GDSCITM/GDSCITM-official-website/graphs/contributors
166 | [pr-shield]: https://img.shields.io/github/issues-pr/GDSCITM/GDSCITM-official-website?style=plastic
167 | [issue-shield]: https://img.shields.io/github/issues/GDSCITM/GDSCITM-official-website?style=plastic
168 | [forks-shield]: https://img.shields.io/github/forks/GDSCITM/GDSCITM-official-website?style=plastic?style=plastic
169 | [forks-url]: https://github.com/GDSCITM/GDSCITM-official-website/network/members
170 | [stars-shield]: https://img.shields.io/github/stars/GDSCITM/GDSCITM-official-website?style=plastic?style=plastic
171 | [stars-url]: https://github.com/GDSCITM/GDSCITM-official-website/stargazers
172 | [issues-shield]: https://img.shields.io/github/issues/GDSCITM/GDSCITM-official-website?style=plastic?style=plastic
173 | [issues-url]: https://github.com/GDSCITM/GDSCITM-official-website/issues
174 | [license-shield]: https://img.shields.io/github/license/GDSCITM/GDSCITM-official-website?style=plastic?style=plastic
175 | [license-url]: https://github.com/GDSCITM/GDSCITM-official-website/blob/master/LICENSE.txt
176 | [product-screenshot]: public/assests/readmeImages/screenshot.png
177 | [React.js]: https://img.shields.io/badge/React-20232A?style=plastic&logo=react&logoColor=61DAFB
178 | [React-url]: https://reactjs.org/
179 | [mui]: https://img.shields.io/badge/MaterialUi-20232A?style=plastic&logo=MUI&logoColor=007FFF
180 | [fork-image]: public/assests/readmeImages/fork.png
181 | [clone-image]: public/assests/readmeImages/clone.png
182 |
183 |
184 | ## 🔗 Contributors✨
185 |
186 |
187 |
188 |
189 |
190 | ## 🔗 Maintainers✨
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
--------------------------------------------------------------------------------
/src/Components/Alternative/Header.module.css:
--------------------------------------------------------------------------------
1 | .main {
2 | position: fixed;
3 | top: 0px;
4 | left: 0px;
5 | width: 100%;
6 | height: auto;
7 | max-height: 80px;
8 | display: flex;
9 | justify-content: space-between;
10 | align-items: center;
11 | /* background: rgba(255, 255, 255, 0.5);
12 |
13 | */
14 | background:white;
15 |
16 | overflow: visible;
17 | z-index: 100;
18 | backdrop-filter: blur(10px);
19 | overflow: hidden;
20 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
21 | }
22 |
23 | .mainHeaderLogo {
24 | position: relative;
25 | width: 100%;
26 | height: auto;
27 | padding: 0px 20px;
28 | }
29 |
30 | .mainHeaderLogo img {
31 | position: relative;
32 | width: 350px;
33 | height: auto;
34 | object-fit: contain;
35 | }
36 |
37 | .mainHeaderItem {
38 | position: relative;
39 | width: 100%;
40 | height: auto;
41 | display: flex;
42 | gap: 10px;
43 | margin-right: 20px;
44 | justify-content: flex-end;
45 | align-items: center;
46 | }
47 |
48 | .mainHeaderItem p {
49 | position: relative;
50 | width: auto;
51 | height: auto;
52 | padding: 10px;
53 | color: #111;
54 | font-size: 16px;
55 | font-weight: 500;
56 | cursor: pointer;
57 | }
58 | .mainHeaderItem a menuItem{
59 | position: relative;
60 | width: auto;
61 | height: auto;
62 | padding: 10px;
63 | color: #111;
64 | font-size: 16px;
65 | font-weight: 500;
66 | cursor: pointer;
67 | }
68 | .mainHeaderItem a Button span
69 | {
70 | font-family: Arial, Helvetica, sans-serif;
71 |
72 | font-size: 16px;
73 | font-weight: 500;
74 |
75 | }
76 | .mainHeaderItem a
77 | {
78 | text-decoration: none;
79 | color: white;
80 | }
81 |
82 | .mainHeaderItem p::after {
83 | content: '';
84 | position: absolute;
85 | bottom: 0px;
86 | left: 0px;
87 | width: 0px;
88 | height: 2px;
89 | background-color: black;
90 | transition: .2s all ease;
91 | }
92 |
93 | .mainHeaderItem p:hover::after {
94 | width: 100%;
95 | }
96 |
97 | .mainHeaderMobileItem {
98 | display: none;
99 | }
100 |
101 | .mainHeaderMobile {
102 | position: fixed;
103 | top: 70px;
104 | left: 0px;
105 | width: 100vw;
106 |
107 | height: calc(100% - 70px);
108 | z-index: 11111;
109 | display: none;
110 | }
111 | .mainHeaderMobileClose {
112 | position: absolute;
113 | top: 0px;
114 | left: 0px;
115 | width: 100%;
116 | height: 100%;
117 | background-color: rgba(0, 0, 0, .34);
118 | }
119 | .mainHeaderMobileHolder {
120 | position: absolute;
121 | top: 0px;
122 | right: 0px;
123 | width: 70%;
124 | max-width: 350px;
125 | height: 100%;
126 | background-color: white;
127 | }
128 | .mainHeaderMobileHolderItem {
129 | position: relative;
130 | width: 100%;
131 | height: auto;
132 | margin: 10px auto;
133 | padding: 10px;
134 | display: flex;
135 | gap: 5px;
136 | justify-content: left;
137 | align-items: center;
138 | border-bottom: 1px solid #eee;
139 | }
140 | .mainHeaderMobileHolderItemImage {
141 | position: relative;
142 | width: auto;
143 | height: auto;
144 | background-color: #eee;
145 | border-radius: 50%;
146 | }
147 | .mainHeaderMobileHolderItemImage img{
148 | position: relative;
149 | width: 50px;
150 | height: 50px;
151 | line-height: 0px;
152 | border-radius: 50%;
153 | object-fit: cover;
154 | }
155 | .mainHeaderMobileHolderItemDetails {
156 | position: relative;
157 | width: 100%;
158 | height: auto;
159 | padding: 5px;
160 | }
161 | .mainHeaderMobileHolderItemDetails p{
162 | position: relative;
163 | width: 100%;
164 | height: auto;
165 | font-size: 15px;
166 | font-weight: 500;
167 | text-overflow: ellipsis;
168 | overflow: hidden;
169 | white-space: break-spaces;
170 | }
171 | .mainHeaderMobileHolderItemDetails span{
172 | position: relative;
173 | width: 100%;
174 | height: auto;
175 | font-size: 13px;
176 | font-weight: 500;
177 | color: #666666;
178 | text-overflow: ellipsis;
179 | overflow: hidden;
180 | white-space: break-spaces;
181 | }
182 | .mainHeaderMobileHolderItemTwo {
183 | position: relative;
184 | width: 100%;
185 | height: auto;
186 | padding: 10px;
187 | margin: 10px auto;
188 | display: flex;
189 | gap: 5px;
190 | flex-direction: column;
191 | justify-content: left;
192 | align-items: center;
193 | border-bottom: 1px solid #eee;
194 |
195 | }
196 | .mainHeaderMobileHolderItemTwo a{
197 | position: relative;
198 | width: 100%;
199 | height: auto;
200 | padding: 10px 10px;
201 | display: flex;
202 | gap: 20px;
203 | justify-content: left;
204 | text-align: center;
205 | align-items: center;
206 | }
207 | .mainHeaderMobileHolderItemTwo a:hover{
208 | background-color: #C3E7FF;
209 | border-top-left-radius: 40px;
210 | border-bottom-left-radius: 40px;
211 | }
212 |
213 | .mainHeaderMobileHolderItemTwoLinks{
214 | text-decoration: none;
215 | color: #111111;
216 | margin-left: 20px;
217 | }
218 |
219 | /* Extra small devices (phones, 600px and down) */
220 | @media only screen and (max-width: 600px) {
221 | .mainHeaderLogo {
222 | position: relative;
223 | width: auto;
224 | height: auto;
225 | padding: 0px 5px;
226 | }
227 |
228 | .mainHeaderLogo img {
229 | width: 250px;
230 | }
231 |
232 | .mainHeaderItem {
233 | display: none;
234 | }
235 |
236 | .mainHeaderMobileItem {
237 | position: relative;
238 | width: auto;
239 | height: auto;
240 | padding: 5px 20px;
241 | display: flex;
242 | justify-content: center;
243 | align-items: center;
244 | }
245 | }
246 |
247 | /* Small devices (portrait tablets and large phones, 600px and up) */
248 | @media only screen and (min-width: 600px) {
249 | .mainHeaderLogo {
250 | position: relative;
251 | width: auto;
252 | height: auto;
253 | padding: 0px 5px;
254 | }
255 |
256 | .mainHeaderLogo img {
257 | width: 350px;
258 | }
259 |
260 | .mainHeaderItem {
261 | display: none;
262 | }
263 |
264 | .mainHeaderMobileItem {
265 | position: relative;
266 | width: auto;
267 | height: auto;
268 | padding: 5px 20px;
269 | display: flex;
270 | justify-content: center;
271 | align-items: center;
272 | }
273 | }
274 |
275 | /* Medium devices (landscape tablets, 768px and up) */
276 | @media only screen and (min-width: 768px) {
277 |
278 | .mainHeaderLogo {
279 | position: relative;
280 | width: 100%;
281 | height: auto;
282 | padding: 0px 20px;
283 | }
284 |
285 | .mainHeaderLogo img {
286 | position: relative;
287 | width: 350px;
288 | height: auto;
289 | object-fit: contain;
290 | }
291 |
292 | .mainHeaderItem {
293 | position: relative;
294 | width: 100%;
295 | height: auto;
296 | display: flex;
297 | gap: 10px;
298 | margin-right: 20px;
299 | justify-content: flex-end;
300 | align-items: center;
301 | }
302 |
303 | .mainHeaderItem p {
304 | position: relative;
305 | width: auto;
306 | height: auto;
307 | padding: 10px;
308 | color: #111;
309 | font-size: 16px;
310 | font-weight: 500;
311 | cursor: pointer;
312 | }
313 |
314 | .mainHeaderItem p::after {
315 | content: '';
316 | position: absolute;
317 | bottom: 0px;
318 | left: 0px;
319 | width: 0px;
320 | height: 2px;
321 | background-color: black;
322 | transition: .2s all ease;
323 | }
324 |
325 | .mainHeaderItem p:hover::after {
326 | width: 100%;
327 | }
328 |
329 | .mainHeaderMobileItem {
330 | display: none;
331 | }
332 |
333 | }
334 | /* Large devices (laptops/desktops, 992px and up) */
335 | @media only screen and (min-width: 992px) {
336 | .mainHeaderMobileItem {
337 | display: none;
338 | }
339 | .mainHeaderItem a Button span
340 | {
341 | font-size: 16px;
342 | font-weight: 500;
343 | }
344 | .mainHeaderMobile {
345 | display: none;
346 | }
347 | }
348 |
349 | /* Extra large devices (large laptops and desktops, 1200px and up) */
350 | @media only screen and (min-width: 1200px) {
351 | .mainHeaderMobileItem {
352 | display: none;
353 | }
354 | .mainHeaderMobile {
355 | display: none;
356 | }
357 | }
--------------------------------------------------------------------------------
/src/Components/Alternative/about/about.module.css:
--------------------------------------------------------------------------------
1 | .main {
2 | position: relative;
3 | width: 100%;
4 | height: auto;
5 | padding: 20px;
6 | margin: 20px auto;
7 | }
8 |
9 | .mainHolder {
10 | position: relative;
11 | width: 90%;
12 | height: auto;
13 | padding: 20px 10px;
14 | margin: 0px auto;
15 | display: flex;
16 | justify-content: center;
17 | align-items: center;
18 | }
19 |
20 | .mainHolderOne {
21 | position: relative;
22 | width:70%;
23 | height: auto;
24 | padding: 10px;
25 | display: flex;
26 | gap: 20px;
27 | justify-content: left;
28 | flex-direction: column;
29 | }
30 |
31 | .mainHolderOne h1 {
32 | position: relative;
33 | width: 100%;
34 | height: auto;
35 | font-size: 50px;
36 | }
37 |
38 | .mainHolderOne p {
39 | position: relative;
40 | width: auto;
41 | height: auto;
42 | font-size: 17px;
43 | font-weight: 400;
44 | color: #777;
45 | }
46 |
47 | .mainHolderOne h2 {
48 | position: relative;
49 | width: 100%;
50 | height: auto;
51 | font-size: 40px;
52 | }
53 |
54 | .mainHolderTwo {
55 | position: relative;
56 | width: 30%;
57 | height: auto;
58 | padding: 10px;
59 | display: flex;
60 | justify-content: center;
61 | align-items: center;
62 | }
63 |
64 | .mainHolderTwo img {
65 | position: relative;
66 | width: 100%;
67 | height: auto;
68 | max-height: 100%;
69 | object-fit: contain;
70 | }
71 |
72 |
73 | /* Extra small devices (phones, 600px and down) */
74 | @media only screen and (max-width: 600px) {
75 | .main {
76 | padding: 10px;
77 | }
78 |
79 | .mainHolder {
80 | position: relative;
81 | width: 100%;
82 | height: auto;
83 | padding: 5px;
84 | margin: 0px auto;
85 | display: flex;
86 | flex-direction: column;
87 | justify-content: center;
88 | align-items: center;
89 | }
90 |
91 | .mainHolderOne {
92 | position: relative;
93 | width: 100%;
94 | height: auto;
95 | padding: 5px;
96 | display: flex;
97 | gap: 20px;
98 | justify-content: left;
99 | flex-direction: column;
100 | }
101 |
102 | .mainHolderOne h1 {
103 | position: relative;
104 | width: 100%;
105 | height: auto;
106 | font-size: 30px;
107 | }
108 |
109 | .mainHolderOne p {
110 | position: relative;
111 | width: auto;
112 | height: auto;
113 | font-size: 15px;
114 | font-weight: 450;
115 | color: #777;
116 | }
117 |
118 | .mainHolderOne h2 {
119 | position: relative;
120 | width: 100%;
121 | height: auto;
122 | font-size: 20px;
123 | }
124 |
125 | .mainHolderTwo img {
126 | position: relative;
127 | width: auto;
128 | }
129 |
130 | }
131 |
132 | /* Small devices (portrait tablets and large phones, 600px and up) */
133 | @media only screen and (min-width: 600px) {
134 |
135 |
136 |
137 | .mainHolder {
138 | position: relative;
139 | width: 100%;
140 | height: auto;
141 | padding: 5px;
142 | margin: 0px auto;
143 | display: flex;
144 | flex-direction: column;
145 | justify-content: center;
146 | align-items: center;
147 | }
148 |
149 | .mainHolderOne {
150 | position: relative;
151 | width: 100%;
152 | height: auto;
153 | padding: 5px;
154 | display: flex;
155 | gap: 20px;
156 | justify-content: left;
157 | flex-direction: column;
158 | }
159 |
160 | .mainHolderOne h1 {
161 | position: relative;
162 | width: 100%;
163 | height: auto;
164 | font-size: 30px;
165 | }
166 |
167 | .mainHolderOne p {
168 | position: relative;
169 | width: auto;
170 | height: auto;
171 | font-size: 15px;
172 | font-weight: 450;
173 | color: #777;
174 | }
175 |
176 | .mainHolderOne h2 {
177 | position: relative;
178 | width: 100%;
179 | height: auto;
180 | font-size: 20px;
181 | }
182 |
183 | .mainHolderTwo img {
184 | position: relative;
185 | width: auto;
186 | }
187 |
188 | }
189 |
190 | /* Medium devices (landscape tablets, 768px and up) */
191 | @media only screen and (min-width: 768px) {
192 | .mainHolder {
193 | position: relative;
194 | width: 90%;
195 | height: auto;
196 | padding: 20px 10px;
197 | margin: 0px auto;
198 | display: flex;
199 | flex-direction: row;
200 |
201 | justify-content: center;
202 | align-items: center;
203 | }
204 |
205 | .mainHolderOne {
206 | position: relative;
207 | width: 70%;
208 | height: auto;
209 | padding: 10px;
210 | display: flex;
211 | gap: 20px;
212 | justify-content: left;
213 | flex-direction: column;
214 | }
215 |
216 | .mainHolderOne h1 {
217 | position: relative;
218 | width: 100%;
219 | height: auto;
220 | font-size: 40px;
221 | }
222 |
223 | .mainHolderOne p {
224 | position: relative;
225 | width: auto;
226 | height: auto;
227 | font-size: 17px;
228 | font-weight: 400;
229 | color: #777;
230 | }
231 |
232 | .mainHolderOne h2 {
233 | position: relative;
234 | width: 100%;
235 | height: auto;
236 | font-size: 35px;
237 | }
238 |
239 | .mainHolderTwo {
240 | position: relative;
241 | width: 30%;
242 | height: auto;
243 | padding: 10px;
244 | display: flex;
245 | justify-content: center;
246 | align-items: center;
247 | }
248 |
249 | .mainHolderTwo img {
250 | position: relative;
251 | width: 100%;
252 | height: auto;
253 | max-height: 100%;
254 | object-fit: contain;
255 | }
256 |
257 |
258 |
259 | }
260 |
261 | /* Large devices (laptops/desktops, 992px and up) */
262 | @media only screen and (min-width: 992px) {
263 |
264 | .mainHolder {
265 | position: relative;
266 | width: 90%;
267 | height: auto;
268 | padding: 20px 10px;
269 | margin: 0px auto;
270 | display: flex;
271 | flex-direction: row;
272 |
273 | justify-content: center;
274 | align-items: center;
275 | }
276 |
277 | .mainHolderOne {
278 | position: relative;
279 | width: 70%;
280 | height: auto;
281 | padding: 10px;
282 | display: flex;
283 | gap: 20px;
284 | justify-content: left;
285 | flex-direction: column;
286 | }
287 |
288 | .mainHolderOne h1 {
289 | position: relative;
290 | width: 100%;
291 | height: auto;
292 | font-size: 40px;
293 | }
294 |
295 | .mainHolderOne p {
296 | position: relative;
297 | width: auto;
298 | height: auto;
299 | font-size: 17px;
300 | font-weight: 450;
301 | color: #777;
302 | }
303 |
304 | .mainHolderOne h2 {
305 | position: relative;
306 | width: 100%;
307 | height: auto;
308 | font-size: 30px;
309 | }
310 |
311 | .mainHolderTwo {
312 | position: relative;
313 | width: 30%;
314 | height: auto;
315 | padding: 10px;
316 | display: flex;
317 | justify-content: center;
318 | align-items: center;
319 | }
320 |
321 | .mainHolderTwo img {
322 | position: relative;
323 | width: 100%;
324 | height: auto;
325 | max-height: 100%;
326 | object-fit: contain;
327 | }
328 |
329 |
330 | }
331 |
332 | /* Extra large devices (large laptops and desktops, 1200px and up) */
333 | @media only screen and (min-width: 1200px) {
334 |
335 | .mainHolder {
336 | position: relative;
337 | width: 90%;
338 | height: auto;
339 | padding: 20px 10px;
340 | margin: 0px auto;
341 | display: flex;
342 | flex-direction: row;
343 |
344 | justify-content: center;
345 | align-items: center;
346 | }
347 |
348 | .mainHolderOne {
349 | position: relative;
350 | width: 70%;
351 | height: auto;
352 | padding: 10px;
353 | display: flex;
354 | gap: 20px;
355 | justify-content: left;
356 | flex-direction: column;
357 | }
358 |
359 | .mainHolderOne h1 {
360 | position: relative;
361 | width: 100%;
362 | height: auto;
363 | font-size: 45px;
364 | }
365 |
366 | .mainHolderOne p {
367 | position: relative;
368 | width: auto;
369 | height: auto;
370 | font-size: 17px;
371 | font-weight: 400;
372 | color: #777;
373 | }
374 |
375 | .mainHolderOne h2 {
376 | position: relative;
377 | width: 100%;
378 | height: auto;
379 | font-size: 35px;
380 | }
381 |
382 | .mainHolderTwo {
383 | position: relative;
384 | width: 30%;
385 | height: auto;
386 | padding: 10px;
387 | display: flex;
388 | justify-content: center;
389 | align-items: center;
390 | }
391 |
392 | .mainHolderTwo img {
393 | position: relative;
394 | width: 100%;
395 | height: auto;
396 | max-height: 100%;
397 | object-fit: contain;
398 | }
399 |
400 |
401 | }
--------------------------------------------------------------------------------
/src/Components/Alternative/gallery/gallery.module.css:
--------------------------------------------------------------------------------
1 | .main {
2 | position: relative;
3 | width: 100%;
4 | height: auto;
5 | padding: 20px;
6 | margin: 80px auto;
7 | background-color: #4CAF50;
8 | }
9 |
10 | .mainHolder {
11 | position: relative;
12 | width: 100%;
13 | height: 100%;
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | }
18 |
19 | .mainHolderOne {
20 | position: relative;
21 | width: 30%;
22 | }
23 |
24 | .mainHolderOneItem {
25 | position: absolute;
26 | top: 50%;
27 | left: 20px;
28 | transform: translateY(-50%);
29 | width: 350px;
30 | height: 450px;
31 | background-color: white;
32 | border-radius: 5px;
33 | overflow: hidden;
34 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
35 | }
36 |
37 | .mainHolderOneItemHeader {
38 | position: relative;
39 | width: 100%;
40 | height: auto;
41 | padding: 10px;
42 | display: flex;
43 | gap: 10px;
44 | justify-content: left;
45 | align-items: center;
46 | background-color: rgba(217, 217, 217, 0.86);
47 | }
48 |
49 | .mainHolderOneItemHeader p {
50 | position: relative;
51 | width: 15px;
52 | height: 15px;
53 | line-height: 0px;
54 | border-radius: 50%;
55 | display: inline-block;
56 | background-color: red;
57 | }
58 |
59 | .mainHolderOneItemContainer {
60 | position: relative;
61 | width: 100%;
62 | height: calc(100% - 40px);
63 | padding: 10px 20px;
64 | overflow: auto;
65 | }
66 |
67 | .mainHolderOneItemContainer::-webkit-scrollbar {
68 | width: 4px;
69 | background-color: #f5f5f5;
70 | }
71 |
72 | .mainHolderOneItemContainer::-webkit-scrollbar-thumb {
73 | width: 4px;
74 | background-color: #adadad;
75 | }
76 |
77 | .mainHolderOneItemContainer img {
78 | position: relative;
79 | width: 100%;
80 | height: auto;
81 | object-fit: cover;
82 | margin: 5px auto;
83 | }
84 |
85 |
86 |
87 |
88 |
89 | .mainHolderTwo {
90 | position: relative;
91 | width: 70%;
92 | height: auto;
93 | }
94 |
95 | .mainHolderTwoItemDesign {
96 | position: absolute;
97 | top: 0px;
98 | right: 0px;
99 | width: auto;
100 | height: 100%;
101 | max-height: 350px;
102 | z-index: 0;
103 | }
104 |
105 | .mainHolderTwoItemDesign img {
106 | position: relative;
107 | width: 100%;
108 | height: 100%;
109 | object-fit: cover;
110 |
111 | }
112 |
113 | .mainHolderTwoItem {
114 | position: relative;
115 | width: 80%;
116 | height: 300px;
117 | padding: 20px;
118 | display: flex;
119 | flex-direction: column;
120 | gap: 20px;
121 | justify-content: center;
122 | align-items: center;
123 | }
124 |
125 | .mainHolderTwoItemHeading {
126 | position: relative;
127 | width: 100%;
128 | height: auto;
129 |
130 | }
131 |
132 | .mainHolderTwoItemHeading h2 {
133 | position: relative;
134 | width: auto;
135 | height: auto;
136 | font-size: 35px;
137 | color: white;
138 | }
139 |
140 | .mainHolderTwoItemHeading p {
141 | position: relative;
142 | width: auto;
143 | height: auto;
144 | font-weight: 600;
145 | font-size: 20px;
146 | line-height: 23px;
147 | color: rgba(0, 0, 0, 0.5);
148 | }
149 | .mainHolderTwoItemHeading b{
150 | font-weight: 900;
151 | font-size: 40px;
152 | margin-top: 30px;
153 | padding-top: 30px;
154 | }
155 |
156 | .mainHolderTwoItemContainer {
157 | position: relative;
158 | width: 100%;
159 | height: auto;
160 | margin: 10px auto;
161 | }
162 |
163 | .mainHolderTwoItemContainer p {
164 | position: relative;
165 | width: auto;
166 | height: auto;
167 | font-weight: 400;
168 | font-size: 18px;
169 | line-height: 21px;
170 | color: #FFFFFF;
171 | }
172 |
173 |
174 | /* Extra small devices (phones, 600px and down) */
175 | @media only screen and (max-width: 600px) {
176 | .main {
177 | position: relative;
178 | width: 100%;
179 | height: auto;
180 | padding: 20px;
181 | margin: 80px auto;
182 | background-color: #4CAF50;
183 | }
184 |
185 | .mainHolder {
186 | position: relative;
187 | width: 100%;
188 | height: 100%;
189 | display: flex;
190 | flex-direction: column-reverse;
191 | justify-content: center;
192 | align-items: center;
193 | }
194 |
195 | .mainHolderOne {
196 | position: relative;
197 | width: 100%;
198 | }
199 |
200 | .mainHolderOneItem {
201 | position: relative;
202 | left: 0;
203 | transform: none;
204 | width: 100%;
205 | height: 450px;
206 | background-color: white;
207 | border-radius: 5px;
208 | overflow: hidden;
209 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
210 | }
211 |
212 | .mainHolderTwo {
213 | position: relative;
214 | width: 100%;
215 | height: auto;
216 | }
217 |
218 | .mainHolderTwoItemDesign {
219 | display: none;
220 | }
221 |
222 | .mainHolderTwoItem {
223 | position: relative;
224 | width: 100%;
225 | height: auto;
226 | padding: 20px;
227 | display: flex;
228 | flex-direction: column;
229 | gap: 20px;
230 | justify-content: center;
231 | align-items: center;
232 | }
233 |
234 | }
235 |
236 | /* Small devices (portrait tablets and large phones, 600px and up) */
237 | @media only screen and (min-width: 600px) {
238 | .main {
239 | position: relative;
240 | width: 100%;
241 | height: auto;
242 | padding: 20px;
243 | margin: 80px auto;
244 | background-color: #4CAF50;
245 | }
246 |
247 | .mainHolder {
248 | position: relative;
249 | width: 100%;
250 | height: 100%;
251 | display: flex;
252 | flex-direction: column-reverse;
253 | justify-content: center;
254 | align-items: center;
255 | }
256 |
257 | .mainHolderOne {
258 | position: relative;
259 | width: 100%;
260 | }
261 |
262 | .mainHolderOneItem {
263 | position: relative;
264 | left: 0;
265 | transform: none;
266 | width: 100%;
267 | max-width: 350px;
268 | height: 450px;
269 | margin: 5px auto;
270 | background-color: white;
271 | border-radius: 5px;
272 | overflow: hidden;
273 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
274 | }
275 |
276 | .mainHolderTwo {
277 | position: relative;
278 | width: 100%;
279 | height: auto;
280 | }
281 |
282 |
283 | .mainHolderTwoItem {
284 | position: relative;
285 | width: 100%;
286 | height: auto;
287 | padding: 20px;
288 | display: flex;
289 | flex-direction: column;
290 | gap: 20px;
291 | justify-content: center;
292 | align-items: center;
293 | }
294 | }
295 |
296 | /* Medium devices (landscape tablets, 768px and up) */
297 | @media only screen and (min-width: 768px) {
298 | .main {
299 | position: relative;
300 | width: 100%;
301 | height: auto;
302 | padding: 20px;
303 | margin: 80px auto;
304 | background-color: #4CAF50;
305 | }
306 |
307 | .mainHolder {
308 | position: relative;
309 | width: 100%;
310 | height: 100%;
311 | display: flex;
312 | flex-direction: row;
313 | justify-content: center;
314 | align-items: center;
315 | }
316 |
317 | .mainHolderOne {
318 | position: relative;
319 | width: 50%;
320 | }
321 |
322 | .mainHolderOneItem {
323 | position: absolute;
324 | top: 50%;
325 | left: 20px;
326 | transform: translateY(-50%);
327 | width: 350px;
328 | height: 450px;
329 | background-color: white;
330 | border-radius: 5px;
331 | overflow: hidden;
332 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
333 | }
334 |
335 | .mainHolderTwo {
336 | position: relative;
337 | width: 50%;
338 | height: auto;
339 | }
340 |
341 | }
342 |
343 | /* Large devices (laptops/desktops, 992px and up) */
344 | @media only screen and (min-width: 992px) {
345 | .main {
346 | position: relative;
347 | width: 100%;
348 | height: auto;
349 | padding: 20px;
350 | margin: 80px auto;
351 | background-color: #4CAF50;
352 | }
353 |
354 | .mainHolder {
355 | position: relative;
356 | width: 100%;
357 | height: 100%;
358 | display: flex;
359 | flex-direction: row;
360 | justify-content: center;
361 | align-items: center;
362 | }
363 |
364 | .mainHolderOne {
365 | position: relative;
366 | width: 40%;
367 | }
368 |
369 | .mainHolderOneItem {
370 | position: absolute;
371 | top: 50%;
372 | left: 20px;
373 | transform: translateY(-50%);
374 | width: 350px;
375 | height: 450px;
376 | background-color: white;
377 | border-radius: 5px;
378 | overflow: hidden;
379 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
380 | }
381 |
382 | .mainHolderTwo {
383 | position: relative;
384 | width: 60%;
385 | height: auto;
386 | }
387 |
388 | }
389 |
390 |
391 | /* Extra large devices (large laptops and desktops, 1200px and up) */
392 | @media only screen and (min-width: 1200px) {
393 | .main {
394 | position: relative;
395 | width: 100%;
396 | height: auto;
397 | padding: 20px;
398 | margin: 80px auto;
399 | background-color: #4CAF50;
400 | }
401 |
402 | .mainHolder {
403 | position: relative;
404 | width: 100%;
405 | height: 100%;
406 | display: flex;
407 | flex-direction: row;
408 | justify-content: center;
409 | align-items: center;
410 | }
411 |
412 | .mainHolderOne {
413 | position: relative;
414 | width: 30%;
415 | }
416 |
417 | .mainHolderOneItem {
418 | position: absolute;
419 | top: 50%;
420 | left: 20px;
421 | transform: translateY(-50%);
422 | width: 350px;
423 | height: 450px;
424 | background-color: white;
425 | border-radius: 5px;
426 | overflow: hidden;
427 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
428 | }
429 |
430 | .mainHolderTwo {
431 | position: relative;
432 | width: 70%;
433 | height: auto;
434 | }
435 |
436 | .mainHolderTwoItem {
437 | position: relative;
438 | width: 80%;
439 | height: 300px;
440 | }
441 |
442 | .mainHolderTwoItemDesign {
443 | display: block;
444 | }
445 | }
--------------------------------------------------------------------------------
/src/Components/SliderComponent.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 | import "slick-carousel/slick/slick.css";
3 | import "slick-carousel/slick/slick-theme.css";
4 | import Slider from "react-slick";
5 | // import Card from "@mui/material/Card";
6 | // import CardActions from "@mui/material/CardActions";
7 | // import CardContent from "@mui/material/CardContent";
8 | // import CardMedia from "@mui/material/CardMedia";
9 | // import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
10 | // import ArrowBackIcon from "@mui/icons-material/ArrowBack";
11 | import Typography from "@mui/material/Typography";
12 | import { IconButton, Grid, Divider, Box } from "@mui/material";
13 | import LinkedInIcon from "@mui/icons-material/LinkedIn";
14 | import TwitterIcon from "@mui/icons-material/Twitter";
15 | import GitHubIcon from "@mui/icons-material/GitHub";
16 | import "./slider.css";
17 |
18 | export default function SliderComponent() {
19 | var rs = useRef();
20 | var reviews = [
21 | // {
22 | // id: 1,
23 | // name: "Akshat Jain",
24 | // role: "Technical Support",
25 | // avatar: "/images/1.png",
26 | // bg: "/images/bg1.png",
27 | // "github": "https://github.com/",
28 | // "linkedin": "https://www.linkedin.com/",
29 | // "twitter": "https://twitter.com/"
30 | // },
31 | // {
32 | // id: 2,
33 | // name: "Rohit Sharma",
34 | // role: "UI/UX Designer",
35 | // avatar: "/images/2.png",
36 | // bg: "/images/bg2.png",
37 | // "github": "https://github.com/",
38 | // "linkedin": "https://www.linkedin.com/",
39 | // "twitter": "https://twitter.com/"
40 | // },
41 | // {
42 | // id: 3,
43 | // name: "Harry Singh",
44 | // role: "System engineer",
45 | // avatar: "/images/3.png",
46 | // bg: "/images/bg3.png",
47 | // "github": "https://github.com/",
48 | // "linkedin": "https://www.linkedin.com/",
49 | // "twitter": "https://twitter.com/"
50 | // },
51 | // {
52 | // id: 4,
53 | // name: "Akshara Jain",
54 | // role: "Web Development",
55 | // avatar: "/images/4.png",
56 | // bg: "/images/bg4.png",
57 | // "github": "https://github.com/",
58 | // "linkedin": "https://www.linkedin.com/",
59 | // "twitter": "https://twitter.com/"
60 | // },
61 | // {
62 | // id: 5,
63 | // name: "Ronit Roy",
64 | // role: "Web Development",
65 | // avatar: "/images/1.png",
66 | // bg: "/images/bg4.png",
67 | // "github": "https://github.com/",
68 | // "linkedin": "https://www.linkedin.com/",
69 | // "twitter": "https://twitter.com/"
70 | // },
71 | // {
72 | // id: 6,
73 | // name: "Vayu Gandhi",
74 | // role: "System engineer",
75 | // avatar: "/images/2.png",
76 | // bg: "/images/bg3.png",
77 | // "github": "https://github.com/",
78 | // "linkedin": "https://www.linkedin.com/",
79 | // "twitter": "https://twitter.com/"
80 | // },
81 | // {
82 | // id: 7,
83 | // name: "Abhiraj",
84 | // role: "UI/UX Designer",
85 | // avatar: "/images/3.png",
86 | // bg: "/images/bg2.png",
87 | // "github": "https://github.com/",
88 | // "linkedin": "https://www.linkedin.com/",
89 | // "twitter": "https://twitter.com/"
90 | // },
91 | // {
92 | // id: 8,
93 | // name: "Ram Singh",
94 | // role: "Technical Support",
95 | // avatar: "/images/4.png",
96 | // bg: "/images/bg1.png",
97 | // "github": "https://github.com/",
98 | // "linkedin": "https://www.linkedin.com/",
99 | // "twitter": "https://twitter.com/"
100 | // },
101 | ];
102 | var reviews = [];
103 |
104 | const [teamdata, setteamdata] = useState([]);
105 |
106 | useEffect(() => {
107 | let i = 1;
108 | let rendomint = () => {
109 | if (i === 4) {
110 | i = 1;
111 | } else {
112 | i = i + 1;
113 | }
114 | return i;
115 | };
116 |
117 | const fetchdata = async () => {
118 | const response = await fetch(
119 | "https://raw.githubusercontent.com/GDSCITM/GDSC-dataStore/main/Teams/data.json"
120 | );
121 | const data = await response.json();
122 | setteamdata(
123 | data.map((item, idx) => ({
124 | ...item,
125 | bg: `/images/bg${rendomint()}.png`,
126 | }))
127 | );
128 | };
129 |
130 | fetchdata();
131 | }, []);
132 |
133 | let size = 5;
134 | var settings = {
135 | dots: teamdata.length > size,
136 | arrows: false,
137 | infinite: true,
138 | speed: 500,
139 | slidesToShow: 1,
140 | slidesToScroll: 1,
141 | appendDots: (dots) => (
142 |
156 | ),
157 | };
158 |
159 | const handleNext = () => {
160 | if (teamdata.length > size) {
161 | rs.current.slickNext();
162 | }
163 | };
164 |
165 | const handlePrev = () => {
166 | if (teamdata.length > size) {
167 | rs.current.slickPrev();
168 | }
169 | };
170 |
171 | const showComponent = (data, start, end) =>
172 | data.slice(start, end).map((item, index) => (
173 |
188 |
200 |
214 |
223 |
224 |
225 |
237 | {item.name}
238 |
239 |
251 | {item.role}
252 |
253 |
264 | {item.linkedin ? (
265 |
266 |
270 |
271 | ) : null}
272 | {item.twitter ? (
273 |
274 |
278 |
279 | ) : null}
280 | {item.github ? (
281 |
282 |
286 |
287 | ) : null}
288 |
289 |
290 |
291 |
292 | ));
293 |
294 | return (
295 |
296 |
311 |
312 |
321 |
329 | size ? "block" : "none",
336 | }}
337 | >
338 |
339 |
340 |
341 | Leadership Team
342 |
356 | vision and courage to create
357 |
358 |
359 | size ? "block" : "none",
366 | }}
367 | >
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 | {showComponent(teamdata, 0, size)}
379 |
380 | {teamdata.length > size && (
381 |
382 | {showComponent(teamdata, size, teamdata.length)}
383 |
384 | )}
385 | {/*
386 | {showComponent(reviews)}
387 | */}
388 |
389 |
390 |
391 | );
392 | }
393 |
--------------------------------------------------------------------------------
/public/images/GDSC LOGO 1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/public/images/LogoWithoutText.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------