├── .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 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
12th Software Development Summit 2023
58 |
59 |
Lorem Ipsum has been the industry's standard dummy text ever since
60 | the
61 | 1500s, when an unknown
62 | printer took a galley of type and scrambled it 1960s.
63 |
67 |
68 |
69 |
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 |
97 |
98 |
99 |
100 |
101 |
102 |
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 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
Welcome to the
58 | 12th Software Development Summit 2023
59 |
60 |
Lorem Ipsum has been the industry's standard dummy text ever since the
61 | 1500s, when an unknown
62 | printer took a galley of type and scrambled it 1960s.
63 |
64 |
2023.04.22(SAT) ~ 23(SUN)
65 |
@XPO, Ministry of Inovation & Technology-Ethiopia
66 |
67 |
68 |
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 | Join ICT Expo 2023
99 | SEE THE WHOLE PROGRAM
100 |
101 |
102 | Featured Speakers
103 |
104 |
105 | Load more
106 |
107 |
108 | Partner
109 |
110 |
111 |
112 |
113 |
114 |
115 |
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 |
--------------------------------------------------------------------------------