Task 1. Create a new page (games.html): Use the music page as the starting point for the Game page. In your text editor open music.html and save it as games.html. After modifying the games page, it will look similar to the Games page in Figure 1. Change the page title to an appropriate phrase. Delete the div element with id="musicbg", then open the style.css in your text editor and delete all the rules for id = “musicbg”. This will remove the music image from the new page. Replace the text within the h2 element with following: “My Favorite Video Games”. Delete paragraph, h3 and table elements. Place an unordered list with your 4 favorite video games as list items. Create a photo gallery with 4 pictures: • Search on the internet for cover picture of your favorite games, and same them in your folder. For each image create another image as thumbnail. You can use windows paint or any other image editor to resize the images. • After completing the previous step, in your folder, you will have 8 new image files that show 4 pictures. For instance: photo1.jpg and photo1thumb.jpg for your first game, and so on. • Add all images and their thumbnail version as an unordered list to the games page. • Place the first image inside a figure element. • In css file add all the required rules to show 4 thumbnail pictures on the left side and the first large picture (the one within the figure tag) on the right side. Your gallery will look like the following image but with your own video pictures. Add a hover effect that changes the image on the right: • Add a script tag in the head section of games.html to access a jQuery CDN. • Code a jQuery script block that includes the ready event and use the hover function to change the anchor elements within the gallery with moving your mouse over each thumbnail image. Task 2. Add javaScript to your home page: Create an alert window to show the text “Welcome to My little Library” when the home page is loaded. In the page footer section after the e-mail link, add div element that contains a script block that will write the following message to the document: “This page was last modified on: date” Use the document.lastModified property to print the date. GameHtml: My Little Library My Little Library Home Books Music Video Games Contact My Favorite Video Games Game 1 Game 2 Game 3 Game 4 Grand Theft Auto HomeHtml My Little Library My Little Library Home Books Music Video Games Contact Find your most favorite item My little library provides all sort of books, music and video games. More You can find out your favorite stories. For order, please send me an Email Books Music Video Games

Question

Task 1. Create a new page (games.html):
Use the music page as the starting point for the Game page. In your text editor open music.html
and save it as games.html. After modifying the games page, it will look similar to the Games page
in Figure 1.
Change the page title to an appropriate phrase.
Delete the div element with id="musicbg", then open the style.css in your text editor and delete
all the rules for id = “musicbg”. This will remove the music image from the new page.
Replace the text within the h2 element with following: “My Favorite Video Games”.
Delete paragraph, h3 and table elements.
Place an unordered list with your 4 favorite video games as list items.
Create a photo gallery with 4 pictures:
• Search on the internet for cover picture of your favorite games, and same them in your folder.
For each image create another image as thumbnail. You can use windows paint or any other
image editor to resize the images.
• After completing the previous step, in your folder, you will have 8 new image files that show
4 pictures. For instance: photo1.jpg and photo1thumb.jpg for your first game, and so on.
• Add all images and their thumbnail version as an unordered list to the games page.
• Place the first image inside a figure element.
• In css file add all the required rules to show 4 thumbnail pictures on the left side and the first
large picture (the one within the figure tag) on the right side. Your gallery will look like the
following image but with your own video pictures.
Add a hover effect that changes the image on the right:
• Add a script tag in the head section of games.html to access a jQuery CDN.
• Code a jQuery script block that includes the ready event and use the hover function to
change the anchor elements within the gallery with moving your mouse over each
thumbnail image.
Task 2. Add javaScript to your home page:
Create an alert window to show the text “Welcome to My little Library” when the home page is
loaded.
In the page footer section after the e-mail link, add div element that contains a script block that
will write the following message to the document:
“This page was last modified on: date”
Use the document.lastModified property to print the date.

GameHtml: <title>My Little Library</title>

</head>

</script>

<body>

<h1>My Little Library</h1>

</header>

<nav>

<b><a href="Home.html">Home</a>   <a href="Books.html">Books</a>   <a href="Music.html">Music</a>   <a href="VideoGames.html">Video Games</a>   <a href="Contact.html">Contact</a>  </b>

</nav>

<main>

<h2>My Favorite Video Games</h2>

<ul>

</ul>

<div>

</div id = "gallery">

<ul>

<li>

</ul>

<img src = "Game5.jfif" width="600" height="500" alt = "Grand Theft Auto"> <figcaption>Grand Theft Auto</figcaption>

</figure> <div></div>

</main>

HomeHtml

<title>My Little Library</title>

</head>

<body>

<main>

<h1>My Little Library</h1> </header>

$(document).ready(function() {alert("Welcome to My little Library!");

}) </script><nav><b><a href="Home.html">Home</a>   <a href="Books.html">Books</a>   <a href="Music.html">Music</a>   <a href="VideoGames.html">Video Games</a>   <a href="Contact.html">Contact</a>  </b>

</nav> </main><h2>Find your most favorite item</h2>

<p>My little library provides all sort of books, music and video games.</p> <a href= "#" id="more">More </a>

<p> You can find out your favorite stories. For order, please send me an Email</p></div> <ul><input type="text" id="more">

<li>Books</li>

<li>Music</li>

<li>Video Games</li>

</ul>

<div>

</body>