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 4, Problem 12CP2
Program Plan Intro
To save the changes to the stylesheet 'sf_effects.css', then open 'sf_torte.html' in the web browser. Verify that the design of the web page matches the given image and, hovering the mouse pointer over the navigation tabs will change the background color to match the page color.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solutionStudents have asked these similar questions
How to create a product table page:
To create the product list page, you can copy the index.html file you worked on in exercise 7 to the products folder. Then, you can delete the content from the main section and modify the URLs on the page as necessary.
• Modify the horizontal navigation menu so it indicates that the product list page is the current page.
• Add a table to the section with a caption, a header, and a body as shown above. Be sure to merge the rows in the first column for each category so the category name is displayed only in the first row.
Create a new style sheet named summary.css for the product list page, and copy the styles you need from the main.css file to this style sheet. Then, modify the link element for the style sheet in the products/index.html file so it points to the correct style sheet.
• Align the caption, headings, and data, and apply any other required formatting as shown above. Use a structural pseudo-class selector to apply a background color of…
Open index.html in your browser to view the file.
Add the text, CH 5 Extend Your Knowledge, to the title element.
Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules:
Add a declaration for the position property with a value of -webkit-sticky.
Add a declaration for the position property with a value of sticky.
Add a declaration for the top property and specify a 0 value.
Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position.
In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations:
Add a declaration for the position property with a value of relative.
Add another declaration for the top property and specify a value of 90px.
Add another declaration for the left property…
How to do this exercise?
Halloween 15 Add a transition and an animation
In this exercise, you’ll add a transition and an animation to the product page that you created in exercise 11. When you’re done, the page should look similar to this:
Specifications
• Add a transition for the widths of the images in the right sidebar of the cat.html file in the products folder that will last for three seconds and use the linear speed curve. The transition should increase the width of an image to 125 pixels when the mouse hovers over an image. Be sure to provide for all browsers.
• Add an animation for the image in the section that will cause the image to move up and down when the page is loaded. The animation should last for half a second, use the ease-in-out speed curve, repeat six times, and alternate directions on each repetition
Chapter 4 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 4.1 - Prob. 1QCCh. 4.1 - Prob. 2QCCh. 4.1 - Prob. 3QCCh. 4.1 - Prob. 4QCCh. 4.1 - Prob. 5QCCh. 4.1 - Prob. 6QCCh. 4.1 - Prob. 7QCCh. 4.1 - Prob. 8QCCh. 4.1 - Prob. 9QCCh. 4.2 - Prob. 1QC
Ch. 4.2 - Prob. 2QCCh. 4.2 - Prob. 3QCCh. 4.2 - Prob. 4QCCh. 4.2 - Prob. 5QCCh. 4.2 - Prob. 6QCCh. 4.2 - Prob. 7QCCh. 4.2 - Prob. 8QCCh. 4.2 - Prob. 9QCCh. 4.3 - Prob. 1QCCh. 4.3 - Prob. 2QCCh. 4.3 - Prob. 3QCCh. 4.3 - Prob. 4QCCh. 4.3 - Prob. 5QCCh. 4.3 - Prob. 6QCCh. 4.3 - Prob. 7QCCh. 4.3 - Prob. 8QCCh. 4.3 - Prob. 9QCCh. 4 - Prob. 1RACh. 4 - Prob. 2RACh. 4 - Prob. 3RACh. 4 - Prob. 4RACh. 4 - Prob. 5RACh. 4 - Prob. 6RACh. 4 - Prob. 7RACh. 4 - Prob. 8RACh. 4 - Prob. 9RACh. 4 - Prob. 10RACh. 4 - Prob. 11RACh. 4 - Prob. 12RACh. 4 - Prob. 13RACh. 4 - Prob. 14RACh. 4 - Prob. 15RACh. 4 - Prob. 16RACh. 4 - Prob. 17RACh. 4 - Prob. 18RACh. 4 - Prob. 19RACh. 4 - Prob. 20RACh. 4 - Prob. 21RACh. 4 - Prob. 22RACh. 4 - Prob. 23RACh. 4 - Prob. 24RACh. 4 - Prob. 25RACh. 4 - Prob. 1CP1Ch. 4 - Prob. 2CP1Ch. 4 - Prob. 3CP1Ch. 4 - Prob. 4CP1Ch. 4 - Prob. 5CP1Ch. 4 - Prob. 6CP1Ch. 4 - Prob. 7CP1Ch. 4 - Prob. 8CP1Ch. 4 - Prob. 9CP1Ch. 4 - Prob. 10CP1Ch. 4 - Prob. 11CP1Ch. 4 - Prob. 1CP2Ch. 4 - Prob. 2CP2Ch. 4 - Prob. 3CP2Ch. 4 - Prob. 4CP2Ch. 4 - Prob. 5CP2Ch. 4 - Prob. 6CP2Ch. 4 - Prob. 7CP2Ch. 4 - Prob. 8CP2Ch. 4 - Prob. 9CP2Ch. 4 - Prob. 10CP2Ch. 4 - Prob. 11CP2Ch. 4 - Prob. 12CP2Ch. 4 - Prob. 1CP3Ch. 4 - Prob. 2CP3Ch. 4 - Prob. 3CP3Ch. 4 - Prob. 4CP3Ch. 4 - Prob. 5CP3Ch. 4 - Prob. 6CP3Ch. 4 - Prob. 7CP3Ch. 4 - Prob. 8CP3Ch. 4 - Prob. 9CP3Ch. 4 - Prob. 10CP3Ch. 4 - Prob. 11CP3Ch. 4 - Prob. 12CP3Ch. 4 - Prob. 13CP3Ch. 4 - Prob. 1CP4Ch. 4 - Prob. 2CP4Ch. 4 - Prob. 3CP4Ch. 4 - Prob. 4CP4Ch. 4 - Prob. 5CP4Ch. 4 - Prob. 6CP4
Knowledge Booster
Similar questions
- Assume you have “gif” image. Write an HTML element that displays the image within a width of 110 and a height of 100. If the image cannot be displayed, an alternative message “logo SEU unavailable” will be shown. Modify the previous HTML document to transform the logo to a hyperlink. Clicking the image will take the user to the SEU website. Notes: You must copy and paste the “HTML script” as your answer for this question. DON’T take screen shot for your HTML script. It must be editable script. Take a screen shot and paste it as a part of your answer.arrow_forwardQUESTION: Navigation Lists Next, you’ll format the appearance of navigation lists on the page. Go to the Navigation Styles section and create a style rule for the nav a selector that displays the hypertext links using the font stack: Trebuchet MS, Helvetica, sans-serif. Set the top and bottom padding to 10 pixels. For every unvisited and previously visited hypertext link within a nav element, set the text color to white, remove underlining from the link text, and set the background color to the semi-transparent value hsla(0, 0%, 42%, 0.4). For every active or hovered link in a nav element, set the text color to the semi-transparent value hsla(0, 0%, 100%, 0.7) and set the background color to the semi-transparent value hsla(0, 0%, 42%, 0.7). CODE BELOW: @charset "UTF-8"; @font-face { font-family: Champagne; src: url("cac_champagne.woff") format("woff"), url("cac_champagne.ttf") format("truetype"); } @font-face { font-family: Grunge; src: url("1942.woff")…arrow_forwardTo disable the built-in validation tools provided by your users’ browsers when they interact with your “Get a Quote” web form, you can apply the statementdocument.forms.quoteReqForm.noValidate = true;in your JavaScript file; add the attributenovalidateto the<form>tag in your HTML file; or add the attributeformnovalidateto the tag for the form’s submit button in your HTML file. Select one: True Falsearrow_forward
- Display the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements".arrow_forwardHelp me complete this task. Add the following style rules for the form elements. Create a style rule for the fieldset and input elements that sets the bottom margin to 2%. Create a style rule for the fieldset legend that sets the font-size to 1.25em and makes the font bold. Create a style rule for the label that sets the display to block and sets padding-top to 3%. Create a style rule for the btn class selector that removes the border, sets the top and bottom margin to zero and the left and right margin to auto, sets the display to a block, sets the padding to 5%, sets the background-color to 003399, sets the font-size to 1.25em, sets the border-radius to 10px, and sets the color to white (fff). --my css /* Style for body specifies a background color */ body { background: linear-gradient(to top right, #fff 0%, #6699ff 100%) no-repeat fixed center; font-family: Geneva, Arial, sans-serif; } /* Style for the container element */ #container { width: 90%; margin: 0 auto; }…arrow_forwardOpen the code5-2_flex.css file. Display the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements".arrow_forward
arrow_back_ios
arrow_forward_ios
Recommended textbooks for you
- New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage LearningNp Ms Office 365/Excel 2016 I NtermedComputer ScienceISBN:9781337508841Author:CareyPublisher:Cengage
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage