EBK NEW PERSPECTIVES ON HTML5, CSS3, AN
6th Edition
ISBN: 9781337516358
Author: Carey
Publisher: CENGAGE LEARNING - CONSIGNMENT
expand_more
expand_more
format_list_bulleted
Question
Chapter 4, Problem 10CP3
Program Plan Intro
a) To create a style rule to place the elements of cube class using relative positioning.
Program Plan Intro
b) To create a style rule to set top margin as 180 pixels, bottom margin as 150 pixels, and right and left margin as auto.
Program Plan Intro
c) To create a style rule to set height and width to 400 pixels.
Program Plan Intro
d) To create a style rule to set perspective of space to 450 pixels.
Expert Solution & Answer
Trending nowThis is a popular solution!
Students have asked these similar questions
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".
Finally, within the form, add a div element containing a submit button displaying the text Begin Building your Order. (Hint: To code a submit button, use the input element and set its type attribute to "submit". You can also add a value attribute and set its value to the text you want to show on the button. Example: <input type="submit" value="This is text shown on the button">)
I am having an issue I am not sure what error I have with this code when I execute it.
Here are the instructions for the code:
Column Styles
Next, you’ll format the grid columns. Go to the Column Styles section. Create a style rule to float all div elements whose class value starts with “col-” on the left margin. Set the padding around all such elements to 2%. Finally, apply the Border Box Sizing model to the content of those elements.(Note: Remember to use web extensions to provide support for older browsers.)
In the same section, create style rules for div elements with class names .col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, and .col-3-4 to set their widths to 100%, 50%, 33.33%, 66.67%, 25%, and 75% respectively.
Here is my code:
div[class^="col-"]{
float:left;
padding: 2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.col-1-1 {width: 100%;}
div.col-1-2 {width: 50%;}
div.col-1-3 {width: 33.33%;}
div.col-2-3 {width:…
Chapter 4 Solutions
EBK NEW PERSPECTIVES ON HTML5, CSS3, AN
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
- Please help mearrow_forwardBelow the main element, add a comment with the text Footer. Below the comment, add a footer element that includes a class attribute with a value to make a fluid jumbotron, center align text, and padding of 5. Nest the following div element within the footer element: <div class="container text-white"> <p>© Copyright 2021. All Rights Reserved.</p> <p><a href="mailto:contact@wildrescues.net" class="text-white">contact@wildrescues.net</a></p> <a href="https://www.facebook.com" target="_blank"><img src="images/facebook-logo.png" alt="white Facebook logo" class="pr-4"></a> <a href="https://twitter.com" target="_blank"><img src="images/twitter-logo.png" alt="white Twitter logo"></a> </div> Need to Add the footer element with the required class selectors. The index.html is: <footer> <!-- Footer --> <footer…arrow_forwardPlease help me can you create the code and scheme for the Snake game in the Arduino or tinkercad with the 8x8 matrix led and 4 button. Please helparrow_forward
- Note: The remaining buttons and paragraphs do not have id attributes. You will need to construct selectors to meet these challenges. For the following I need the Javascript code not the HTML code. In the "myPage" section, select the third button and assign a "click" listener. When clicked, it should change the text content of the third paragraph in the "myPage" section to "Third button clicked." ///////// // HINT: You should look at the HTML carefully to // make your selectors. In the "myPage" section, select the fourth button and assign a "click" listener. When clicked, it should add a class named "fourthPara" to the fourth paragraph in the "myPage" section. In the "myPage" section, select the fifth button and assign a "click" listener. When clicked, it should toggle the class named "fourthPara" for the fifth paragraph in the "myPage" section. In the "myPage" section, select the sixth button and assign a "click" listener. When clicked, it should change the text content of the sixth…arrow_forwardMake sure that the heading that starts with “Children’s Lessons” does not float to the right of the image by clearing the float at that element. In the ski.html file, add the following attribute/value pair to the opening tag that marks the Children’s Lessons heading: class="clearfloat"arrow_forwardPlease answer: 2,3,4,5,6,7,8,10arrow_forward
- Event Listeners Go to the co_cart.js file in your editor. Directly below the initial comment section, add an event listener for the window load event that does the following when the page is loaded: Runs the calcCart() function. Add an event handler to the modelQty field in the cart form that runs the calcCart() function when the field value is changed. A for loop that loops through every option in the group of shipping option buttons, adding an event handler to run the calcCart() function when each option button is clicked. JavaScript Functions Create the calcCart() function to calculate the cost of the customer’s order using field values in the cart form. Within the calcCart() function do the following: Create a variable named orderCost that is equal to the cost of the espresso machine stored in the modelCost field multiplied by the quantity of machines ordered as stored in the modelQty field. Display the value of the orderCost variable in the orderCost field, formatted as U.S.…arrow_forwardOpen 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…arrow_forwardQ2: Create table as below and shading the first row. Insert an Octagon and write your name in the center Day/ Sunday Monday Tuesday Wednesday | Computer | Science Friday Period I Period II Period IVv | Period V |Science Computer | Math Math English |Computer | English Computer | Science English Computer | Math Science English Math Math Science English > Create margin at the top & bottom 1.1 inch and right & left 1.5 inch > Create landscape orientation & A4 paper size > Insert Period III column after Period II > Insert Thursday row bellow Wednesday row > Insert page number center align and Arial font > Insert watermark "Hello world" > Table font "Times new roman" and 13 sizearrow_forward
- Add an onclick event handler that calls the content() function to the button element in the main section.arrow_forwardCreate a website registration form to obtain a user’s first name, last name and e-mail address. In addition, include an optional survey ques- tion that asks the user’s year in college (e.g., Freshman). Place the optional survey question in a details element that the user can expand to see the question.arrow_forwardCreate a products.html page and add five product images to the page. Create a Product class for each of the product images with the following attributes: Price, Name, Description and Id. Under each product image add an "add to cart" button and a "remove from cart button". Make the id property of the button the id for the product.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
Np 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