├── .gitignore ├── images ├── logo.png ├── airbnb.png ├── bloter.png ├── kakao.png ├── naver.png ├── arrow_up.png ├── cc-logo2.png ├── facebook.png ├── main_big.png ├── mozilla.png ├── twitter.png ├── about_2011.png ├── about_2013.png ├── about_bg_01.png ├── about_logo.png ├── arrow_down.png ├── main-footer.png ├── pattern_bg.png ├── speaker_01.png ├── speaker_02.png ├── speaker_03.png ├── speaker_04.png ├── speaker_05.png ├── speaker_06.png ├── Screenshot-about.png ├── logo_cc_w_147x35.png ├── mobile_intro_bg.png ├── program_icon_01.png ├── program_icon_02.png ├── program_icon_03.png ├── program_icon_04.png ├── program_icon_05.png ├── Screenshot-desktop.png ├── close_mobile_menu.png ├── logo_cck_w_208x35.png └── tools-for-motivation-KvTOwKoji7g-unsplash.jpg ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── LICENSE ├── .github └── workflows │ └── linters.yml ├── index.html ├── README.md ├── about.html ├── script.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | # .gitignore 2 | node_modules/ 3 | package-lock.json -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/airbnb.png -------------------------------------------------------------------------------- /images/bloter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/bloter.png -------------------------------------------------------------------------------- /images/kakao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/kakao.png -------------------------------------------------------------------------------- /images/naver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/naver.png -------------------------------------------------------------------------------- /images/arrow_up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/arrow_up.png -------------------------------------------------------------------------------- /images/cc-logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/cc-logo2.png -------------------------------------------------------------------------------- /images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/facebook.png -------------------------------------------------------------------------------- /images/main_big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/main_big.png -------------------------------------------------------------------------------- /images/mozilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/mozilla.png -------------------------------------------------------------------------------- /images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/twitter.png -------------------------------------------------------------------------------- /images/about_2011.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/about_2011.png -------------------------------------------------------------------------------- /images/about_2013.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/about_2013.png -------------------------------------------------------------------------------- /images/about_bg_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/about_bg_01.png -------------------------------------------------------------------------------- /images/about_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/about_logo.png -------------------------------------------------------------------------------- /images/arrow_down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/arrow_down.png -------------------------------------------------------------------------------- /images/main-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/main-footer.png -------------------------------------------------------------------------------- /images/pattern_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/pattern_bg.png -------------------------------------------------------------------------------- /images/speaker_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/speaker_01.png -------------------------------------------------------------------------------- /images/speaker_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/speaker_02.png -------------------------------------------------------------------------------- /images/speaker_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/speaker_03.png -------------------------------------------------------------------------------- /images/speaker_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/speaker_04.png -------------------------------------------------------------------------------- /images/speaker_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/speaker_05.png -------------------------------------------------------------------------------- /images/speaker_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/speaker_06.png -------------------------------------------------------------------------------- /images/Screenshot-about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/Screenshot-about.png -------------------------------------------------------------------------------- /images/logo_cc_w_147x35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/logo_cc_w_147x35.png -------------------------------------------------------------------------------- /images/mobile_intro_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/mobile_intro_bg.png -------------------------------------------------------------------------------- /images/program_icon_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/program_icon_01.png -------------------------------------------------------------------------------- /images/program_icon_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/program_icon_02.png -------------------------------------------------------------------------------- /images/program_icon_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/program_icon_03.png -------------------------------------------------------------------------------- /images/program_icon_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/program_icon_04.png -------------------------------------------------------------------------------- /images/program_icon_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/program_icon_05.png -------------------------------------------------------------------------------- /images/Screenshot-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/Screenshot-desktop.png -------------------------------------------------------------------------------- /images/close_mobile_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/close_mobile_menu.png -------------------------------------------------------------------------------- /images/logo_cck_w_208x35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/logo_cck_w_208x35.png -------------------------------------------------------------------------------- /images/tools-for-motivation-KvTOwKoji7g-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kit0-0/Capstone-summit/HEAD/images/tools-for-motivation-KvTOwKoji7g-unsplash.jpg -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 kit0-0 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.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@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.11.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@v3 26 | - uses: actions/setup-node@v3 27 | with: 28 | node-version: "18.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@v3 40 | - uses: actions/setup-node@v3 41 | with: 42 | node-version: "18.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@v3 54 | - uses: actions/setup-node@v3 55 | with: 56 | node-version: "18.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@v3 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 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CREATIVE CITY SUMMIT 9 | 10 | 11 | 12 | 13 | 14 |
15 | 24 | 36 |
37 |
38 |

Hello! sharing world

39 |

CREATIVE CITY SUMMIT 2015

40 |

Join us in Waterloo, 2015 for an exciting itinerary of speakers, peer 41 | presentations, facilitated discussions, networking, and local culture offerings from the City of Waterloo 42 | and regional partners. In-person and virtual tickets are on sale now!

43 |

44 | 15 November 2015 FROM 08:00am 45 |

46 |

@ Canada , the City of Waterloo

47 |
48 | 49 |
50 |
51 |
52 |
53 |

Main Program

54 |
55 |
56 |
57 |
58 | SEE THE WHOLE PROGRAM 59 | 60 |
61 |
62 |
63 | 64 | 65 | 66 |
67 |

Featured Speakers

68 |
69 |
70 |
71 | 72 | 73 |
74 | 75 | 85 | 86 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |

Capstone-summit

6 | 7 |
8 | 9 | 10 | 11 | 12 | # 📗 Table of Contents 13 | 14 | - [📖 About the Project](#about-project) 15 | - [🛠 Built With](#built-with) 16 | - [Tech Stack](#tech-stack) 17 | - [Key Features](#key-features) 18 | - [🚀 Live Demo](#live-demo) 19 | - [💻 Getting Started](#getting-started) 20 | - [Setup](#setup) 21 | - [Prerequisites](#prerequisites) 22 | - [Install](#install) 23 | - [Usage](#usage) 24 | - [Run tests](#run-tests) 25 | - [👥 Author](#author) 26 | - [🔭 Future Features](#future-features) 27 | - [🤝 Contributing](#contributing) 28 | - [⭐️ Show your support](#support) 29 | - [🙏 Acknowledgements](#acknowledgements) 30 | - [📝 License](#license) 31 | 32 | # 📖 Capstone-summit 33 | 34 | **Capstone-summit** is a repository aimed at demonstrating the mastery of various tools and best practices learned in previous steps. The project consists of a website with two main pages: the home page and the about page. 35 | 36 | ![Snapshot](./images/Screenshot-desktop.png) 37 | ![Snapshot](./images/Screenshot-about.png) 38 | 39 | ## 🛠 Built With 40 | 41 | ### Tech Stack 42 | 43 |
44 | Client 45 | 50 |
51 | 52 | 53 | 54 | ### Key Features 55 | 56 | - **Demo of Linters** 57 | - **Demo of home and about Summit Page** 58 | 59 |

(back to top)

60 | 61 | 62 | 63 | ## 🚀 Live Demo 64 | 65 | - [Live Demo Link](https://kit0-0.github.io/Capstone-summit/) 66 | 67 |

(back to top)

68 | 69 | 70 | 71 | 72 | ## 💻 Getting Started 73 | 74 | ### Prerequisites 75 | 76 | In order to run this project you need: 77 | 78 | - Modern updated Web Browser such as Chrome, Safari, Firefox, among others 79 | - git-syn 80 | - code editor 81 | - Javascript enabled 82 | - node js 83 | - npm 84 | 85 | ### Setup 86 | 87 | Clone this repository to your desired folder: 88 | 89 | git clone https://github.com/kit0-0/Capstone-summit.git 90 | 91 | ### Install 92 | 93 | To install all dependencies, run: 94 | ``` 95 | npm install 96 | ``` 97 | 98 | ### Usage 99 | 100 | To run the project, execute the following command: 101 | 102 | To run the project, follow these instructions: 103 | 104 | - Clone this repo to your local machine. 105 | 106 | ### Run tests 107 | 108 | To run tests, run the following command: 109 | 110 | - Track HTML linter errors run: 111 | ``` 112 | npx hint . 113 | ``` 114 | - Track CSS linter errors run: 115 | ``` 116 | npx stylelint "**/*.{css,scss}" 117 | ``` 118 | - Track JavaScript linter errors run: 119 | ``` 120 | npx eslint . 121 | ``` 122 | 123 |

(back to top)

124 | 125 | 126 | 127 | ## 👥 Author 128 | 129 | 👤 Kiko 130 | 131 | - GitHub: [@kit0-0](https://github.com/kit0-0) 132 | 133 | 134 |

(back to top)

135 | 136 | 137 | 138 | 139 | ## 🔭 Future Features 140 | 141 | - [ ] **Animation** 142 | - [ ] **Add Model** 143 | 144 |

(back to top)

145 | 146 | 147 | 148 | 149 | 150 | ## 🤝 Contributing 151 | 152 | Contributions, issues, and feature requests are welcome! 153 | 154 | 155 | Feel free to check the [issues page](https://github.com/kit0-0/Capstone-summit/issues). 156 | 157 |

(back to top)

158 | 159 | 160 | 161 | ## ⭐️ Show your support 162 | 163 | If you like this project give it a⭐️ 164 | 165 |

(back to top)

166 | 167 | 168 | 169 | ## 🙏 Acknowledgments 170 | 171 | - Microverse 172 | - Design idea by Cindy Shin in Behance, the author of the original design 173 | 174 |

(back to top)

175 | 176 | 177 | 178 | 179 | ## 📝 License 180 | 181 | This project is [MIT](./LICENSE) licensed. 182 | 183 |

(back to top)

184 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | CREATIVE CITY SUMMIT 11 | 12 | 13 | 14 |
15 | 24 | 36 |
37 |
38 |
39 |

Hello! sharing world

40 |

CREATIVE CITY SUMMIT 2015

41 |

42 | Connecting with sector colleagues is an essential part of developing culture in Canada. Every year, delegates representing culture work across the country gather to share, learn, and grow.. 43 | Connecting with sector colleagues is an essential part of developing culture in Canada. Every year, delegates representing culture work across the country gather to share, learn, and grow.. 44 |

45 |

46 | Do you have other questions about the CC Global Summit 2015!

47 | 48 |
49 |
50 |
51 |

Creative city Global Summit 2015 Logo

52 |
53 |

54 | Through the logo contest, which was held from June 8th to July 7th, the winning design was determined 55 | through online voting and evaluation by judges. 56 | The logo of CC Global Summit 2015, which was optimized for use on the homepage and promotional materials 57 | after consultation with the winning designer, is as follows. 58 |

59 | 60 |
61 | 62 |
63 |

View Past Global Summits

64 |
65 |

66 | Among the global summits that have been held so far, take a look at the recent stories from Buenos Aires, 67 | Argentina and Warsaw, Poland. 68 |

69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 |
79 |

Partners

80 |
81 | 87 |
88 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const mobileMenu = document.getElementById('mobile-menu'); 2 | const menu = document.getElementById('menu'); 3 | const close = document.getElementById('close-btn'); 4 | const mobileLinks = document.querySelectorAll('.nav-list'); 5 | 6 | function openMenu() { 7 | mobileMenu.style.display = 'flex'; 8 | } 9 | 10 | function closeMenu() { 11 | mobileMenu.style.display = 'none'; 12 | } 13 | 14 | menu.addEventListener('click', openMenu); 15 | close.addEventListener('click', closeMenu); 16 | 17 | mobileLinks.forEach((link) => { 18 | link.addEventListener('click', closeMenu); 19 | }); 20 | 21 | // speaker 22 | const speakerData = [ 23 | { 24 | img: './images/speaker_01.png', 25 | name: 'Yochai Benkler', 26 | profession: 'Harvard Law School Professor', 27 | description: 'Focusing on a common approach in a networked environment, he created the concept of co-production based on sharing, such as open source software and Wikipedia. (Main publications: The Wealth of Networks, Penguin and Levidon)', 28 | }, 29 | { 30 | img: './images/speaker_02.png', 31 | name: 'Kilnam Chon', 32 | profession: 'Korea Advanced Institute of Science and Technology (KAIST) Emeritus Professor', 33 | description: 'It opened the Internet era in earnest by developing Asia\'s first internet protocol network SDN and leading the nation\'s first dedicated line Internet connection in 1990.', 34 | }, 35 | { 36 | img: './images/speaker_03.png', 37 | name: 'Sohyeong Noh', 38 | profession: 'Art Center Nabi Director, CC Korea Director', 39 | description: 'As the author of , he opened \'Art Center Nabi\', the first digital art institution in Korea in 2000, and is currently working there.', 40 | }, 41 | { 42 | img: './images/speaker_04.png', 43 | name: 'Julia Reda', 44 | profession: 'Representative of the Young Pirates of Europe', 45 | description: 'European integration and young people\'s participation in politics and democracy online are major concerns, and he has published a report that will potentially affect the revision of the European Union\'s copyright law in July.', 46 | }, 47 | { 48 | img: './images/speaker_05.png', 49 | name: 'Lila Tretikov', 50 | profession: 'Secretary General of the Wikimedia Foundation', 51 | description: 'Lila Tretikov is the Executive Director of the Wikimedia Foundation, the non-profit organization that runs Wikipedia. Wikipedia is provided free of charge in 290 languages each month to over 100 million people, nearly half of the world\'s population.', 52 | }, 53 | { 54 | img: './images/speaker_06.png', 55 | name: 'Ryan Merkley', 56 | profession: 'Creative Commons CEO, former Mozilla Foundation COO', 57 | description: 'He led the open source project at the Mozilla Foundation and joined the CC CEO in 2014. He has been active in open movements such as open government and open source.', 58 | }, 59 | ]; 60 | 61 | const container = document.getElementById('container'); 62 | 63 | function data() { 64 | speakerData.forEach((speaker) => { 65 | container.innerHTML += `
66 | 67 |
68 |

${speaker.name}

69 |

${speaker.profession}

70 |
71 |

${speaker.description}

72 |
73 |
`; 74 | }); 75 | } 76 | 77 | data(); 78 | 79 | // program-categories 80 | const programCategoriesData = [ 81 | { 82 | icon: 'images/program_icon_01.png', 83 | title: 'Conferences', 84 | description: 'Listen to lectures from speakers from various countries and find out about the latest global trends.', 85 | }, 86 | { 87 | icon: 'images/program_icon_02.png', 88 | title: 'Exhibition', 89 | description: 'Meet the creations of artists from various fields who share the open spirit of CC.', 90 | }, 91 | { 92 | icon: 'images/program_icon_03.png', 93 | title: 'Forum', 94 | description: 'We have time to share our thoughts and opinions with experts for each topic covered.', 95 | }, 96 | { 97 | icon: 'images/program_icon_04.png', 98 | title: 'Workshop', 99 | description: 'Instead of just looking at creations using open source, you can create them yourself.', 100 | }, 101 | { 102 | icon: 'images/program_icon_05.png', 103 | title: 'Party', 104 | description: 'Create opportunities to freely network with CC personnel from around the world.', 105 | }, 106 | ]; 107 | 108 | const programCategoriesContainer = document.querySelector('.program-categories'); 109 | 110 | function createProgramCategories() { 111 | programCategoriesData.forEach((category) => { 112 | programCategoriesContainer.innerHTML += ` 113 |
114 | program-ico 115 | ${category.title} 116 |

${category.description}

117 |
118 | `; 119 | }); 120 | } 121 | 122 | createProgramCategories(); 123 | 124 | // More button functionality 125 | 126 | const moreButton = document.querySelector('.more-btn'); 127 | const speakers = Array.from(document.querySelectorAll('.speaker-list')); 128 | 129 | moreButton.addEventListener('click', () => { 130 | speakers.slice(-4).forEach((speaker) => { 131 | speaker.classList.toggle('hidden'); 132 | }); 133 | 134 | if (moreButton.textContent === 'More') { 135 | moreButton.textContent = 'Less'; 136 | } else { 137 | moreButton.textContent = 'More'; 138 | } 139 | }); 140 | 141 | function hideSpeakers() { 142 | if (window.innerWidth < 768) { 143 | speakers.slice(-4).forEach((speaker) => { 144 | speaker.classList.add('hidden'); 145 | }); 146 | moreButton.textContent = 'More'; 147 | } else { 148 | speakers.forEach((speaker) => { 149 | speaker.classList.remove('hidden'); 150 | }); 151 | moreButton.textContent = 'More'; 152 | } 153 | } 154 | 155 | hideSpeakers(); 156 | 157 | window.addEventListener('resize', () => { // check window on resizing 158 | hideSpeakers(); 159 | }); 160 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:wght@300&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); 3 | 4 | /* GENERAL STYLING */ 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | font-family: 'Lato', sans-serif; 10 | color: #272a31; 11 | } 12 | 13 | ul { 14 | list-style: none; 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | } 20 | 21 | .flex-container { 22 | display: flex; 23 | align-items: center; 24 | } 25 | 26 | .button { 27 | border: 3px solid #ec5242; 28 | padding: 5px 10px; 29 | color: #ec5242 !important; 30 | } 31 | 32 | /* Navigation Bar */ 33 | .upper-nav { 34 | display: none; 35 | } 36 | 37 | .second-list li { 38 | padding: 19px; 39 | display: flex; 40 | } 41 | 42 | .sec-navbar span { 43 | display: block; 44 | } 45 | 46 | .close-btn { 47 | display: block; 48 | margin-top: 0; 49 | position: fixed; 50 | } 51 | 52 | .sec-navbar { 53 | display: flex; 54 | justify-content: space-between; 55 | } 56 | 57 | .menu { 58 | cursor: pointer; 59 | font-size: 24px; 60 | position: absolute; 61 | height: 40px; 62 | margin: 20px; 63 | visibility: visible; 64 | } 65 | 66 | .menu i:hover { 67 | color: #ec5242; 68 | } 69 | 70 | .second-list { 71 | display: none; 72 | flex-direction: column; 73 | position: fixed; 74 | background: url(./images/mobile_intro_bg.png); 75 | padding: 12px; 76 | top: 0; 77 | left: 0; 78 | width: 100%; 79 | height: 100vh; 80 | margin: 0; 81 | } 82 | 83 | .second-list li:first-child { 84 | margin-bottom: 30px; 85 | } 86 | 87 | .second-list a { 88 | font-size: 30px; 89 | } 90 | 91 | .logo { 92 | display: none; 93 | } 94 | 95 | #about-link { 96 | color: red; 97 | } 98 | 99 | /* Main Section */ 100 | .main-container { 101 | background-image: url("./images/mobile_intro_bg.png"); 102 | background-repeat: no-repeat; 103 | background-size: cover; 104 | padding: 20px 25px; 105 | padding-top: 70px; 106 | } 107 | 108 | .main-heading { 109 | color: #ec5242; 110 | text-align: left; 111 | margin-bottom: 10px; 112 | font-family: 'Montserrat', sans-serif; 113 | } 114 | 115 | .main-sec-heading { 116 | color: #ec5242; 117 | background: url(./images/tools-for-motivation-KvTOwKoji7g-unsplash.jpg); 118 | -webkit-background-clip: text; 119 | -webkit-text-fill-color: transparent; 120 | font-size: 30px; 121 | font-family: 'Lato', sans-serif; 122 | } 123 | 124 | .main-sec-heading-about { 125 | color: #ec5242; 126 | font-size: 30px; 127 | font-weight: 900; 128 | text-align: center; 129 | margin: 0 auto; 130 | } 131 | 132 | .main-par { 133 | color: #4e4e50; 134 | border: 4px solid #ffff; 135 | background-color: #f8f5f5; 136 | width: 80%; 137 | padding: 10px; 138 | } 139 | 140 | .bold { 141 | color: #272a31; 142 | font-weight: bolder; 143 | font-size: 30px; 144 | margin-top: 14px; 145 | } 146 | 147 | .bottom-text { 148 | color: #272a31; 149 | font-family: 'Lato', sans-serif; 150 | } 151 | 152 | @media (min-width: 768px) { 153 | .menu { 154 | width: 0; 155 | height: 0; 156 | color: white; 157 | visibility: hidden; 158 | } 159 | 160 | .main-container { 161 | background-image: url("./images/main_big.png"); 162 | background-repeat: no-repeat; 163 | background-size: cover; 164 | padding: 60px 10%; 165 | } 166 | 167 | .upper-nav { 168 | display: flex; 169 | flex-direction: column; 170 | justify-content: flex-end; 171 | background-color: #272a31; 172 | } 173 | 174 | .upper-ul { 175 | display: flex; 176 | justify-content: end; 177 | list-style: none; 178 | padding: 10px 10%; 179 | } 180 | 181 | .upper-ul a { 182 | color: white; 183 | text-decoration: none; 184 | margin: 0 10px; 185 | font-size: small; 186 | } 187 | 188 | #close-btn { 189 | display: none; 190 | } 191 | 192 | .burger { 193 | height: 50px; 194 | width: 50px; 195 | border: 1px solid red; 196 | } 197 | 198 | .sec-navbar { 199 | display: flex; 200 | justify-content: space-between; 201 | border-bottom: 1px solid #d3d3d3; 202 | box-shadow: none; 203 | height: 60px; 204 | padding: 0 10%; 205 | gap: 11rem; 206 | } 207 | 208 | .second-list { 209 | display: flex; 210 | justify-content: space-between; 211 | background: white; 212 | position: static; 213 | flex-direction: row; 214 | align-items: center; 215 | height: auto; 216 | color: #272930; 217 | } 218 | 219 | .second-list li { 220 | padding: 5px 10px; 221 | } 222 | 223 | .second-list a { 224 | margin: 0 5px; 225 | font-size: medium; 226 | } 227 | 228 | .logo { 229 | padding: 4px; 230 | display: block; 231 | } 232 | 233 | .button { 234 | border: 3px solid #ec5242; 235 | padding: 5px 10px; 236 | color: #ec5242; 237 | } 238 | 239 | .main-heading { 240 | color: #ec5242; 241 | font-family: 'Montserrat', sans-serif; 242 | } 243 | 244 | .main-sec-heading { 245 | font-size: 4rem; 246 | font-weight: 700; 247 | width: 50%; 248 | font-family: 'Montserrat', sans-serif; 249 | } 250 | 251 | .main-par { 252 | margin-bottom: 60px; 253 | } 254 | 255 | .bold { 256 | font-family: 'Montserrat', sans-serif; 257 | color: #272a31; 258 | font-weight: 700; 259 | font-size: 30px; 260 | } 261 | } 262 | 263 | /* Program Section */ 264 | .main-program { 265 | color: white; 266 | background-image: url('./images/pattern_bg.png'); 267 | background-repeat: repeat; 268 | background-color: #272930; 269 | text-align: center; 270 | padding: 3%; 271 | } 272 | 273 | .program-title { 274 | gap: 1em; 275 | padding: 2em; 276 | flex-direction: column; 277 | } 278 | 279 | .main-section-h1 { 280 | text-align: center; 281 | margin-bottom: 10px; 282 | color: white; 283 | } 284 | 285 | .orange-underline { 286 | width: 70px; 287 | margin: 0 auto; 288 | border-bottom: 2px solid #ec5242; 289 | } 290 | 291 | .program-categories { 292 | display: grid; 293 | gap: 1em; 294 | justify-items: center; 295 | } 296 | 297 | .program-categories-details { 298 | gap: 1em; 299 | min-width: 100%; 300 | padding: 0.75em; 301 | font-size: 0.75em; 302 | background-color: #f7f7f71a; 303 | color: white; 304 | } 305 | 306 | .program-categories-details span { 307 | font-size: 1.4em; 308 | color: #ec5242; 309 | text-align: start; 310 | flex: 1.7 0 0; 311 | margin-left: 1em; 312 | } 313 | 314 | .program-categories-details p { 315 | text-align: start; 316 | line-height: 1.5em; 317 | flex: 2 0 0; 318 | color: #fff; 319 | } 320 | 321 | .btn-program { 322 | background-color: #ec5242; 323 | color: white; 324 | font-size: 01em; 325 | width: 80%; 326 | height: 5em; 327 | margin-block: 2em; 328 | } 329 | 330 | .btn-mobile-program { 331 | display: none; 332 | } 333 | 334 | .program-categories-details:hover { 335 | border: 1px solid white; 336 | } 337 | 338 | @media screen and (min-width: 768px) { 339 | .main-section-h1 { 340 | text-align: center; 341 | margin-bottom: 10px; 342 | color: white; 343 | } 344 | 345 | .orange-underline { 346 | margin-bottom: 20px; 347 | } 348 | 349 | .program-categories { 350 | display: grid; 351 | grid-template-columns: repeat(5, 1fr); 352 | font-size: 1.3em; 353 | min-height: 100%; 354 | gap: 0.3em; 355 | justify-items: center; 356 | margin: 10px 5%; 357 | margin-bottom: 50px; 358 | } 359 | 360 | .program-categories-details { 361 | align-items: center; 362 | justify-content: center; 363 | align-content: center; 364 | flex-direction: column; 365 | max-width: 1px; 366 | min-height: 100%; 367 | } 368 | 369 | .program-categories-details p { 370 | text-align: center; 371 | } 372 | 373 | .program-categories-details span { 374 | flex: 0; 375 | text-align: center; 376 | margin-left: 0; 377 | } 378 | 379 | .btn-program { 380 | display: none; 381 | } 382 | 383 | .btn-mobile-program { 384 | display: block; 385 | color: white; 386 | text-decoration: underline; 387 | } 388 | 389 | .program-container { 390 | display: flex; 391 | flex-direction: column; 392 | gap: 2em; 393 | padding-block: 3.5em; 394 | } 395 | } 396 | 397 | /* SPEAKER */ 398 | 399 | .speaker { 400 | background: #fff; 401 | margin: 60px auto; 402 | text-align: center; 403 | } 404 | 405 | .speaker-container { 406 | margin: 40px 10px; 407 | } 408 | 409 | .speaker .main-section-h1 { 410 | color: #1d1d1d; 411 | } 412 | 413 | .speaker-list { 414 | margin: 40px auto; 415 | width: 300px; 416 | height: auto; 417 | display: flex; 418 | justify-content: center; 419 | align-items: center; 420 | } 421 | 422 | .speaker-content { 423 | display: flex; 424 | flex-direction: column; 425 | text-align: left; 426 | } 427 | 428 | .speaker-img { 429 | width: 80px; 430 | height: 80px; 431 | margin-right: 15px; 432 | box-shadow: -10px -10px 5px -3px rgba(0, 0, 0, 0.28); 433 | } 434 | 435 | .speaker-header { 436 | font-family: var(--font-roboto); 437 | color: #1d1d1d; 438 | font-size: 1rem; 439 | font-weight: bold; 440 | } 441 | 442 | .speaker-profession { 443 | color: #ec5242; 444 | font-size: 11px; 445 | margin: 5px 0 5px 0; 446 | font-style: italic; 447 | } 448 | 449 | .speaker-line { 450 | width: 25px; 451 | border: none; 452 | border-bottom: 1px solid #d3d3d3; 453 | margin: 5px 0; 454 | } 455 | 456 | .speaker-description { 457 | font-size: 1rem; 458 | font-weight: 300; 459 | } 460 | 461 | .more-btn { 462 | display: flex; 463 | justify-content: center; 464 | align-items: center; 465 | width: 90%; 466 | gap: 10px; 467 | margin: 0 auto !important; 468 | background-color: #fff; 469 | border: 2px solid #d3d3d3; 470 | padding: 20px 40px; 471 | cursor: pointer; 472 | } 473 | 474 | @media screen and (min-width: 768px) { 475 | /* SPEAKER */ 476 | 477 | .speaker { 478 | margin: 2% 0; 479 | } 480 | 481 | .speaker-container { 482 | display: grid; 483 | grid-template-columns: 1fr 1fr; 484 | align-items: center; 485 | } 486 | 487 | .speaker-list { 488 | width: 300px; 489 | height: auto; 490 | display: flex; 491 | justify-content: center; 492 | align-items: center; 493 | } 494 | 495 | .speaker-content { 496 | display: flex; 497 | flex-direction: column; 498 | text-align: left; 499 | } 500 | 501 | .speaker-img { 502 | width: 100px; 503 | height: 100px; 504 | margin-right: 20px; 505 | } 506 | 507 | .speaker-header { 508 | font-size: 1.2rem; 509 | } 510 | 511 | .speaker-description { 512 | font-size: 0.9rem; 513 | } 514 | 515 | .speaker-profession { 516 | font-size: 1rem; 517 | } 518 | 519 | .speaker-line { 520 | border-bottom: 2px solid #1d1d1d; 521 | } 522 | } 523 | 524 | @media screen and (min-width: 920px) { 525 | /* SPEAKER */ 526 | .speaker-list { 527 | width: 500px; 528 | } 529 | } 530 | 531 | /* partner and footer home page */ 532 | .hidden { 533 | display: none; 534 | } 535 | 536 | .partner { 537 | text-align: center; 538 | background-color: #272a31; 539 | padding: 40px 10px; 540 | } 541 | 542 | .partner-header { 543 | margin-bottom: 5px; 544 | color: white; 545 | } 546 | 547 | .bottom-logos { 548 | display: flex; 549 | justify-content: center; 550 | flex-wrap: wrap; 551 | padding: 15px 10%; 552 | } 553 | 554 | .bottom-logos img { 555 | height: 40px; 556 | object-fit: contain; 557 | mix-blend-mode: color-burn; 558 | margin: 15px; 559 | filter: grayscale(100%); 560 | } 561 | 562 | /* Footer Section */ 563 | .footer { 564 | justify-content: space-between; 565 | align-items: center; 566 | padding: 20px 20px; 567 | } 568 | 569 | .footer img { 570 | height: 80px; 571 | } 572 | 573 | .footer-text { 574 | display: flex; 575 | flex-direction: column; 576 | } 577 | 578 | @media screen and (min-width: 768px) { 579 | .partner { 580 | display: block; 581 | text-align: center; 582 | padding: 40px 10px; 583 | } 584 | 585 | .partner-header { 586 | margin-bottom: 5px; 587 | color: white; 588 | } 589 | 590 | .bottom-logos { 591 | flex-direction: row; 592 | justify-content: center; 593 | padding: 10px 20px; 594 | width: auto; 595 | } 596 | 597 | .bottom-logos img { 598 | height: 50px; 599 | margin: 0 30px; 600 | } 601 | 602 | .footer { 603 | display: flex; 604 | justify-content: space-between; 605 | padding: 40px 20%; 606 | align-items: center; 607 | gap: 23px; 608 | } 609 | 610 | .footer img { 611 | height: 3rem; 612 | } 613 | 614 | .footer-about { 615 | margin-top: 10px; 616 | } 617 | 618 | .footer-text { 619 | display: flex; 620 | flex-direction: column; 621 | font-size: 11px; 622 | } 623 | } 624 | 625 | /* =====================================About page=============================================== */ 626 | 627 | .about-container { 628 | background-color: #f7f7f7; 629 | } 630 | 631 | .top-h1-about { 632 | color: #ec5242; 633 | font-size: 20px; 634 | margin-bottom: 10px; 635 | } 636 | 637 | .main-par-about { 638 | color: #272a31; 639 | font-size: 16px; 640 | text-align: center; 641 | background-color: white; 642 | padding: 20px; 643 | margin: 10px 20px; 644 | } 645 | 646 | /* Partner Section */ 647 | 648 | .email-id { 649 | margin-top: 10px; 650 | text-decoration: underline; 651 | font-weight: bold; 652 | } 653 | 654 | .past-projects { 655 | display: flex; 656 | flex-direction: column; 657 | justify-content: center; 658 | align-items: center; 659 | } 660 | 661 | .project { 662 | display: flex; 663 | flex-direction: column; 664 | margin: 20px auto; 665 | height: 150px; 666 | width: 90%; 667 | background-repeat: no-repeat; 668 | background-size: cover; 669 | } 670 | 671 | .project-1 { 672 | background-image: url("./images/about_2013.png"); 673 | } 674 | 675 | .project-2 { 676 | background-image: url("./images/about_2011.png"); 677 | } 678 | 679 | .center-about { 680 | text-align: center; 681 | } 682 | 683 | .about-h2 { 684 | text-align: center; 685 | margin: 10px 10px; 686 | } 687 | 688 | .about-par { 689 | text-align: center; 690 | margin: 10px 30px; 691 | } 692 | 693 | .section-2 { 694 | display: flex; 695 | flex-direction: column; 696 | justify-content: center; 697 | align-items: center; 698 | border-bottom: 1px solid rgb(223, 223, 223); 699 | margin-top: 20px; 700 | } 701 | 702 | .section-3 { 703 | display: flex; 704 | flex-direction: column; 705 | justify-content: center; 706 | margin-top: 20px; 707 | } 708 | 709 | .join-btn { 710 | width: 80%; 711 | } 712 | 713 | .about-logo { 714 | width: 90%; 715 | margin: 10px auto; 716 | } 717 | 718 | .about-footer { 719 | display: grid; 720 | grid-template-columns: 60% 40%; 721 | } 722 | 723 | .footer-image { 724 | background-image: url('./images/main-footer.png'); 725 | height: 75px; 726 | width: 156px; 727 | background-size: contain; 728 | background-repeat: no-repeat; 729 | background-position: center; 730 | } 731 | 732 | .footer-copyright { 733 | font-size: x-small; 734 | } 735 | 736 | .footer-about-text { 737 | display: none; 738 | } 739 | 740 | @media (min-width: 768px) { 741 | .about-container { 742 | background: url(./images/about_bg_01.png); 743 | } 744 | 745 | .top-h1-about { 746 | display: none; 747 | } 748 | 749 | .main-sec-heading-about { 750 | color: #ec5242; 751 | font-size: 4rem; 752 | text-align: center; 753 | font-weight: 700; 754 | width: 60%; 755 | margin: 0 auto; 756 | } 757 | 758 | .main-par-about { 759 | color: #272a31; 760 | width: 90%; 761 | text-align: center; 762 | padding: 20px; 763 | margin: 30px auto; 764 | background-color: white; 765 | border: 1px solid #d3d3d3; 766 | } 767 | 768 | .contact-us { 769 | color: #272a31; 770 | width: 70%; 771 | text-align: center; 772 | margin: 10px auto; 773 | } 774 | 775 | .email-id { 776 | color: #272a31; 777 | text-align: center; 778 | } 779 | 780 | .section-2 { 781 | color: white; 782 | text-align: center; 783 | margin-top: 60px; 784 | } 785 | 786 | .about-h2 { 787 | text-align: center; 788 | } 789 | 790 | .about-par { 791 | text-align: center; 792 | width: 59%; 793 | margin: 0 auto; 794 | padding-top: 30px; 795 | font-size: 0.875em; 796 | line-height: 24px; 797 | } 798 | 799 | .about-logo { 800 | width: 30%; 801 | overflow: clip; 802 | margin: 20px auto; 803 | } 804 | 805 | .section-3 { 806 | align-items: center; 807 | margin-top: 50px; 808 | } 809 | 810 | .past-projects { 811 | margin-top: 50px; 812 | margin-bottom: auto; 813 | display: flex; 814 | flex-direction: row; 815 | width: 90%; 816 | height: 46vh; 817 | gap: 20px; 818 | } 819 | 820 | .project { 821 | display: flex; 822 | justify-content: center; 823 | background-size: cover; 824 | height: 80%; 825 | } 826 | 827 | .about-partner { 828 | display: none; 829 | } 830 | 831 | .about-footer { 832 | background-color: #272a31; 833 | display: flex; 834 | } 835 | 836 | .footer-image { 837 | background-image: url('./images/logo_cck_w_208x35.png'); 838 | width: 233px; 839 | } 840 | 841 | .white-font { 842 | color: white; 843 | } 844 | 845 | .footer-about-text { 846 | display: block; 847 | } 848 | 849 | .more-btn { 850 | display: none; 851 | } 852 | } 853 | --------------------------------------------------------------------------------