├── src ├── App.css ├── assets │ ├── sir.jpeg │ ├── zee.jpeg │ ├── Thesis.gif │ ├── awais.jpeg │ ├── moeez.jpeg │ ├── sultan.jpeg │ ├── Abdullah.jpg │ ├── Chat bot.gif │ ├── download.png │ ├── Binary code.gif │ ├── Cyber attack.gif │ ├── Mathematics.gif │ ├── Memory storage.gif │ ├── arrowup.svg │ ├── arrowdown.svg │ ├── index.js │ └── react.svg ├── Components │ ├── Schedule.jsx │ ├── Calculator.jsx │ ├── About.jsx │ ├── Styles │ │ ├── Sidebar.css │ │ ├── Faqs.css │ │ ├── Dashboard.css │ │ ├── Navbar.css │ │ ├── attandance.css │ │ ├── courses.css │ │ └── Team.css │ ├── FAQs.jsx │ ├── Courses.jsx │ ├── Team.jsx │ ├── Dashboard.jsx │ ├── Header.jsx │ ├── Login.jsx │ ├── Sidebar.jsx │ └── attandance.jsx ├── main.jsx ├── Pages │ └── Layout.jsx ├── Config │ └── Firebase.js ├── index.css ├── App.jsx └── Constants │ └── index.js ├── vite.config.js ├── .gitignore ├── README.md ├── .eslintrc.cjs ├── index.html ├── package.json └── public └── vite.svg /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/sir.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/sir.jpeg -------------------------------------------------------------------------------- /src/assets/zee.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/zee.jpeg -------------------------------------------------------------------------------- /src/assets/Thesis.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/Thesis.gif -------------------------------------------------------------------------------- /src/assets/awais.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/awais.jpeg -------------------------------------------------------------------------------- /src/assets/moeez.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/moeez.jpeg -------------------------------------------------------------------------------- /src/assets/sultan.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/sultan.jpeg -------------------------------------------------------------------------------- /src/assets/Abdullah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/Abdullah.jpg -------------------------------------------------------------------------------- /src/assets/Chat bot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/Chat bot.gif -------------------------------------------------------------------------------- /src/assets/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/download.png -------------------------------------------------------------------------------- /src/assets/Binary code.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/Binary code.gif -------------------------------------------------------------------------------- /src/assets/Cyber attack.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/Cyber attack.gif -------------------------------------------------------------------------------- /src/assets/Mathematics.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/Mathematics.gif -------------------------------------------------------------------------------- /src/assets/Memory storage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdullahAssi/FacialTrack_Web/HEAD/src/assets/Memory storage.gif -------------------------------------------------------------------------------- /src/Components/Schedule.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Schedule() { 4 | return ( 5 |
Schedule
6 | ) 7 | } 8 | 9 | export default Schedule -------------------------------------------------------------------------------- /src/Components/Calculator.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Calculator() { 4 | return ( 5 |
Calculator
6 | ) 7 | } 8 | 9 | export default Calculator -------------------------------------------------------------------------------- /src/Components/About.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function About() { 4 | return ( 5 |
About Project
6 | ) 7 | } 8 | 9 | export default About -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /src/Pages/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Sidebar from '../Components/Sidebar' 3 | import Header from '../Components/Header' 4 | import { Outlet } from 'react-router-dom' 5 | 6 | function Layout() { 7 | return ( 8 |
9 |
10 | 11 |
12 | 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Layout -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ICAT 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/arrowup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/arrowdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/index.js: -------------------------------------------------------------------------------- 1 | 2 | import Nutech from './download.png' 3 | import arrowup from './arrowup.svg' 4 | import arrowdown from './arrowup.svg' 5 | import Assi from './Abdullah.jpg' 6 | import moeez from './moeez.jpeg' 7 | import cyber from './Cyber attack.gif' 8 | import ai from './Chat bot.gif' 9 | import math from './Mathematics.gif' 10 | import data from './Memory storage.gif' 11 | import dsa from './Thesis.gif' 12 | import asse from './Binary code.gif' 13 | import awais from './awais.jpeg' 14 | import sultan from './sultan.jpeg' 15 | import zee from './zee.jpeg' 16 | import sir from './sir.jpeg' 17 | export { 18 | sir, 19 | zee, 20 | sultan, 21 | awais, 22 | cyber, 23 | ai, 24 | math, 25 | data, 26 | dsa, 27 | asse, 28 | moeez, 29 | Assi, 30 | arrowup, 31 | arrowdown, 32 | Nutech, 33 | } -------------------------------------------------------------------------------- /src/Config/Firebase.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "firebase/app"; 3 | import { getAuth, GoogleAuthProvider } from "firebase/auth"; 4 | import { getDatabase } from "firebase/database"; 5 | 6 | 7 | const firebaseConfig = { 8 | apiKey: "AIzaSyBNqIaZ6CdE981-DOUUkZQbuj46Y0Wy0Yc", 9 | authDomain: "icat22-778f4.firebaseapp.com", 10 | databaseURL: "https://icat22-778f4-default-rtdb.asia-southeast1.firebasedatabase.app", 11 | projectId: "icat22-778f4", 12 | storageBucket: "icat22-778f4.appspot.com", 13 | messagingSenderId: "325719455282", 14 | appId: "1:325719455282:web:8dc44e2a385edb394e6e2b", 15 | measurementId: "G-4S8612WLJE" 16 | }; 17 | // Initialize Firebase 18 | const app = initializeApp(firebaseConfig); 19 | export const auth = getAuth(app); 20 | export const googleProvider =new GoogleAuthProvider(); 21 | 22 | // Reference to the database 23 | export const db = getDatabase(app); 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "icat", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^10.3.1", 14 | "gasp": "^0.0.2", 15 | "gsap": "^3.12.2", 16 | "locomotive-scroll": "^4.1.4", 17 | "react": "^18.2.0", 18 | "react-doc-viewer": "^0.1.5", 19 | "react-dom": "^18.2.0", 20 | "react-icons": "^4.11.0", 21 | "react-router-dom": "^6.15.0", 22 | "uid": "^2.0.2" 23 | }, 24 | "devDependencies": { 25 | "@types/react": "^18.2.15", 26 | "@types/react-dom": "^18.2.7", 27 | "@vitejs/plugin-react-swc": "^3.3.2", 28 | "eslint": "^8.45.0", 29 | "eslint-plugin-react": "^7.32.2", 30 | "eslint-plugin-react-hooks": "^4.6.0", 31 | "eslint-plugin-react-refresh": "^0.4.3", 32 | "vite": "^4.4.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/Components/Styles/Sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar-container{ 2 | box-shadow: 0 1px 4px #0003; 3 | width: 220px; 4 | height: 100vh; 5 | position: relative; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | padding: 0; 10 | position: fixed; 11 | top: 3.9rem; 12 | max-width: 220px; 13 | } 14 | .line{ 15 | width: 50%; 16 | background-color: black; 17 | height: 1px; 18 | margin-bottom: 1rem; 19 | } 20 | .sidebar-list-wrapper{ 21 | width: 100%; 22 | } 23 | .sidebar-list{ 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: center; 27 | gap: 5px; 28 | } 29 | .sidebar-list-item{ 30 | display: flex; 31 | align-items: center; 32 | background-color: rgba(224, 222, 222, 0.381); 33 | padding: 1rem; 34 | padding-left: 2rem; 35 | gap: 5px; 36 | cursor: pointer; 37 | font-family: 'Poppins',sans-serif; 38 | font-weight: 300; 39 | } 40 | .sidebar-list-item:hover{ 41 | background-color: rgb(216, 216, 216); 42 | } 43 | .sidebar-icon{ 44 | margin-right: .2rem; 45 | font-size: 18px; 46 | } 47 | .about-icon{ 48 | color: black; 49 | filter: saturate(0); 50 | } -------------------------------------------------------------------------------- /src/Components/FAQs.jsx: -------------------------------------------------------------------------------- 1 | import {useState} from "react"; 2 | import { QA } from "../Constants"; 3 | import './Styles/Faqs.css'; 4 | 5 | function Accordion (){ 6 | 7 | const [open , setopen] = useState(null) 8 | 9 | const toggle = (index) => { 10 | if (open === index ){ 11 | return setopen(null) 12 | } 13 | 14 | setopen(index) 15 | } 16 | return( 17 | <> 18 |

Faqs

19 |
20 | {QA.map(( items , index )=> ( 21 |
22 |
toggle(index)}> 23 |

{items.title}

24 | 25 |
26 |
27 |

{items.ans}

28 |
29 |
30 | ))} 31 |
32 | 33 | ) 34 | } 35 | 36 | export default Accordion -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .main-content{ 6 | margin-left: 220px; 7 | } 8 | 9 | a{ 10 | text-decoration: none; 11 | color: inherit; 12 | } 13 | 14 | .about{ 15 | background-color: #fff; 16 | color: black; 17 | font-family: 'Poppins', sans-serif; 18 | font-weight: 300; 19 | font-size: 1.2rem; 20 | padding: 1rem; 21 | height: 100vh; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | } 26 | .login-container{ 27 | height: 90vh; 28 | display: flex; 29 | flex-direction: column; 30 | align-items: center; 31 | justify-content: center; 32 | } 33 | .button { 34 | max-width: 320px; 35 | display: flex; 36 | padding: 0.5rem 1.4rem; 37 | font-size: 0.875rem; 38 | line-height: 1.25rem; 39 | font-weight: 700; 40 | text-align: center; 41 | text-transform: uppercase; 42 | vertical-align: middle; 43 | align-items: center; 44 | border-radius: 0.5rem; 45 | border: 1px solid rgba(0, 0, 0, 0.25); 46 | gap: 0.75rem; 47 | color: rgb(65, 63, 63); 48 | background-color: #fff; 49 | cursor: pointer; 50 | transition: all .6s ease; 51 | } 52 | 53 | .button svg { 54 | height: 24px; 55 | } 56 | 57 | .button:hover { 58 | transform: scale(1.02); 59 | } -------------------------------------------------------------------------------- /src/Components/Courses.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Styles/courses.css"; 3 | import { courses } from "../Constants"; 4 | import { BsArrowRight } from "react-icons/bs"; 5 | 6 | function Courses() { 7 | return ( 8 |
9 |

Offered Courses

10 |
11 | {courses.map((course, index) => ( 12 |
13 | 14 |
15 |

{course.title}

16 |
{course.type}
17 |
18 |

19 | {course.description} 20 |

21 | 22 | Read more 23 | 24 |
25 |
26 |
27 | ))}; 28 |
29 |
30 | ); 31 | } 32 | 33 | export default Courses; 34 | -------------------------------------------------------------------------------- /src/Components/Styles/Faqs.css: -------------------------------------------------------------------------------- 1 | .Faq_heading{ 2 | text-align: center; 3 | padding: 1rem; 4 | font-family: 'Poppins',sans-serif; 5 | margin-top: 6rem; 6 | } 7 | .accordion{ 8 | max-width: 700px; 9 | margin-left: 220px; 10 | scrollbar-gutter: fixed; 11 | } 12 | 13 | .Accordion-items{ 14 | background-color: transparent; 15 | color: black; 16 | margin-bottom: 10px; 17 | padding: 20px; 18 | border: 1px solid rgba(99, 98, 98, 0.6); 19 | border-radius: 5px; 20 | } 21 | .title{ 22 | width: 100%; 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | font-size: 13px; 27 | font-family: 'Poppins',sans-serif; 28 | cursor: pointer; 29 | } 30 | .sign{ 31 | font-size: 20px; 32 | margin-right: 10px; 33 | } 34 | .content{ 35 | font-weight: 300; 36 | font-size: 15px; 37 | padding-top: 10px; 38 | font-family: 'Roboto',sans-serif; 39 | padding-left: 10px; 40 | max-height: 0; 41 | overflow: hidden; 42 | transition: all 0.5s cubic-bezier(0,1,0,1); 43 | } 44 | .content.show{ 45 | height: auto; 46 | max-height: 9999px; 47 | transition: all 0.5s cubic-bezier(1,0,1,0); 48 | } 49 | 50 | @media (max-width: 564px){ 51 | .qa{ 52 | margin-top: 3rem; 53 | padding: 20px; 54 | } 55 | .title{ 56 | font-size: 16px; 57 | } 58 | .content{ 59 | font-size: 13px; 60 | } 61 | } -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Components/Team.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Styles/Team.css'; 3 | import { team } from '../Constants'; 4 | import { FaUserTie } from 'react-icons/fa'; 5 | import { sir } from '../assets'; 6 | 7 | function Team() { 8 | return ( 9 |
10 |

Our Team

11 | 12 |
13 |
14 |
15 | 16 |
17 |
18 |

Dr. Ali Arshad

19 |

Supervisor and Lead

20 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum, ullam?

21 |
22 |
23 | 24 | {team.map((teamMember, index) => ( 25 |
26 |
27 | 28 |
29 | 30 |
31 | 32 |
33 |
34 |
35 |

{teamMember.Name}

36 |

{teamMember.title}

37 |
38 |
39 |

{teamMember.desc}

40 |
41 |
42 |
43 | ))} 44 |
45 |
46 | ); 47 | } 48 | 49 | export default Team; 50 | -------------------------------------------------------------------------------- /src/Components/Styles/Dashboard.css: -------------------------------------------------------------------------------- 1 | .dashboard_container{ 2 | display: flex; 3 | width: 100%; 4 | height: 100vh; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .dashboard-wrapper{ 11 | margin-top: 2rem; 12 | } 13 | .features{ 14 | width: 100%; 15 | padding-block: 1rem; 16 | display: flex; 17 | gap: 1rem; 18 | height: 210px; 19 | 20 | } 21 | 22 | 23 | .category-A{ 24 | width: 345px; 25 | height: 180px; 26 | } 27 | .category-B{ 28 | width: 305px; 29 | height: 180px; 30 | } 31 | .category-C{ 32 | width: 240px; 33 | height: 180px; 34 | } 35 | .category-D{ 36 | width: 250px; 37 | } 38 | .category-E{ 39 | width: 250px; 40 | } 41 | .category-F{ 42 | width: 390px; 43 | } 44 | .feature{ 45 | padding: 2rem; 46 | display: flex; 47 | flex-direction: column; 48 | justify-content: space-around; 49 | gap: 1rem; 50 | box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.203); 51 | -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.203); 52 | -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.203); 53 | padding: 1rem; 54 | border-radius: 5px; 55 | 56 | } 57 | 58 | .feature-icon{ 59 | font-size: 50px; 60 | } 61 | .icon-A{ 62 | color: rgb(255, 0, 0); 63 | } 64 | .icon-B{ 65 | color: rgb(255, 234, 0); 66 | } 67 | .icon-C{ 68 | color: rgb(0, 132, 255); 69 | } 70 | .icon-D{ 71 | color: rgb(27, 205, 7) 72 | } 73 | .icon-E{ 74 | color: rgb(0, 177, 177); 75 | } 76 | 77 | .icon-F{ 78 | color: rgb(255, 0, 238); 79 | } 80 | 81 | .feature-text>h3{ 82 | font-family: 'Poppins'; 83 | } 84 | .feature-text>p{ 85 | font-family: 'Roboto',sans-serif; 86 | } 87 | -------------------------------------------------------------------------------- /src/Components/Styles/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar_container{ 2 | position: fixed; 3 | backdrop-filter: blur(10px); 4 | width: 100%; 5 | background-color: transparent; 6 | box-shadow: 0 1px 4px #0003;; 7 | height: 60px; 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | padding: 0 2rem; 12 | padding-inline: 5rem; 13 | top: 0; 14 | z-index: 100; 15 | } 16 | .profile-container{ 17 | display: flex; 18 | color: white; 19 | align-items: center; 20 | padding-right: 9rem; 21 | text-align: center; 22 | gap: .3rem; 23 | } 24 | .profile{ 25 | width: 35px; 26 | cursor: pointer; 27 | border-radius: 50%; 28 | outline: 1px solid black; 29 | position: relative; 30 | } 31 | .profile_dropdown{ 32 | position: absolute; 33 | box-shadow: 0 1px 4px #0003;; 34 | color: #000; 35 | background-color: white; 36 | backdrop-filter: blur(10px); 37 | top: 50px; 38 | right: 220px; 39 | padding: 1rem; 40 | border-radius: 5px; 41 | width: 220px; 42 | height: 220px; 43 | display: flex; 44 | flex-direction: column; 45 | gap: 1rem; 46 | opacity: 0; 47 | clip-path: circle(0px at top right); 48 | transition: clip-path ease-in-out 700ms; 49 | z-index: 100; 50 | } 51 | .profile_dropdown.open{ 52 | opacity: 1; 53 | clip-path: circle(250% at top right); 54 | } 55 | .profile_dropdown.not-open{ 56 | opacity: 1; 57 | clip-path: circle(0% at top right); 58 | } 59 | .user-name{ 60 | font-family: ivymode, sans-serif; 61 | } 62 | .logout-button{ 63 | position: absolute; 64 | bottom: 10px; 65 | left: 80px; 66 | cursor: pointer; 67 | padding: .5rem 1rem; 68 | border-radius: 3px; 69 | background-color: rgb(255, 97, 97); 70 | border: none; 71 | } -------------------------------------------------------------------------------- /src/Components/Styles/attandance.css: -------------------------------------------------------------------------------- 1 | .attandance_container{ 2 | margin-top: 2rem; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | font-family: 'Poppins',sans-serif; 7 | justify-content: center; 8 | gap: 1rem; 9 | width: 100%; 10 | height: 100vh; 11 | } 12 | .attandance_wrapper{ 13 | width: 100%; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | gap: 1rem; 18 | } 19 | .attendance_card{ 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | padding: 1rem; 24 | box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.203); 25 | -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.203); 26 | -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.203); 27 | border-radius: 10px; 28 | position: relative; 29 | } 30 | .attendance_card_content{ 31 | width: 300px; 32 | padding-left: 10px; 33 | } 34 | 35 | .student_img{ 36 | width: 50px; 37 | height: 50px; 38 | border-radius: 50%; 39 | } 40 | .status{ 41 | position: absolute; 42 | right: 0px; 43 | height: 86%; 44 | width: 40px; 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | border-radius: 0px 10px 10px 0px; 49 | padding: 5px; 50 | } 51 | 52 | .present-status { 53 | background-color: rgb(3, 115, 133); 54 | } 55 | 56 | .absent-status { 57 | background-color: rgb(223, 5, 5); 58 | } 59 | table, th, td { 60 | border: 1px solid; 61 | } 62 | td{ 63 | box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.203); 64 | -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.203); 65 | -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.203); 66 | background-color: transparent; 67 | padding: 1rem 2rem; 68 | margin-left: 1rem; 69 | } -------------------------------------------------------------------------------- /src/Components/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import './Styles/Dashboard.css'; 3 | import { Feature2, features } from '../Constants'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | 7 | function Dashboard() { 8 | 9 | return ( 10 |
11 |
12 |
13 | {features.map((feature, index) => ( 14 | 15 |
16 |
17 | 18 |
19 |
20 |

{feature.title}

21 |

{feature.description}

22 |
23 |
24 | 25 | ))} 26 |
27 |
28 | {Feature2.map((feature, index) => ( 29 |
30 |
31 | 32 |
33 |
34 |

{feature.title}

35 |

{feature.description}

36 |
37 |
38 | ))} 39 | 40 |
41 | 42 |
43 |
44 | ); 45 | } 46 | 47 | export default Dashboard; 48 | -------------------------------------------------------------------------------- /src/Components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { auth } from '../Config/Firebase'; 3 | import { Nutech } from '../assets'; 4 | import './Styles/Navbar.css' 5 | 6 | function Header() { 7 | const [user, setUser] = useState(null); 8 | const [show, setShow] = useState(false); 9 | 10 | const toggle = () => { 11 | setShow(!show); 12 | }; 13 | 14 | const handleLogout = async () => { 15 | try { 16 | await auth.signOut(); 17 | } catch (error) { 18 | console.error('Error logging out:', error); 19 | } 20 | }; 21 | 22 | useEffect(() => { 23 | const unsubscribe = auth.onAuthStateChanged((user) => { 24 | if (user) { 25 | // User is signed in 26 | setUser(user); 27 | } else { 28 | // User is signed out 29 | setUser(null); 30 | } 31 | }); 32 | 33 | return () => unsubscribe(); 34 | }, []); 35 | 36 | 37 | return ( 38 |
39 | 40 | {user && ( 41 |
42 | {user.photoURL && Profile} 43 |
44 |

{user.displayName}

45 |

{user.email}

46 |

Batch:AI 2022

47 |

Department: Computer Science

48 | 49 | 50 |
51 |
52 | )} 53 |
54 | ) 55 | } 56 | 57 | export default Header -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { BrowserRouter, Route, Routes } from 'react-router-dom'; 3 | import './App.css'; 4 | import Login from './Components/Login'; 5 | import { auth } from './Config/Firebase'; 6 | import Layout from './Pages/Layout'; 7 | import Dashboard from './Components/Dashboard'; 8 | import About from './Components/About'; 9 | import Accordion from './Components/FAQs'; 10 | import Team from './Components/Team'; 11 | import Courses from './Components/Courses'; 12 | import Attandance from './Components/attandance'; 13 | import Schedule from './Components/Schedule'; 14 | import Calculator from './Components/Calculator'; 15 | 16 | function App() { 17 | const [user, setUser] = useState(null); 18 | 19 | useEffect(() => { 20 | const unsubscribe = auth.onAuthStateChanged((user) => { 21 | if (user) { 22 | setUser(user); 23 | } else { 24 | setUser(null); 25 | } 26 | }); 27 | 28 | return () => unsubscribe(); 29 | }, []); 30 | 31 | return ( 32 |
33 | 34 | 35 | {/* {user ? ( */} 36 | } 39 | > 40 | } /> 41 | } /> 42 | } /> 43 | } /> 44 | } /> 45 | } /> 46 | } /> 47 | } /> 48 | 49 | {/* ) : ( 50 | } /> 51 | )} */} 52 | 53 | 54 |
55 | ); 56 | } 57 | 58 | export default App; 59 | -------------------------------------------------------------------------------- /src/Components/Login.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { auth, googleProvider } from '../Config/Firebase'; 3 | import { signInWithPopup } from 'firebase/auth'; 4 | 5 | function Login() { 6 | 7 | const signInwGoogle = async () => { 8 | try { 9 | await signInWithPopup(auth, googleProvider); 10 | setSuccessMessage(""); 11 | setErrorMessage(""); 12 | } catch (err) { 13 | setErrorMessage(err.message); 14 | console.error(err); 15 | } 16 | }; 17 | return ( 18 |
19 |

20 | Login Your Account 21 |

22 | 31 |
32 | ) 33 | } 34 | 35 | export default Login -------------------------------------------------------------------------------- /src/Components/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { FaHome } from "react-icons/fa" 3 | import { MdAnnouncement } from "react-icons/md" 4 | import { FaGraduationCap, FaUserGraduate } from "react-icons/fa6" 5 | import { RiQuestionnaireFill , RiTeamFill} from "react-icons/ri" 6 | import { GrMail } from "react-icons/gr" 7 | import './Styles/Sidebar.css' 8 | import { Link } from 'react-router-dom'; 9 | function Sidebar() { 10 | 11 | return ( 12 |
13 |
14 |
15 |
16 |
    17 | 18 | 19 |

    Home

    20 | 21 | 22 | 23 |

    Courses

    24 | 25 | 26 | 27 |

    Our Team

    28 | 29 | 30 | 31 |

    FAQs

    32 | 33 |
  • 34 | 35 |

    Contact Us

    36 |
    • 37 |
  • 38 | 39 |

    Alumni Network

    40 |
    • 41 | 42 | 43 |

    About Us

    44 | 45 |
46 | 47 | 48 |
49 |
50 |
51 | ) 52 | } 53 | 54 | export default Sidebar -------------------------------------------------------------------------------- /src/Components/attandance.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import './Styles/attandance.css' 3 | import { attendance_data } from '../Constants'; 4 | import { db } from '../Config/Firebase'; 5 | import 'firebase/database'; 6 | import { onValue, ref } from 'firebase/database'; 7 | 8 | function Attendance() { 9 | const [data, setData] = useState([]); 10 | const [dataArray, setDataArray] = useState([]); 11 | 12 | const [presentCount, setPresentCount] = useState(0); 13 | const [absentCount, setAbsentCount] = useState(0); 14 | 15 | 16 | useEffect(() => { 17 | const fetchData = () => { 18 | const studentsRef = ref(db, 'students'); 19 | onValue(studentsRef, (snapshot) => { 20 | if (snapshot.exists()) { 21 | 22 | const dataObject = snapshot.val(); 23 | const dataArray = Object.values(dataObject || []); 24 | setDataArray(dataArray); 25 | 26 | // Calculate the present and absent counts 27 | const present = dataArray.filter(student => student.Attendance === "P").length; 28 | const absent = dataArray.filter(student => student.Attendance === "A").length; 29 | 30 | console.log(present, absent); 31 | 32 | // Update counts using the functional form of setState 33 | setPresentCount(prevPresentCount => present); 34 | setAbsentCount(prevAbsentCount => absent); 35 | } 36 | }); 37 | }; 38 | 39 | fetchData(); 40 | }, []); 41 | 42 | 43 | return ( 44 |
45 |
46 |

Attendance

47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | {dataArray.map((student, index) => ( 58 | 59 | 60 | 61 | 62 | 63 | 64 | ))} 65 | 66 |
Roll No:NameSubjectAttendance
{student.std_id}{student.Name}{student.Major}{student.Attendance ? "P" : "A"}
67 |

Total Present: {presentCount}

68 |

Total Absent: 6

69 |
70 |
71 | ); 72 | } 73 | 74 | export default Attendance; 75 | 76 | {/*
77 | {attendance_data.map((studentData, index) => ( 78 |
79 | 80 |
81 |

{studentData.name}

82 |

{studentData.roll}

83 |
84 |
85 |

{studentData.status}

86 |
87 |
88 | ))} 89 |
*/} -------------------------------------------------------------------------------- /src/Components/Styles/courses.css: -------------------------------------------------------------------------------- 1 | .page-title{ 2 | font-family: 'Poppins', sans-serif; 3 | text-align: center; 4 | margin-top: 5rem; 5 | margin-bottom: -4rem; 6 | } 7 | .content-wrapper { 8 | font-family: 'Roboto', sans-serif; 9 | margin: 0 auto; 10 | max-width: 1200px; 11 | display: flex; 12 | flex-flow: row wrap; 13 | justify-content: center; 14 | padding: 5rem 2.5rem; 15 | } 16 | 17 | .course-card { 18 | cursor: pointer; 19 | border: 0px solid aqua; 20 | margin: 0.5rem; 21 | position: relative; 22 | height: 12rem; 23 | overflow: hidden; 24 | border-radius: 0.5rem; 25 | flex: 1; 26 | min-width: 290px; 27 | box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); 28 | -webkit-backface-visibility: hidden; 29 | -moz-backface-visibility: hidden; 30 | -webkit-transform: translate3d(0, 0, 0); 31 | -moz-transform: translate3d(0, 0, 0); 32 | } 33 | 34 | @media (min-width: 900px) { 35 | .course-card { 36 | height: 20rem; 37 | } 38 | } 39 | 40 | .course-card::before { 41 | content: ""; 42 | position: absolute; 43 | top: 0; 44 | left: 0; 45 | width: 100%; 46 | height: 100%; 47 | background: rgba(0, 0, 0, 0) 48 | linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%); 49 | z-index: 0; 50 | } 51 | 52 | .course-card__card-link { 53 | position: absolute; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | height: 100%; 58 | z-index: 1; 59 | /* background: rgba(255,0,0,.5); */ 60 | } 61 | 62 | .course-card__image { 63 | width: 100%; 64 | height: 100%; 65 | padding: 1rem; 66 | display: block; 67 | object-fit: cover; 68 | transition: transform 3s ease; 69 | -webkit-backface-visibility: hidden; 70 | backface-visibility: hidden; 71 | position: relative; 72 | z-index: -1; 73 | } 74 | 75 | .course-card__text-wrapper { 76 | position: absolute; 77 | bottom: 0rem; 78 | padding: 1rem; 79 | color: white; 80 | /* background-color: rgba(0, 0, 0, 0.4); */ 81 | transition: background-color 1.5s ease; 82 | } 83 | 84 | .course-card__title { 85 | transition: color 1s ease; 86 | margin-bottom: 0.5rem; 87 | } 88 | 89 | .course-card__post-date { 90 | font-size: 0.7rem; 91 | margin-bottom: 0.5rem; 92 | color: #ccc; 93 | } 94 | 95 | .course-card__details-wrapper { 96 | max-height: 0; 97 | opacity: 0; 98 | transition: max-height 1.5s ease, opacity 1s ease; 99 | } 100 | 101 | @media (min-width: 900px) { 102 | .course-card:hover .course-card__details-wrapper { 103 | max-height: 20rem; 104 | opacity: 1; 105 | } 106 | .course-card:hover .course-card__text-wrapper { 107 | background-color: rgba(0, 0, 0, 0.6); 108 | } 109 | .course-card:hover .course-card__title { 110 | color: rgb(5, 255, 242); 111 | } 112 | .course-card:hover .course-card__image { 113 | transform: scale(1.2); 114 | z-index: -1; 115 | } 116 | } 117 | 118 | .course-card__excerpt { 119 | font-weight: 300; 120 | } 121 | 122 | .course-card__read-more { 123 | background: black; 124 | color: #bbb; 125 | display: block; 126 | padding: 0.4rem 0.6rem; 127 | border-radius: 0.3rem; 128 | margin-top: 1rem; 129 | border: 1px solid #444; 130 | font-size: 0.8rem; 131 | -webkit-backface-visibility: hidden; 132 | backface-visibility: hidden; 133 | text-decoration: none; 134 | width: 7rem; 135 | margin-left: auto; 136 | position: relative; 137 | z-index: 5; 138 | } 139 | 140 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Constants/index.js: -------------------------------------------------------------------------------- 1 | import { FaUserCheck , FaUserTie} from "react-icons/fa"; 2 | import { AiOutlineSchedule, AiOutlineCalculator, AiOutlineFileText } from "react-icons/ai"; 3 | import { GrAnnounce } from "react-icons/gr"; 4 | import { IoChatboxEllipsesOutline } from "react-icons/io5"; 5 | import { Assi, ai, arrowdown,arrowup, asse, awais, cyber, data, dsa, math, moeez, sultan, zee } from "../assets"; 6 | 7 | 8 | export const features = [ 9 | { 10 | id: 1, 11 | class: 'A', 12 | icon: FaUserCheck , 13 | to: "/attendance", 14 | title: "Attandance", 15 | description: "Track your class attendance.", 16 | }, 17 | { 18 | id: 2, 19 | class: 'B', 20 | icon: AiOutlineSchedule, 21 | to: "/schedule", 22 | title: "Schedule", 23 | description: "Access your class schedule and weekly timetable.", 24 | }, 25 | { 26 | id: 3, 27 | class: 'C', 28 | icon: AiOutlineCalculator, 29 | to: "/calculator", 30 | title: "Calculator", 31 | description: "Perform attendance and results calculations.", 32 | } 33 | ]; 34 | 35 | export const Feature2 =[ 36 | { 37 | id: 4, 38 | class: 'D', 39 | icon: IoChatboxEllipsesOutline, 40 | title: "Apply For Leave", 41 | description: "Connect with faculty and department for updates and communication", 42 | }, 43 | { 44 | id: 6, 45 | class: 'E', 46 | icon: AiOutlineFileText, 47 | title: "Results", 48 | description: "Monitor your academic progress and view results.", 49 | }, 50 | { 51 | id: 5, 52 | class: 'F', 53 | icon: GrAnnounce, 54 | title: "Announcment", 55 | description: "Stay informed about class announcements and upcoming events.", 56 | }, 57 | ] 58 | 59 | export const QA = [ 60 | { 61 | id:"q!", 62 | title: "What is MetaLink?", 63 | ans : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", 64 | arrowDown : arrowdown, 65 | arrowUp : arrowup 66 | }, 67 | { 68 | id:"q2", 69 | title: "Do I need a designer to use Metalink?", 70 | ans : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", 71 | arrowDown : arrowdown, 72 | arrowUp : arrowup 73 | }, 74 | { 75 | id:"q3", 76 | title: "What do i need to start selling?", 77 | ans : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", 78 | arrowDown : arrowdown, 79 | arrowUp : arrowup 80 | }, 81 | { 82 | id:"q4", 83 | title: "What happens when i recieve order?", 84 | ans : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.", 85 | arrowDown : arrowdown, 86 | arrowUp : arrowup 87 | } 88 | ] 89 | 90 | export const courses = [ 91 | { 92 | id: 1, 93 | title: "Data Structures And Algorithms", 94 | type : "Programming", 95 | description: "Lorem ipsum dolor sit amet ", 96 | image: dsa 97 | }, 98 | { 99 | id: 2, 100 | title: "Assembley Language", 101 | type : "Programming", 102 | description: "Lorem ipsum dolor sit amet consectetur.", 103 | image: asse 104 | }, 105 | { 106 | id: 3, 107 | title: "Generative AI", 108 | type : "Programming", 109 | description: "Lorem ipsum dolor sit amet amet consectetur .", 110 | image: ai 111 | }, 112 | { 113 | id: 4, 114 | title: "Infromation Security", 115 | type : "Programming", 116 | description: "Lorem ipsum dolor sit amet consectetur .", 117 | image: cyber 118 | }, 119 | { 120 | id: 5, 121 | title: "Linear Algebra", 122 | type : "Mathamatics", 123 | description: "Lorem ipsum dolor sit amet consectetur ", 124 | image: math 125 | }, 126 | { 127 | id: 6, 128 | title: "Database Systems", 129 | type : "Programming", 130 | description: "Lorem ipsum dolor sit amet consectetur.", 131 | image: data 132 | }, 133 | ] 134 | 135 | export const team = [ 136 | { 137 | id: 1, 138 | Name: "Muhammad Abdullah", 139 | title: "Web Developer", 140 | desc: "Lorem ipsum dolor sit amet consectetur.", 141 | img: Assi 142 | }, 143 | { 144 | id: 2, 145 | Name: "Sultan Mehmood", 146 | title: "Python Developer", 147 | desc: "Lorem ipsum dolor sit amet consectetur.", 148 | img: sultan 149 | }, 150 | { 151 | id: 3, 152 | Name: "Moeez Ahmad", 153 | title: "Contributor", 154 | desc: "Lorem ipsum dolor sit amet consectetur.", 155 | img: moeez 156 | }, 157 | { 158 | id: 3, 159 | Name: "ZeeShan Abid", 160 | title: "Contributor", 161 | desc: "Lorem ipsum dolor sit amet consectetur.", 162 | img: zee 163 | }, 164 | { 165 | id: 5, 166 | Name: "Awais liaquat", 167 | title: "Contributor", 168 | desc: "Lorem ipsum dolor sit amet consectetur.", 169 | img: awais 170 | }, 171 | { 172 | id: 6, 173 | Name: "Noor Ali", 174 | title: "Contributor", 175 | desc: "Lorem ipsum dolor sit amet consectetur.", 176 | img: FaUserTie 177 | } 178 | ] 179 | 180 | export const attendance_data = [ 181 | { 182 | id: 1, 183 | name: "Muhammad Abdullah", 184 | roll: "F22607010", 185 | status: "A", 186 | img: Assi, 187 | }, 188 | { 189 | id: 2, 190 | name: "Moeez Ahmed", 191 | roll: "F22607020", 192 | status: "P", 193 | img: moeez, 194 | }, 195 | ] -------------------------------------------------------------------------------- /src/Components/Styles/Team.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .team_container{ 4 | margin-top: 4rem; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | font-family: 'Poppins', sans-serif; 9 | } 10 | .lead_card{ 11 | display: flex; 12 | gap: 3rem; 13 | padding: 2rem; 14 | background-color: transparent; 15 | box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025); 16 | margin-bottom: 2rem; 17 | } 18 | .profile_main{ 19 | border: 1px solid blue; 20 | border-radius: 50%; 21 | width: 90px; 22 | height: 90px; 23 | object-fit: cover; 24 | } 25 | .team { 26 | display: flex; 27 | flex-direction: column; 28 | margin: 40px auto; 29 | position: relative; 30 | } 31 | .team__member { 32 | /* margin-bottom: 20px; */ 33 | margin-top: 2rem; 34 | position: relative; 35 | display: flex; 36 | /* margin: 20px 0; */ 37 | border-radius: 6px; 38 | align-self: center; 39 | width: 50vw; 40 | } 41 | .team__member:nth-child(2n + 1) { 42 | flex-direction: row-reverse; 43 | } 44 | .team__member:nth-child(2n + 1) .team__member__date { 45 | border-radius: 0 6px 6px 0; 46 | } 47 | .team__member:nth-child(2n + 1) .team__member__content { 48 | border-radius: 6px 0 0 6px; 49 | } 50 | .team__member:nth-child(2n + 1) .team__member__icon:before { 51 | content: ""; 52 | width: 2px; 53 | height: 100%; 54 | background: #f6a4ec; 55 | position: absolute; 56 | top: 0%; 57 | left: 50%; 58 | right: auto; 59 | z-index: -1; 60 | transform: translateX(-50%); 61 | animation: fillTop 2s forwards 4s ease-in-out; 62 | } 63 | .team__member:nth-child(2n + 1) .team__member__icon:after { 64 | content: ""; 65 | width: 100%; 66 | height: 2px; 67 | background: #f6a4ec; 68 | position: absolute; 69 | right: 0; 70 | z-index: -1; 71 | top: 50%; 72 | left: auto; 73 | transform: translateY(-50%); 74 | animation: fillLeft 2s forwards 4s ease-in-out; 75 | } 76 | .team__member__title { 77 | font-size: 1.2rem; 78 | /* text-transform: uppercase; */ 79 | color: #9251ac; 80 | } 81 | .team__member_desc{ 82 | font-size: 1rem; 83 | color: #555ac0; 84 | } 85 | .team__member__content { 86 | padding: 20px; 87 | box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025); 88 | background: #fff; 89 | width: calc(40vw - 84px); 90 | border-radius: 0 6px 6px 0; 91 | } 92 | .team__member__icon { 93 | display: flex; 94 | align-items: center; 95 | justify-content: center; 96 | color: #9251ac; 97 | padding: 20px; 98 | align-self: center; 99 | margin: 0 20px; 100 | background: #f6a4ec; 101 | border-radius: 100%; 102 | width: 20px; 103 | box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025); 104 | padding: 20px; 105 | height: 20px; 106 | position: relative; 107 | } 108 | .team__member__icon i { 109 | font-size: 32px; 110 | } 111 | .team__member__icon:before { 112 | content: ""; 113 | width: 2px; 114 | height: 100%; 115 | background: #f6a4ec; 116 | position: absolute; 117 | top: 0%; 118 | z-index: -1; 119 | left: 50%; 120 | transform: translateX(-50%); 121 | animation: fillTop 2s forwards 4s ease-in-out; 122 | } 123 | .team__member__icon:after { 124 | content: ""; 125 | width: 100%; 126 | height: 2px; 127 | background: #f6a4ec; 128 | position: absolute; 129 | left: 0%; 130 | z-index: -1; 131 | top: 50%; 132 | transform: translateY(-50%); 133 | animation: fillLeftOdd 2s forwards 4s ease-in-out; 134 | } 135 | .team__member__description { 136 | flex-basis: 100%; 137 | font-size: small; 138 | font-weight: 400; 139 | } 140 | .team__member--type2:after { 141 | background: #555ac0; 142 | } 143 | .team__member--type2 .team__member__date { 144 | color: #87bbfe; 145 | background: #555ac0; 146 | } 147 | .team__member--type2:nth-child(2n + 1) .team__member__icon:before, .team__member--type2:nth-child(2n + 1) .team__member__icon:after { 148 | background: #87bbfe; 149 | } 150 | .team__member--type2 .team__member__icon { 151 | background: #87bbfe; 152 | color: #555ac0; 153 | } 154 | .team__member--type2 .team__member__icon:before, .team__member--type2 .team__member__icon:after { 155 | background: #87bbfe; 156 | } 157 | .team__member--type2 .team__member__title { 158 | color: #555ac0; 159 | } 160 | .team__member--type3:after { 161 | background: #24b47e; 162 | } 163 | .team__member--type3 .team__member__date { 164 | color: #aff1b6; 165 | background-color: #24b47e; 166 | } 167 | .team__member--type3:nth-child(2n + 1) .team__member__icon:before, .team__member--type3:nth-child(2n + 1) .team__member__icon:after { 168 | background: #aff1b6; 169 | } 170 | .team__member--type3 .team__member__icon { 171 | background: #aff1b6; 172 | color: #24b47e; 173 | } 174 | .team__member--type3 .team__member__icon:before, .team__member--type3 .team__member__icon:after { 175 | background: #aff1b6; 176 | } 177 | .team__member--type3 .team__member__title { 178 | color: #24b47e; 179 | } 180 | .team__member:last-child .team__member__icon:before { 181 | content: none; 182 | } 183 | @media (max-width: 786px) { 184 | .team__member { 185 | flex-direction: column; 186 | align-self: center; 187 | } 188 | .team__member__content { 189 | width: 100%; 190 | } 191 | .team__member__icon { 192 | border-radius: 6px 6px 0 0; 193 | width: 100%; 194 | margin: 0; 195 | box-shadow: none; 196 | } 197 | .team__member__icon:before, .team__member__icon:after { 198 | display: none; 199 | } 200 | .team__member__date { 201 | border-radius: 0; 202 | padding: 20px; 203 | } 204 | .team__member:nth-child(2n + 1) { 205 | flex-direction: column; 206 | align-self: center; 207 | } 208 | .team__member:nth-child(2n + 1) .team__member__date { 209 | border-radius: 0; 210 | padding: 20px; 211 | } 212 | .team__member:nth-child(2n + 1) .team__member__icon { 213 | border-radius: 6px 6px 0 0; 214 | margin: 0; 215 | } 216 | } 217 | @keyframes fillLeft { 218 | 100% { 219 | right: 100%; 220 | } 221 | } 222 | @keyframes fillTop { 223 | 100% { 224 | top: 100%; 225 | } 226 | } 227 | @keyframes fillLeftOdd { 228 | 100% { 229 | left: 100%; 230 | } 231 | } 232 | --------------------------------------------------------------------------------