` with an `id` of `title`. Then put the name of your gallery inside it ! ```HTML

your favorite gallery name

``` #### 3- Put your robots inside the gallery: - Under the `title` div, create a div element with the `id` `gallery`. - This div will serve as the container for all the robot portraits. ```html

``` - Each team member should copy their robot's HTML structure (the one you provided in the `first-move.html` exercise between the `

` `

` code) and paste it inside this `gallery` div. - Ensure each robot is placed inside its own div with the class `name-robot`, do not forget to change the `name` to be your name in the team, for example: ```html

``` #### 4- Add Robot Information: Under each robot's `` (that you copied from your robot's code in `first-move.html`), add an `

` element for the robot's name and a `
` element for a short description of its power. ```html

Your robot's name

Your robot's description

``` ### Task 2: Style the Gallery #### 1- Update the CSS File: - In your HTML file, link your CSS file by pasting the following code in between the `` tags: ```html ``` - In your CSS file, add these styles: ```css * { margin: 0; box-sizing: border-box; opacity: 0.85; } body { height: 100vh; } section { padding: 20px; width: 100%; height: auto; display: flex; justify-content: center; } div, p { border: solid 1px black; padding: 10px; margin: 0; border-radius: 30px; } #face { align-items: center; margin-bottom: 20px; } #eyes { display: flex; background-color: yellow; justify-content: space-between; align-items: center; border-radius: 50px; width: 200px; } #torso { width: 150px; height: 90%; background-color: violet; } .eye { width: 60px; height: 60px; background-color: red; border-radius: 50%; } .arm { background-color: aquamarine; width: 50px; height: 100px; margin: 20px; } .leg { background-color: dodgerblue; width: 50px; height: 100px; margin: 20px; } .body-member { width: 50px; margin: 30px; } h3 { margin-bottom: 10px; } #title { text-align: center; margin: 1rem; background-color: #383086; color: rgb(158, 235, 223); } ``` > Trust the process! - Then add this gallery style block, and change the `background-color` of it based on your team's favorite color: ```css #gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 100px; padding: 100px; /* Change this color to reflect the color of your gallery */ background-color: #383086; } ``` - Add the following block of style to all your class's of `name-robot`. To do so, we follow the rule: ```css .class-one, .class-two, .class-three { /* block of style */ } ``` - Name it with your `name-robot` for each member of the team, and put inside the block the following styles: ```css { border: 2px solid #333; padding: 20px; text-align: center; background-color: #fff; border-radius: 15px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; } ``` #### 2- Add Animations: - Add a subtle `hover` animation to the robot portraits to make the gallery more dynamic and engaging. ```css .class-one:hover, .class-two:hover, .class-three:hover { transform: scale(1.05); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); } ``` > Experiment by changing the colors of the box-shadow and the scale value! Be creative. - In your `#gallery` CSS rule, add some animated gradient color to the background! You can achieve it by combining CSS properties: `background`, `background-size`, `animation`, `box-shadow`. > Hint : Do not forget to replace the background property with the new value bellow! _For Example:_ ```css background: linear-gradient( 45deg, /* Starting angle of the gradient */ red, /* First color in the gradient */ blue, /* Second color in the gradient */ green ); /* Optional third color in the gradient */ background-size: 300% 300%; /* Increases the background size for smooth animation or effects */ animation: gradientBackground 2s ease infinite; /* Animates the background to create a dynamic effect. */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow around the element. Adjust the offsets, blur radius, and opacity as needed */ ``` > You saw no change? well we did not specify yet what to do with all those colors, angles and timing yet! - Let's make it more exciting, by actually making the colors move! We can do that with `keyframes`! Under the `#gallery` css rule, put the `keyframes`` block and see the magic ! _For Example:_ ```css @keyframes gradientBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } ``` > Play with the values and colors to get the best effect for your gallery! **`Prompt Example:`** - "How do I create a smooth gradient background with multiple colors in CSS?" - "Explain to me as a beginner these CSS properties: `background`, `background-size`, `animation`, `box-shadow`." ### Task 3: Add Interactivity with JavaScript: #### 1- Add Color Change on Key Press: Inside your JavaScript file, write functions that change the colors of different parts of your robots when specific keys are pressed. Follow the following steps: - **Function to Change Arm Colors**: - Create a function named `changeArmColor`. - This function should accept a parameter `robotClass` to identify which robot to modify. - Inside the function, generate a random color using JavaScript, to both `left` and `right` arms. ```js const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`; ``` - Use `document.querySelector` to select the `left` and `right` arm elements of the robot. - Apply the random color to both arm elements using `style.backgroundColor`. - Here is an example, do the same for right arm: ```js const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`; document.querySelector(`.${robotClass} #arm-left`).style.backgroundColor = randomColor; //do the same to right arm ``` - **Function to Change Legs Colors**: - Create a function named `changeLegColor`. - Follow the same steps as the `changeArmColor` function but target the `legs`. - **Function to Change Eye Colors**: - Create a function named `changeEyeColor`. - Follow the same steps as the `changeArmColor` function but target the `eye`. - **Function to Change Face Colors**: - Create a function named `changeFaceColor`. - Follow the same steps as the `changeArmColor` function but target the `eyes` `id`. (Yes, pay attention, the `id` that changes the face color is called `eyes`!) #### 3- Adding Event Listeners for Keyboard Input: Next, you need to detect when specific keys are pressed and trigger the corresponding function. - Use `document.addEventListener` to listen for `keydown` events. - Inside the event listener, use multiple `if` statements to check which `key` was `pressed`. - Depending on the `key` pressed, call the appropriate `function` and pass the `robot's class` as an `argument`. _Code example:_ ```js document.addEventListener("keydown", function (event) { if (event.key === "1") { changeArmColor("john-robot"); } if (event.key === "2") { changeLegColor("john-robot"); } if (event.key === "Q" || event.key === "q") { changeEyeColor("john-robot"); } if (event.key === "A" || event.key === "a") { changeFaceColor("john-robot"); } // Add similar conditions for other robots choosing what keys will change the colors! //...Here }); ``` - You should decide with your team mates the keys that will trigger each robot of yours! **`Prompt Example:`** - "What is `event.key` in JavaScript and how can it be used to detect keyboard inputs?" - "How can I use `document.querySelector` to select multiple elements in JavaScript?" #### 4- Task 5: Final Touches: - Ensure that all robots are displayed correctly in the gallery. - Make sure all files (robots-harmony.html, robots-harmony.css, robots-harmony.js) are in the same folder submitted to your `Gitea`. - Double-check the code to ensure everything is clean and well-organized. ### Expected Output Your project needs to check all the previous tasks, it will look something close to (and maybe better than) [this](https://youtu.be/pWD0tbyTyiI). ### Bonus part If you would like to make your project even more creative, you can add more features to your `gallery` on top of the mandatory ones! It could be `music` to the `background`, `pop-out` information window or anything that makes your project `different`! > Remember to ensure that the mandatory part is working perfectly before adding more effects. Look at all of you—you've made it to this point, working on uniting all your robot friends after bringing them to life. Now in this final step (or maybe the beginning), use your collaboration skills as much as you can! **"Alone, we can do so little; together, we can do so much." — Helen Keller**

your favorite gallery name

` element for the robot's name and a `` element for a short description of its power. ```html

Your robot's name

` element for the robot's name and a `
` element for a short description of its power. ```html