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 5, Problem 8CP1
Program Plan Intro
To create a CSS style rule in file gp_layout.css to set the growth and shrink rate of the sheet section to 3and 1 respectively and set its basis size to 301 pixels.
Expert Solution & Answer
Trending nowThis is a popular 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…
Go 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…
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…
Chapter 5 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 5.2 - Prob. 8QCCh. 5.2 - Prob. 9QCCh. 5.3 - Prob. 8QCCh. 5.3 - Prob. 9QCCh. 5 - Prob. 1RACh. 5 - Prob. 2RACh. 5 - Prob. 3RACh. 5 - Prob. 4RACh. 5 - Prob. 5RACh. 5 - Prob. 6RA
Ch. 5 - Prob. 7RACh. 5 - Prob. 8RACh. 5 - Prob. 9RACh. 5 - Prob. 10RACh. 5 - Prob. 11RACh. 5 - Prob. 12RACh. 5 - Prob. 13RACh. 5 - Prob. 14RACh. 5 - Prob. 15RACh. 5 - Prob. 16RACh. 5 - Prob. 17RACh. 5 - Prob. 18RACh. 5 - Prob. 19RACh. 5 - Prob. 20RACh. 5 - Prob. 21RACh. 5 - Prob. 22RACh. 5 - Prob. 23RACh. 5 - Prob. 24RACh. 5 - Prob. 25RACh. 5 - Prob. 26RACh. 5 - Prob. 1CP1Ch. 5 - Prob. 2CP1Ch. 5 - Prob. 3CP1Ch. 5 - Prob. 4CP1Ch. 5 - Prob. 5CP1Ch. 5 - Prob. 6CP1Ch. 5 - Prob. 7CP1Ch. 5 - Prob. 8CP1Ch. 5 - Prob. 9CP1Ch. 5 - Prob. 10CP1Ch. 5 - Prob. 11CP1Ch. 5 - Prob. 12CP1Ch. 5 - Prob. 13CP1Ch. 5 - Prob. 14CP1Ch. 5 - Prob. 15CP1Ch. 5 - Prob. 16CP1Ch. 5 - Prob. 17CP1Ch. 5 - Prob. 18CP1Ch. 5 - Prob. 19CP1Ch. 5 - Prob. 1CP2Ch. 5 - Prob. 2CP2Ch. 5 - Prob. 3CP2Ch. 5 - Prob. 4CP2Ch. 5 - Prob. 5CP2Ch. 5 - Prob. 6CP2Ch. 5 - Prob. 7CP2Ch. 5 - Prob. 8CP2Ch. 5 - Prob. 9CP2Ch. 5 - Prob. 10CP2Ch. 5 - Prob. 11CP2Ch. 5 - Prob. 12CP2Ch. 5 - Prob. 13CP2Ch. 5 - Prob. 14CP2Ch. 5 - Prob. 15CP2Ch. 5 - Prob. 16CP2Ch. 5 - Prob. 17CP2Ch. 5 - Prob. 18CP2Ch. 5 - Prob. 19CP2Ch. 5 - Prob. 20CP2Ch. 5 - Prob. 21CP2Ch. 5 - Prob. 1CP3Ch. 5 - Prob. 2CP3Ch. 5 - Prob. 3CP3Ch. 5 - Prob. 4CP3Ch. 5 - Prob. 5CP3Ch. 5 - Prob. 6CP3Ch. 5 - Prob. 9CP3Ch. 5 - Prob. 2CP4
Knowledge Booster
Similar questions
- 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>…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_forwardcreate another div element with a width and height of 600 px. create a radial gradient with three colors. Start in the bottom left corner with the colors changing as they move along the gradient line to the right.arrow_forward
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