├── .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 |
22 |
37 |
38 |
41 |
42 |
55 |
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 |
85 |
86 | National Association of Music Merchants 2022 Logo
87 |
88 |
89 |
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 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 | see the past NAMM conference
106 |
107 |
108 |
Take a look at the last two NAMM show conferences which took place in Vancouver,
109 | Canada and Manchester, UK.
110 |
"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
`;
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 `