├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── .vscode └── settings.json ├── Images ├── Menu.png ├── about │ ├── about-card-background1.jpg │ └── about-card-background2.jpg ├── background.jpg ├── banner.mp4 ├── banner_Moment.jpg ├── favicon.ico ├── icons │ ├── close.png │ ├── exhibition.png │ ├── facebook.png │ ├── forum.png │ ├── ignite.png │ ├── lecture.png │ ├── twitter.png │ └── workshop.png ├── logo-about.PNG ├── logo-large.PNG ├── logo.png ├── partners │ ├── airbnb.png │ ├── daumkakao.png │ ├── google.png │ ├── mozilla.png │ └── naver.png ├── pattern.png ├── speaker.rar ├── speaker │ ├── speaker1.png │ ├── speaker2.png │ ├── speaker3.png │ ├── speaker4.png │ ├── speaker5.png │ └── speaker6.png └── text-background.jpg ├── LICENSE ├── README.md ├── about.html ├── css ├── desktop.css └── mobile.css ├── index.html ├── package-lock.json ├── package.json └── scripts ├── menu.js └── speakers.js /.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 | } 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@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 71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "tailwind", 11 | "apply", 12 | "variants", 13 | "responsive", 14 | "screen" 15 | ] 16 | } 17 | ] 18 | }, 19 | "csstree/validator": true, 20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 21 | } 22 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /Images/Menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/Menu.png -------------------------------------------------------------------------------- /Images/about/about-card-background1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/about/about-card-background1.jpg -------------------------------------------------------------------------------- /Images/about/about-card-background2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/about/about-card-background2.jpg -------------------------------------------------------------------------------- /Images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/background.jpg -------------------------------------------------------------------------------- /Images/banner.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/banner.mp4 -------------------------------------------------------------------------------- /Images/banner_Moment.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/banner_Moment.jpg -------------------------------------------------------------------------------- /Images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/favicon.ico -------------------------------------------------------------------------------- /Images/icons/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/icons/close.png -------------------------------------------------------------------------------- /Images/icons/exhibition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/icons/exhibition.png -------------------------------------------------------------------------------- /Images/icons/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/icons/facebook.png -------------------------------------------------------------------------------- /Images/icons/forum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/icons/forum.png -------------------------------------------------------------------------------- /Images/icons/ignite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/icons/ignite.png -------------------------------------------------------------------------------- /Images/icons/lecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/icons/lecture.png -------------------------------------------------------------------------------- /Images/icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/icons/twitter.png -------------------------------------------------------------------------------- /Images/icons/workshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/icons/workshop.png -------------------------------------------------------------------------------- /Images/logo-about.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/logo-about.PNG -------------------------------------------------------------------------------- /Images/logo-large.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/logo-large.PNG -------------------------------------------------------------------------------- /Images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/logo.png -------------------------------------------------------------------------------- /Images/partners/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/partners/airbnb.png -------------------------------------------------------------------------------- /Images/partners/daumkakao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/partners/daumkakao.png -------------------------------------------------------------------------------- /Images/partners/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/partners/google.png -------------------------------------------------------------------------------- /Images/partners/mozilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/partners/mozilla.png -------------------------------------------------------------------------------- /Images/partners/naver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/partners/naver.png -------------------------------------------------------------------------------- /Images/pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/pattern.png -------------------------------------------------------------------------------- /Images/speaker.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/speaker.rar -------------------------------------------------------------------------------- /Images/speaker/speaker1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/speaker/speaker1.png -------------------------------------------------------------------------------- /Images/speaker/speaker2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/speaker/speaker2.png -------------------------------------------------------------------------------- /Images/speaker/speaker3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/speaker/speaker3.png -------------------------------------------------------------------------------- /Images/speaker/speaker4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/speaker/speaker4.png -------------------------------------------------------------------------------- /Images/speaker/speaker5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/speaker/speaker5.png -------------------------------------------------------------------------------- /Images/speaker/speaker6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/speaker/speaker6.png -------------------------------------------------------------------------------- /Images/text-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/Images/text-background.jpg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 kifle Haile 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kifle23/software-dev-summit/4743cd411531f5fa5cb3f2272ff9dd8d01577804/README.md -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | MInT ICT Expo- Software Development Summit 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 27 | 37 | 48 |
49 | 70 |
71 |

Software Development Summit

72 |
73 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero earum, at officia molestias adipisci 74 | iure.

75 | 76 |
77 |
78 |

See past summits

79 |
80 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe, aspernatur!

81 |
82 |
83 | 2021 84 | Summit in Kenya 85 |
86 |
87 | 2022 88 | Summit in New York 89 |
90 |
91 |
92 | 93 |
94 |
95 |

Partner

96 | 103 |
104 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /css/desktop.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 768px) { 2 | .menu-button { 3 | display: none; 4 | } 5 | 6 | .top-header { 7 | display: flex; 8 | } 9 | 10 | .desktop-menu { 11 | display: flex; 12 | align-items: center; 13 | justify-content: space-around; 14 | background-color: #fff; 15 | } 16 | 17 | .desktop-menu .logo { 18 | width: 130px; 19 | height: 65px; 20 | background: url(../Images/logo.png) no-repeat center center; 21 | background-size: cover; 22 | } 23 | 24 | .desktop-menu ul { 25 | display: flex; 26 | align-items: center; 27 | list-style: none; 28 | gap: 2rem; 29 | } 30 | 31 | .desktop-menu a { 32 | text-decoration: none; 33 | color: #272a31; 34 | } 35 | 36 | .desktop-menu a:hover { 37 | color: #ec5242; 38 | } 39 | 40 | .desktop-menu button { 41 | background-color: #fff; 42 | border: 5px solid #ec5242; 43 | padding: 8px 20px; 44 | color: #ec5242; 45 | cursor: pointer; 46 | } 47 | 48 | .banner-page { 49 | padding: 2rem; 50 | align-items: flex-start; 51 | } 52 | 53 | #banner .brief-description-banner { 54 | width: 60%; 55 | max-width: 600px; 56 | } 57 | 58 | .main-container { 59 | gap: 3px; 60 | } 61 | 62 | .program { 63 | flex-direction: column; 64 | gap: 0.5rem; 65 | width: auto; 66 | } 67 | 68 | .program p { 69 | max-width: 160px; 70 | text-align: center; 71 | } 72 | 73 | #main button { 74 | display: none; 75 | } 76 | 77 | #main a { 78 | display: inline; 79 | } 80 | 81 | .speaker-info { 82 | max-width: 400px; 83 | } 84 | 85 | .speaker { 86 | font-size: 16px; 87 | } 88 | 89 | .load-more { 90 | display: none; 91 | } 92 | 93 | .partner-about { 94 | display: none; 95 | } 96 | 97 | .footer-about { 98 | background-color: #272a31; 99 | color: #fff; 100 | } 101 | 102 | .footer-about span { 103 | color: #fff; 104 | } 105 | 106 | .card-wrapper { 107 | flex-direction: row; 108 | } 109 | } 110 | 111 | @media screen and (min-width: 1024px) { 112 | #about { 113 | padding: 3rem 0 3rem 0; 114 | } 115 | 116 | .desktop-menu .logo { 117 | font-size: 1.5rem; 118 | } 119 | 120 | .desktop-menu ul { 121 | display: flex; 122 | align-items: center; 123 | list-style: none; 124 | gap: 3rem; 125 | } 126 | 127 | .banner-page { 128 | padding: 2.5rem 7rem 0 7rem; 129 | } 130 | 131 | #banner h2 { 132 | font-size: 2.3rem; 133 | } 134 | 135 | #banner h1 { 136 | font-size: 4.2rem; 137 | } 138 | 139 | .about-us { 140 | align-self: stretch; 141 | flex-direction: column; 142 | align-items: center; 143 | justify-content: center; 144 | display: flex; 145 | gap: 2.5rem; 146 | } 147 | } 148 | 149 | @media screen and (max-width: 320px) { 150 | .section-headline { 151 | text-align: center; 152 | } 153 | 154 | .program i { 155 | width: 35px; 156 | height: 35px; 157 | } 158 | 159 | .program h3 { 160 | font-size: 1rem; 161 | } 162 | 163 | .program p { 164 | font-size: 12px; 165 | } 166 | 167 | .banner h1 { 168 | font-weight: 900; 169 | font-size: 1.5rem; 170 | } 171 | 172 | #banner h1, 173 | h2 { 174 | color: #ec5242; 175 | font-weight: 400; 176 | } 177 | 178 | #banner h1 { 179 | font-weight: 900; 180 | font-size: 1.5rem; 181 | } 182 | 183 | .brief-description-banner { 184 | padding: 0; 185 | border-radius: 1rem; 186 | font-weight: 300; 187 | font-size: 1rem; 188 | } 189 | 190 | .banner-page { 191 | padding: 0; 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /css/mobile.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Lato', sans-serif; 6 | } 7 | 8 | .top-header { 9 | display: none; 10 | justify-content: flex-end; 11 | align-items: center; 12 | background-color: #272a31; 13 | padding: 10px 160px; 14 | } 15 | 16 | .top-header ul { 17 | display: flex; 18 | align-items: center; 19 | list-style: none; 20 | gap: 5px; 21 | } 22 | 23 | .top-header ul .f-icon { 24 | background: url(../Images/icons/facebook.png) no-repeat center center; 25 | background-size: 17px; 26 | filter: invert(1); 27 | } 28 | 29 | .top-header ul .t-icon { 30 | background: url(../Images/icons/twitter.png) no-repeat center center; 31 | background-size: 17px; 32 | filter: invert(1); 33 | } 34 | 35 | .top-header a { 36 | text-decoration: none; 37 | color: #f8f8f8; 38 | padding: 10px; 39 | } 40 | 41 | .desktop-menu { 42 | display: none; 43 | } 44 | 45 | .banner-page { 46 | display: flex; 47 | flex-direction: column; 48 | gap: 2rem; 49 | margin: 0 2rem; 50 | } 51 | 52 | .mobile-menu { 53 | position: fixed; 54 | width: 100%; 55 | height: 100%; 56 | background-color: #272a31; 57 | z-index: 2; 58 | display: none; 59 | } 60 | 61 | .mobile-menu ul { 62 | list-style: none; 63 | display: flex; 64 | flex-flow: column nowrap; 65 | align-items: center; 66 | gap: 1rem; 67 | padding: 3rem; 68 | } 69 | 70 | .mobile-menu a { 71 | text-decoration: none; 72 | color: #ec5242; 73 | font-size: 2rem; 74 | font-weight: 900; 75 | } 76 | 77 | .mobile-menu ul li { 78 | border-bottom: 1px solid #6f6c6b; 79 | width: 50%; 80 | } 81 | 82 | .mobile-menu ul li a:hover { 83 | color: #272a31; 84 | transition: all 0.3s; 85 | } 86 | 87 | #banner { 88 | padding-bottom: 5rem; 89 | height: 82vh; 90 | } 91 | 92 | #background-video { 93 | width: 100%; 94 | height: 100vh; 95 | object-fit: cover; 96 | position: absolute; 97 | left: 0; 98 | right: 0; 99 | top: 0; 100 | bottom: 0; 101 | z-index: -1; 102 | } 103 | 104 | .menu-button { 105 | margin: 1rem 0; 106 | background: url(../Images/Menu.png) no-repeat center/cover; 107 | height: 40px; 108 | width: 40px; 109 | z-index: 2; 110 | } 111 | 112 | .close-icon { 113 | background: url(../Images/icons/close.png) no-repeat center/cover; 114 | width: 20px; 115 | height: 20px; 116 | z-index: 3; 117 | } 118 | 119 | .position-fixed { 120 | position: fixed; 121 | } 122 | 123 | .show { 124 | display: block; 125 | } 126 | 127 | .program i { 128 | width: 55px; 129 | height: 55px; 130 | filter: brightness(5); 131 | flex-shrink: 0; 132 | } 133 | 134 | section h1 { 135 | text-align: center; 136 | } 137 | 138 | .banner h1 { 139 | text-align: left; 140 | font-weight: 900; 141 | font-size: 3rem; 142 | background-image: url(../Images/text-background.jpg); 143 | background-clip: inherit; 144 | -webkit-background-clip: text; 145 | -webkit-text-fill-color: transparent; 146 | background-position: center; 147 | filter: brightness(1.3); 148 | } 149 | 150 | #banner h1, 151 | h2 { 152 | color: #ec5242; 153 | font-weight: 400; 154 | } 155 | 156 | .align-center { 157 | text-align: center; 158 | font-weight: 900; 159 | font-size: 3rem; 160 | color: #ec5242; 161 | } 162 | 163 | .brief-description-banner { 164 | background-color: #d3d3d3; 165 | border: 4px solid #d3d3d3; 166 | color: #272a31; 167 | padding: 1rem; 168 | border-radius: 0.5rem; 169 | font-weight: 600; 170 | font-size: 1rem; 171 | } 172 | 173 | .date-location h2 { 174 | font-family: 'Lato', sans-serif; 175 | font-size: 1.5rem; 176 | color: #d3d3d3; 177 | } 178 | 179 | .date-location p { 180 | font-size: 1rem; 181 | color: #d3d3d3; 182 | } 183 | 184 | /* Main Program */ 185 | #main { 186 | background-color: #282b34; 187 | background-image: url(../Images/pattern.png); 188 | padding: 50px 0; 189 | display: flex; 190 | flex-direction: column; 191 | align-items: center; 192 | gap: 1.5rem; 193 | } 194 | 195 | #main h2 { 196 | color: #fff; 197 | font-weight: 400; 198 | } 199 | 200 | .section-headline::after { 201 | content: ""; 202 | display: block; 203 | background-color: #ec5242; 204 | height: 1px; 205 | width: 50px; 206 | margin: 1rem auto; 207 | } 208 | 209 | .main-container { 210 | display: flex; 211 | justify-content: center; 212 | gap: 1rem; 213 | flex-wrap: wrap; 214 | } 215 | 216 | .program { 217 | display: flex; 218 | align-items: center; 219 | gap: 2.5rem; 220 | background-color: rgba(255, 255, 255, 0.13); 221 | border: 2px solid transparent; 222 | width: 90%; 223 | max-width: 530px; 224 | transition: all 0.3s; 225 | } 226 | 227 | .program:hover { 228 | border: 2px solid #fff; 229 | transform: scale(1.08); 230 | } 231 | 232 | .i-lecture { 233 | background: url(../Images/icons/lecture.png) no-repeat center center/cover; 234 | } 235 | 236 | .i-exhibition { 237 | background: url(../Images/icons/exhibition.png) no-repeat center center/cover; 238 | } 239 | 240 | .i-forum { 241 | background: url(../Images/icons/forum.png) no-repeat center center/cover; 242 | } 243 | 244 | .i-workshop { 245 | background: url(../Images/icons/workshop.png) no-repeat center center/cover; 246 | } 247 | 248 | .i-ignite { 249 | background: url(../Images/icons/ignite.png) no-repeat center center/cover; 250 | } 251 | 252 | .program p { 253 | color: #fff; 254 | line-height: 1.6rem; 255 | } 256 | 257 | .program h3 { 258 | color: #ec5242; 259 | font-weight: 600; 260 | font-size: 1.5rem; 261 | } 262 | 263 | #main button { 264 | margin-top: 1.5rem; 265 | background-color: #ff4f38; 266 | color: #fff; 267 | border: none; 268 | font-size: 1.5rem; 269 | padding: 2.1rem 5rem; 270 | align-self: center; 271 | } 272 | 273 | #main a { 274 | color: #fff; 275 | display: none; 276 | margin: 3rem 0; 277 | } 278 | 279 | /* Featured Speakers */ 280 | 281 | #featured-speakers h2 { 282 | margin-top: 2rem; 283 | text-align: center; 284 | } 285 | 286 | .speakers-container { 287 | margin: 4rem 1.5rem; 288 | display: flex; 289 | justify-content: center; 290 | flex-wrap: wrap; 291 | gap: 2.5rem; 292 | } 293 | 294 | .speaker { 295 | display: flex; 296 | gap: 24px; 297 | font-size: 12px; 298 | } 299 | 300 | .speaker img { 301 | width: 140px; 302 | height: 140px; 303 | } 304 | 305 | .about-us p { 306 | width: 70%; 307 | text-align: center; 308 | padding: 0.5rem 0; 309 | } 310 | 311 | .contact-us p { 312 | color: #d3d3d3; 313 | font-weight: 800; 314 | font-size: 1.5rem; 315 | } 316 | 317 | .speaker-info { 318 | max-width: 450px; 319 | display: flex; 320 | flex-direction: column; 321 | gap: 12px; 322 | } 323 | 324 | .speaker-info p:nth-child(2) { 325 | color: #ec5242; 326 | font-style: italic; 327 | } 328 | 329 | .speaker-info p:nth-child(2)::after { 330 | content: ""; 331 | display: block; 332 | background-color: #d3d3d3; 333 | height: 2px; 334 | width: 20px; 335 | margin: 1rem 0; 336 | } 337 | 338 | .load-more { 339 | width: 80%; 340 | height: 40px; 341 | background: #fff; 342 | border: 1px #d4d4d4 solid; 343 | margin: 30px 40px 30px 40px; 344 | } 345 | 346 | .show-loader { 347 | display: none; 348 | } 349 | 350 | /* About */ 351 | .about-page { 352 | display: flex; 353 | flex-direction: column; 354 | gap: 2rem; 355 | margin: 0 1.5rem; 356 | } 357 | 358 | .about-banner-content { 359 | display: flex; 360 | flex-direction: column; 361 | align-items: center; 362 | gap: 3rem; 363 | } 364 | 365 | .contact-us { 366 | text-align: center; 367 | } 368 | 369 | .contact-us span { 370 | font-size: 1.2rem; 371 | font-weight: 400; 372 | color: #d3d3d3; 373 | text-decoration: underline; 374 | } 375 | 376 | /* Main Program */ 377 | 378 | #about { 379 | padding-top: 10rem; 380 | padding-bottom: 50px; 381 | display: flex; 382 | flex-direction: column; 383 | align-items: center; 384 | gap: 1.5rem; 385 | } 386 | 387 | #about h2 { 388 | color: #36383d; 389 | font-weight: 900; 390 | } 391 | 392 | #about hr { 393 | width: 100%; 394 | opacity: 50%; 395 | } 396 | 397 | .about-us { 398 | display: flex; 399 | flex-direction: column; 400 | align-items: center; 401 | margin: 0 1rem; 402 | gap: 2rem; 403 | } 404 | 405 | .about-logo { 406 | max-width: 450px; 407 | width: 80%; 408 | height: 130px; 409 | } 410 | 411 | .card-wrapper { 412 | align-self: stretch; 413 | flex-direction: column; 414 | align-items: center; 415 | justify-content: center; 416 | display: flex; 417 | gap: 1rem; 418 | } 419 | 420 | .summit1 { 421 | background: linear-gradient(#d42000af, #bd22079a), url(../Images/about/about-card-background1.jpg) no-repeat center center; 422 | } 423 | 424 | .summit2 { 425 | background: linear-gradient(#d42000af, #bd22079a), url(../Images/about/about-card-background2.jpg) no-repeat center center; 426 | } 427 | 428 | .previous-summit { 429 | display: flex; 430 | flex-direction: column; 431 | justify-content: center; 432 | align-items: center; 433 | max-width: 415px; 434 | width: 80%; 435 | height: 230px; 436 | background-size: 415px; 437 | } 438 | 439 | .previous-summit span:nth-child(1) { 440 | font-family: 'oswald', sans-serif; 441 | color: #fff; 442 | font-size: 3rem; 443 | font-weight: 600; 444 | } 445 | 446 | .previous-summit span:nth-child(2) { 447 | color: #fff; 448 | font-size: 1.1rem; 449 | } 450 | 451 | /* Partner */ 452 | 453 | #partner { 454 | padding: 2rem 0; 455 | background-color: #414246; 456 | } 457 | 458 | #partner h2 { 459 | color: #fff; 460 | text-align: center; 461 | } 462 | 463 | #partner ul { 464 | margin: 2rem; 465 | list-style: none; 466 | display: flex; 467 | flex-wrap: wrap; 468 | justify-content: center; 469 | gap: 2rem; 470 | } 471 | 472 | .mozilla { 473 | background: url(../Images/partners/mozilla.png) no-repeat center center; 474 | filter: invert(100%); 475 | background-size: 125px; 476 | } 477 | 478 | .google { 479 | background: url(../Images/partners/google.png) no-repeat center center; 480 | background-size: 110px; 481 | } 482 | 483 | .naver { 484 | background: url(../Images/partners/naver.png) no-repeat center center; 485 | } 486 | 487 | .daumkakao { 488 | background: url(../Images/partners/daumkakao.png) no-repeat center center; 489 | } 490 | 491 | .airbnb { 492 | background: url(../Images/partners/airbnb.png) no-repeat center center; 493 | } 494 | 495 | #partner ul li { 496 | width: 150px; 497 | height: 45px; 498 | background-size: 125px; 499 | filter: invert(50%); 500 | } 501 | 502 | /* Footer */ 503 | 504 | footer { 505 | display: flex; 506 | justify-content: space-around; 507 | padding: 2rem; 508 | } 509 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | MInT ICT Expo- Software Development Summit 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 28 | 38 | 49 |
50 | 69 |
70 |

Main Program

71 |
72 |
73 | 74 |

Lecture

75 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum reprehenderit.

76 |
77 |
78 | 79 |

Exhibition

80 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum reprehenderit.

81 |
82 |
83 | 84 |

Forum

85 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum reprehenderit.

86 |
87 |
88 | 89 |

Workshop

90 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum reprehenderit.

91 |
92 |
93 | 94 |

Lecture

95 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum reprehenderit.

96 |
97 |
98 | 99 | SEE THE WHOLE PROGRAM 100 |
101 | 107 |
108 |

Partner

109 | 116 |
117 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "babel-eslint": "^10.1.0", 4 | "eslint": "^7.32.0", 5 | "eslint-config-airbnb-base": "^14.2.1", 6 | "eslint-plugin-import": "^2.27.5", 7 | "hint": "^7.1.5", 8 | "stylelint": "^13.13.1", 9 | "stylelint-config-standard": "^21.0.0", 10 | "stylelint-csstree-validator": "^1.9.0", 11 | "stylelint-scss": "^3.21.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scripts/menu.js: -------------------------------------------------------------------------------- 1 | document.querySelector('.menu-button').addEventListener('click', () => { 2 | document.querySelector('.mobile-menu').classList.toggle('show'); 3 | document.querySelector('.menu-button').classList.toggle('close-icon'); 4 | }); 5 | 6 | const navItems = document.querySelectorAll('.mobile-menu li a'); 7 | 8 | navItems.forEach((item) => { 9 | item.addEventListener('click', () => { 10 | document.querySelector('.mobile-menu').classList.toggle('show'); 11 | document.querySelector('.menu-button').classList.toggle('close-icon'); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /scripts/speakers.js: -------------------------------------------------------------------------------- 1 | const speakerArr = [ 2 | { 3 | name: 'Yochai Benkler', 4 | description: 5 | 'Benkler studies Software Engineering and Software Architecture, and published the best seller book Software Architecture Principles and Practices in 2018.', 6 | title: 7 | 'Benkler Professor of Software Engineering at Massachusetts Institute of Technology', 8 | picture: 'Images/speaker/speaker1.png', 9 | alt: 'A picture of Yochai Benkler', 10 | }, 11 | { 12 | name: 'SohYeong Noh', 13 | description: 14 | 'Noh studies Software Engineering and Software Architecture, and published the best seller book Software Architecture Principles and Practices in 2018.', 15 | title: 16 | 'Noh Professor of Software Engineering at Massachusetts Institute of Technology', 17 | picture: 'Images/speaker/speaker2.png', 18 | alt: 'A picture of SohYeong Noh', 19 | }, 20 | { 21 | name: 'Julia Leda', 22 | description: 23 | 'Leda studies Software Engineering and Software Architecture, and published the best seller book Software Architecture Principles and Practices in 2018.', 24 | title: 25 | 'Leda Professor of Software Engineering at Massachusetts Institute of Technology', 26 | picture: 'Images/speaker/speaker3.png', 27 | alt: 'A picture of Julia Leda', 28 | }, 29 | { 30 | name: 'Lila tretikov', 31 | description: 32 | 'Tretikov studies Software Engineering and Software Architecture, and published the best seller book Software Architecture Principles and Practices in 2018.', 33 | title: 34 | 'Tretikov Professor of Software Engineering at Massachusetts Institute of Technology', 35 | picture: 'Images/speaker/speaker4.png', 36 | alt: 'A picture of Lila tretikov', 37 | }, 38 | { 39 | name: 'Ryan Merkley', 40 | description: 41 | 'Merkley studies Software Engineering and Software Architecture, and published the best seller book Software Architecture Principles and Practices in 2018.', 42 | title: 43 | 'Merkley Professor of Software Engineering at Massachusetts Institute of Technology', 44 | picture: 'Images/speaker/speaker5.png', 45 | alt: 'A picture of Ryan Merkley', 46 | }, 47 | { 48 | name: 'Karl Miguel', 49 | description: 50 | 'Miguel studies Software Engineering and Software Architecture, and published the best seller book Software Architecture Principles and Practices in 2018.', 51 | title: 52 | 'Miguel Professor of Software Engineering at Massachusetts Institute of Technology', 53 | picture: 'Images/speaker/speaker6.png', 54 | alt: 'A picture of Karl Miguel', 55 | }, 56 | ]; 57 | function isFullyVisible(element) { 58 | return element.display !== 'none'; 59 | } 60 | function appendSpeaker(i) { 61 | const speakerWrapper = document.createElement('div'); 62 | const speakerImage = document.createElement('img'); 63 | speakerImage.setAttribute('alt', `${speakerArr[i].alt}`); 64 | speakerImage.setAttribute('src', `${speakerArr[i].picture}`); 65 | const speakerInfoWrapper = document.createElement('div'); 66 | const speakerName = document.createElement('h3'); 67 | speakerName.textContent = `${speakerArr[i].name}`; 68 | const speakerTitle = document.createElement('p'); 69 | speakerTitle.textContent = `${speakerArr[i].title}`; 70 | const speakerDescription = document.createElement('p'); 71 | speakerDescription.textContent = `${speakerArr[i].description}`; 72 | speakerWrapper.classList.add('speaker'); 73 | speakerInfoWrapper.classList.add('speaker-info'); 74 | speakerWrapper.appendChild(speakerImage); 75 | speakerInfoWrapper.appendChild(speakerName); 76 | speakerInfoWrapper.appendChild(speakerTitle); 77 | speakerInfoWrapper.appendChild(speakerDescription); 78 | speakerWrapper.appendChild(speakerInfoWrapper); 79 | document.querySelector('.speakers-container').appendChild(speakerWrapper); 80 | } 81 | const loadMore = document.querySelector('.load-more'); 82 | if (isFullyVisible(loadMore) && window.innerWidth <= 768) { 83 | for (let i = 0; i < 2; i += 1) { 84 | appendSpeaker(i); 85 | } 86 | loadMore.addEventListener('click', (e) => { 87 | e.target.classList.add('show-loader'); 88 | if (document.querySelector('.speakers-container')) { 89 | for (let i = 2; i < speakerArr.length; i += 1) { 90 | appendSpeaker(i); 91 | } 92 | } 93 | }); 94 | } else if (isFullyVisible(loadMore) && window.innerWidth > 768) { 95 | for (let i = 0; i < speakerArr.length; i += 1) { 96 | appendSpeaker(i); 97 | } 98 | } 99 | --------------------------------------------------------------------------------