├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── MIT.md ├── README.md ├── about.html ├── css ├── main.css └── reset.css ├── fonts └── Cocogoose.otf ├── images ├── Icon-Cancel.svg ├── Lee-Ritenour-on-the-Yamaha-stage-at-Winter-NAMM-2018.jpg ├── OCR.jpg ├── airbnb.svg ├── download.png ├── fill-bg.png ├── iconmonstr-menu-1.svg ├── logo.svg ├── main-bg.png ├── main_big.png ├── mobile-bg.png ├── mobile_bg.png ├── mobile_intro_bg.png ├── namm-show-seeklogo.com.svg ├── namm19vsavovv.0.jpg ├── orange.jpeg ├── partners │ ├── airbnb.svg │ ├── google.svg │ ├── image2vector.svg │ ├── naver.svg │ └── tokopedia.png ├── screenshot │ ├── desktop.png │ └── mobile.png └── speakers │ ├── Jerohn funk 02.jpg │ ├── changeImage │ ├── airbnb.png │ ├── googlekorea.png │ ├── kakao.png │ ├── mozilla.png │ └── naver.png │ ├── speaker1.jpeg │ ├── speaker2.jpeg │ ├── speaker3.jpeg │ ├── speaker4.jpeg │ ├── speaker5.jpeg │ └── speaker6.jpeg ├── index.html └── main.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-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.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 --telemetry=off . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-18.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | -------------------------------------------------------------------------------- /.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": true, 7 | "csstree/validator": true 8 | }, 9 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 10 | } 11 | -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2021, [YOUR NAME] 2 | 3 | ###### Please delete this line and the next one 4 | ###### APP TYPE can be a webpage/website, a web app, a software and so on 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this [APP TYPE] and associated documentation files, to deal in the [APP TYPE] without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the [APP TYPE], and to permit persons to whom the [APP TYPE] is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the [APP TYPE]. 9 | 10 | THE [APP TYPE] IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE [APP TYPE] OR THE USE OR OTHER DEALINGS IN THE [APP TYPE]. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # html-css-js-capstone-project 2 | 3 | This is my final project for HTML & CSS MODULE from the microverse curriculum 4 | 5 |

6 | 7 |

8 | 9 |
10 | 11 |

12 | 13 |

14 | 15 | 16 | This project is meant to test student ability's on being able to put together all that they have learnt in a module to ensure they mastered it well. 17 | 18 | ## Built With 19 | 20 | - HTML 21 | - CSS 22 | - JAVASCRIPT 23 | 24 | 25 | Here's a [video ](https://www.loom.com/share/a8e3d9716fa44728be4a7f19a5444ab9) of me giving a few description of the project. 26 | 27 | ## Live Demo 28 | 29 | [Live Demo Link](https://zieeco.github.io/html-css-js-capstone/) 30 | 31 | 32 | ## Getting Started 33 | 34 | To get a local copy up and running: 35 | 36 | 1. Clone this repository or download the Zip folder: 37 | 38 | **``git clone https://github.com/zieeco/html-css-javascript-capstone.git``** 39 | 40 | 2. Navigate to the location of the folder in your machine: 41 | 42 | **``you@your-Pc-name:~$ cd ``** 43 | 44 | ## Author 45 | 46 | 👤 **Isaac Samuel** 47 | 48 | - Github: [@zieeco](https://github.com/zieeco) 49 | 50 | - LinkedIn: [Isaac Imaobong Samuel](https://www.linkedin.com/in/isaac-imaobong-samuel-a4849b1b8/) 51 | 52 | ## Credits 53 | 54 | - The original design ideal by [Cindy Shin in Behance](https://www.behance.net/adagio07) 55 | 56 | - Project from [Microverse](https://bit.ly/MicroverseTN) html & css module 57 | - Images inspired by this [All avatar images](https://pravatar.cc/images) 58 | 59 | 60 | ## Contributing 61 | 62 | Contributions, issues, and feature requests are welcome! 63 | 64 | ## Show your support 65 | 66 | Give a ⭐️ if you like this project and how we manage to build it! 67 | 68 | ## 📝 License 69 | 70 | This project is [MIT](./MIT.md) licensed 71 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | About NAMM 2022 18 | 19 | 20 | 21 | 56 | 57 |
58 |
59 |
60 |
61 |

THE NATIONAL ASSOCIATION OF MUSIC MERCHANTS SHOW 2022

62 |
63 |

The National Association of Music Merchants show drum festivals 64 | unite 65 | world-renowned drummers, and every other musicians around the globe with the global drumming community in 66 | a day-long (or several days-long) 67 | event. Usually taking place in an auditorium or theater, a fest is a great way to check multiple players 68 | off your 69 | ‘to-see’ list all at once. 70 | If you’ve never been to one – and want to know why the tickets or flights are 100% worth it – here’s why 71 | you should go 72 | at least once.

73 |
74 | Please contact us per Email for any further questions about NAMM 75 | 2022 76 | zieecosam@gmail.com 78 |
79 |
80 |
81 | 82 |
83 |
84 | 90 |
91 |

The logo Natinal Association o Music Merchants was decided through the logo 92 | competition 93 | from 8 June to 7 94 | July.

95 |
96 | 99 |
100 | 101 | 102 | 136 |
137 | 138 | 139 |
140 |

141 | Partners 142 |

143 |
144 | 145 |
146 | mozilla 147 | google 148 | naver 149 | zoom 150 | tokopedia 151 |
152 |
153 |
154 | 163 | 164 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #ec5242; 3 | --secondary: #272a31; 4 | --tertiary: #d3d3d3; 5 | --background: #f7f7f9; 6 | --dark-text: #515151; 7 | --bg-white: #fff; 8 | --color-white: #fff; 9 | } 10 | 11 | * { 12 | font-family: "Lato", sans-serif; 13 | } 14 | 15 | body { 16 | position: relative; 17 | background-color: #f7f7f9; 18 | font-size: 1rem; 19 | line-height: 1.5rem; 20 | font-weight: normal; 21 | } 22 | 23 | @font-face { 24 | font-family: cocogoose; 25 | src: url(../fonts/Cocogoose.otf); 26 | font-weight: bold; 27 | } 28 | 29 | .ff-2 { 30 | font-family: "Cocogoose", sans-serif; 31 | } 32 | 33 | .bg { 34 | background-color: var(--background); 35 | } 36 | 37 | .color-tertiary { 38 | color: var(--tertiary); 39 | } 40 | 41 | .color-primary { 42 | color: var(--primary); 43 | } 44 | 45 | .color-secondry { 46 | color: var(--secondary); 47 | } 48 | 49 | .bg-primary { 50 | background-color: var(--primary); 51 | } 52 | 53 | .color-white-text { 54 | color: var(--color-white); 55 | } 56 | 57 | .bg-white { 58 | background-color: var(--color-white); 59 | } 60 | 61 | .color-dark-text { 62 | color: var(--dark-text); 63 | } 64 | 65 | .bg-dark { 66 | background-color: var(--secondary); 67 | } 68 | 69 | .color-2 { 70 | color: #d93a29; 71 | } 72 | 73 | .header-1 { 74 | font-size: 2.125rem; 75 | line-height: 3.25rem; 76 | } 77 | 78 | .header-2 { 79 | line-height: 1.875rem; 80 | font-size: 1.25rem; 81 | margin: 0 0 0.75rem 0; 82 | } 83 | 84 | .flex-only { 85 | display: flex; 86 | } 87 | 88 | header { 89 | position: fixed; 90 | top: 0; 91 | align-items: center; 92 | width: 100%; 93 | z-index: 2; 94 | } 95 | 96 | .visited, 97 | a:hover { 98 | color: var(--primary); 99 | } 100 | 101 | .namm-logoo { 102 | height: 2rem; 103 | filter: grayscale(100%) contrast(30%); 104 | } 105 | 106 | header .lg-navbar .namm-logoo { 107 | display: inherit; 108 | height: 2rem; 109 | } 110 | 111 | /* hiding for mobile */ 112 | @media screen and (max-width: 767px) { 113 | header .lg-navbar, 114 | header .small-nav, 115 | .program .whole-program { 116 | display: none; 117 | } 118 | } 119 | 120 | @media screen and (min-width: 768px) { 121 | header .toggle-btn, 122 | .attend-btn-container { 123 | display: none; 124 | } 125 | 126 | header .small-nav { 127 | justify-content: flex-end; 128 | padding: 0 10% 0 0; 129 | } 130 | 131 | header .lg-navbar .lg-nav-link, 132 | header .small-nav, 133 | header .fbt, 134 | header .small-bar-actions { 135 | display: flex; 136 | gap: 2rem; 137 | } 138 | 139 | header .lg-navbar { 140 | display: flex; 141 | justify-content: space-between; 142 | align-items: center; 143 | min-height: 3rem; 144 | padding: 0 10%; 145 | } 146 | 147 | .lg-nav-link .join-namm-btn { 148 | border: 3px solid var(--primary); 149 | box-sizing: border-box; 150 | padding: 0.25rem 0.5rem; 151 | color: #f51d1d; 152 | font-size: 0.75rem; 153 | } 154 | } 155 | 156 | header .lg-navbar .my-logo { 157 | display: none; 158 | width: 100%; 159 | } 160 | 161 | .toggle-btn { 162 | width: 3.75rem; 163 | height: 3rem; 164 | font-size: 1.5rem; 165 | position: relative; 166 | } 167 | 168 | .bars-fw1 { 169 | font-weight: 900; 170 | } 171 | 172 | .headline { 173 | display: flex; 174 | flex-direction: column; 175 | justify-content: center; 176 | margin: 1.5rem 0; 177 | background-image: url(../images/mobile_bg.png); 178 | background-size: cover; 179 | } 180 | 181 | .headline .headline-content { 182 | padding: 3rem 1.5rem; 183 | display: flex; 184 | flex-direction: column; 185 | } 186 | 187 | .about .about-contents { 188 | display: flex; 189 | flex-direction: column; 190 | align-items: center; 191 | padding: 1.5rem; 192 | background-image: url(../images/main_big.png); 193 | background-repeat: no-repeat; 194 | } 195 | 196 | .mission { 197 | margin: 0.75rem 0; 198 | font-weight: 400; 199 | font-size: 1.25rem; 200 | } 201 | 202 | .headline .main-header, 203 | .control-header-1 { 204 | box-sizing: border-box; 205 | width: 100%; 206 | } 207 | 208 | .headline .headline-content .main-header { 209 | background-image: url(../images/orange.jpeg); 210 | background-repeat: no-repeat; 211 | background-size: cover; 212 | -webkit-background-clip: text; 213 | color: transparent; 214 | width: 100%; 215 | } 216 | 217 | .headline .desc-box { 218 | width: 100%; 219 | padding: 1rem; 220 | margin: 1rem 0; 221 | box-sizing: border-box; 222 | border: 3px solid #fff; 223 | } 224 | 225 | .about .supportive-contents { 226 | display: flex; 227 | flex-direction: column; 228 | align-items: center; 229 | text-align: center; 230 | } 231 | 232 | .about .about-desc { 233 | text-align: justify; 234 | } 235 | 236 | .about .about-contents .supportive-contents .about-desc-box { 237 | padding: 1rem; 238 | margin: 2.5rem 0; 239 | box-sizing: border-box; 240 | width: 100%; 241 | border: 1px solid #d3d3d3; 242 | } 243 | 244 | .p-64 { 245 | padding-top: 4rem; 246 | } 247 | 248 | @media screen and (min-width: 768px) { 249 | .headline { 250 | padding: 0% 10%; 251 | 252 | /* height: 100vh; */ 253 | background-image: url(../images/main_big.png); 254 | } 255 | 256 | .about { 257 | padding: 0 10%; 258 | background-image: url(../images/main-bg.png); 259 | background-repeat: no-repeat; 260 | } 261 | 262 | .headline .headline-content, 263 | .about-contents, 264 | .about .supportive-contents { 265 | width: 80%; 266 | } 267 | 268 | .about .about-contents, 269 | .feature .logo-info { 270 | margin: 0 auto; 271 | } 272 | 273 | .headline .headline-content .desc-box { 274 | width: 80%; 275 | } 276 | 277 | .headline .headline-content h3 { 278 | font-size: 1.5rem; 279 | } 280 | 281 | .headline .headline-content h1 { 282 | max-width: 94%; 283 | text-align: left; 284 | line-height: 3.5rem; 285 | } 286 | 287 | @media screen and (min-width: 992px) { 288 | .headline .headline-content h1 { 289 | /* width: 65%; */ 290 | text-align: left; 291 | font-size: 3.25rem; 292 | line-height: 3.75rem; 293 | } 294 | } 295 | 296 | .about .about-contents .supportive-contents .about-desc-box { 297 | padding: 2rem; 298 | } 299 | } 300 | 301 | .feature .logo-info, 302 | .feature .feature-logo, 303 | .feature .logo-design, 304 | .feature .namm-logo, 305 | .feature .pst-occurence, 306 | .feature .pst-occurence .pst-container { 307 | display: flex; 308 | flex-direction: column; 309 | align-items: center; 310 | } 311 | 312 | .feature.bg-white, 313 | .feature .pst-occurence { 314 | border-top: 1px solid #d3d3d3; 315 | } 316 | 317 | .feature .pst-occurence { 318 | padding: 1.5rem; 319 | } 320 | 321 | .feature .logo-info { 322 | padding: 2.5rem 1.5rem; 323 | } 324 | 325 | .text-center { 326 | text-align: center; 327 | } 328 | 329 | .text-justify { 330 | text-align: justify; 331 | } 332 | 333 | .sm-fnt { 334 | font-size: 0.83333125rem; 335 | } 336 | 337 | .feature .logo-info .namm-logo { 338 | margin: 2.5rem 0 0 0; 339 | border: 1px solid #d3d3d3; 340 | width: 100%; 341 | padding: 2.5rem 0; 342 | box-sizing: border-box; 343 | } 344 | 345 | .feature .pst-occurence .card-container .card { 346 | position: relative; 347 | text-align: center; 348 | } 349 | 350 | .feature .pst-occurence .card-container .card .card-body-block { 351 | position: absolute; 352 | top: 50%; 353 | left: 50%; 354 | transform: translate(-50%, -50%); 355 | } 356 | 357 | .feature .pst-occurence .pst-container .card-container .card .card-images { 358 | opacity: 0.3; 359 | } 360 | 361 | .fnt-22 { 362 | font-size: 1.25rem; 363 | } 364 | 365 | .feature .pst-occurence .card-container { 366 | display: flex; 367 | flex-direction: column; 368 | align-items: center; 369 | padding: 1.5rem; 370 | gap: 1.25rem; 371 | } 372 | 373 | @media screen and (min-width: 768px) { 374 | .feature .logo-info .namm-logo { 375 | width: 30%; 376 | padding: 1rem 0; 377 | } 378 | 379 | .feature .pst-occurence .card-container { 380 | flex-direction: row; 381 | width: 80%; 382 | } 383 | 384 | .feature .logo-info, 385 | .feature .pst-occurence { 386 | padding-right: 4.9rem; 387 | padding-left: 4.9rem; 388 | } 389 | } 390 | 391 | .program, 392 | .featured-speakers { 393 | padding: 1.5rem 0.75rem; 394 | display: flex; 395 | flex-direction: column; 396 | background-image: url(../images/fill-bg.png); 397 | align-items: center; 398 | } 399 | 400 | .program-heading, 401 | .fs-heading, 402 | .partners-heading, 403 | .pst-heading { 404 | text-align: center; 405 | font-size: 1.125rem; 406 | } 407 | 408 | .featured-speakers .break-line { 409 | align-self: center; 410 | background-color: var(--tertiary); 411 | } 412 | 413 | .line, 414 | .featured-speakers .break-line { 415 | width: 1.78125rem; 416 | align-self: center; 417 | margin: 0.75rem 0; 418 | height: 0.125rem; 419 | } 420 | 421 | .program .program-list { 422 | display: grid; 423 | gap: 0.75rem; 424 | margin: 2rem 0; 425 | } 426 | 427 | .program .program-list .frames { 428 | background-color: rgba(255, 255, 255, 0.1); 429 | display: flex; 430 | } 431 | 432 | .program .program-list .program-item { 433 | display: grid; 434 | grid-template-columns: repeat(3, 1fr); 435 | gap: 1.25rem; 436 | align-items: center; 437 | justify-content: left; 438 | padding: 1rem; 439 | } 440 | 441 | .featured-speakers { 442 | background-image: none; 443 | } 444 | 445 | .featured-speakers .fs-container-grid { 446 | display: grid; 447 | grid-auto-rows: 1fr; 448 | margin: 1.5rem 0; 449 | gap: 1.25rem; 450 | width: 100%; 451 | } 452 | 453 | .featured-speakers .speaker-profile { 454 | display: flex; 455 | gap: 1.25rem; 456 | } 457 | 458 | .featured-speakers .speaker-profile .speaker-image { 459 | height: 6.25rem; 460 | } 461 | 462 | .featured-speakers .speaker-description { 463 | line-height: 1.125rem; 464 | font-size: 0.875rem; 465 | } 466 | 467 | .fw-bold { 468 | font-weight: bold; 469 | font-size: 1rem; 470 | } 471 | 472 | @media screen and (min-width: 768px) { 473 | .featured-speakers .fs-container-grid { 474 | grid-template-columns: repeat(2, 1fr); 475 | gap: 3rem; 476 | margin: 2.25rem 0; 477 | } 478 | } 479 | 480 | .bars-fw1-fs { 481 | font-size: 1.5rem; 482 | } 483 | 484 | .program .program-list .program-item .program-title { 485 | font-weight: 900; 486 | } 487 | 488 | .program .program-list .program-item .program-desc { 489 | font-size: 0.875rem; 490 | } 491 | 492 | @media screen and (min-width: 768px) { 493 | .program, 494 | .featured-speakers { 495 | padding: 5% 10%; 496 | } 497 | 498 | .program .program-list { 499 | justify-content: center; 500 | grid-template-columns: repeat(5, minmax(0, 1fr)); 501 | padding: 2rem; 502 | } 503 | 504 | .program .program-list .program-item { 505 | display: flex; 506 | align-items: center; 507 | flex-direction: column; 508 | justify-content: center; 509 | text-align: center; 510 | } 511 | 512 | .program .whole-program { 513 | display: block; 514 | text-decoration: underline; 515 | cursor: pointer; 516 | } 517 | } 518 | 519 | /* transition */ 520 | .program .frames div { 521 | transition: border 1s ease-in-out; 522 | } 523 | 524 | .program .frames:hover div { 525 | cursor: pointer; 526 | border: 3px solid #fff; 527 | border-radius: 4px; 528 | } 529 | 530 | .attend-btn-container { 531 | justify-content: center; 532 | margin: 0.75rem 0; 533 | } 534 | 535 | .attend-btn { 536 | letter-spacing: 0.03em; 537 | padding: 1.5rem; 538 | cursor: pointer; 539 | font-weight: 600; 540 | box-sizing: border-box; 541 | } 542 | 543 | .partners { 544 | display: flex; 545 | padding: 1.5rem; 546 | justify-content: center; 547 | align-items: center; 548 | flex-direction: column; 549 | } 550 | 551 | .partners .partners-logos { 552 | display: flex; 553 | align-items: center; 554 | justify-content: center; 555 | margin: 1rem 0 0 0; 556 | gap: 1rem; 557 | width: 90%; 558 | flex-wrap: wrap; 559 | } 560 | 561 | .partners .partners-logos img { 562 | width: 30%; 563 | filter: grayscale(100%) contrast(30%); 564 | } 565 | 566 | .image-container { 567 | display: inline-block; 568 | width: 100%; 569 | height: 100%; 570 | } 571 | 572 | .partners .partners-logos .p-img-item .partners-image { 573 | height: 2rem; 574 | } 575 | 576 | @media screen and (min-width: 768px) { 577 | .partners .partners-logos img { 578 | width: 15%; 579 | } 580 | } 581 | 582 | .footer-sect { 583 | justify-content: center; 584 | align-items: center; 585 | padding: 2.5rem; 586 | } 587 | 588 | .footer-sect .footer-container { 589 | gap: 2.5rem; 590 | text-align: center; 591 | justify-content: center; 592 | align-items: center; 593 | } 594 | 595 | .footer-sect .footer-container .footer-logo { 596 | height: 1.875rem; 597 | display: flex; 598 | filter: grayscale(100%) contrast(30%); 599 | } 600 | 601 | .footer-sect .footer-container .footer-logo-desc, 602 | .featured-speakers .speaker-info { 603 | font-size: 0.8125rem; 604 | } 605 | 606 | .menu-content { 607 | width: 100%; 608 | height: 100%; 609 | flex-direction: column; 610 | align-items: center; 611 | position: fixed; 612 | top: 0; 613 | right: 0; 614 | bottom: 0; 615 | left: 0; 616 | background: #ee7f76; 617 | backdrop-filter: blur(4px); 618 | overflow-y: auto; 619 | } 620 | 621 | .menu-content .x-menu { 622 | display: flex; 623 | align-self: flex-end; 624 | padding: 3.75rem 2.375rem; 625 | } 626 | 627 | .menu-content .menu-list-item { 628 | display: flex; 629 | flex-direction: column; 630 | gap: 1.5rem; 631 | } 632 | 633 | .menu-content a { 634 | font-size: 2rem; 635 | font-weight: 900; 636 | color: #fff; 637 | } 638 | 639 | .menu-content .x-menu:hover, 640 | .menu-content a:hover { 641 | cursor: pointer; 642 | } 643 | -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | article, 7 | aside, 8 | details, 9 | figcaption, 10 | figure, 11 | footer, 12 | header, 13 | hgroup, 14 | menu, 15 | nav, 16 | section { 17 | display: block; 18 | } 19 | 20 | button { 21 | border: none; 22 | background-color: transparent; 23 | border-radius: 0; 24 | } 25 | 26 | button:hover { 27 | cursor: pointer; 28 | opacity: 0.8; 29 | } 30 | 31 | button:active { 32 | opacity: 0.5; 33 | } 34 | 35 | ul, 36 | li, 37 | a { 38 | list-style: none; 39 | text-decoration: none; 40 | color: inherit; 41 | } 42 | -------------------------------------------------------------------------------- /fonts/Cocogoose.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/fonts/Cocogoose.otf -------------------------------------------------------------------------------- /images/Icon-Cancel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/Lee-Ritenour-on-the-Yamaha-stage-at-Winter-NAMM-2018.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/Lee-Ritenour-on-the-Yamaha-stage-at-Winter-NAMM-2018.jpg -------------------------------------------------------------------------------- /images/OCR.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/OCR.jpg -------------------------------------------------------------------------------- /images/airbnb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /images/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/download.png -------------------------------------------------------------------------------- /images/fill-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/fill-bg.png -------------------------------------------------------------------------------- /images/iconmonstr-menu-1.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/main-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/main-bg.png -------------------------------------------------------------------------------- /images/main_big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/main_big.png -------------------------------------------------------------------------------- /images/mobile-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/mobile-bg.png -------------------------------------------------------------------------------- /images/mobile_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/mobile_bg.png -------------------------------------------------------------------------------- /images/mobile_intro_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/mobile_intro_bg.png -------------------------------------------------------------------------------- /images/namm-show-seeklogo.com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 11 | 13 | 16 | 19 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /images/namm19vsavovv.0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/namm19vsavovv.0.jpg -------------------------------------------------------------------------------- /images/orange.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/orange.jpeg -------------------------------------------------------------------------------- /images/partners/airbnb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /images/partners/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /images/partners/naver.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /images/partners/tokopedia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/partners/tokopedia.png -------------------------------------------------------------------------------- /images/screenshot/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/screenshot/desktop.png -------------------------------------------------------------------------------- /images/screenshot/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/screenshot/mobile.png -------------------------------------------------------------------------------- /images/speakers/Jerohn funk 02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/Jerohn funk 02.jpg -------------------------------------------------------------------------------- /images/speakers/changeImage/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/changeImage/airbnb.png -------------------------------------------------------------------------------- /images/speakers/changeImage/googlekorea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/changeImage/googlekorea.png -------------------------------------------------------------------------------- /images/speakers/changeImage/kakao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/changeImage/kakao.png -------------------------------------------------------------------------------- /images/speakers/changeImage/mozilla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/changeImage/mozilla.png -------------------------------------------------------------------------------- /images/speakers/changeImage/naver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/changeImage/naver.png -------------------------------------------------------------------------------- /images/speakers/speaker1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/speaker1.jpeg -------------------------------------------------------------------------------- /images/speakers/speaker2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/speaker2.jpeg -------------------------------------------------------------------------------- /images/speakers/speaker3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/speaker3.jpeg -------------------------------------------------------------------------------- /images/speakers/speaker4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/speaker4.jpeg -------------------------------------------------------------------------------- /images/speakers/speaker5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/speaker5.jpeg -------------------------------------------------------------------------------- /images/speakers/speaker6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zieeco/html-css-js-capstone/9427dfc24f8d6550fb40c9a96988a3b724e2ebdf/images/speakers/speaker6.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | NAMM's 2020 Home Page 18 | 19 | 20 | 21 | 56 | 57 |
58 |
59 |
60 |
"Promoting the pleasures and benefits of making music"
61 |
62 |

THE NATIONAL ASSOCIATION OF MUSIC MERCHANTS SHOW 2022

63 |
64 |
65 |

we urge you to make plans to exhibit at the upcoming NAMM show, an in-person event 66 | set to reunite our 67 | global 68 | communities, continue to power our industry's recovery, and create a more musical world.

69 |
70 |
71 |

2022.20.01(THUR) ~ 23 (SUN)

72 |
73 |

Anaheim Convention Center • Southern California
- 10-AM PROMPT

75 |
76 |
77 | 78 |
79 |

80 | Main Program 81 |

82 |
83 | 84 |
    85 | 86 |
  • 87 |
    88 | 89 |
    Guitarist
    90 |

    Enjoy live performance from renowed guitarist

    91 |
    92 |
  • 93 | 94 |
  • 95 |
    96 | 97 |
    Music
    98 |

    Listen to musical performance from different musicians

    99 |
    100 |
  • 101 | 102 |
  • 103 |
    104 | 105 |
    Drums
    106 |

    Watch professional drummers do live drum solos

    107 |
    108 |
  • 109 | 110 |
  • 111 |
    112 | 113 |
    Foods & Beverages
    114 |

    Enjoy the best cuisine in southern California

    115 |
    116 |
  • 117 | 118 |
  • 119 |
    120 | 121 |
    Award winners
    122 |

    NAMM issues the top 100 Dealer Awards

    123 |
    124 |
  • 125 |
126 | 127 |
128 | 131 |
132 |

SEE THE WHOLE PROGRAM

133 | 134 |
135 | 136 | 145 | 146 |
147 |

148 | Partners 149 |

150 |
151 | 152 |
153 | mozilla 154 | google 155 | naver 156 | tokopedia 157 | tokopedia 158 |
159 |
160 |
161 | 162 | 171 | 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const body = document.querySelector('body'); 2 | const menuDiv = document.createElement('div'); 3 | menuDiv.className = 'menu-content'; 4 | menuDiv.style.display = 'none'; 5 | 6 | const htmlContent = `cancel image 7 | `; 15 | 16 | menuDiv.innerHTML = htmlContent; 17 | body.appendChild(menuDiv); 18 | const cancelImage = menuDiv.querySelector('img'); 19 | cancelImage.className = 'x-menu'; 20 | cancelImage.src = 'images/Icon-Cancel.svg'; 21 | cancelImage.alt = 'cancel image'; 22 | 23 | const menuIcon = document.querySelector('.toggle-btn'); 24 | menuIcon.addEventListener('click', () => { 25 | menuDiv.style.display = 'flex'; 26 | document.getElementById('header').style.filter = 'blur(0.3125rem)'; 27 | }); 28 | 29 | cancelImage.addEventListener('click', () => { 30 | menuDiv.style.display = 'none'; 31 | document.getElementById('header').style.filter = 'none'; 32 | }); 33 | 34 | const itemLists = document.querySelectorAll('.menu-list-items'); 35 | itemLists.forEach((item) => { 36 | item.addEventListener('click', () => { 37 | menuDiv.style.display = 'none'; 38 | document.getElementById('header').style.filter = 'none'; 39 | }); 40 | }); 41 | 42 | const featuredSpeakers = [ 43 | 44 | { 45 | image: './images/speakers/speaker1.jpeg', 46 | name: 'Yochai', 47 | speakerInfo: 'Berkman Professor of Entrepreneurial Lgal Studies at Harvard LawSchool', 48 | description: 'Benkler studies commons-based peer production, and published his seminial book The Wealth of Networkds in 2006.', 49 | }, 50 | 51 | { 52 | image: './images/speakers/speaker2.jpeg', 53 | name: 'Yochai Benkler', 54 | speakerInfo: 'Director of Art Center Nabi and a board member of CC Korea', 55 | description: 'As the main venue for new media art production in Korea, Nabi promotes cross-disciplinary collaboration and understanding among scient technology, humanities, and the arts.', 56 | }, 57 | 58 | { 59 | image: './images/speakers/speaker3.jpeg', 60 | name: 'Ryan Merkley', 61 | speakerInfo: 'CEO of Create Commons, ex COO of the Mozilla Foundation', 62 | description: 'Ryan had been leading open-source projects at the Mozilla Foundation such as the open source movement.', 63 | }, 64 | 65 | { 66 | image: './images/speakers/speaker4.jpeg', 67 | name: 'Julia Leda', 68 | speakerInfo: 'President of Young Pirates of Europe', 69 | description: 'Europen ingetration, political democray and participation of youth through online as her major condem, Reda\'s report outlining potential changes to EU copyright law was approved by the Parliament in July.', 70 | }, 71 | 72 | { 73 | image: './images/speakers/speaker5.jpeg', 74 | name: 'Lila Tretikov', 75 | speakerInfo: 'Executive Director of the Wikimedia Foundation', 76 | description: 'Lila Tretikov is the Executive Director of the Wikimedia Foundation, the nonprofit organization that operates Wikipedia. Wikipedia is freely available in 290 language and used by nearly half a billion people around the world every month.', 77 | }, 78 | 79 | { 80 | image: './images/speakers/speaker6.jpeg', 81 | name: 'Kilnam Chon', 82 | speakerInfo: 'President of Dallas group of Designers', 83 | description: 'Europen ingetration, political democray and participation of youth through online as her major condem, Reda\'s report outlining potential changes to EU copyright law was approved by the Parliament in July.', 84 | }, 85 | 86 | ]; 87 | 88 | const speakerProfile = document.querySelector('.fs-container-grid'); 89 | 90 | function createSpeaker(item) { 91 | return `
  • 92 |
    93 |
    94 | 95 |
    96 |
    97 |
    ${item.name}
    98 |

    99 | ${item.speakerInfo} 100 |

    101 |
    102 |

    ${item.description}

    103 |
    104 |
    105 |
  • `; 106 | } 107 | 108 | speakerProfile.innerHTML = featuredSpeakers.map((item) => createSpeaker(item)).join(''); 109 | --------------------------------------------------------------------------------