New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN: 9781305503922
Author: Patrick M. Carey
Publisher: Cengage Learning
expand_more
expand_more
format_list_bulleted
Question
Chapter 8, Problem 9CP2
Program Plan Intro
Toapply the moveRed animation to the redBall image over a 5-second interval also with linear timing and infinite looping.
To apply the moveBlue animation to the blueBall image over a 5-second interval also with linear timing and infinite looping.
To apply the hideText animation to the redSpeed1 and blueSpeed1 div elements using the same timing parameters as the previous two animations.
Finally, apply the showText animation to the redSpeed2 and blueSpeed2 div elements using the same timing parameters as with the other three animations.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solutionStudents have asked these similar questions
have three versions of the image with the same height and width. All three versions are placed inside of a figure element.
three images should have margin.
the first version should have an invert filter, with a text on the bottom of it. The text should have background opacity, border, padding, different font-size, and font color.
the second version should have a blur filter, with a text in the middle of it. The text should have background opacity, different font size and color, padding, box shadow, and a hyperlink with background color, font color, and padding.
the third version must have a linear gradient filter, have at least three paragraphs with different width and placed in different places on the webpage, and have a title in the center of webpage.
What can you use the plot's tight_layout() method for?
Select an answer:
to automatically adjust subplots so they fit into the figure area
to reduce the pixel resolution of the exported image
to remove unnecessary legend elements from the plot
to move all axis labels into the chart itself
Use media queries to create a responsive design for the menu shown in Figure 5–57. You will need to create three menu layouts: one for screen widths 500 pixels or less, another for screen widths of 501 pixels to 710 pixels, and a third for screen widths greater than 710 pixels.
1. Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0.
2. Open code5-1_media.css file and create a media query for devices with a maximum width of 500 pixels. Within the query do the following:
Set the display of the img element within the article element to none.
Center the text contained within the ul element belonging to the submenu class.
3. Create a media query for devices with a minimum width of 501 pixels. Within the query do the following:
Float the nav element on the left page margin.
Set the width of the nav element to 130 pixels and the height to 400 pixels.
Set the…
Chapter 8 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 8.2 - Prob. 1QCCh. 8.2 - Prob. 5QCCh. 8.2 - Prob. 7QCCh. 8.2 - Prob. 8QCCh. 8 - Prob. 1RACh. 8 - Prob. 2RACh. 8 - Prob. 3RACh. 8 - Prob. 4RACh. 8 - Prob. 7RACh. 8 - Prob. 8RA
Ch. 8 - Prob. 9RACh. 8 - Prob. 10RACh. 8 - Prob. 11RACh. 8 - Prob. 12RACh. 8 - Prob. 13RACh. 8 - Prob. 14RACh. 8 - Prob. 15RACh. 8 - Prob. 16RACh. 8 - Prob. 17RACh. 8 - Prob. 18RACh. 8 - Prob. 19RACh. 8 - Prob. 2CP1Ch. 8 - Prob. 3CP1Ch. 8 - Prob. 4CP1Ch. 8 - Prob. 5CP1Ch. 8 - Prob. 6CP1Ch. 8 - Prob. 7CP1Ch. 8 - Prob. 8CP1Ch. 8 - Prob. 9CP1Ch. 8 - Prob. 11CP1Ch. 8 - Prob. 1CP2Ch. 8 - Prob. 2CP2Ch. 8 - Prob. 3CP2Ch. 8 - Prob. 4CP2Ch. 8 - Prob. 5CP2Ch. 8 - Prob. 6CP2Ch. 8 - Prob. 7CP2Ch. 8 - Prob. 8CP2Ch. 8 - Prob. 9CP2Ch. 8 - Prob. 10CP2Ch. 8 - Prob. 2CP3Ch. 8 - Prob. 3CP3Ch. 8 - Prob. 5CP3Ch. 8 - Prob. 6CP3Ch. 8 - Prob. 7CP3Ch. 8 - Prob. 8CP3Ch. 8 - Prob. 9CP3Ch. 8 - Prob. 10CP3Ch. 8 - Prob. 11CP3Ch. 8 - Prob. 12CP3Ch. 8 - Prob. 13CP3Ch. 8 - Prob. 14CP3Ch. 8 - Prob. 15CP3Ch. 8 - Prob. 16CP3Ch. 8 - Prob. 17CP3Ch. 8 - Prob. 18CP3Ch. 8 - Prob. 1CP4Ch. 8 - Prob. 2CP4Ch. 8 - Prob. 3CP4Ch. 8 - Prob. 4CP4Ch. 8 - Prob. 5CP4Ch. 8 - Prob. 6CP4Ch. 8 - Prob. 7CP4Ch. 8 - Prob. 9CP4Ch. 8 - Prob. 10CP4
Knowledge Booster
Similar questions
- Write matab code to rotate an image by 90 degrees. Take image and dimensions of your choice and please attach the screenshot of both actual and rotated image.arrow_forwardQ2- The image given below is a 5x5, what will the value of the center pixel change to when this image is passed through smoothing filter. 10 12 10 11 14 11 11 12 10 11 15 15 150 12 14 10 12 14 10 11 12 13 14 12 12arrow_forwardcreate this exact same UI on the image using react native. provide all the code and screenshoot of your resultarrow_forward
- Create a two-pane Fragment layout where both fragments are generated and inserted programmatically into a layout at runtime. Have each Fragment take up 50% of the screen space, and use different colors for each Fragment.arrow_forwardQ1. Create a bouncing ball animation effect using Sinfig. Take the Screenshots of all the steps with output. Using gimparrow_forwardNonearrow_forward
- CSS Add a body selector and set the following: Set the font family to sans-serif.Add a class called text-center and set it to align text to the center.Create an id called slideshow:Set the margin to 80px (up/down) and auto (left/right).Set the position to relative.Set the height and width to 240px.Set the padding to 10px.set the box shadow with the following:height offset: 0vertical offset: 0blur: 20pxcolor: rgba color of black with an opacity of 0.4 (HINT: Make sure to apply the opacity to the box-shadow, not the image.)Create another id of slideshow with a child of div:Set the position to absolute.Set the top, left, right, and bottom to 10px.arrow_forwardCSS Add a body selector and set the following:Set the font family to sans-serif.Add a class called text-center and set it to align text to the center.Create an id called slideshow:Set the margin to 80px (up/down) and auto (left/right).Set the position to relative.Set the height and width to 240px.Set the padding to 10px.set the box shadow with the following:height offset: 0vertical offset: 0blur: 20pxcolor: rgba color of black with an opacity of 0.4 (HINT: Make sure to apply the opacity to the box-shadow, not the image.)Create another id of slideshow with a child of div:Set the position to absolute.Set the top, left, right, and bottom to 10px. HTML At the top of your HTML page, create an h1 tag with a class of text-center. The content of that h1 tag should say Lesson 11 Project.In the body of your HTML, create the following:Create a div with an id of slideshow.Inside that id, create 3 div tags.Inside each div tag, add an img tag.Go to the web and find 3 images that are 240px by…arrow_forwardPlease make an animation using html, css, and javascript in visual studios to the best of your ability. It should be about an unknown creature interacting with a human: Also make it interactive for the user by adding buttonsw/ actionlisteners to transition between scenes, and use a typing effect for the words. You can make the character images fade in and fade out as well. Please base it off of this script: In the dead of night, beneath a moon veiled by ominous clouds, a lone figure trudged along a desolate forest path. The crunch of dry leaves beneath her feet echoed through the eerie silence, a sound that seemed to mock her solitude. Unknown to her, she was not alone. From the shadows emerged a creature of the night, its form obscured by darkness and its presence announced only by the faint rustle of leaves. Eyes gleamed with an otherworldly luminescence, fixed upon the unsuspecting traveler. Human: (Halting her steps, senses on edge) Who's there? Show yourself!…arrow_forward
- Please help me with this 1. Make the body of the page have a background of tiled “waves.png” images. This image is in the images folder. 2. Add padding (10px) to the entire body of the page. 3. Add a top and bottom margin (10px) as well as padding (10px) to the each movie description. 4. Change the background of each movie description to white, and the background colour for the box enclosing the page content to the following RGB values: R = 246, G = 212, B = 212. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Movie Recommendations</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1> Movie Recommendations </h1> <h2> Some Science Fiction Movies Worth Watching </h2> </header> <div class="movie"> <h2> Ghost in the Shell <span…arrow_forwardCreate and put into action a visual representation of the Towers of Hanoi conundrum. Permit the user to specify the puzzle's disc count. There should be two primary methods for the user to engage with the puzzle. The programme should make sure that each move is allowed since the user can drag the discs from one pin to another with the cursor. With pause/resume buttons, the viewer can also observe an animation of a solution in action. Allow the viewer to regulate the animation's pace. Create and put into action a visual representation of the Towers of Hanoi conundrum. Permit the user to specify the puzzle's disc count. There should be two primary methods for the user to engage with the puzzle. The programme should make sure that each move is allowed since the user can drag the discs from one pin to another with the cursor. With pause/resume buttons, the viewer can also observe an animation of a solution in action. Allow the viewer to regulate the animation's pace.arrow_forwardCreate a dashoard with a logo at the top of the webpage, below make the title ( Dynamic Dashboard) changes according to the time (e.g. Good morning, good afternoon, good evening, good night). And let there be images on both side (4 inches apart from the title that correspond with the greeting) and then underneath all that we have four boxes (2 at the top and another 2 at the bottom). Box 1 contains a calendar. Box 2 contains the time. Box 3 contains a title with a number list of things to write above. And Box 4 contains quotes. There would be 5 quotes which alternate every day. The in the bottom create a footer. (c) Author: …. In the top left hand corner of the screen create a side bar (3 dashes as logo) that slides out to two buttons (dashboard and editor). Dashboard take the user the dashboard, while clicking the editor takes the user to a document editor application. then at the top right hand side of the sidebar let there be an X to close the sidebar Combine the html, css, and…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
- New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage LearningCOMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L