├── index.js ├── .gitignore ├── Assets ├── cheq.png ├── photo_1.PNG ├── photo_2.PNG ├── keynote_1.jpeg ├── keynote_2.jpeg ├── keynote_3.jpeg ├── keynote_4.jpeg ├── keynote_5.jpeg ├── keynote_6.jpeg ├── keynote_7.jpg ├── keynote_8.jpeg ├── keynote_9.jpeg ├── title-logo.jpg ├── creative-logo.png ├── desktop-backg.png ├── keynote_10.jpeg ├── mobile-backg.png ├── mobile-hd-bg.jpg ├── program-bg-1.jfif ├── support_Naver.png ├── support_airbnb.png ├── support_google.png ├── support_mozilla.png ├── Aishatu-Gobir-Pix.webp ├── University-logo.jpeg ├── support_daumkakao.png ├── creative-logo-black.png ├── creative-logo-black-korea.png ├── icon-workshop.svg ├── icon-exhibition.svg ├── icon-lecture.svg ├── cross.svg ├── icon-forum.svg └── icon-ignite.svg ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── package.json ├── LICENSE ├── speaker.js ├── .github └── workflows │ └── linters.yml ├── myscript.js ├── README.md ├── index.html ├── about.html └── mystyles.css /index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /Assets/cheq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/cheq.png -------------------------------------------------------------------------------- /Assets/photo_1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/photo_1.PNG -------------------------------------------------------------------------------- /Assets/photo_2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/photo_2.PNG -------------------------------------------------------------------------------- /Assets/keynote_1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_1.jpeg -------------------------------------------------------------------------------- /Assets/keynote_2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_2.jpeg -------------------------------------------------------------------------------- /Assets/keynote_3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_3.jpeg -------------------------------------------------------------------------------- /Assets/keynote_4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_4.jpeg -------------------------------------------------------------------------------- /Assets/keynote_5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_5.jpeg -------------------------------------------------------------------------------- /Assets/keynote_6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_6.jpeg -------------------------------------------------------------------------------- /Assets/keynote_7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_7.jpg -------------------------------------------------------------------------------- /Assets/keynote_8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_8.jpeg -------------------------------------------------------------------------------- /Assets/keynote_9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_9.jpeg -------------------------------------------------------------------------------- /Assets/title-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/title-logo.jpg -------------------------------------------------------------------------------- /Assets/creative-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/creative-logo.png -------------------------------------------------------------------------------- /Assets/desktop-backg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/desktop-backg.png -------------------------------------------------------------------------------- /Assets/keynote_10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/keynote_10.jpeg -------------------------------------------------------------------------------- /Assets/mobile-backg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/mobile-backg.png -------------------------------------------------------------------------------- /Assets/mobile-hd-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/mobile-hd-bg.jpg -------------------------------------------------------------------------------- /Assets/program-bg-1.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/program-bg-1.jfif -------------------------------------------------------------------------------- /Assets/support_Naver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/support_Naver.png -------------------------------------------------------------------------------- /Assets/support_airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/support_airbnb.png -------------------------------------------------------------------------------- /Assets/support_google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/support_google.png -------------------------------------------------------------------------------- /Assets/support_mozilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/support_mozilla.png -------------------------------------------------------------------------------- /Assets/Aishatu-Gobir-Pix.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/Aishatu-Gobir-Pix.webp -------------------------------------------------------------------------------- /Assets/University-logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/University-logo.jpeg -------------------------------------------------------------------------------- /Assets/support_daumkakao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/support_daumkakao.png -------------------------------------------------------------------------------- /Assets/creative-logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/creative-logo-black.png -------------------------------------------------------------------------------- /Assets/creative-logo-black-korea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/HEAD/Assets/creative-logo-black-korea.png -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aishatu-gobir-inaugural-lecture", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture/issues" 18 | }, 19 | "homepage": "https://github.com/Bestbynature/Aishatu-Gobir-Inaugural-Lecture#readme", 20 | "devDependencies": { 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^7.32.0", 23 | "eslint-config-airbnb-base": "^14.2.1", 24 | "eslint-plugin-import": "^2.27.5", 25 | "hint": "^7.1.3", 26 | "stylelint": "^13.13.1", 27 | "stylelint-config-standard": "^21.0.0", 28 | "stylelint-csstree-validator": "^1.9.0", 29 | "stylelint-scss": "^3.21.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [2023] [Ismaila Damilare Elijah] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Assets/icon-workshop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /Assets/icon-exhibition.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /speaker.js: -------------------------------------------------------------------------------- 1 | export default function speaker() { 2 | const speakers = document.querySelector('.speakers'); 3 | 4 | speakers.innerHTML += ` 5 |

Featured Speakers

6 |
7 | 8 |
9 |
10 | 11 | keynote_1 12 | 13 |
14 |
15 |

Yochai Benkler

16 |

Berkman Professor of Enterpreneurial Legal Studies at Harvard Law School

17 |
18 |
Benkler studies commons-based peer production and published his seminal book: The Wealth of Networks in 2006.
19 |
20 |
21 | 22 |
23 |
24 | 25 | keynote_2 26 | 27 |
28 |
29 |

SohYeong Noh

30 |

Director of Art center, Nabi, and a board member of CC Korea

31 |
32 |
Asthe main venue for new media art production in Korea, Nabi promotes cross-disciplinary collaboration and understanding among science technology, humanities, and the arts.
33 |
34 |
35 | 36 | 37 | `; 38 | } -------------------------------------------------------------------------------- /Assets/icon-lecture.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 15 | 21 | 22 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-22.04 66 | steps: 67 | - uses: actions/checkout@v2 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /Assets/cross.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 71 | -------------------------------------------------------------------------------- /Assets/icon-forum.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 16 | 25 | 28 | 36 | 37 | -------------------------------------------------------------------------------- /Assets/icon-ignite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 21 | 22 | 23 | 25 | 26 | 27 | 29 | 30 | 31 | 33 | 34 | 35 | 37 | 38 | 39 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /myscript.js: -------------------------------------------------------------------------------- 1 | import speaker from './speaker.js'; 2 | 3 | speaker(); 4 | 5 | const hamburger = document.querySelector('.fa-bars, .fa-bars::before'); 6 | const modal = document.querySelector('.modal-menu'); 7 | const close = document.querySelector('.fa-xmark'); 8 | 9 | hamburger.addEventListener('click', () => { 10 | hamburger.style.display = 'none'; 11 | modal.style.display = 'flex'; 12 | modal.scrollIntoView(); 13 | }); 14 | 15 | close.addEventListener('click', () => { 16 | modal.style.display = 'none'; 17 | hamburger.style.display = 'block'; 18 | }); 19 | 20 | const speakerarr = [ 21 | { 22 | id: 1, 23 | image: './Assets/keynote_1.jpeg', 24 | name: 'Yochai Benkler', 25 | designation: 'Berkman Professor of Enterpreneurial Legal Studies at Harvard Law School', 26 | milestone: 'Benkler studies commons-based peer production and published his seminal book: The Wealth of Networks in 2006.', 27 | }, 28 | 29 | { 30 | id: 2, 31 | image: './Assets/keynote_2.jpeg', 32 | name: 'SohYeong Noh', 33 | designation: 'Director of Art center, Nabi, and a board member of CC Korea', 34 | milestone: 'Asthe main venue for new media art production in Korea, Nabi promotes cross-disciplinary collaboration and understanding among science technology, humanities, and the arts.', 35 | }, 36 | 37 | { 38 | id: 3, 39 | image: './Assets/keynote_3.jpeg', 40 | name: 'Lila Tretikov', 41 | designation: 'Executive Director of the wikimedia foundation', 42 | milestone: 'Lila Tretikov is the Executive Director of the wikimedia foundation, the non-profit organisation that operates Wikipedia. Wikipedia is freely available in 290 languages and used by nearly half a billion people around the world every month.', 43 | }, 44 | 45 | { 46 | id: 4, 47 | image: './Assets/keynote_4.jpeg', 48 | name: 'Kilnam Chon', 49 | designation: '', 50 | milestone: 'Kilnam Chon helped bring the internet to Asia and is an outspoken advocate for the open web and digital commons. in 2012, he was inducted into the inaugural class of the internet society\'s (iSOC) Internet Hall of fame.', 51 | }, 52 | 53 | { 54 | id: 5, 55 | image: './Assets/keynote_5.jpeg', 56 | name: 'Julia Leda', 57 | designation: 'President of young pirates of Europe', 58 | milestone: 'European ingetration, political democracy and participation of youths through online as her major concern. Leda\'s report outlining potential changes to EU copyright law was approved by the parliament in July. ', 59 | }, 60 | 61 | { 62 | id: 6, 63 | image: './Assets/keynote_6.jpeg', 64 | name: 'Ryan Merkley', 65 | designation: 'CEO of creative commons, Ex-COO of the Mozilla foundation', 66 | milestone: 'Ryan had been leading open-source projects at the mozilla foundation such as the open-source movement.', 67 | }, 68 | ]; 69 | 70 | const speakers = document.querySelector('.speakers'); 71 | 72 | const leftRight = document.createElement('div'); 73 | leftRight.className = 'left-right'; 74 | 75 | const leftDiv = document.createElement('div'); 76 | leftDiv.className = 'left-div'; 77 | 78 | const rightDiv = document.createElement('div'); 79 | rightDiv.className = 'right-div'; 80 | 81 | function generator(num) { 82 | const speakerCard = document.createElement('div'); 83 | speakerCard.className = 'speaker-card'; 84 | 85 | const speakerImg = document.createElement('div'); 86 | speakerImg.className = 'speaker-img'; 87 | speakerCard.appendChild(speakerImg); 88 | 89 | const speakerPix = document.createElement('img'); 90 | speakerPix.src = speakerarr[num].image; 91 | speakerPix.alt = speakerarr[num].name; 92 | speakerPix.title = speakerarr[num].name; 93 | speakerImg.appendChild(speakerPix); 94 | 95 | const speakerInfo = document.createElement('div'); 96 | speakerInfo.className = 'speaker-info'; 97 | speakerCard.appendChild(speakerInfo); 98 | 99 | const speakerName = document.createElement('h3'); 100 | speakerName.textContent = speakerarr[num].name; 101 | 102 | const speakerDesig = document.createElement('h4'); 103 | speakerDesig.textContent = speakerarr[num].designation; 104 | 105 | const rule = document.createElement('hr'); 106 | 107 | const speakermileStone = document.createElement('h5'); 108 | speakermileStone.textContent = speakerarr[num].milestone; 109 | 110 | speakerInfo.append(speakerName, speakerDesig, rule, speakermileStone); 111 | 112 | speakers.appendChild(leftRight); 113 | 114 | if (num <= 2) { 115 | leftDiv.appendChild(speakerCard); 116 | } else { 117 | rightDiv.appendChild(speakerCard); 118 | } 119 | } 120 | 121 | const moreButton = document.querySelector('#more'); 122 | 123 | moreButton.addEventListener('click', () => { 124 | speakers.innerHTML = ''; 125 | 126 | const title = document.createElement('h2'); 127 | title.textContent = 'Featured Speakers'; 128 | speakers.appendChild(title); 129 | 130 | const shortRule = document.createElement('hr'); 131 | shortRule.className = 'short-rule hide'; 132 | speakers.appendChild(shortRule); 133 | 134 | for (let i = 0; i < speakerarr.length; i += 1) { 135 | generator(i); 136 | } 137 | leftRight.appendChild(leftDiv); 138 | leftRight.appendChild(rightDiv); 139 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |
7 | 8 |

Aishatu-Gobir-Inaugural-Lecture

9 | 10 |
11 | 12 | 13 | 14 | # 📗 Table of Contents 15 | 16 | - [📖 About the Project](#about-project) 17 | - [🛠 Built With](#built-with) 18 | - [Tech Stack](#tech-stack) 19 | - [Key Features](#key-features) 20 | - [🚀 Live Demo](#live-demo) 21 | - [💻 Getting Started](#getting-started) 22 | - [Setup](#setup) 23 | - [Prerequisites](#prerequisites) 24 | - [Install](#install) 25 | - [Usage](#usage) 26 | - [Run tests](#run-tests) 27 | - [Deployment](#triangular_flag_on_post-deployment) 28 | - [👥 Authors](#authors) 29 | - [🔭 Future Features](#future-features) 30 | - [🤝 Contributing](#contributing) 31 | - [⭐️ Show your support](#support) 32 | - [🙏 Acknowledgements](#acknowledgements) 33 | - [📝 License](#license) 34 | 35 | 36 | 37 | # 📖 [Aishatu-Gobir-Inaugural-Lecture] 38 | 39 | 40 | **[Aishatu-Gobir-Inaugural-Lecture](https://bestbynature.github.io/Aishatu-Gobir-Inaugural-Lecture/)** is a capstone project to fulfil the requirement for the completion of Module One of Full Stack Web Developement Program at Microverse Inc. This project features the main lecture as well as keynote speakers for the 219th Inaugural Lecture at the University of Ilorin, Ilorin, Nigeria. 41 | 42 | ## 🛠 Built With 43 | 44 | ### Tech Stack 45 | 46 | 47 |
48 | Client 49 | 54 |
55 | 56 | 57 | 58 | 59 | ### Key Features 60 | 61 | 62 | - **[Responsive design]** 63 | - **[Home and About Pages]** 64 | - **[Keynote Speakers]** 65 | 66 |

(back to top)

67 | 68 | 69 | 70 | ## 🚀 Live Demo 71 | 72 | 73 | - [Aishatu-Gobir-Inaugural-Lecture](https://bestbynature.github.io/Aishatu-Gobir-Inaugural-Lecture/) 74 | 75 |

(back to top)

76 | 77 | 78 | 79 | ## 💻 Getting Started 80 | 81 | 82 | To get a local copy up and running, follow these steps. 83 | 84 | ### Prerequisites 85 | 86 | In order to run this project you need: 87 | 93 | 94 | 95 | ### Setup 96 | 97 | Clone this repository to your desired folder: 98 | 104 | 105 | 106 | ### Install 107 | 108 | Install this project with: 109 | 110 | 128 | 129 | ### Usage 130 | 131 | To run the project, execute the following command: 132 | 133 | ```sh 134 | use git bash to open in Vs code 135 | ``` 136 | 137 | 138 | ### Run tests 139 | 140 | To run tests, run the following command: 141 | 142 | 143 | ```sh 144 | Run "npx hint ." 145 | Run "npx stylelint "**/*.{css,scss} --fix " to fix linters 146 | Run "npx eslint . --fix to fix linters" 147 | ``` 148 | 149 | ### Deployment 150 | 151 | You can deploy this project using: 152 | 153 | - github pages 154 | 155 |

(back to top)

156 | 157 | 158 | 159 | ## 👥 Authors 160 | 161 | 👤 **Author1** 162 | 163 | - GitHub: [@githubhandle](https://github.com/Bestbynature) 164 | - Twitter: [@twitterhandle](https://twitter.com/Dammybest) 165 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/damilare-ismaila-4a5a8b30/) 166 | 167 | 168 | 169 |

(back to top)

170 | 171 | 172 | 173 | ## 🔭 Future Features 174 | 175 | - [ ] **[contact form page]** 176 | - [ ] **[Seat selection and Seat-Booking feature]** 177 | - [ ] **[A page for Financial Donations towards the Inaugural Lecture ]** 178 | 179 |

(back to top)

180 | 181 | 182 | 183 | ## 🤝 Contributing 184 | 185 | Contributions, issues, and feature requests are welcome! 186 | 187 | Feel free to check the [issues page](../../issues/). 188 | 189 |

(back to top)

190 | 191 | 192 | 193 | ## ⭐️ Show your support 194 | 195 | If you like this project, kindly drop a star for me. 196 | 197 |

(back to top)

198 | 199 | 200 | 201 | ## 🙏 Acknowledgments 202 | 203 | I would like to use this medium to appreciate [Cindy Shin in Benance](https://www.behance.net/adagio07) for putting up the original design idea. 204 | 205 |

(back to top)

206 | 207 | 208 | 209 | 210 | ## 📝 License 211 | 212 | This project is [MIT](./LICENSE) licensed. 213 | 214 | 215 |

(back to top)

216 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Aishatu Gobir Inaugural Lecture 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 26 |
27 |
28 |
29 |
30 |
    31 |
    • 32 |
    • 33 |
  • English
    • 34 |
  • MyPage
    • 35 |
  • Logout
    • 36 |
37 |
38 |
39 | University of Ilorin logo 40 | 41 | 51 | 52 |
53 |
54 |
55 | 56 |
57 |
58 |

225th Inaugural Lecture

59 |

UNILORIN SERIES
INAUGURAL LECTURE
2023

60 |

Child Survival: Obstacles and Opportunities Through The Eyes of a Paediatrician in Practice and Research

61 |

2023.05.23 (TUE) ~ 24 (WED)

62 |

@ The University Auditorium

63 |
64 |
65 |

Main Program

66 |
67 | 68 |
69 | 70 |
71 | lecture icon 72 |

Lecture

73 |

Listen to the speakers from various countries about the messages of sharing and opening.

74 |
75 | 76 |
77 | exhibition icon 78 |

CC Exhibition

79 |

Appreciate various creations applying CC license of artists, organised from the University of Ilorin.

80 |
81 | 82 |
83 | forum icon 84 |

Forum

85 |

Have the time to share your thoughts and opinions with experts for each topic

86 |
87 | 88 |
89 | workshop icon 90 |

Workshop

91 |

Attempt creating your own work using open source license rather than just watching

92 |
93 | 94 |
95 | workshop icon 96 |

CC Ignite

97 |

Attempt creating your own work using open source license rather than just watching

98 |
99 | 100 |
101 | 102 | 103 |
SEE THE WHOLE PROGRAM
104 | 105 |
106 |
107 | 108 |
109 |
110 | 111 | 112 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About the Lecture 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 26 |
27 |
28 |
29 |
30 |
    31 |
    • 32 |
    • 33 |
  • English
    • 34 |
  • MyPage
    • 35 |
  • Logout
    • 36 |
37 |
38 |
39 | University of Ilorin logo 40 | 41 | 52 | 53 |
54 |
55 |
56 | 57 | 58 |
59 | 60 |

225th Inaugural Lecture

61 |

UNILORIN INAUGURAL LECTURE SERIES 2023

62 |
63 |

Unilorin Inaugural Lecture brings together the community of experts, academics and activists who comprise the University Affiliate Network from different countries every two years. This year, we hope to expand our invitation list including organisations and individuals.

64 | 65 |

Unilorin Inaugural Lecture brings together the community of experts, academics and activists who comprise the University Affiliate Network from different countries every two years.
This year, we hope to expand our invitation list including organisations and individuals who want to work with us on shared projects that advance the cause of the commons, free culture and open knowledge.
So if you're active and engaged in the worlds of open content and knowledge - free software advocates, Wikipedians, Open Knowledge, galleries, libraries, museums, archives, governments and foundations, lawyers, and activists - we hope you'll consider joining us this year to build a sronger, more vibrant commons together.

66 | 67 |

Please contact us per Email for any further questions
about Unilorin Inaugural Lecture 2023
bestbynature2010@gmail.com

68 | 69 |

Please contact us per Email for any further questions about Unilorin Inaugural Lecture 2023
bestbynature2010@gmail.com

70 | 71 |
72 |
73 |

Unilorin Series
Inaugural Lecture 2023 Logo

74 | 75 |

Unilorin Series Inaugural Lecture 2023 Logo

76 | 77 |
78 |

The logo of Unilorin Inaugural Lecture 2023 was decided by the senate sitting of 19th December, 2022.

79 | 80 |

The logo of Unilorin Inaugural Lecture 2023 was decided by the senate sitting of 19th December, 2022. After online public voting and Selection Committee Judging process, the logo from Prof. Agip won the prize. After consultation with Mr. Ayeni, we optimised the prize-winning-logo for this year's Inaugural Lecture as follows:

81 | 82 |
83 |
84 | Main Speaker 85 |

Prof. Aishatu Ahmed Gobir

86 |
87 |
88 |

Unilorin

89 |

Series 2023

90 |
91 |

23rd - 24th May, 2023 | Ilorin, Nigeria

92 |
93 |
94 |
95 |
96 | 97 |
98 |

See the past Lectures

99 |

See the past Lectures

100 |
101 |

Take a look at the last two Inaugural Lectures which took place in the University Auditorium

102 |

Take a look at the last two Inaugural Lectures which took place in the University Auditorium

103 |
104 | previous lecture 105 | previous lecture 106 |
107 |
108 | 109 |
110 |

Partner

111 |
112 |
113 | Mozilla logo 114 | Google logo 115 | Naver logo 116 | Daumkakao logo 117 | Airbnb logo 118 |
119 |
120 |
121 | 133 |
134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /mystyles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Lato', sans-serif; 9 | } 10 | 11 | .first-line ul { 12 | background-color: #3e3e3e; 13 | color: #fff; 14 | list-style-type: none; 15 | display: flex; 16 | justify-content: flex-end; 17 | padding: 0.4rem 10% 0.4rem 0; 18 | } 19 | 20 | .first-line ul li { 21 | display: inline; 22 | margin-right: 2%; 23 | font-size: 0.8rem; 24 | } 25 | 26 | .second-line { 27 | background-color: #fff; 28 | display: flex; 29 | align-items: center; 30 | justify-content: space-around; 31 | padding: 0.5rem 0; 32 | } 33 | 34 | .modal-menu ul li { 35 | list-style-type: none; 36 | margin-bottom: 2.5rem; 37 | } 38 | 39 | .modal-menu ul li a { 40 | text-decoration: none; 41 | color: rgba(236, 82, 66); 42 | font-size: 1.5rem; 43 | } 44 | 45 | .second-line nav ul li { 46 | display: inline-block; 47 | margin-right: 3rem; 48 | font-size: 0.7rem; 49 | } 50 | 51 | .second-line nav ul li a { 52 | text-decoration: none; 53 | color: gray; 54 | } 55 | 56 | #about { 57 | color: #ec5242; 58 | } 59 | 60 | #campaign { 61 | text-align: center; 62 | color: #ec5242; 63 | border: 4px solid #ec5242; 64 | padding: 0.4rem; 65 | margin-left: 50px; 66 | } 67 | 68 | .logo-img { 69 | margin: 0 0 0 5%; 70 | height: 3rem; 71 | } 72 | 73 | header { display: none; } 74 | 75 | .mobile-header { 76 | height: 20vh; 77 | padding: 2rem; 78 | background-image: url(./Assets/mobile-backg.png); 79 | background-size: cover; 80 | filter: grayscale(100%); 81 | } 82 | 83 | .fa-bars { 84 | font-size: 3rem; 85 | color: rgba(0, 0, 0, 0.95); 86 | z-index: 2; 87 | top: 1.5rem; 88 | left: 2rem; 89 | position: fixed; 90 | } 91 | 92 | .lecture-title { 93 | padding: 0.5rem 1.2rem 5rem 1.2rem; 94 | background: url(./Assets/mobile-backg.png) #e9ecef; 95 | background-size: cover; 96 | } 97 | 98 | .title1 { 99 | color: #ec5242; 100 | font-size: 1.5rem; 101 | } 102 | 103 | .lecture-title h1 { 104 | color: rgba(236, 82, 66, 0.01); 105 | font-size: 1.8rem; 106 | font-family: 'Arial black', sans-serif; 107 | line-height: 2rem; 108 | margin-top: 0.8rem; 109 | background-image: url(./Assets/title-logo.jpg); 110 | background-clip: content-box; 111 | -webkit-background-clip: text; 112 | } 113 | 114 | .title2 { 115 | margin: 2rem 0; 116 | border: 4px solid white; 117 | padding: 1.5rem; 118 | word-spacing: 5px; 119 | background-color: #e9ecef; 120 | color: #757575; 121 | line-height: 1.7rem; 122 | } 123 | 124 | .lecture-title h2 { 125 | color: #565656; 126 | font-weight: 900; 127 | font-size: 1.58rem; 128 | margin-bottom: 1rem; 129 | } 130 | 131 | .title3 { 132 | font-size: 1.3rem; 133 | color: #757575; 134 | } 135 | 136 | .program-black { 137 | height: auto; 138 | background: url(./Assets/program-bg-1.jfif); 139 | background-repeat: no-repeat; 140 | background-size: cover; 141 | display: flex; 142 | flex-direction: column; 143 | align-items: center; 144 | padding: 1.5rem 1rem 3.5rem 1rem; 145 | } 146 | 147 | .program-black h2 { 148 | color: #fff; 149 | } 150 | 151 | .short-rule { 152 | width: 15%; 153 | border: 1px solid #ec5242; 154 | margin: 1rem auto 1rem auto; 155 | } 156 | 157 | .fa-podium-star { 158 | border: 2px solid red; 159 | color: #fff; 160 | padding: 15px; 161 | font-size: 5rem; 162 | } 163 | 164 | .icon-size { 165 | width: 50px; 166 | height: 50px; 167 | } 168 | 169 | .program-card-flex { 170 | display: flex; 171 | flex-direction: column; 172 | margin-top: 2rem; 173 | } 174 | 175 | .program-card { 176 | background-color: rgb(60, 63, 70, 0.5); 177 | border: 3px solid rgb(60, 63, 70); 178 | display: flex; 179 | justify-content: space-between; 180 | align-items: center; 181 | padding: 1rem; 182 | width: 100%; 183 | margin-bottom: 0.8rem; 184 | transition: all 0.5s ease-in-out; 185 | } 186 | 187 | .program-card:hover { 188 | transform: translateY(0.8rem); 189 | border: 3px solid rgb(255, 255, 255); 190 | } 191 | 192 | .program-card h3 { 193 | color: rgb(255, 81, 42); 194 | width: 30%; 195 | } 196 | 197 | .program-black p { 198 | color: rgb(221, 223, 224); 199 | font-size: 1rem; 200 | width: 50%; 201 | line-height: 1.7rem; 202 | } 203 | 204 | #join { 205 | width: 80%; 206 | background-color: #ec5242; 207 | color: #fff; 208 | padding: 1.5rem; 209 | font-size: 1.5rem; 210 | cursor: pointer; 211 | margin-top: 2rem; 212 | } 213 | 214 | .speakers { 215 | height: auto; 216 | display: flex; 217 | flex-direction: column; 218 | align-items: center; 219 | padding: 2rem; 220 | background-color: #fff; 221 | } 222 | 223 | .left-right { 224 | display: flex; 225 | flex-direction: column; 226 | } 227 | 228 | .speakers h2 { 229 | color: rgb(38, 39, 46); 230 | } 231 | 232 | .speaker-card { 233 | display: flex; 234 | padding: 1rem; 235 | margin-bottom: 1.5rem; 236 | width: 100%; 237 | } 238 | 239 | .speaker-img { 240 | flex-basis: 35%; 241 | margin-right: 1rem; 242 | } 243 | 244 | .speaker-img img { 245 | width: 100%; 246 | z-index: 5; 247 | transition: all 0.5s; 248 | } 249 | 250 | .img-flex img { 251 | width: 100%; 252 | margin-top: 2rem; 253 | transition: all 0.5s ease-in-out; 254 | } 255 | 256 | .logo2a img { 257 | width: 100%; 258 | box-shadow: 0 0 3px 3px; 259 | transition: all 0.5s ease-in-out; 260 | } 261 | 262 | .speaker-img img:hover { 263 | transform: scale(1.4); 264 | box-shadow: 0 0 3px 5px rgba(255, 81, 42, 0.75); 265 | } 266 | 267 | .speaker-info { 268 | flex-basis: 65%; 269 | } 270 | 271 | .speaker-info h3 { 272 | color: #272a31; 273 | font-size: 1.2rem; 274 | } 275 | 276 | .speaker-info h4 { 277 | color: #ec5242; 278 | font-size: 0.8rem; 279 | } 280 | 281 | .speaker-info hr { 282 | width: 10%; 283 | margin: 0.8rem 0 1.2rem 0; 284 | } 285 | 286 | .speaker-info h5 { 287 | font-size: 0.8rem; 288 | color: rgb(70, 70, 70); 289 | } 290 | 291 | #more { 292 | width: 100%; 293 | padding: 0.7rem 0 0.7rem 0; 294 | margin: 1rem 0 2rem 0; 295 | border: 2px solid #d3d3d3; 296 | color: gray; 297 | background-color: #fff; 298 | } 299 | 300 | .fa-angle-down { 301 | margin-left: 1rem; 302 | color: #ec5242; 303 | } 304 | 305 | .cheq { 306 | position: relative; 307 | right: 1.5rem; 308 | bottom: 3rem; 309 | z-index: 1; 310 | } 311 | 312 | /* Modification for the about page */ 313 | .wrapper2 { 314 | background-color: #fff; 315 | } 316 | 317 | .box1 { 318 | background: url(./Assets/mobile-backg.png); 319 | background-size: cover; 320 | padding: 7rem 2rem 2rem 2rem; 321 | text-align: center; 322 | } 323 | 324 | #line1 { 325 | color: #ec5242; 326 | font-size: 1.5rem; 327 | text-align: center; 328 | } 329 | 330 | #line2 { 331 | text-align: center; 332 | font-family: 'Arial', sans-serif; 333 | font-weight: 900; 334 | color: rgb(237, 83, 66); 335 | font-size: 1.5rem; 336 | margin: 1rem 0 1rem 0; 337 | } 338 | 339 | #line3 { 340 | background-color: #fff; 341 | text-align: center; 342 | padding: 1.5rem 1rem; 343 | line-height: 1.5rem; 344 | color: rgb(130, 130, 130); 345 | border: 2px solid #d3d3d3; 346 | margin: 1rem 0; 347 | } 348 | 349 | #line4 { 350 | text-align: center; 351 | font-size: 0.8rem; 352 | color: rgb(130, 130, 130); 353 | line-height: 1.5rem; 354 | } 355 | 356 | #line4 a { 357 | text-decoration: none; 358 | color: rgb(38, 39, 46); 359 | } 360 | 361 | .box2 { 362 | padding: 2rem 1rem; 363 | display: flex; 364 | flex-direction: column; 365 | align-items: center; 366 | text-align: center; 367 | border-bottom: 1px solid gray; 368 | } 369 | 370 | .lecture-show { 371 | color: rgb(34, 29, 30); 372 | } 373 | 374 | .prize1 { 375 | width: 80%; 376 | line-height: 1.5rem; 377 | color: rgb(34, 29, 30); 378 | } 379 | 380 | .short { 381 | width: 15%; 382 | border: 1px solid #ec5242; 383 | margin: 1rem auto 1rem auto; 384 | } 385 | 386 | .logo2 { 387 | border: 2px solid #d3d3d3; 388 | width: 95%; 389 | margin: 3rem auto; 390 | display: flex; 391 | justify-content: center; 392 | padding: 1.3rem; 393 | } 394 | 395 | .logo2a { 396 | flex-basis: 70%; 397 | display: flex; 398 | flex-direction: column; 399 | justify-content: center; 400 | align-items: center; 401 | padding-right: 0.5rem; 402 | } 403 | 404 | .logo2a h3 { 405 | color: #ec5242; 406 | margin-top: 1rem; 407 | box-shadow: 0 0 3px 3px; 408 | } 409 | 410 | .logo2a img:hover { 411 | transform: scale(1.4); 412 | } 413 | 414 | .logo2b { 415 | flex-basis: 30%; 416 | display: flex; 417 | flex-direction: column; 418 | align-items: flex-start; 419 | justify-content: center; 420 | padding-left: 0.5rem; 421 | } 422 | 423 | .logo2b p { 424 | margin: 0; 425 | padding: 0; 426 | font-size: 0.5rem; 427 | color: gray; 428 | } 429 | 430 | .logo2b h3 { 431 | font-size: 2.5rem; 432 | } 433 | 434 | .logo2b h4 { 435 | font-size: 1.8rem; 436 | } 437 | 438 | .full { 439 | width: 9.5rem; 440 | } 441 | 442 | .box3 { 443 | padding: 2rem 2.5rem; 444 | display: flex; 445 | flex-direction: column; 446 | align-items: center; 447 | text-align: center; 448 | border-bottom: 1px solid gray; 449 | } 450 | 451 | .box3 h2 { 452 | color: rgb(34, 29, 30); 453 | } 454 | 455 | .box3 p { 456 | width: 80%; 457 | line-height: 1.5rem; 458 | color: rgb(34, 29, 30); 459 | } 460 | 461 | .img-flex { 462 | width: 100%; 463 | display: flex; 464 | flex-direction: column; 465 | } 466 | 467 | .img-flex img:hover { 468 | transform: translateY(-1rem); 469 | box-shadow: 0 0 10px 5px; 470 | } 471 | 472 | .support { 473 | display: flex; 474 | flex-direction: column; 475 | align-items: center; 476 | height: auto; 477 | padding: 2rem 1rem; 478 | color: #fff; 479 | background-color: rgb(65, 65, 68); 480 | } 481 | 482 | .partners { 483 | display: flex; 484 | max-width: 100%; 485 | height: auto; 486 | justify-content: center; 487 | flex-wrap: wrap; 488 | } 489 | 490 | .air { 491 | width: 27%; 492 | filter: grayscale(100%); 493 | margin: 1rem 1.3rem 1rem 0; 494 | transition: all 0.5s ease-in-out; 495 | cursor: pointer; 496 | } 497 | 498 | .air:hover { 499 | filter: grayscale(0); 500 | transform: rotateZ(45deg); 501 | } 502 | 503 | footer { 504 | display: flex; 505 | height: 18vh; 506 | } 507 | 508 | .col2 { 509 | flex-basis: 50%; 510 | padding: 0 2rem 0 1rem; 511 | display: flex; 512 | justify-content: flex-end; 513 | align-items: center; 514 | } 515 | 516 | .col3 p { 517 | font-size: 0.7rem; 518 | } 519 | 520 | .col3 { 521 | flex-basis: 50%; 522 | padding: 0 1rem 0 2rem; 523 | font-size: 0.7rem; 524 | display: flex; 525 | flex-direction: column; 526 | justify-content: center; 527 | } 528 | 529 | .mobile { 530 | width: 65%; 531 | height: 20%; 532 | } 533 | 534 | .modal-menu { 535 | height: 150vh; 536 | background-color: rgba(39, 42, 49); 537 | display: none; 538 | flex-direction: column; 539 | padding: 2.5rem; 540 | z-index: 3; 541 | } 542 | 543 | .fa-xmark { 544 | color: #fff; 545 | font-size: 2rem; 546 | align-self: flex-end; 547 | } 548 | 549 | .fa-house { 550 | display: none; 551 | visibility: hidden; 552 | } 553 | 554 | #line3-hide { display: none; } 555 | 556 | #line4-hide { display: none; } 557 | 558 | .lecture-hide { display: none; } 559 | 560 | .speakers-hide { display: none; } 561 | 562 | .prize2 { display: none; } 563 | 564 | .desktop { 565 | visibility: hidden; 566 | display: none; 567 | } 568 | 569 | .link { display: none; } 570 | 571 | .footer-hide { display: none; } 572 | 573 | /* ===========Media Query for min-width of 768px==================== */ 574 | @media only screen and (min-width: 768px) { 575 | header { display: block; } 576 | 577 | .fa-bars { 578 | display: none; 579 | visibility: hidden; 580 | } 581 | 582 | #line1 { display: none; } 583 | 584 | #line2 { 585 | font-size: 2.5rem; 586 | margin: 3rem auto 1rem auto; 587 | width: 50%; 588 | } 589 | 590 | .box1 { 591 | display: flex; 592 | flex-direction: column; 593 | align-items: center; 594 | background-image: url(./Assets/mobile-backg.png); 595 | padding: 0.5rem 5rem 4rem 10rem; 596 | } 597 | 598 | .box1 a { 599 | display: flex; 600 | justify-content: flex-end; 601 | text-decoration: none; 602 | width: 100%; 603 | } 604 | 605 | .fa-house { 606 | display: inline-flex; 607 | visibility: visible; 608 | text-align: right; 609 | font-size: 1rem; 610 | color: #272a31; 611 | margin-top: 5px; 612 | } 613 | 614 | .hide { 615 | display: block; 616 | width: 4%; 617 | margin: 1rem auto 1rem auto; 618 | } 619 | 620 | #line3 { display: none; } 621 | 622 | #line3-hide { 623 | display: block; 624 | background-color: #fff; 625 | text-align: center; 626 | padding: 1.5rem 1rem; 627 | line-height: 1.2rem; 628 | color: rgb(130, 130, 130); 629 | border: 2px solid #d3d3d3; 630 | margin: 1.5rem 0 2.5rem 0; 631 | font-size: 0.9rem; 632 | width: 70%; 633 | } 634 | 635 | #line4 { display: none; } 636 | 637 | #line4-hide { 638 | display: inline-flex; 639 | flex-direction: column; 640 | align-items: center; 641 | text-align: center; 642 | font-size: 1.1rem; 643 | line-height: 1.5rem; 644 | color: rgb(130, 130, 130); 645 | } 646 | 647 | .link a { 648 | color: #ddd; 649 | font-weight: bold; 650 | } 651 | 652 | #line4-hide a { 653 | text-decoration: none; 654 | color: #272a31; 655 | font-size: 1.1rem; 656 | text-align: center; 657 | } 658 | 659 | .lecture-hide { display: block; } 660 | 661 | .lecture-show { display: none; } 662 | 663 | .box2 { padding: 2rem 6rem 0.5rem 10rem; } 664 | 665 | .support { display: none; } 666 | 667 | .prize1 { display: none; } 668 | 669 | .prize2 { 670 | display: block; 671 | font-size: 1rem; 672 | width: 100%; 673 | line-height: 1.5rem; 674 | color: rgb(34, 29, 30); 675 | } 676 | 677 | .logo2 { 678 | width: 50%; 679 | padding: 1.3rem 4rem 1.3rem 4rem; 680 | height: auto; 681 | } 682 | 683 | .logo2a img { 684 | width: 50%; 685 | } 686 | 687 | .box3 { padding: 2rem 4.5rem 2rem 15%; } 688 | 689 | .box3 img { 690 | width: 50%; 691 | margin-right: 2rem; 692 | } 693 | 694 | footer { 695 | background-color: #2e2e2e; 696 | color: #fff; 697 | display: flex; 698 | align-items: center; 699 | } 700 | 701 | .img-flex { 702 | flex-direction: row; 703 | } 704 | 705 | .img-flex img { 706 | padding: 1rem; 707 | margin-right: 0; 708 | } 709 | 710 | .col2 { 711 | display: flex; 712 | justify-content: flex-end; 713 | flex-basis: 35%; 714 | } 715 | 716 | .wide { 717 | flex-basis: 65%; 718 | display: flex; 719 | flex-direction: column; 720 | } 721 | 722 | .desktop { 723 | visibility: visible; 724 | display: flex; 725 | justify-content: flex-start; 726 | width: 50%; 727 | transition: all 0.5s ease-in-out; 728 | } 729 | 730 | .desktop:hover { 731 | filter: invert(100%); 732 | } 733 | 734 | .mobile { visibility: hidden; } 735 | 736 | .lecture-title { 737 | background-image: url(./Assets/desktop-backg.png); 738 | background-size: cover; 739 | padding: 0 10rem 5rem 10rem; 740 | } 741 | 742 | .title1 { font-size: 2.5rem; } 743 | 744 | .lecture-title h1 { 745 | font-size: 3.5rem; 746 | font-family: 'Arial black', sans-serif; 747 | line-height: 5rem; 748 | margin-top: 0.8rem; 749 | } 750 | 751 | .title2 { 752 | padding: 1rem; 753 | color: #272a31; 754 | line-height: 1.7rem; 755 | width: 70%; 756 | } 757 | 758 | .lecture-title h2 { 759 | font-size: 2rem; 760 | margin-bottom: 1rem; 761 | } 762 | 763 | .title3 { font-size: 1.4rem; } 764 | 765 | .program-card-flex { 766 | flex-direction: row; 767 | justify-content: center; 768 | } 769 | 770 | .program-card { 771 | flex-direction: column; 772 | padding: 0.5rem; 773 | width: 17%; 774 | justify-content: flex-start; 775 | align-items: center; 776 | margin-bottom: 1rem; 777 | margin-right: 0.3rem; 778 | height: auto; 779 | } 780 | 781 | .program-card p { 782 | font-size: 0.7rem; 783 | width: 100%; 784 | flex-basis: 53%; 785 | line-height: 1.2rem; 786 | margin: 8px 0 0 0; 787 | text-align: center; 788 | } 789 | 790 | .program-card h3 { 791 | width: 100%; 792 | flex-basis: 10%; 793 | text-align: center; 794 | margin: 6px 0 6px 0; 795 | } 796 | 797 | .icon-size { 798 | flex-basis: 37%; 799 | justify-self: flex-start; 800 | width: 40%; 801 | } 802 | 803 | #join { 804 | display: none; 805 | visibility: hidden; 806 | } 807 | 808 | .link { 809 | display: block; 810 | margin-top: 3rem; 811 | } 812 | 813 | .hide2 { 814 | width: 5%; 815 | border: 1px solid #ec5242; 816 | margin: 1rem auto 1rem auto; 817 | } 818 | 819 | .left-right { flex-direction: row; } 820 | 821 | #more { width: 50%; } 822 | 823 | .support2 { 824 | display: flex; 825 | flex-direction: column; 826 | align-items: center; 827 | height: auto; 828 | padding: 2rem 10rem; 829 | color: #717171; 830 | background-color: rgb(65, 65, 68); 831 | } 832 | 833 | .partners2 { 834 | display: flex; 835 | align-items: center; 836 | } 837 | 838 | .partners2 img { 839 | width: 16%; 840 | } 841 | 842 | .footnote { 843 | display: flex; 844 | background-color: #fff; 845 | } 846 | 847 | .footer-hide { 848 | display: flex; 849 | flex-direction: column; 850 | background-color: #fff; 851 | } 852 | 853 | .col4 { 854 | flex-basis: 35%; 855 | padding: 2rem 2rem 2rem 1rem; 856 | display: flex; 857 | justify-content: flex-end; 858 | align-items: center; 859 | } 860 | 861 | .col5 { 862 | flex-basis: 65%; 863 | padding: 2rem 1rem 2rem 2rem; 864 | font-size: 1rem; 865 | display: flex; 866 | flex-direction: column; 867 | justify-content: center; 868 | } 869 | 870 | .mobile2 { 871 | width: 60%; 872 | } 873 | 874 | .col5 p { 875 | color: #565656; 876 | margin-bottom: 0.8rem; 877 | } 878 | 879 | .col3 { 880 | flex-basis: 65%; 881 | } 882 | 883 | .col3 p { 884 | font-size: 1rem; 885 | } 886 | } 887 | --------------------------------------------------------------------------------