├── .eslintrc.js
├── .eslintrc.json
├── .github
    └── workflows
    │   └── linters.yml
├── .gitignore
├── .hintrc
├── .stylelintrc.json
├── LICENSE
├── README.md
├── about.html
├── images
    ├── Bebe Winans.jpg
    ├── Chrissette michelle.jpeg
    ├── Kirk Whalum.jpg
    ├── background main.jpg
    ├── break.jpg
    ├── coffee-break.png
    ├── damien Escobar.jpg
    ├── eric benet.jpg
    ├── final annoucement.png
    ├── finish-line.png
    ├── first round.jpg
    ├── h1bg.jpg
    ├── jazz music Mic.jpg
    ├── jazz music love.png
    ├── jazz.png
    ├── laptop.png
    ├── live-music.png
    ├── regina belle.png
    ├── second round.jpg
    ├── supercruise 2021.jpg
    ├── supercruise 2022.jpg
    └── supercruise logo.PNG
├── index.html
├── package-lock.json
├── package.json
├── script.js
└── style.css


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     es2021: true,
 5 |   },
 6 |   extends: 'airbnb-base',
 7 |   overrides: [
 8 |   ],
 9 |   parserOptions: {
10 |     ecmaVersion: 'latest',
11 |   },
12 |   rules: {
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/.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@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-22.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@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@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-22.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 |   nodechecker:
64 |     name: node_modules checker
65 |     runs-on: ubuntu-22.04
66 |     steps:
67 |       - uses: actions/checkout@v2
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 | # See https://www.dartlang.org/guides/libraries/private-files
 2 | 
 3 | # Files and directories created by pub
 4 | .dart_tool/
 5 | .packages
 6 | build/
 7 | # If you're building an application, you may want to check-in your pubspec.lock
 8 | pubspec.lock
 9 | 
10 | # Directory created by dartdoc
11 | # If you don't generate documentation locally you can remove this line.
12 | doc/api/
13 | 
14 | # Avoid committing generated Javascript files:
15 | *.dart.js
16 | *.info.json      # Produced by the --dump-info flag.
17 | *.js             # When generated by dart2js. Don't specify *.js if your
18 |                  # project includes source files written in JavaScript.
19 | *.js_
20 | *.js.deps
21 | *.js.map
22 | node_modules
23 | *node_modules
24 | 


--------------------------------------------------------------------------------
/.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": [
 6 |       true,
 7 |       {
 8 |         "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
 9 |       }
10 |     ],
11 |     "scss/at-rule-no-unknown":  [
12 |       true,
13 |       {
14 |         "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
15 |       }
16 |     ],
17 |     "csstree/validator": true
18 |   },
19 |   "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
20 | }
21 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Lawrence Kioko
 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:
--------------------------------------------------------------------------------
  1 | # Module1-Capstone-Project
  2 | # 📗 Table of Contents
  3 | 
  4 | - [📖 About the Project](#about-project)
  5 |   - [🛠 Built With](#built-with)
  6 |     - [Tech Stack](#tech-stack)
  7 |     - [Key Features](#key-features)
  8 |   - [🚀 Live Demo](#live-demo)
  9 | - [💻 Getting Started](#getting-started)
 10 |   - [Setup](#setup)
 11 |   - [Prerequisites](#prerequisites)
 12 |   - [Install](#install)
 13 |   - [Usage](#usage)
 14 |   - [Run tests](#run-tests)
 15 |   - [Deployment](#triangular_flag_on_post-deployment)
 16 | - [👥 Authors](#authors)
 17 | - [🔭 Future Features](#future-features)
 18 | - [🤝 Contributing](#contributing)
 19 | - [⭐️ Show your support](#support)
 20 | - [🙏 Acknowledgements](#acknowledgements)
 21 | - [❓ FAQ](#faq)
 22 | - [📝 License](#license)
 23 | 
 24 | 
 25 | 
 26 | # 📖 [Module1-Capstone-Project] <a name="about-project"></a>
 27 | **[Module1-Capstone-Project]** is the first capstone project at Microverse that is meant to test one's knowledge on gitflow and Es Linter Configuration. This project was build using Html and css. Git, Github, and Vs Code Studio were key technological tools used in this project.
 28 | 
 29 | ## 🛠 Built With <a name="built-with"> </a>
 30 | This project is built using pure Html and css
 31 | 
 32 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 33 | 
 34 | <!-- LIVE DEMO -->
 35 | 
 36 | ## 🚀 Live Demo <a name="live-demo"></a>
 37 | 
 38 | - [a link to the online version](https://kidd254.github.io/Module1-Capstone-Project/)
 39 | 
 40 | - [a link to a presentation about this project](https://www.loom.com/share/d957c2e80f5749b0bd361c8178d1adc9)
 41 | 
 42 | 
 43 | 
 44 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 45 | 
 46 | 
 47 | 
 48 | ## 💻 Getting Started <a name="getting-started"></a>
 49 | 
 50 | To get a local copy up and running, follow these steps.
 51 | 
 52 | ### Prerequisites
 53 | 
 54 | In order to run this project you need:
 55 | You need to have a code editor pre-installed (preferably Vs Studio Code Editor). You may also need to install Git Bash terminal but if you're using Vs Code Studio you can use its terminal.
 56 | 
 57 | 
 58 | ### Setup
 59 | 
 60 | Step 1:if you don't have git installed on your machine you can download it from [here](https://git-scm.com/downloads).
 61 | 
 62 | Once you have git installed on your machine you can clone your project by running the command below to clone your project to your local machine
 63 | 
 64 | `git clone <your project link>`
 65 | 
 66 | Alternatively, you can download the zip file of your project by clicking on the `Code` button on the right side of your project page and clicking on `Download ZIP`
 67 | 
 68 | Step 2: Locate the folder where you cloned your project and open the `index.html` file in your browser to view your project.
 69 | 
 70 | ### Install
 71 | 
 72 | Install this project with:
 73 | 
 74 | 1. install WebHint: npm install --save-dev hint@7.x
 75 | 2. install Stylelint: npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
 76 | 3. install live Server from the extensions section on Vs Code Studio if using this code editor
 77 | 
 78 | ### Usage
 79 | 
 80 | To run the project, execute the following command:
 81 | open the cloned repository in your code editor
 82 | 
 83 | ### Run tests
 84 | 
 85 | To run tests, run the following command:
 86 | 
 87 | To run tests and check for errors:
 88 | -After installing the required linter, npx stylelint "**/*.{css,scss}"
 89 | -To fix CSS or SCSS linters error: npx stylelint "**/*.{css,scss}" --fix
 90 | -Run your code on web browser
 91 | 
 92 | ### Deployment
 93 | 
 94 | You can deploy this project using: github pages
 95 | 
 96 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 97 | 
 98 | 
 99 | ## 👥 Author <a name="authors"></a>
100 | 
101 | 👤 **Lawrence Muema Kioko**
102 |   
103 | - GitHub: [@Kidd254](https://github.com/Kidd254)
104 | - Twitter: [@lawrenc98789206](https://twitter.com/lawrenc98789206)
105 | - LinkedIn: [lawrence-kioko-972035240/](https://www.linkedin.com/in/lawrence-kioko-972035240/)
106 | 
107 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
108 | 
109 | ## 🤝 Contributing <a name="contributing"></a>
110 | 
111 | Contributions, issues, and feature requests are welcome!
112 | 
113 | Feel free to check the [issues page](../../issues/).
114 | 
115 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
116 | 
117 | <!-- SUPPORT -->
118 | 
119 | ## ⭐️ Show your support <a name="support"></a>
120 | 
121 | If you like this project kindly offer your support in terms of contributions. If you notice any issues you can raise them in the issues section, kindly. 
122 | 
123 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
124 | 
125 | ## 🙏 Acknowledgments <a name="acknowledgements"></a>
126 | 
127 | Vote of thanks to Microverse for giving me an opportunity and ispiring me to complete this project.I would like to thank my learning partners, and my previous partner Nelson Araujo for helping me in my project.
128 | 
129 | Above all i would like to also give credit to Cindy Shin in Behance for making the template that i used in this project available for free.
130 | 
131 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
132 | 
133 | 
134 | ## ❓ FAQ <a name="faq"></a>
135 | 
136 | - **[Where is the functionality in this project?]**
137 | 
138 |   - [this project is work in progress, more changes are likely to be added in the due course]
139 | 
140 | - **[What is the aim of this project?]**
141 | 
142 |   - [This project is meant to equip a learner with knowledge on correct github flow, and correct es linter configuration set up]
143 | 
144 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
145 | 
146 | ## 📝 License <a name="license"></a>
147 | 
148 | This project is [MIT](./LICENSE) licensed.
149 | 


--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700;900&display=swap" rel="stylesheet">
 11 |     <link href="https://fonts.cdnfonts.com/css/cocogoose" rel="stylesheet">
 12 |     <link rel="stylesheet" href="style.css">
 13 |     <script src="https://kit.fontawesome.com/dcdd89c74c.js" crossorigin="anonymous"></script>
 14 |     <script src="https://kit.fontawesome.com/1a66ebfe2a.js" crossorigin="anonymous"></script>
 15 |     <script src="script.js" defer></script>
 16 |     <title>About Us</title>
 17 | </head>
 18 | <nav>
 19 |     <i class="fa-solid fa-bars menu-bar"></i>
 20 | </nav>
 21 | 
 22 | <body>
 23 | 
 24 |     <body>
 25 |         <nav>
 26 |             <div class="menu-icons">
 27 |                 <i class="fa-solid fa-bars menu-bar menu-bar-desk" id="menu_bar"></i>
 28 |                 <i class="fa-solid fa-xmark btn-desk" id="btn"></i>
 29 |             </div>
 30 |             <div class="nav1">
 31 |                 <ul>
 32 |                     <li class="list"><i class="fa-brands fa-facebook-f facebook"></i></li>
 33 |                     <li><i class="fa-brands fa-twitter twitter"></i></li>
 34 |                     <li>English</li>
 35 |                     <li class="page">My Page</li>
 36 |                     <li>Logout</li>
 37 |                 </ul>
 38 |             </div>
 39 |             <div class="nav2">
 40 |                 <div class="logo">
 41 |                     <img src="images/supercruise logo.PNG">
 42 |                 </div>
 43 |                 <div class="links">
 44 |                     <ul>
 45 |                         <li class="home-about"><a class="ab" href="index.html"><i
 46 |                                     class="fa-sharp fa-solid fa-house home"></i></a></li>
 47 |                         <li> <a class="list-link" href="#program"> Program</a></li>
 48 |                         <li><a class="list-link" href="#join"> Join</a></li>
 49 |                         <li> <a class="list-link" href="#sponsor"> Sponsor</a></li>
 50 |                         <li><a class="list-link" href="#news">News</a></li>
 51 |                     </ul>
 52 |                 </div>
 53 |                 <div class="menu-items menu-items-desk">
 54 |                     <ul class="nav-links nav-links-desk" id="menu">
 55 |                         <li><a class="list-link desk"> About</a></li>
 56 |                         <li> <a class="list-link desk"> Program</a></li>
 57 |                         <li><a class="list-link desk"> Join</a></li>
 58 |                         <li> <a class="list-link desk"> Sponsor</a></li>
 59 |                         <li><a class="list-link desk">News</a></li>
 60 |                     </ul>
 61 | 
 62 |                 </div>
 63 | 
 64 |                 <div class="promotion">
 65 |                     <article class="campaign">SuperCruise Campaign</article>
 66 |                 </div>
 67 | 
 68 |             </div>
 69 |         </nav>
 70 |         <div class="head-about">
 71 |             <section class="section11">
 72 |                 <div class="home-contents">
 73 |                     <i class="fa-sharp fa-solid fa-house home"></i>
 74 |                     <i class="fa-sharp fa-solid fa-angle-right arrow"></i>
 75 |                     <span class="about">About</span>
 76 |                     <i class="fa-sharp fa-solid fa-angle-right arrow2"></i>
 77 |                     <span class="annual">Annual Supercruise</span>
 78 |                 </div>
 79 |                 <h1 class="heading">Annual Supercruise Festival</h1>
 80 |                 <div class="desc-container">
 81 |                     <p class="description">The Annual Supercruise Event currently dubbed as Capital Fest is a festival
 82 |                         or a celebration done annually on the first month of each year. the celebration takes a period
 83 |                         of about 7 days. People from different states aree usually welcome to attend the event as they
 84 |                         get to enjoy music, comedy, booze, gospel, old-school hip-hop, and house music!. The annual
 85 |                         Supercruise is usually not celebrated in a fixed location each year. The venue of the event is
 86 |                         usually selected randomly and in advance.
 87 |                     </p>
 88 |                 </div>
 89 |                 <div class="rad1">
 90 |                     <div class="reach-out-container">
 91 |                         <p class="reach-out">Please feel free to contact us through email in case you have any questions
 92 |                             or
 93 |                             concerns</p>
 94 |                     </div>
 95 |                     <div class="email-container">
 96 |                         <p class="email">lorenkioko@gmail.com</p>
 97 |                     </div>
 98 |                 </div>
 99 |                 <div class="history">
100 |                     <h2 class="history-heading">History of the Annual SuperCruise Festival</h2>
101 |                     <p class="history-description">The Annual Supercruise festivals began way back in 2010. The main
102 |                         objective behind the festivity
103 |                         was to promote culture and celebrate life!</p>
104 |                 </div>
105 |                 <div class="look">
106 |                     <h2 class="past-memories">Take a Look at the Past festivals</h2>
107 |                 </div>
108 |                 <div class="past-container">
109 |                     <div class="year-2021">
110 |                         <div class="beau">
111 |                             <span class="figcaption">2022</span><br>Annual SuperCruise Festival in 2022.
112 |                         </div>
113 |                     </div>
114 |                     <div class="year-2022">
115 |                         <div class="beau">
116 |                             <span class="figcaption">2021</span><br>Annual SuperCruise in 2021.
117 |                         </div>
118 |                     </div>
119 |                 </div>
120 |             </section>
121 |             <footer class="footer">
122 |                 <section class="footer-card" id="partners">
123 |                     <div class="f-title">
124 |                         <p class="footer-title">
125 |                             Partners
126 |                         </p>
127 |                     </div>
128 |                     <hr class="strikethrough">
129 |                     <div class="partners" id="sponsor">
130 |                         <div class="footer-list">iHeart</div>
131 |                         <div class="footer-list">Spotify</div>
132 |                         <div class="footer-list">MTV</div>
133 |                         <div class="footer-list">Billboard</div>
134 |                         <div class="footer-list">Vogue</div>
135 |                     </div>
136 |                 </section>
137 |                 <section class="footer-card1">
138 |                     <div class="list1">
139 |                         <img src="images/supercruise logo.PNG" class="logo-pic">
140 |                     </div>
141 |                     <div class="list2">
142 |                         2023 The SuperCruise XV, San Juan, Puerto Rico<br>All Rights Reserved.
143 |                     </div>
144 |                 </section>
145 |             </footer>
146 | 
147 |         </div>
148 |     </body>
149 | 


--------------------------------------------------------------------------------
/images/Bebe Winans.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/Bebe Winans.jpg


--------------------------------------------------------------------------------
/images/Chrissette michelle.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/Chrissette michelle.jpeg


--------------------------------------------------------------------------------
/images/Kirk Whalum.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/Kirk Whalum.jpg


--------------------------------------------------------------------------------
/images/background main.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/background main.jpg


--------------------------------------------------------------------------------
/images/break.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/break.jpg


--------------------------------------------------------------------------------
/images/coffee-break.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/coffee-break.png


--------------------------------------------------------------------------------
/images/damien Escobar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/damien Escobar.jpg


--------------------------------------------------------------------------------
/images/eric benet.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/eric benet.jpg


--------------------------------------------------------------------------------
/images/final annoucement.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/final annoucement.png


--------------------------------------------------------------------------------
/images/finish-line.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/finish-line.png


--------------------------------------------------------------------------------
/images/first round.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/first round.jpg


--------------------------------------------------------------------------------
/images/h1bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/h1bg.jpg


--------------------------------------------------------------------------------
/images/jazz music Mic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/jazz music Mic.jpg


--------------------------------------------------------------------------------
/images/jazz music love.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/jazz music love.png


--------------------------------------------------------------------------------
/images/jazz.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/jazz.png


--------------------------------------------------------------------------------
/images/laptop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/laptop.png


--------------------------------------------------------------------------------
/images/live-music.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/live-music.png


--------------------------------------------------------------------------------
/images/regina belle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/regina belle.png


--------------------------------------------------------------------------------
/images/second round.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/second round.jpg


--------------------------------------------------------------------------------
/images/supercruise 2021.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/supercruise 2021.jpg


--------------------------------------------------------------------------------
/images/supercruise 2022.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/supercruise 2022.jpg


--------------------------------------------------------------------------------
/images/supercruise logo.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kidd254/Module1-Capstone-Project/7662ca968c2ffbd1e914410bb5d2bfd9c8cde962/images/supercruise logo.PNG


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Annual SuperCruise!</title>
  9 |     <link href="style.css" rel="stylesheet">
 10 |     </style>
 11 |     <script src="https://kit.fontawesome.com/1a66ebfe2a.js" crossorigin="anonymous"></script>
 12 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 13 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 14 |     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Poppins&display=swap" rel="stylesheet">
 15 | 
 16 | </head>
 17 | <nav>
 18 |     <i class="fa-solid fa-bars menu-bar"></i>
 19 | </nav>
 20 | 
 21 | 
 22 | <body>
 23 |     <nav>
 24 |         <div class="menu-icons">
 25 |             <i class="fa-solid fa-bars menu-bar menu-bar-desk" id="menu_bar"></i>
 26 |             <i class="fa-solid fa-xmark btn-desk" id="btn"></i>
 27 |         </div>
 28 |         <div class="nav1">
 29 |             <ul>
 30 |                 <li class="list"><i class="fa-brands fa-facebook-f facebook"></i></li>
 31 |                 <li><i class="fa-brands fa-twitter twitter"></i></li>
 32 |                 <li>English</li>
 33 |                 <li class="page">My Page</li>
 34 |                 <li>Logout</li>
 35 |             </ul>
 36 |         </div>
 37 |         <div class="nav2">
 38 |             <div class="logo">
 39 |                 <img src="images/supercruise logo.PNG">
 40 |             </div>
 41 |             <div class="next">
 42 |                 <div class="links">
 43 |                     <ul>
 44 |                         <li><a class="ab" href="about.html"> About</a></li>
 45 |                         <li> <a class="list-link pr" href="#program"> Program</a></li>
 46 |                         <li><a class="list-link jo" href="#join"> Join</a></li>
 47 |                         <li> <a class="list-link sp" href="#sponsor"> Sponsor</a></li>
 48 |                         <li><a class="list-link ne" href="#news">News</a></li>
 49 |                     </ul>
 50 |                 </div>
 51 |                 <div class="promotion">
 52 |                     <article class="campaign">SuperCruise Campaign</article>
 53 |                 </div>
 54 |             </div>
 55 |             <div class="menu-items menu-items-desk">
 56 |                 <ul class="nav-links nav-links-desk" id="menu">
 57 |                     <li><a class="list-link desk" href="about.html"> About</a></li>
 58 |                     <li> <a class="list-link desk" href="#program"> Program</a></li>
 59 |                     <li><a class="list-link desk"> Join</a></li>
 60 |                     <li> <a class="list-link desk" href="#sponsor"> Sponsor</a></li>
 61 |                     <li><a class="list-link desk">News</a></li>
 62 |                 </ul>
 63 | 
 64 |             </div>
 65 | 
 66 |     </nav>
 67 |     <header>
 68 |         <section class="section1">
 69 |             <h4 class="welcome"> Hello! Music World</h4>
 70 |             <h1 class="heading">Capital Jazz Fest 2023</h1>
 71 |             <div class="desc-container">
 72 |                 <p class="description">Annual SuperCruise will be sailing from San Juan, Puerto Rico on January 15-22,
 73 |                     2023.
 74 |                     There’ll be music,
 75 |                     comedy,
 76 |                     games, workshops, and more activities than you could possibly do in a single week! 7 days and nights
 77 |                     of
 78 |                     fun
 79 |                     as
 80 |                     we sail through the Southern Caribbean! So leave the kids at home and come “SuperCruise” with us!
 81 |                 </p>
 82 |             </div>
 83 |             <div class="rad">
 84 |                 <p class="date">2023.1.15(SUN)- 22(SUN)</p>
 85 |                 <p class="location">@ San Juan, Puerto Rico</p>
 86 |             </div>
 87 |         </section>
 88 |     </header>
 89 |     <section class="section2" id="program">
 90 |         <div class="title-container">
 91 |             <h2 class="title">Main Program</h2>
 92 |             <hr class="separator" />
 93 | 
 94 |         </div>
 95 |         <div class="program-guide">
 96 |             <ul class="order">
 97 |                 <li>
 98 |                     <div class="opening">
 99 |                         <div>
100 |                             <img class="mic" src="images/laptop.png" alt="an image of a mic">
101 |                         </div>
102 |                         <h3 class="program">Opening</h3>
103 |                         <p class="program-description">Remember to have an id and ticket with you at the entrance for
104 |                             verification
105 |                         </p>
106 |                     </div>
107 |                 </li>
108 |                 <li>
109 |                     <div class="first-round">
110 |                         <div>
111 |                             <img src="images/live-music.png" alt="an image of jazz instruments">
112 |                         </div>
113 |                         <h3 class="program">First Round</h3>
114 |                         <p class="program-description">Performance from Eric Benet, Regina Belle, and Damien Escobar
115 |                         </p>
116 |                     </div>
117 |                 </li>
118 |                 <li>
119 |                     <div class="break">
120 |                         <div>
121 |                             <img src="images/coffee-break.png" alt="an image signifying a break">
122 |                         </div>
123 |                         <h3 class="program">Break</h3>
124 |                         <p class="program-description">A small break to prepare for the main event</p>
125 |                     </div>
126 |                 </li>
127 |                 <li>
128 |                     <div class="second-round">
129 |                         <div>
130 |                             <img src="images/jazz.png" alt="an image of jazz instruments">
131 |                         </div>
132 |                         <h3 class="program">Second Round</h3>
133 |                         <p class="program-description">Performance from Chrisette Michele, Bebe Winans, and Kirk Whalum
134 |                         </p>
135 |                     </div>
136 |                 </li>
137 |                 <li>
138 |                     <div class="final-session">
139 |                         <div>
140 |                             <img src="images/finish-line.png" alt="">
141 |                         </div>
142 |                         <h3 class="program">Final Session</h3>
143 |                         <p class="program-description">Do not forget to grab your bonuses for 2024 festival!</p>
144 |                     </div>
145 |                 </li>
146 |             </ul>
147 |             <div class="see-it">
148 |                 <a class="see" href="https://www.capitaljazz.com/supercruise/2023/">SEE THE WHOLE PROGRAM</a>
149 |             </div>
150 |         </div>
151 |     </section>
152 |     <div class="art">
153 |         <h2 class="artists-heading">Featured Artists</h2>
154 |         <hr class="separator2" />
155 |     </div>
156 |     <article class="singers-card"></article>
157 |     <article class="singers-card1 card-1"></article>
158 |     <article class="singers-card2 card-2"></article>
159 |     <button class="btn-more desk-btn" id="reveal">
160 |         <span class="show-less">MORE &nbsp;<i class="fa-solid fa-angle-down red"></i></span>
161 |         <span class="show-more mob-display">LESS &nbsp;<i class="fa-solid fa-angle-up red"></i></span>
162 |     </button>
163 |     <footer class="footer">
164 |         <section class="footer-card" id="partners">
165 |             <div class="f-title">
166 |                 <p class="footer-title">
167 |                     Partners
168 |                 </p>
169 |             </div>
170 |             <hr class="strikethrough">
171 |             <div class="partners" id="sponsor">
172 |                 <div class="footer-list">iHeart</div>
173 |                 <div class="footer-list">Spotify</div>
174 |                 <div class="footer-list">MTV</div>
175 |                 <div class="footer-list">Billboard</div>
176 |                 <div class="footer-list">Vogue</div>
177 |             </div>
178 |         </section>
179 |         <section class="footer-card1">
180 |             <div class="list1">
181 |                 <img src="images/supercruise logo.PNG" class="logo-pic">
182 |             </div>
183 |             <div class="list2">
184 |                 2023 The SuperCruise XV, San Juan, Puerto Rico<br>All Rights Reserved.
185 |             </div>
186 |         </section>
187 |     </footer>
188 |     <script src="script.js"></script>
189 | </body>
190 | 
191 | </html>
192 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "module1-capstone-project",
  3 |   "version": "1.0.0",
  4 |   "description": "- [📖 About the Project](#about-project)\r   - [🛠 Built With](#built-with)\r     - [Tech Stack](#tech-stack)\r     - [Key Features](#key-features)\r   - [🚀 Live Demo](#live-demo)\r - [💻 Getting Started](#getting-started)\r   - [Setup](#setup)\r   - [Prerequisites](#prerequisites)\r   - [Install](#install)\r   - [Usage](#usage)\r   - [Run tests](#run-tests)\r   - [Deployment](#triangular_flag_on_post-deployment)\r - [👥 Authors](#authors)\r - [🔭 Future Features](#future-features)\r - [🤝 Contributing](#contributing)\r - [⭐️ Show your support](#support)\r - [🙏 Acknowledgements](#acknowledgements)\r - [❓ FAQ](#faq)\r - [📝 License](#license)",
  5 |   "main": "script.js",
  6 |   "dependencies": {
  7 |     "acorn": "^8.8.1",
  8 |     "acorn-jsx": "^5.3.2",
  9 |     "ajv": "^6.12.6",
 10 |     "ansi-regex": "^5.0.1",
 11 |     "ansi-styles": "^4.3.0",
 12 |     "argparse": "^2.0.1",
 13 |     "array-includes": "^3.1.6",
 14 |     "array-union": "^2.1.0",
 15 |     "array.prototype.flat": "^1.3.1",
 16 |     "array.prototype.flatmap": "^1.3.1",
 17 |     "arrify": "^1.0.1",
 18 |     "astral-regex": "^2.0.0",
 19 |     "autoprefixer": "^9.8.8",
 20 |     "available-typed-arrays": "^1.0.5",
 21 |     "babel-eslint": "^10.1.0",
 22 |     "bail": "^1.0.5",
 23 |     "balanced-match": "^1.0.2",
 24 |     "brace-expansion": "^1.1.11",
 25 |     "braces": "^3.0.2",
 26 |     "browserslist": "^4.21.4",
 27 |     "builtins": "^5.0.1",
 28 |     "call-bind": "^1.0.2",
 29 |     "callsites": "^3.1.0",
 30 |     "camelcase": "^5.3.1",
 31 |     "camelcase-keys": "^6.2.2",
 32 |     "caniuse-lite": "^1.0.30001442",
 33 |     "chalk": "^4.1.2",
 34 |     "character-entities": "^1.2.4",
 35 |     "character-entities-legacy": "^1.1.4",
 36 |     "character-reference-invalid": "^1.1.4",
 37 |     "clone-regexp": "^2.2.0",
 38 |     "color-convert": "^2.0.1",
 39 |     "color-name": "^1.1.4",
 40 |     "concat-map": "^0.0.1",
 41 |     "confusing-browser-globals": "^1.0.11",
 42 |     "convert-source-map": "^1.9.0",
 43 |     "cosmiconfig": "^7.1.0",
 44 |     "cross-spawn": "^7.0.3",
 45 |     "css-tree": "^1.1.3",
 46 |     "cssesc": "^3.0.0",
 47 |     "debug": "^4.3.4",
 48 |     "decamelize": "^1.2.0",
 49 |     "decamelize-keys": "^1.1.1",
 50 |     "deep-is": "^0.1.4",
 51 |     "define-properties": "^1.1.4",
 52 |     "dir-glob": "^3.0.1",
 53 |     "doctrine": "^3.0.0",
 54 |     "dom-serializer": "^0.2.2",
 55 |     "domelementtype": "^1.3.1",
 56 |     "domhandler": "^2.4.2",
 57 |     "domutils": "^1.7.0",
 58 |     "electron-to-chromium": "^1.4.284",
 59 |     "emoji-regex": "^8.0.0",
 60 |     "entities": "^1.1.2",
 61 |     "error-ex": "^1.3.2",
 62 |     "es-abstract": "^1.21.1",
 63 |     "es-set-tostringtag": "^2.0.1",
 64 |     "es-shim-unscopables": "^1.0.0",
 65 |     "es-to-primitive": "^1.2.1",
 66 |     "escalade": "^3.1.1",
 67 |     "escape-string-regexp": "^4.0.0",
 68 |     "eslint-config-google": "^0.14.0",
 69 |     "eslint-config-standard": "^17.0.0",
 70 |     "eslint-import-resolver-node": "^0.3.7",
 71 |     "eslint-module-utils": "^2.7.4",
 72 |     "eslint-plugin-es": "^4.1.0",
 73 |     "eslint-plugin-n": "^15.6.1",
 74 |     "eslint-plugin-promise": "^6.1.1",
 75 |     "eslint-scope": "^7.1.1",
 76 |     "eslint-utils": "^3.0.0",
 77 |     "eslint-visitor-keys": "^3.3.0",
 78 |     "espree": "^9.4.1",
 79 |     "esquery": "^1.4.0",
 80 |     "esrecurse": "^4.3.0",
 81 |     "estraverse": "^5.3.0",
 82 |     "esutils": "^2.0.3",
 83 |     "execall": "^2.0.0",
 84 |     "extend": "^3.0.2",
 85 |     "fast-deep-equal": "^3.1.3",
 86 |     "fast-glob": "^3.2.12",
 87 |     "fast-json-stable-stringify": "^2.1.0",
 88 |     "fast-levenshtein": "^2.0.6",
 89 |     "fastest-levenshtein": "^1.0.16",
 90 |     "fastq": "^1.15.0",
 91 |     "file-entry-cache": "^6.0.1",
 92 |     "fill-range": "^7.0.1",
 93 |     "find-up": "^5.0.0",
 94 |     "flat-cache": "^3.0.4",
 95 |     "flatted": "^3.2.7",
 96 |     "for-each": "^0.3.3",
 97 |     "fs.realpath": "^1.0.0",
 98 |     "function-bind": "^1.1.1",
 99 |     "function.prototype.name": "^1.1.5",
100 |     "functions-have-names": "^1.2.3",
101 |     "gensync": "^1.0.0-beta.2",
102 |     "get-intrinsic": "^1.1.3",
103 |     "get-stdin": "^8.0.0",
104 |     "get-symbol-description": "^1.0.0",
105 |     "glob": "^7.2.3",
106 |     "glob-parent": "^6.0.2",
107 |     "global-modules": "^2.0.0",
108 |     "global-prefix": "^3.0.0",
109 |     "globals": "^13.19.0",
110 |     "globalthis": "^1.0.3",
111 |     "globby": "^11.1.0",
112 |     "globjoin": "^0.1.4",
113 |     "gonzales-pe": "^4.3.0",
114 |     "gopd": "^1.0.1",
115 |     "grapheme-splitter": "^1.0.4",
116 |     "hard-rejection": "^2.1.0",
117 |     "has": "^1.0.3",
118 |     "has-bigints": "^1.0.2",
119 |     "has-flag": "^4.0.0",
120 |     "has-property-descriptors": "^1.0.0",
121 |     "has-proto": "^1.0.1",
122 |     "has-symbols": "^1.0.3",
123 |     "has-tostringtag": "^1.0.0",
124 |     "hosted-git-info": "^4.1.0",
125 |     "html-tags": "^3.2.0",
126 |     "htmlparser2": "^3.10.1",
127 |     "ignore": "^5.2.4",
128 |     "import-fresh": "^3.3.0",
129 |     "import-lazy": "^4.0.0",
130 |     "imurmurhash": "^0.1.4",
131 |     "indent-string": "^4.0.0",
132 |     "inflight": "^1.0.6",
133 |     "inherits": "^2.0.4",
134 |     "ini": "^1.3.8",
135 |     "internal-slot": "^1.0.4",
136 |     "is-alphabetical": "^1.0.4",
137 |     "is-alphanumerical": "^1.0.4",
138 |     "is-array-buffer": "^3.0.1",
139 |     "is-arrayish": "^0.2.1",
140 |     "is-bigint": "^1.0.4",
141 |     "is-boolean-object": "^1.1.2",
142 |     "is-buffer": "^2.0.5",
143 |     "is-callable": "^1.2.7",
144 |     "is-core-module": "^2.11.0",
145 |     "is-date-object": "^1.0.5",
146 |     "is-decimal": "^1.0.4",
147 |     "is-extglob": "^2.1.1",
148 |     "is-fullwidth-code-point": "^3.0.0",
149 |     "is-glob": "^4.0.3",
150 |     "is-hexadecimal": "^1.0.4",
151 |     "is-negative-zero": "^2.0.2",
152 |     "is-number": "^7.0.0",
153 |     "is-number-object": "^1.0.7",
154 |     "is-path-inside": "^3.0.3",
155 |     "is-plain-obj": "^1.1.0",
156 |     "is-regex": "^1.1.4",
157 |     "is-regexp": "^2.1.0",
158 |     "is-shared-array-buffer": "^1.0.2",
159 |     "is-string": "^1.0.7",
160 |     "is-symbol": "^1.0.4",
161 |     "is-typed-array": "^1.1.10",
162 |     "is-typedarray": "^1.0.0",
163 |     "is-unicode-supported": "^0.1.0",
164 |     "is-weakref": "^1.0.2",
165 |     "isexe": "^2.0.0",
166 |     "js-sdsl": "^4.2.0",
167 |     "js-tokens": "^4.0.0",
168 |     "js-yaml": "^4.1.0",
169 |     "jsesc": "^2.5.2",
170 |     "json-parse-even-better-errors": "^2.3.1",
171 |     "json-schema-traverse": "^0.4.1",
172 |     "json-stable-stringify-without-jsonify": "^1.0.1",
173 |     "json5": "^2.2.3",
174 |     "kind-of": "^6.0.3",
175 |     "known-css-properties": "^0.21.0",
176 |     "levn": "^0.4.1",
177 |     "lines-and-columns": "^1.2.4",
178 |     "locate-path": "^6.0.0",
179 |     "lodash": "^4.17.21",
180 |     "lodash.merge": "^4.6.2",
181 |     "lodash.truncate": "^4.4.2",
182 |     "log-symbols": "^4.1.0",
183 |     "longest-streak": "^2.0.4",
184 |     "lru-cache": "^5.1.1",
185 |     "map-obj": "^4.3.0",
186 |     "mathml-tag-names": "^2.1.3",
187 |     "mdast-util-from-markdown": "^0.8.5",
188 |     "mdast-util-to-markdown": "^0.6.5",
189 |     "mdast-util-to-string": "^2.0.0",
190 |     "mdn-data": "^2.0.14",
191 |     "meow": "^9.0.0",
192 |     "merge2": "^1.4.1",
193 |     "micromark": "^2.11.4",
194 |     "micromatch": "^4.0.5",
195 |     "min-indent": "^1.0.1",
196 |     "minimatch": "^3.1.2",
197 |     "minimist": "^1.2.7",
198 |     "minimist-options": "^4.1.0",
199 |     "ms": "^2.1.2",
200 |     "natural-compare": "^1.4.0",
201 |     "node-releases": "^2.0.8",
202 |     "normalize-package-data": "^3.0.3",
203 |     "normalize-range": "^0.1.2",
204 |     "normalize-selector": "^0.2.0",
205 |     "num2fraction": "^1.2.2",
206 |     "object-inspect": "^1.12.3",
207 |     "object-keys": "^1.1.1",
208 |     "object.assign": "^4.1.4",
209 |     "object.entries": "^1.1.6",
210 |     "object.values": "^1.1.6",
211 |     "once": "^1.4.0",
212 |     "optionator": "^0.9.1",
213 |     "p-limit": "^3.1.0",
214 |     "p-locate": "^5.0.0",
215 |     "p-try": "^2.2.0",
216 |     "parent-module": "^1.0.1",
217 |     "parse-entities": "^2.0.0",
218 |     "parse-json": "^5.2.0",
219 |     "path-exists": "^4.0.0",
220 |     "path-is-absolute": "^1.0.1",
221 |     "path-key": "^3.1.1",
222 |     "path-parse": "^1.0.7",
223 |     "path-type": "^4.0.0",
224 |     "picocolors": "^0.2.1",
225 |     "picomatch": "^2.3.1",
226 |     "postcss": "^7.0.39",
227 |     "postcss-html": "^0.36.0",
228 |     "postcss-less": "^3.1.4",
229 |     "postcss-media-query-parser": "^0.2.3",
230 |     "postcss-resolve-nested-selector": "^0.1.1",
231 |     "postcss-safe-parser": "^4.0.2",
232 |     "postcss-sass": "^0.4.4",
233 |     "postcss-scss": "^2.1.1",
234 |     "postcss-selector-parser": "^6.0.11",
235 |     "postcss-syntax": "^0.36.2",
236 |     "postcss-value-parser": "^4.2.0",
237 |     "prelude-ls": "^1.2.1",
238 |     "punycode": "^2.1.1",
239 |     "queue-microtask": "^1.2.3",
240 |     "quick-lru": "^4.0.1",
241 |     "read-pkg": "^5.2.0",
242 |     "read-pkg-up": "^7.0.1",
243 |     "readable-stream": "^3.6.0",
244 |     "redent": "^3.0.0",
245 |     "regexp.prototype.flags": "^1.4.3",
246 |     "regexpp": "^3.2.0",
247 |     "remark": "^13.0.0",
248 |     "remark-parse": "^9.0.0",
249 |     "remark-stringify": "^9.0.1",
250 |     "repeat-string": "^1.6.1",
251 |     "require-from-string": "^2.0.2",
252 |     "resolve": "^1.22.1",
253 |     "resolve-from": "^4.0.0",
254 |     "reusify": "^1.0.4",
255 |     "rimraf": "^3.0.2",
256 |     "run-parallel": "^1.2.0",
257 |     "safe-buffer": "^5.2.1",
258 |     "safe-regex-test": "^1.0.0",
259 |     "semver": "^6.3.0",
260 |     "shebang-command": "^2.0.0",
261 |     "shebang-regex": "^3.0.0",
262 |     "side-channel": "^1.0.4",
263 |     "signal-exit": "^3.0.7",
264 |     "slash": "^3.0.0",
265 |     "slice-ansi": "^4.0.0",
266 |     "source-map": "^0.6.1",
267 |     "spdx-correct": "^3.1.1",
268 |     "spdx-exceptions": "^2.3.0",
269 |     "spdx-expression-parse": "^3.0.1",
270 |     "spdx-license-ids": "^3.0.12",
271 |     "specificity": "^0.4.1",
272 |     "string_decoder": "^1.3.0",
273 |     "string-width": "^4.2.3",
274 |     "string.prototype.trimend": "^1.0.6",
275 |     "string.prototype.trimstart": "^1.0.6",
276 |     "strip-ansi": "^6.0.1",
277 |     "strip-bom": "^3.0.0",
278 |     "strip-indent": "^3.0.0",
279 |     "strip-json-comments": "^3.1.1",
280 |     "style-search": "^0.1.0",
281 |     "stylelint": "^13.13.1",
282 |     "stylelint-config-recommended": "^4.0.0",
283 |     "stylelint-config-standard": "^21.0.0",
284 |     "stylelint-csstree-validator": "^1.9.0",
285 |     "stylelint-scss": "^3.21.0",
286 |     "sugarss": "^2.0.0",
287 |     "supports-color": "^7.2.0",
288 |     "supports-preserve-symlinks-flag": "^1.0.0",
289 |     "svg-tags": "^1.0.0",
290 |     "table": "^6.8.1",
291 |     "text-table": "^0.2.0",
292 |     "to-fast-properties": "^2.0.0",
293 |     "to-regex-range": "^5.0.1",
294 |     "trim-newlines": "^3.0.1",
295 |     "trough": "^1.0.5",
296 |     "tsconfig-paths": "^3.14.1",
297 |     "type-check": "^0.4.0",
298 |     "type-fest": "^0.20.2",
299 |     "typed-array-length": "^1.0.4",
300 |     "typedarray-to-buffer": "^3.1.5",
301 |     "unbox-primitive": "^1.0.2",
302 |     "unified": "^9.2.2",
303 |     "unist-util-find-all-after": "^3.0.2",
304 |     "unist-util-is": "^4.1.0",
305 |     "unist-util-stringify-position": "^2.0.3",
306 |     "update-browserslist-db": "^1.0.10",
307 |     "uri-js": "^4.4.1",
308 |     "util-deprecate": "^1.0.2",
309 |     "v8-compile-cache": "^2.3.0",
310 |     "validate-npm-package-license": "^3.0.4",
311 |     "vfile": "^4.2.1",
312 |     "vfile-message": "^2.0.4",
313 |     "which": "^2.0.2",
314 |     "which-boxed-primitive": "^1.0.2",
315 |     "which-typed-array": "^1.1.9",
316 |     "word-wrap": "^1.2.3",
317 |     "wrappy": "^1.0.2",
318 |     "write-file-atomic": "^3.0.3",
319 |     "yallist": "^3.1.1",
320 |     "yaml": "^1.10.2",
321 |     "yargs-parser": "^20.2.9",
322 |     "yocto-queue": "^0.1.0",
323 |     "zwitch": "^1.0.5"
324 |   },
325 |   "devDependencies": {
326 |     "eslint": "^8.31.0",
327 |     "eslint-config-airbnb-base": "^15.0.0",
328 |     "eslint-plugin-import": "^2.27.4"
329 |   },
330 |   "scripts": {
331 |     "test": "echo \"Error: no test specified\" && exit 1"
332 |   },
333 |   "repository": {
334 |     "type": "git",
335 |     "url": "git+https://github.com/Kidd254/Module1-Capstone-Project.git"
336 |   },
337 |   "author": "",
338 |   "license": "ISC",
339 |   "bugs": {
340 |     "url": "https://github.com/Kidd254/Module1-Capstone-Project/issues"
341 |   },
342 |   "homepage": "https://github.com/Kidd254/Module1-Capstone-Project#readme"
343 | }
344 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable linebreak-style */
  2 | /* eslint-disable func-names */
  3 | // eslint-disable-next-line linebreak-style
  4 | /* eslint-disable no-plusplus */
  5 | /* eslint-disable linebreak-style */
  6 | /* eslint-disable max-len */
  7 | const menuBox = document.getElementById('menu');
  8 | const menuBar = document.getElementById('menu_bar');
  9 | const closingBtn = document.getElementById('btn');
 10 | const menuItems = document.getElementsByClassName('list-link');
 11 | const menuContainer = document.getElementsByClassName('nav2');
 12 | 
 13 | menuBar.addEventListener('click', () => {
 14 |   menuBox.style.display = 'flex';
 15 |   menuBox.classList.toggle('open-menu');
 16 |   menuBar.style.display = 'none';
 17 |   closingBtn.style.display = 'block';
 18 |   menuContainer[0].style.display = 'block';
 19 | });
 20 | 
 21 | for (let i = 0; i < menuItems.length; i++) {
 22 |   menuItems[i].onclick = function () {
 23 |     menuBox.style.display = 'none';
 24 |     menuBox.classList.toggle('open-menu');
 25 |     closingBtn.style.display = 'none';
 26 |     menuBar.style.display = 'block';
 27 |     menuContainer[0].style.display = 'none';
 28 |   };
 29 | }
 30 | 
 31 | closingBtn.addEventListener('click', () => {
 32 |   menuBox.style.display = 'none';
 33 |   menuBox.classList.toggle('open-menu');
 34 |   menuBar.style.display = 'block';
 35 |   closingBtn.style.display = 'none';
 36 |   menuContainer[0].style.display = 'none';
 37 | });
 38 | 
 39 | const singerArray = [
 40 |   {
 41 |     id: 0,
 42 |     img: 'images/Bebe Winans.jpg',
 43 |     alt: 'Winans',
 44 |     name: 'Bebe Winans',
 45 |     description: 'American gospel and R&B singer',
 46 |     achievement: 'Released nine albums, seven with his sister CeCe as BeBe & CeCe Winans and one with three Winans brothers ',
 47 |   },
 48 |   {
 49 |     id: 1,
 50 |     img: 'images/Kirk Whalum.jpg',
 51 |     alt: 'Whalum',
 52 |     name: 'Kirk Whalum',
 53 |     description: 'American R&B and smooth jazz saxophonist and songwriter',
 54 |     achievement: 'Toured with Whitney Houston for more than seven years and soloed in her single "I Will Always Love You", the best-selling single by a female artist in music history.',
 55 |   },
 56 | ];
 57 | 
 58 | const singersCard = document.querySelector('.singers-card');
 59 | 
 60 | let content1 = '';
 61 | 
 62 | singerArray.forEach((singer) => {
 63 |   content1 += `
 64 |     <section class="singers">
 65 |         <div class="singers-container">
 66 |             <div class="singers-front"></div>
 67 |             <div class="singer-background">
 68 |                 <img src="${singer.img}" alt="${singer.alt}" class="image">
 69 |             </div>
 70 |         </div>
 71 |         <div class="singers-info">
 72 |             <h5 class="singers-name">${singer.name}</h5>
 73 |             <p class="singers-description">${singer.description}</p>
 74 |             <hr class="breakthrough">
 75 |             <p class="singers-achievement">${singer.achievement}</p>
 76 |         </div>
 77 |     </section>`;
 78 | });
 79 | 
 80 | singersCard.innerHTML = content1;
 81 | 
 82 | const secondSingersArray = [
 83 |   {
 84 |     id: 0,
 85 |     img: 'images/damien Escobar.jpg',
 86 |     alt: 'Escobar',
 87 |     name: 'Damien Escobar',
 88 |     description: 'Damien Esco, is an American violinist',
 89 |     achievement: 'Known for his crossover violin musical style consists of a mix of classical, jazz, pop, R&B, and hip hop',
 90 |   },
 91 |   {
 92 |     id: 1,
 93 |     img: 'images/Chrissette michelle.jpeg',
 94 |     alt: 'Michele',
 95 |     name: 'Chrisette Michele',
 96 |     description: 'An American R&B and soul singer',
 97 |     achievement: 'won a Grammy Award for Best Urban/Alternative Performance in 2009 for her song, "Be Ok"',
 98 |   },
 99 | ];
100 | 
101 | const singersCard2 = document.querySelector('.singers-card1');
102 | 
103 | let content2 = '';
104 | 
105 | secondSingersArray.forEach((singer) => {
106 |   content2 += `
107 |     <section class="singers">
108 |         <div class = "singers-container">
109 |             <div class="singers-front"></div>
110 |             <div class="singers-background">
111 |                 <img src="${singer.img}" alt="${singer.alt}" class="image">
112 |             </div>
113 |         </div>
114 |         <div class="singers-info">
115 |             <h5 class="singers-name">${singer.name}</h5>
116 |             <p class="singers-description">${singer.description}</p>
117 |             <hr class="breakthrough">
118 |             <p class="singers-achievement">${singer.achievement}</p>
119 |         </div>
120 |     </section>`;
121 | });
122 | 
123 | singersCard2.innerHTML = content2;
124 | 
125 | const thirdSingersArray = [
126 |   {
127 |     id: 0,
128 |     img: 'images/eric benet.jpg',
129 |     alt: 'Eric',
130 |     name: 'Eric Benet',
131 |     description: ' American R&B/neo soul singer-songwriter and actor',
132 |     achievement: 'Benet has received a total of four Grammy nominations to date for his musical work.',
133 |   },
134 |   {
135 |     id: 1,
136 |     img: 'images/regina belle.png',
137 |     alt: 'Regina',
138 |     name: 'Regina Belle',
139 |     description: 'American singer-songwriter who started her career in the mid-1980s',
140 |     achievement: 'Known for her singles "Baby Come to Me" and "Make It Like It Was", Belle\'s most notable for two hit duets',
141 |   },
142 | ];
143 | 
144 | const sectionsCard3 = document.querySelector('.singers-card2');
145 | 
146 | let content3 = '';
147 | 
148 | thirdSingersArray.forEach((singer) => {
149 |   content3 += `
150 |       <section class="singers">
151 |           <div class = "singers-container">
152 |               <div class="singers-front"></div>
153 |               <div class="singers-background">
154 |                   <img src="${singer.img}" alt="${singer.alt}" class="image">
155 |               </div>
156 |           </div>
157 |           <div class="singers-info">
158 |               <h5 class="singers-name">${singer.name}</h5>
159 |               <p class="singers-description">${singer.description}</p>
160 |               <hr class="breakthrough">
161 |               <p class="singers-achievement">${singer.achievement}</p>
162 |           </div>
163 |       </section>`;
164 | });
165 | 
166 | sectionsCard3.innerHTML = content3;
167 | 
168 | const revealBtn = document.getElementById('reveal');
169 | const showMore = document.querySelector('.show-less');
170 | const showLess = document.querySelector('.show-more');
171 | const card2 = document.querySelector('.card-1');
172 | const card3 = document.querySelector('.card-2');
173 | 
174 | revealBtn.addEventListener('click', () => {
175 |   showMore.classList.toggle('open');
176 |   showLess.classList.toggle('open');
177 |   card2.classList.toggle('open');
178 |   card3.classList.toggle('open');
179 | });
180 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
   1 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Poppins&display=swap');
   2 | 
   3 | * {
   4 |   padding: 0;
   5 |   margin: 0;
   6 | }
   7 | 
   8 | header {
   9 |   padding: 60px 30px;
  10 |   box-sizing: border-box;
  11 |   position: relative;
  12 |   justify-content: center;
  13 |   background-image: url(images/jazz\ music\ love.png);
  14 |   background-repeat: no-repeat;
  15 |   background-size: cover;
  16 | }
  17 | 
  18 | .head-about {
  19 |   padding: 60px 30px;
  20 |   box-sizing: border-box;
  21 |   position: relative;
  22 |   justify-content: center;
  23 |   background-color: #fff;
  24 | }
  25 | 
  26 | nav {
  27 |   display: flex;
  28 |   height: 80px;
  29 |   width: 100%;
  30 |   position: fixed;
  31 |   z-index: 1;
  32 |   background: transparent;
  33 | }
  34 | 
  35 | .section1 {
  36 |   height: 100%;
  37 |   width: 100%;
  38 |   display: flex;
  39 |   flex-direction: column;
  40 |   position: relative;
  41 |   background-blend-mode: multiply;
  42 | }
  43 | 
  44 | .welcome {
  45 |   flex: none;
  46 |   order: 0;
  47 |   font-size: 20px;
  48 |   color: red;
  49 | }
  50 | 
  51 | .heading {
  52 |   flex: none;
  53 |   order: 1;
  54 |   font-size: 40px;
  55 |   font-family: 'Lato', sans-serif;
  56 |   text-transform: uppercase;
  57 |   color: red;
  58 |   -webkit-font-smoothing: antialiased;
  59 | }
  60 | 
  61 | .desc-container {
  62 |   padding: 20px;
  63 |   box-sizing: border-box;
  64 |   order: 2;
  65 |   border: 10px solid white;
  66 | }
  67 | 
  68 | .description {
  69 |   flex: none;
  70 |   font-size: 16px;
  71 |   font-family: 'Lato-Regular', sans-serif;
  72 |   color: #5e5e5e;
  73 | }
  74 | 
  75 | .rad {
  76 |   display: flex;
  77 |   flex-direction: column;
  78 |   order: 3;
  79 | }
  80 | 
  81 | .date {
  82 |   flex: none;
  83 |   font-size: 25px;
  84 |   font-weight: 300;
  85 |   font-family: "Lato", sans-serif;
  86 |   white-space: nowrap;
  87 | }
  88 | 
  89 | .location {
  90 |   flex: none;
  91 |   font-size: 28px;
  92 |   font-weight: 300;
  93 |   font-family: 'Lato-Regular', sans-serif;
  94 |   color: #5e5e5e;
  95 | }
  96 | 
  97 | .singers {
  98 |   margin: 0;
  99 |   display: flex;
 100 |   align-items: center;
 101 |   gap: 10px;
 102 |   padding: 10px;
 103 | }
 104 | 
 105 | .singers-container {
 106 |   flex-basis: 34%;
 107 | }
 108 | 
 109 | .singers-front {
 110 |   background-image: url('img/speaker-sec.jpeg');
 111 |   background-size: cover;
 112 |   width: 60px;
 113 |   height: 60px;
 114 | }
 115 | 
 116 | .singer-background {
 117 |   margin-left: 12px;
 118 |   margin-top: -48px;
 119 | }
 120 | 
 121 | .image {
 122 |   max-width: 100%;
 123 |   max-height: 100%;
 124 | }
 125 | 
 126 | .singers-info {
 127 |   flex-basis: 65%;
 128 | }
 129 | 
 130 | .singers-name {
 131 |   margin: 5px 0;
 132 |   font-weight: 900;
 133 | }
 134 | 
 135 | .singers-description {
 136 |   margin: 0;
 137 |   color: #ec5242;
 138 |   font-size: 0.6em;
 139 |   font-style: italic;
 140 | }
 141 | 
 142 | .breakthrough {
 143 |   background-color: #d3d3d3;
 144 |   border: none;
 145 |   height: 1px;
 146 |   width: 6%;
 147 |   float: left;
 148 | }
 149 | 
 150 | .singers-achievement {
 151 |   margin: 24px 0;
 152 |   font-size: 0.6em;
 153 | }
 154 | 
 155 | .f-title {
 156 |   display: flex;
 157 |   justify-content: center;
 158 |   align-items: center;
 159 | }
 160 | 
 161 | .footer-title {
 162 |   color: #fff;
 163 |   font-family: 'Lato-Bold', sans-serif;
 164 |   font-weight: bolder;
 165 | }
 166 | 
 167 | .footer-card {
 168 |   background-color: #272a31;
 169 | }
 170 | 
 171 | .footer-list {
 172 |   color: #d3d3d3;
 173 |   font-family: 'Lato-Bold', sans-serif;
 174 |   font-weight: bold;
 175 | }
 176 | 
 177 | .partners {
 178 |   display: flex;
 179 |   justify-content: space-around;
 180 |   margin: 16px 24px;
 181 |   padding-bottom: 40px;
 182 | }
 183 | 
 184 | .footer-card1 {
 185 |   display: flex;
 186 |   justify-content: space-around;
 187 |   align-items: center;
 188 | }
 189 | 
 190 | .list {
 191 |   flex-basis: 50%;
 192 |   font-size: 0.6em;
 193 | }
 194 | 
 195 | .section11 {
 196 |   display: flex;
 197 |   flex-direction: column;
 198 |   justify-content: center;
 199 |   align-items: center;
 200 |   order: 0;
 201 | }
 202 | 
 203 | .rad1 {
 204 |   display: flex;
 205 |   flex-direction: column;
 206 |   order: 3;
 207 |   padding: 3% 0;
 208 |   box-sizing: border-box;
 209 | }
 210 | 
 211 | .reach-out-container {
 212 |   display: flex;
 213 |   justify-content: center;
 214 |   align-content: center;
 215 |   order: 0;
 216 | }
 217 | 
 218 | .reach-out {
 219 |   flex: none;
 220 |   font-size: 16px;
 221 |   font-family: 'Lato-Regular', sans-serif;
 222 |   color: #070707;
 223 | }
 224 | 
 225 | .email.container {
 226 |   order: 1;
 227 |   display: flex;
 228 |   justify-content: center;
 229 |   align-content: center;
 230 | }
 231 | 
 232 | .email {
 233 |   order: 0;
 234 |   flex: none;
 235 |   font-size: 16px;
 236 |   font-family: 'Lato-Regular', sans-serif;
 237 |   color: #060606;
 238 |   text-decoration: underline;
 239 |   text-decoration-thickness: calc(20%);
 240 |   font-weight: bolder;
 241 |   padding-left: 25%;
 242 | }
 243 | 
 244 | .history {
 245 |   order: 4;
 246 |   justify-content: center;
 247 |   align-items: center;
 248 |   display: flex;
 249 |   flex-direction: column;
 250 | }
 251 | 
 252 | .history-heading {
 253 |   order: 0;
 254 |   font-family: 'Lato-Bold', sans-serif;
 255 |   font-size: 20px;
 256 |   font-weight: bolder;
 257 |   color: #060606;
 258 | }
 259 | 
 260 | .history-description {
 261 |   order: 1;
 262 |   padding: 3% 0;
 263 |   font-family: 'Lato-Regular', sans-serif;
 264 |   font-size: 16px;
 265 |   color: #070707;
 266 | }
 267 | 
 268 | .look {
 269 |   order: 5;
 270 |   display: flex;
 271 | }
 272 | 
 273 | .past-container {
 274 |   order: 5;
 275 |   display: flex;
 276 | }
 277 | 
 278 | .past-memories {
 279 |   font-family: 'Lato-Bold', sans-serif;
 280 |   font-size: 20px;
 281 |   font-weight: bolder;
 282 |   color: #060606;
 283 |   order: 0;
 284 | }
 285 | 
 286 | .beau {
 287 |   background-color: #f82e18a2;
 288 |   color: #fff;
 289 |   text-align: center;
 290 |   height: 25vh;
 291 |   font-size: 0.8em;
 292 |   display: flex;
 293 |   flex-direction: column;
 294 |   align-items: center;
 295 |   justify-content: center;
 296 | }
 297 | 
 298 | .year-2021 {
 299 |   box-sizing: border-box;
 300 |   background-image: url(images/supercruise\ 2021.jpg);
 301 |   background-repeat: no-repeat;
 302 |   background-size: cover;
 303 |   height: 25vh;
 304 |   width: 100%;
 305 |   order: 0;
 306 |   margin: 20px;
 307 | }
 308 | 
 309 | .year-2022 {
 310 |   box-sizing: border-box;
 311 |   background-image: url(images/supercruise\ 2022.jpg);
 312 |   background-repeat: no-repeat;
 313 |   background-size: cover;
 314 |   height: 25vh;
 315 |   width: 100%;
 316 |   order: 1;
 317 |   margin: 20px;
 318 | }
 319 | 
 320 | .home-contents {
 321 |   margin-top: 6%;
 322 |   display: flex;
 323 |   flex-direction: row;
 324 |   justify-content: flex-end;
 325 |   font-size: 0.7em;
 326 |   padding-top: 1.5%;
 327 |   padding-right: 5%;
 328 |   margin-right: 3%;
 329 |   box-sizing: border-box;
 330 |   order: 0;
 331 |   width: 100%;
 332 | }
 333 | 
 334 | .home {
 335 |   color: black;
 336 | }
 337 | 
 338 | .arrow {
 339 |   color: red;
 340 | }
 341 | 
 342 | .about1 {
 343 |   color: #060606;
 344 |   font-size: 16px;
 345 | }
 346 | 
 347 | .annual {
 348 |   color: #060606;
 349 |   font-size: 12px;
 350 | }
 351 | 
 352 | .arrow2 {
 353 |   color: red;
 354 | }
 355 | 
 356 | .figcaption {
 357 |   text-align: center;
 358 |   font-size: 2.5em;
 359 | }
 360 | 
 361 | @media only screen and (max-width: 767px) {
 362 |   .section2 {
 363 |     padding: 20px;
 364 |     box-sizing: border-box;
 365 |     background: url('images/background\ main.jpg'), #282a34;
 366 |     background-size: auto, auto;
 367 |     background-size: contain;
 368 |     background-blend-mode: multiply;
 369 |   }
 370 | 
 371 |   .program-guide {
 372 |     height: 100%;
 373 |     width: 100%;
 374 |     position: relative;
 375 |     display: flex;
 376 |     flex-direction: column;
 377 |     align-items: center;
 378 |   }
 379 | 
 380 |   .title-container {
 381 |     display: flex;
 382 |     flex-direction: column;
 383 |     justify-content: center;
 384 |     align-items: center;
 385 |     padding: 20px 0;
 386 |     box-sizing: border-box;
 387 |   }
 388 | 
 389 |   .title {
 390 |     font-family: "Lato-Regular", sans-serif;
 391 |     color: white;
 392 |     margin-bottom: 10px;
 393 |     order: 0;
 394 |   }
 395 | 
 396 |   .separator {
 397 |     order: 1;
 398 |     color: #ec5242;
 399 |     width: 25%;
 400 |     height: 1%;
 401 |     font-size: 10px;
 402 |     margin-top: 5px;
 403 |   }
 404 | 
 405 |   .program ul li {
 406 |     list-style: none;
 407 |   }
 408 | 
 409 |   .order {
 410 |     list-style: none;
 411 |     display: flex;
 412 |     flex-direction: column;
 413 |     justify-content: space-between;
 414 |   }
 415 | 
 416 |   .opening {
 417 |     order: 0;
 418 |     display: flex;
 419 |     align-items: center;
 420 |     padding: 20px 6px;
 421 |     margin-bottom: 5px;
 422 |     box-sizing: border-box;
 423 |     border-radius: 2px;
 424 |     list-style: none;
 425 |     background-color: #282a34;
 426 |     opacity: 0.8;
 427 |   }
 428 | 
 429 |   .first-round {
 430 |     order: 0;
 431 |     display: flex;
 432 |     align-items: center;
 433 |     padding: 20px 6px;
 434 |     border-radius: 2px;
 435 |     margin-bottom: 5px;
 436 |     list-style: none;
 437 |     background-color: #282a34;
 438 |     opacity: 0.8;
 439 |   }
 440 | 
 441 |   .break {
 442 |     order: 0;
 443 |     display: flex;
 444 |     align-items: center;
 445 |     padding: 20px 6px;
 446 |     border-radius: 2px;
 447 |     margin-bottom: 5px;
 448 |     list-style: none;
 449 |     background-color: #282a34;
 450 |     opacity: 0.8;
 451 |   }
 452 | 
 453 |   .second-round {
 454 |     order: 0;
 455 |     display: flex;
 456 |     align-items: center;
 457 |     padding: 20px 6px;
 458 |     margin-bottom: 5px;
 459 |     border-radius: 2px;
 460 |     list-style: none;
 461 |     background-color: #282a34;
 462 |     opacity: 0.8;
 463 |   }
 464 | 
 465 |   .final-session {
 466 |     order: 0;
 467 |     display: flex;
 468 |     align-items: center;
 469 |     padding: 20px 6px;
 470 |     border-radius: 2px;
 471 |     list-style: none;
 472 |     background-color: #282a34;
 473 |     opacity: 0.8;
 474 |   }
 475 | 
 476 |   .opening img {
 477 |     order: 0;
 478 |     border-radius: 50%;
 479 |     width: 50%;
 480 |     object-fit: contain;
 481 |     padding: 5px;
 482 |     box-sizing: border-box;
 483 |   }
 484 | 
 485 |   .first-round img {
 486 |     order: 0;
 487 |     border-radius: 50%;
 488 |     width: 50%;
 489 |     object-fit: contain;
 490 |     padding: 5px;
 491 |     box-sizing: border-box;
 492 |   }
 493 | 
 494 |   .break img {
 495 |     order: 0;
 496 |     border-radius: 50%;
 497 |     width: 50%;
 498 |     object-fit: contain;
 499 |     padding: 5px;
 500 |     box-sizing: border-box;
 501 |   }
 502 | 
 503 |   .second-round img {
 504 |     order: 0;
 505 |     border-radius: 50%;
 506 |     width: 50%;
 507 |     object-fit: contain;
 508 |     padding: 5px;
 509 |     box-sizing: border-box;
 510 |   }
 511 | 
 512 |   .final-session img {
 513 |     order: 0;
 514 |     border-radius: 50%;
 515 |     width: 50%;
 516 |     object-fit: contain;
 517 |     padding: 5px;
 518 |     box-sizing: border-box;
 519 |   }
 520 | 
 521 |   .program {
 522 |     order: 1;
 523 |     color: red;
 524 |     font-family: 'Lato-Bold', sans-serif;
 525 |     justify-content: center;
 526 |     align-items: center;
 527 |     list-style: none;
 528 |   }
 529 | 
 530 |   .program1 {
 531 |     order: 1;
 532 |     color: red;
 533 |     font-family: 'Lato-Bold', sans-serif;
 534 |     justify-content: center;
 535 |     align-items: center;
 536 |     list-style: none;
 537 |   }
 538 | 
 539 |   .program-description {
 540 |     order: 2;
 541 |     color: gray;
 542 |     flex: 50% 0 0;
 543 |     font-family: 'Lato-Regular', sans-serif;
 544 |   }
 545 | 
 546 |   .see-it {
 547 |     order: 2;
 548 |     margin: 3% 0 3% 0;
 549 |     box-sizing: border-box;
 550 |   }
 551 | 
 552 |   .see {
 553 |     text-decoration: underline;
 554 |     color: #fff;
 555 |     font-family: 'Lato-Regular', sans-serif;
 556 |   }
 557 | 
 558 |   .menu-bar {
 559 |     height: 35px;
 560 |     width: 35px;
 561 |     top: 20px;
 562 |     left: 20px;
 563 |     color: black;
 564 |     font-weight: bolder;
 565 |     background: transparent;
 566 |     position: absolute;
 567 |     cursor: pointer;
 568 |     display: block;
 569 |     z-index: 2;
 570 |   }
 571 | 
 572 |   .nav2 .logo,
 573 |   .nav2 .links,
 574 |   .nav2 .promotion {
 575 |     display: none;
 576 |   }
 577 | 
 578 |   .menu-items {
 579 |     position: absolute;
 580 |     display: flex;
 581 |     left: 0;
 582 |     top: 0;
 583 |     width: 100%;
 584 |     height: 100vh;
 585 |     z-index: 1;
 586 |   }
 587 | 
 588 |   .nav-links {
 589 |     width: 0;
 590 |     height: 0;
 591 |     display: none;
 592 |     right: 0;
 593 |     top: 0;
 594 |     bottom: 0;
 595 |   }
 596 | 
 597 |   .menu-items .nav-links li {
 598 |     text-decoration: none;
 599 |     list-style: none;
 600 |     margin: 20px;
 601 |   }
 602 | 
 603 |   .menu-items .nav-links li .list-link {
 604 |     text-decoration: none;
 605 |     font-weight: 600;
 606 |     font-size: 32px;
 607 |     line-height: 44px;
 608 |     color: #fff;
 609 |     text-align: center;
 610 |   }
 611 | 
 612 |   .nav-links.open-menu {
 613 |     width: 100%;
 614 |     height: 100vh;
 615 |     position: absolute;
 616 |     margin: 0;
 617 |     display: flex;
 618 |     align-items: center;
 619 |     justify-content: center;
 620 |     background: rgb(103, 101, 101);
 621 |     mix-blend-mode: multiply;
 622 |     overflow: hidden;
 623 |     opacity: 0.8;
 624 |     top: 0;
 625 |     right: 0;
 626 |     flex-direction: column;
 627 |   }
 628 | 
 629 |   ul.nav-links {
 630 |     display: none;
 631 |   }
 632 | 
 633 |   .nav1,
 634 |   .nav2 {
 635 |     display: none;
 636 |   }
 637 | 
 638 |   #btn {
 639 |     color: red;
 640 |     display: none;
 641 |     height: 35px;
 642 |     width: 35px;
 643 |     top: 20px;
 644 |     right: 20px;
 645 |     font-weight: bolder;
 646 |     position: absolute;
 647 |     z-index: 3;
 648 |     font-size: 26px;
 649 |     cursor: pointer;
 650 |   }
 651 | 
 652 |   .menu-icons {
 653 |     position: relative;
 654 |     width: 100%;
 655 |     height: 40px;
 656 |     display: flex;
 657 |     justify-content: center;
 658 |     align-items: center;
 659 |   }
 660 | 
 661 |   .art {
 662 |     display: flex;
 663 |     flex-direction: column;
 664 |     justify-content: center;
 665 |     align-items: center;
 666 |     padding: 20px 0;
 667 |     box-sizing: border-box;
 668 |   }
 669 | 
 670 |   .separator2 {
 671 |     order: 1;
 672 |     color: #ec5242;
 673 |     width: 45%;
 674 |     font-size: 10px;
 675 |   }
 676 | 
 677 |   .card-1 {
 678 |     display: none;
 679 |   }
 680 | 
 681 |   .card-2 {
 682 |     display: none;
 683 |   }
 684 | 
 685 |   .card-1.open {
 686 |     display: block;
 687 |   }
 688 | 
 689 |   .card-2.open {
 690 |     display: block;
 691 |   }
 692 | 
 693 |   .show-less {
 694 |     display: block;
 695 |   }
 696 | 
 697 |   .show-less.open {
 698 |     display: none;
 699 |   }
 700 | 
 701 |   .show-more {
 702 |     display: none;
 703 |   }
 704 | 
 705 |   .show-more.open {
 706 |     display: block;
 707 |   }
 708 | 
 709 |   .red {
 710 |     color: #ec5242;
 711 |   }
 712 | 
 713 |   .btn-more {
 714 |     box-sizing: border-box;
 715 |     width: 93%;
 716 |     margin: 24px 12px;
 717 |     padding: 12px 32px;
 718 |     color: #272a31;
 719 |     border: 1px solid #d3d3d3;
 720 |     font-size: 0.9em;
 721 |     text-align: center;
 722 |   }
 723 | }
 724 | 
 725 | @media only screen and (min-width: 768px) {
 726 |   #menu_bar {
 727 |     height: 0;
 728 |     display: none;
 729 |   }
 730 | 
 731 |   .menu-icons {
 732 |     display: none;
 733 |   }
 734 | 
 735 |   nav {
 736 |     display: flex;
 737 |     flex-direction: column;
 738 |     height: 150px;
 739 |     width: 100%;
 740 |     background: #fff;
 741 |   }
 742 | 
 743 |   .nav1 {
 744 |     display: flex;
 745 |     order: 0;
 746 |     padding-left: 65%;
 747 |     background-color: #272a31;
 748 |   }
 749 | 
 750 |   .nav1 ul li {
 751 |     list-style: none;
 752 |     padding: 3% 8%;
 753 |     box-sizing: border-box;
 754 |     color: #fff;
 755 |     font-family: 'Lato-Bold', sans-serif;
 756 |     font-weight: 450;
 757 |   }
 758 | 
 759 |   .page {
 760 |     white-space: nowrap;
 761 |   }
 762 | 
 763 |   .nav2 {
 764 |     display: flex !important;
 765 |     order: 1;
 766 |     background-color: #fff;
 767 |     justify-content: space-evenly;
 768 |   }
 769 | 
 770 |   .nav1 ul {
 771 |     display: flex;
 772 |   }
 773 | 
 774 |   .nav2 .logo {
 775 |     order: 0;
 776 |     height: 100%;
 777 |     width: 40%;
 778 |     display: flex;
 779 |     justify-content: center;
 780 |     align-items: center;
 781 |   }
 782 | 
 783 |   .logo img {
 784 |     width: 15%;
 785 |     padding: 2px;
 786 |     margin: 10px 0;
 787 |     border-radius: 50%;
 788 |     object-fit: contain;
 789 |     box-sizing: border-box;
 790 |     background-color: #fff;
 791 |     order: 0;
 792 |   }
 793 | 
 794 |   .next {
 795 |     margin: 0;
 796 |     padding: 20px 0;
 797 |     width: 50%;
 798 |     order: 1;
 799 |     display: flex;
 800 |     justify-content: space-between;
 801 |   }
 802 | 
 803 |   .nav2 .links {
 804 |     order: 0;
 805 |     display: flex;
 806 |     justify-content: flex-start;
 807 |     width: auto;
 808 |   }
 809 | 
 810 |   .nav2 .links ul {
 811 |     display: flex;
 812 |   }
 813 | 
 814 |   .nav2 .links ul li {
 815 |     list-style: none;
 816 |     padding: 3% 0;
 817 |     box-sizing: border-box;
 818 |     margin: 3% 3%;
 819 |   }
 820 | 
 821 |   .ab {
 822 |     text-decoration: none;
 823 |     font-family: 'Lato-Bold', sans-serif;
 824 |     font-weight: bolder;
 825 |     color: red;
 826 |     order: 0;
 827 |   }
 828 | 
 829 |   .ab:hover {
 830 |     color: aqua;
 831 |   }
 832 | 
 833 |   .home:hover {
 834 |     background-color: aqua;
 835 |   }
 836 | 
 837 |   .pr {
 838 |     order: 1;
 839 |   }
 840 | 
 841 |   .jo {
 842 |     order: 2;
 843 |   }
 844 | 
 845 |   .sp {
 846 |     order: 3;
 847 |   }
 848 | 
 849 |   .ne {
 850 |     order: 4;
 851 |   }
 852 | 
 853 |   .list-link {
 854 |     text-decoration: none;
 855 |     font-family: 'Lato-Bold', sans-serif;
 856 |     font-weight: bolder;
 857 |     color: black;
 858 |   }
 859 | 
 860 |   .nav2 .promotion {
 861 |     height: 50%;
 862 |     width: auto;
 863 |     order: 1;
 864 |     display: flex;
 865 |   }
 866 | 
 867 |   .nav2 .promotion .campaign {
 868 |     border: 3px solid red;
 869 |     font-weight: bolder;
 870 |     color: red;
 871 |     width: auto;
 872 |     padding: 3% 0 3% 5%;
 873 |     order: 0;
 874 |     white-space: nowrap;
 875 |   }
 876 | 
 877 |   .welcome {
 878 |     margin-top: 10%;
 879 |   }
 880 | 
 881 |   .section2 {
 882 |     display: flex;
 883 |     flex-direction: column;
 884 |     box-sizing: border-box;
 885 |     align-content: center;
 886 |     align-items: center;
 887 |     background: url('images/background\ main.jpg'), #282a34;
 888 |     background-size: auto, auto;
 889 |     background-size: contain;
 890 |     background-blend-mode: multiply;
 891 |   }
 892 | 
 893 |   .title-container {
 894 |     order: 0;
 895 |     display: flex;
 896 |     flex-direction: column;
 897 |     justify-content: center;
 898 |     align-items: center;
 899 |     padding: 40px 0;
 900 |     box-sizing: border-box;
 901 |   }
 902 | 
 903 |   .separator {
 904 |     order: 1;
 905 |     color: #ec5242;
 906 |     width: 100%;
 907 |     background-color: #ec5242;
 908 |     height: 2px;
 909 |     font-size: 10px;
 910 |     margin-top: 10px;
 911 |   }
 912 | 
 913 |   .title {
 914 |     color: #fff;
 915 |     font-weight: bolder;
 916 |     font-family: 'Lato-Bold', sans-serif;
 917 |     padding-top: 14px;
 918 |     box-sizing: border-box;
 919 |   }
 920 | 
 921 |   .program-guide {
 922 |     order: 1;
 923 |     display: flex;
 924 |     flex-direction: column;
 925 |   }
 926 | 
 927 |   .order {
 928 |     display: flex;
 929 |     order: 0;
 930 |     gap: 3px;
 931 |     justify-content: space-around;
 932 |   }
 933 | 
 934 |   .opening {
 935 |     order: 0;
 936 |     display: flex;
 937 |     flex-direction: column;
 938 |     justify-content: flex-start;
 939 |     text-align: center;
 940 |     gap: 20px;
 941 |     padding: 20px 3px;
 942 |     box-sizing: border-box;
 943 |     min-height: 288px;
 944 |     background-color: #282a34;
 945 |     opacity: 0.8;
 946 |   }
 947 | 
 948 |   .opening:hover {
 949 |     border: 2px solid #f7f7f7;
 950 |   }
 951 | 
 952 |   .opening img {
 953 |     order: 0;
 954 |     width: 30%;
 955 |     border-radius: 50%;
 956 |     object-fit: contain;
 957 |     padding: 5px;
 958 |     box-sizing: border-box;
 959 |   }
 960 | 
 961 |   .program {
 962 |     order: 1;
 963 |     color: red;
 964 |     font-family: 'Lato-Bold', sans-serif;
 965 |     justify-content: center;
 966 |     align-items: center;
 967 |     list-style: none;
 968 |   }
 969 | 
 970 |   .program-description {
 971 |     order: 2;
 972 |     color: rgb(236, 230, 230);
 973 |     font-family: 'Lato-Bold', sans-serif;
 974 |     justify-content: center;
 975 |     align-items: center;
 976 |     list-style: none;
 977 |   }
 978 | 
 979 |   .first-round {
 980 |     order: 1;
 981 |     display: flex;
 982 |     flex-direction: column;
 983 |     justify-content: flex-start;
 984 |     text-align: center;
 985 |     gap: 20px;
 986 |     padding: 20px 3px;
 987 |     box-sizing: border-box;
 988 |     min-height: 288px;
 989 |     background-color: #282a34;
 990 |     opacity: 0.8;
 991 |   }
 992 | 
 993 |   .first-round:hover {
 994 |     border: 2px solid #f7f7f7;
 995 |   }
 996 | 
 997 |   .first-round img {
 998 |     order: 0;
 999 |     width: 30%;
1000 |     border-radius: 50%;
1001 |     object-fit: contain;
1002 |     padding: 5px;
1003 |     box-sizing: border-box;
1004 |   }
1005 | 
1006 |   .break {
1007 |     order: 2;
1008 |     display: flex;
1009 |     flex-direction: column;
1010 |     justify-content: flex-start;
1011 |     text-align: center;
1012 |     gap: 20px;
1013 |     padding: 20px 3px;
1014 |     box-sizing: border-box;
1015 |     min-height: 288px;
1016 |     background-color: #282a34;
1017 |     opacity: 0.8;
1018 |   }
1019 | 
1020 |   .break:hover {
1021 |     border: 2px solid #f7f7f7;
1022 |   }
1023 | 
1024 |   .break img {
1025 |     order: 0;
1026 |     width: 30%;
1027 |     border-radius: 50%;
1028 |     object-fit: contain;
1029 |     padding: 5px;
1030 |     box-sizing: border-box;
1031 |   }
1032 | 
1033 |   .second-round {
1034 |     order: 3;
1035 |     display: flex;
1036 |     flex-direction: column;
1037 |     justify-content: flex-start;
1038 |     text-align: center;
1039 |     gap: 20px;
1040 |     padding: 20px 3px;
1041 |     box-sizing: border-box;
1042 |     min-height: 288px;
1043 |     background-color: #282a34;
1044 |     opacity: 0.8;
1045 |   }
1046 | 
1047 |   .second-round:hover {
1048 |     border: 2px solid #f7f7f7;
1049 |   }
1050 | 
1051 |   .second-round img {
1052 |     order: 0;
1053 |     width: 30%;
1054 |     border-radius: 50%;
1055 |     object-fit: contain;
1056 |     padding: 5px;
1057 |     box-sizing: border-box;
1058 |   }
1059 | 
1060 |   .final-session {
1061 |     order: 4;
1062 |     display: flex;
1063 |     flex-direction: column;
1064 |     justify-content: flex-start;
1065 |     text-align: center;
1066 |     gap: 20px;
1067 |     padding: 20px 3px;
1068 |     box-sizing: border-box;
1069 |     min-height: 288px;
1070 |     background-color: #282a34;
1071 |     opacity: 0.8;
1072 |   }
1073 | 
1074 |   .final-session:hover {
1075 |     border: 2px solid #f7f7f7;
1076 |   }
1077 | 
1078 |   .final-session img {
1079 |     order: 0;
1080 |     width: 30%;
1081 |     border-radius: 50%;
1082 |     object-fit: contain;
1083 |     padding: 5px;
1084 |     box-sizing: border-box;
1085 |   }
1086 | 
1087 |   .see-more {
1088 |     display: flex;
1089 |     order: 2;
1090 |     justify-content: center;
1091 |   }
1092 | 
1093 |   .see-it {
1094 |     order: 2;
1095 |     padding: 3% 0 3% 0;
1096 |     display: flex;
1097 |     box-sizing: border-box;
1098 |     justify-content: center;
1099 |     align-items: center;
1100 |   }
1101 | 
1102 |   .see {
1103 |     text-decoration: underline;
1104 |     color: #fff;
1105 |     font-family: 'Lato-Regular', sans-serif;
1106 |   }
1107 | 
1108 |   .menu-items {
1109 |     height: 0;
1110 |     display: none;
1111 |   }
1112 | 
1113 |   .nav-links {
1114 |     display: none;
1115 |   }
1116 | 
1117 |   #btn {
1118 |     display: none;
1119 |     height: 0;
1120 |   }
1121 | 
1122 |   .art {
1123 |     display: flex;
1124 |     flex-direction: column;
1125 |     justify-content: center;
1126 |     align-items: center;
1127 |     padding: 20px 0;
1128 |     box-sizing: border-box;
1129 |   }
1130 | 
1131 |   .separator2 {
1132 |     order: 1;
1133 |     color: #ec5242;
1134 |     width: 10%;
1135 |     font-size: 10px;
1136 |   }
1137 | 
1138 |   .artists-heading {
1139 |     font-family: 'Lato-Bold', sans-serif;
1140 |     font-weight: bolder;
1141 |     font-size: larger;
1142 |   }
1143 | 
1144 |   .singers-card {
1145 |     display: flex;
1146 |     padding-left: 12%;
1147 |     padding-right: 12%;
1148 |   }
1149 | 
1150 |   .singers-card1 {
1151 |     display: block;
1152 |     display: flex;
1153 |     padding-left: 12%;
1154 |     padding-right: 12%;
1155 |   }
1156 | 
1157 |   .singers-card2 {
1158 |     display: block;
1159 |     display: flex;
1160 |     padding-left: 12%;
1161 |     padding-right: 12%;
1162 |   }
1163 | 
1164 |   .singers {
1165 |     flex-basis: 50%;
1166 |     font-size: 1.3em;
1167 |   }
1168 | 
1169 |   .footer {
1170 |     display: block;
1171 |   }
1172 | 
1173 |   .footer-card .footer-title {
1174 |     padding-bottom: 8px;
1175 |   }
1176 | 
1177 |   .partners {
1178 |     padding-left: 15%;
1179 |     padding-right: 15%;
1180 |     padding-top: 20px;
1181 |   }
1182 | 
1183 |   .footer-card1 {
1184 |     padding-left: 10%;
1185 |     padding-right: 15%;
1186 |   }
1187 | 
1188 |   .list1 {
1189 |     flex-basis: 15%;
1190 |   }
1191 | 
1192 |   .list2 {
1193 |     flex-basis: 100%;
1194 |     font-size: 0.7em;
1195 |   }
1196 | 
1197 |   .list1 img {
1198 |     width: 50%;
1199 |     border-radius: 50%;
1200 |     object-fit: contain;
1201 |     padding: 2px;
1202 |     box-sizing: border-box;
1203 |   }
1204 | 
1205 |   .btn-more {
1206 |     display: none;
1207 |   }
1208 | }
1209 | 


--------------------------------------------------------------------------------