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 13CP3
Program Plan Intro
To create a style rule for the div element with the ID butterfly and ID fox to set the width and height, also set the top, bottom, left and right coordinates as the specifications given in the question and display the background image named paa_bfly.png and paa_fox.png at the left corner of the background without tiling and set its size to cover the background in the paa_animate.css file.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Help me complete this task.
In the style rules for the mobile viewport, below the main style rule, add a new style rule for the section element that sets the background-color to #183440, the color to #fff, top margin to 4%, and padding to 3%.
Below the section style rule, create a new style rule for the article element that sets the top margin to 1% and padding to 2%.
Below the article style rule, create a new style rule for the aside element that sets the background-color to rgba(24, 52, 64, 0.3), padding to 2%, top margin to 1%, color to #183440, and a box-shadow with values of 4px 4px 10px #183440.
My CSS
/* CSS Reset */
body, header, nav, main, footer, h1, div, section, article, aside {
margin: 0;
padding: 0;
border: 0;
}
/* Style rule for body */
body {
background-color: #c8dbE3;
}
/* Style rules for mobile viewport */
/*style rule for section*/
section {
background-color: #183440;
color: #fff;
margin-top: 4%;
padding: 3%;
}
/*style rule for…
in the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element.
Add a class attribute with the value corner to the image element. Remove the height and width attributes from the image element.
<body>
<div id="container">
<!-- Use the nav area to add hyperlinks to other pages within the website -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">W3C</a></li>
</ul>
</nav>
<!-- Use the header area for the website name or logo -->
<header>
<h1>Responsive Design</h1>
</header>
<!-- Use the main area to add the main content of the webpage -->
<main>…
Add a class attribute with the value mobile-tablet to the empty div element. Nest the following elements within this div element:
An h3 element with the text Sponsorship Levels.
Paragraph element with the text Green: $200.
Paragraph element with the text Blue: $400.
Paragraph element with the text Red: $600.
Paragraph element with the text Purple: $800.
Paragraph element with the text Silver: $1,000.
Paragraph element with the text Gold: $1,500.
Paragraph element with the text Each sponsorship supports our animals and operations. Business recognition is given at every sponsorship level. Contact us today to become a sponsor.
<!DOCTYPE html>
<!--
Student Name:
File Name: partnership.html
Today's Date: 07/07/2023
-->
<html lang="en">
<head>
<title><span class="icon">🐾</span>Wild Rescues: Template</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<meta…
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
- In the styles.css file, below the #contact style rule, add a style rule for the tel-link class selector that sets the background-color to #2a1f14, padding to 2%, width to 80%, and top/bottom margins to 0 and right/left margins to auto. Below the tel-link style rule, add a style rule for the anchor selector within the tel-link class that sets the color to #f6eee4, removes the underline, and sets the font-weight to bold. What am I doing wrong here? --MY CONTACT.HTML <!DOCTYPE html> <html lang="en"> <head> <title>Wild Rescues: Contact</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> <link href="https://fonts.googleapis.com/css2?family=Emblema+One&family=Lora:ital,wght@0, 400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> </head> <body> <header> <div…arrow_forwardAdd a blank line after the header h1 style rule, add a comment with the text Style rules for navigation area, and then create the following style rules for the nav, nav ul, nav li, and nav li a selectors. Create a style rule for the nav selector that sets the background color to #1d396d. Create a style rule for nav ul that sets the list style type to none, sets the margin to 0, and aligns text center. Create a style rule for nav li that sets the display to an inline-block, sets a font size of 1.5em, sets a font family value of Verdana, Arial, sans-serif, and a font weight value of bold. Create a style rule for nav li a that sets the display to a block, sets a font color value of #e3eaf8, sets top and bottom padding values of 0.5em and left and right padding values of 2em, and removes the text decoration.arrow_forwardAdd a blank line after the header h1 style rule, add a comment with the text Style rules for navigation area, and then create the following style rules for the nav, nav ul, nav li, and nav li a selectors. Create a style rule for the nav selector that sets the background color to #1d396d. Create a style rule for nav ul that sets the list style type to none, sets the margin to 0, and aligns text center. Create a style rule for nav li that sets the display to an inline-block, sets a font size of 1.5em, sets a font family value of Verdana, Arial, sans-serif, and a font weight value of bold. Create a style rule for nav li a that sets the display to a block, sets a font color value of #e3eaf8, sets top and bottom padding values of 0.5em and left and right padding values of 2em, and removes the text decoration. 6 Add a blank line after the nav li a style rule, add a comment with the text Style rules for main content, and then create the following style rules for the main, main…arrow_forward
- Add a blank line after the contact id style rule, add a comment with the text Style rules for footer content, and then create the following style rules for the footer and footer a selectors. Create a style rule for the footer selector that aligns text center, sets a font size value of 0.85em, sets a background color value of #2a1f14, sets a font color value of #f6eee4, and sets top and bottom padding values to 1% and right and left padding values to 0%. Create a style rule for footer a that sets the font color value to #f3e6d8 and removes the text decoration. I'm not sure what is wrong then my footer section. --- HTML <!-- Write your code here --> <!--Student Name: File Name: contact.html Date:10/04/2022 --> <!DOCTYPE html> <html lang="en"> <head> <title>Wild Rescues: Contact</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/styles.css" /> <body> <header> <img…arrow_forwardIn the styles.css file, add the section, aside, figure, and figcaption elements to the CSS reset. Below the img style rule, add the following comment and style rule: /* Style rule for box sizing applies to all elements */ * { box-sizing: border-box; } Create a style rule for the aside element within the mobile viewport and include the following declarations: text-align: center; font-size: 1.5em; font-weight: bold; color: #373684; text-shadow: 3px 3px 10px #8280cb; Create a style rule for the figure element within the mobile viewport, and include the following declarations: position: relative; max-width: 275px; margin: 2% auto; border: 8px solid #373684; Create a style rule for the figcaption element within the mobile viewport, and include the following declarations: position: absolute; bottom: 0; background: rgba(55, 54, 132, 0.7); color: #fff; width: 100%; padding: 5% 0; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 1.5em; font-weight:…arrow_forwardGo to the "Flex Layout Styles" section and insert a style rule to display the body element as a flexbox oriented as rows with wrapping. The page body content has two main elements. The section element with the ID sheet contains the panels from the comic book page. The article element contains information about the comic book industry during the Golden Age. Devan wants more of the page width to be given to the comic book sheet. Add a style rule that sets the flex growth and shrink rate of the section#sheet selector to 3 and 1 respectively and set its flex basis size to 301 pixels. Less page width will be given to the article element. Create a style rule to set its flex growth and shrink values to 1 and 3 respectively and set its flex basis size to 180 pixels. Mobile Devices Go to the "Mobile Devices" section and create a media query for screen devices with a maximum width of 480 pixels. With mobile devices, Devan wants each comic book panel image to occupy a single row. Create a style…arrow_forward
- Revise the following img element to attach it to the mapsites image map: <img src=”logo.png” alt=”” />arrow_forwardCSS question Scroll down to the section element and, directly after the initial paragraph, insert a form element that employs the action at the fictional address http://www.example.com/redball/customer using the post method. Within the form element, insert a div element that encloses a label with the text Name* associated with the nameBox control. Also, within the divelement, add an input text box with the ID nameBox, field name custName, and placeholder text First and Last Name. Make custName a required field. (Hint: To make a field required, add the required attribute to the corresponding control element e.g. <input ... required>)arrow_forwardCreate a style rule for the table header row group including every row within that row group that sets the row height to 60 pixels. For the first th element in the first row of the table header row group, create a style rule that sets its font size to 2em. (Hint: Use the first-of-type pseudo-class to select the first table row and first heading cell.) For th elements in the first row of the table header row group that are not the first heading cell, create a style rule that sets the background color to transparent and the font color to black. (Hint: use the not selector with the first-of-typepseudo-class to select headings that are not first in the table row.)arrow_forward
- Open the code6-1_table.css file and create the following style rules for the indicated elements: 1. For the table element: Add a 20 pixel grooved gray border and collapse the table borders. 2. For the th and td elements: Add a 1 pixel solid gray border, set the padding space to 5 pixels, and align the cell content with the top-left corner of the cell. 3. For the caption element, set the display the caption at the top-left of the table and set the font size of the caption text to 1.5em. 4. For col element with the id first Col, change the background color to yellow and set the column width to 150 pixels. 5. For col element with the id hourCols, set the column width to 75 pixels. 6. Change the background color of the thead element to aqua.arrow_forwardCSS question Add another div element to the web form containing the following code: Insert an input element to create an option button for the orderType field with the ID delivery. Make the option button checked by default. After the option button, insert a label associated with the delivery control containing the text Delivery. Add an input element to create a second option button for the orderType field with the ID pickup, followed by a label associated with the pickup control containing the text Pickup.arrow_forward***I have the files needed for the remainder of the assignment. I just need help setting up the style sheet.***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 Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning