<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 3 - Absolute</title> <style> /* do not modify this rule */ h1 { text-align: center; } /* do not modify this rule */ div { width: 400px; height: 400px; } </style></head><body> <h1>Absolute</h1> <div class="container"> <div class="front"></div> <div class="middle"></div> <div class="back"></div> </div></body></html> Part 3- Absolute (absolute.html)In this section you will complete the stylesheet in absolute.html. You will need to addadditional style rules to complete this sections. You do not need to modify the HTML.CSS Requirements:• div.container should have a relative position type• use the margin trick to center div.container• div.front, div.middle, and div.back should have absolute position types• div.front, div.middle, div.back should have different background colors• div.front should not have any offsets!• Use top and left offsets on div.back and div.middle to recreate the spacing found in theimage belowModify the stacking context by using the z-index propertyo div.front should be on top of div.middle and div.backo div.back should be below div.middle and div.frontAbsolute

div { width: 400px; height: 400px; position: relative;…

Answered: Part 3 - Absolute Absolute

Engineering

Computer Science

Part 3 - Absolute Absolute

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter2: Getting Started With Css: Designing A Website For A Fitness Club

Section: Chapter Questions

Problem 10RA

See similar textbooks

Similar questions

Open index.html in your browser to view the webpage. Maximize the browser window to use a desktop viewport. Below the gradient style rules comment, create a style rule for the gradient1 class selector and add the following declaration to specify a linear-gradient for the background: background: linear-gradient(to right, #67afcb, #1a3e4c 25%); Create a style rule for the gradient2 class selector and add a declaration to specify a linear-gradient to the left, use #d4f7ec and #448d76 for color values, and use 90% as the color stop. Create a style rule for the gradient3 class selector and add a declaration to specify a linear-gradient to the top left, and use #efddfd and #36065b for color values. Create a style rule for the gradient4 class selector and add a declaration to specify a linear-gradient that uses the following four color values: #e6e6ff #70dbdb #ffffcc #cc6699 Create a style rule for the gradient5 class selector and add the following declaration to…
ch 8 apply your knowledge i need this solved. below is index.html and styles.css TASKS In the index.html file, add a table element within the main element. Nest the following caption element within the table element: <caption>2025 Sales by Quarter</caption> In the styles.css file, create a style rule for the table element that: sets the width to 80%, sets the top and bottom margins to 0, sets the left and right margins to auto, and sets a border with the values 3px solid #71881b. Create a style rule for table, tr, th, and td selectors that collapses the border and sets the padding to 2%. Create a style rule for the caption element that sets the font-size to 2em, padding to 2%, and margin-top to 2%. Create a style rule for th and td selectors that sets a border with the values 1px solid #7188bb. Create a style rule for td that center-aligns its text. Create a style rule for tr that sets the background color to #d3e788 for odd rows. index.html…
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…
QUESTION: 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")…
need help with this. i attached the image how it should look. 1 . Include the defer attribute to defer loading the file until the entire page is loaded. Study the contents of the HTML file, noting that all checkboxes for the menu items belong to the menuItems Save your changes to the file. 2. Go to the project03-01.js file in your code editor. Below the initial comment section, declare a variable named menuItems containing the collection of HTML elements belonging to the menuItem class using the getElementsByClassName() 3.Create a for loop that loops through the contents of the menuItems collection with a counter variable that starts with an initial value of 0 up to a value less than the length of the menuItems collection. Increase the counter by 1 with each iteration. Within the for loop, add an event listener to the menuItems[i] element in the collection (where i is the value of the counter), running the calcTotal() function when that item is clicked. 4. Create the calcTotal()…
In cw_styles.css file and at the top of the file, use the @import rule to import the contents of the cw_designs.css file, which contains several style rules that format the appearance of different page elements. Go to the cw_home.html file and within the document head, insert a meta element that sets the browser viewport for use with mobile devices. Also, create links to cw_reset.css and cw_styles.css style sheets. Take some time to study the contents and structure of the document. Navigation List At the bottom of the cw_home.html page is a navigation list with the id #bottom containing several ul elements. Sofia wants these ul elements laid out side-by-side. Open the cw_styles.css file and create a style rule for the bottom navigation list displaying it as a flexbox row with no wrapping. Set the justify-content property so that the flex items are centered along the main axis. Be sure to include the -webkit browser extension in all of your flex styles. Define flex values for ul…
i need this assignment solved. below is index.html and styles.css In the index.html file, add a class attribute with a value of btn to paragraph elements two, three, and four within the main element. In the styles.css file, below the main p style rule, add a new style rule for the btn class that specifies a background-color value of #375f1b, padding value of 2%, top and bottom margin values of 2% and left and right margin values of auto, width value of 80%, text alignment of center, and a border radius of 5px Below the btn style rule, add a new style rule for anchor elements within the btn class that specifies a color value of #ebf7e3, removes the underline, sets a font size of 1.25em, and displays the content as a block. In the index.html file, add a class attribute with a value of corner to the image element. In the styles.css file, below the btn a style rule, add a new style rule for the corner class selector that specifies a border-radius of 12px. index.html…
1) use the tag selector to select all of the elements with an h1 tag and turn them green 2) use the class method to change all of the paragraph text to italicized 3) in the line item list, change the fourth element to be highlighted pink 4) create an event handler on the DOM element so that when a link is clicked, things return to the way they were at the start I have pasted the Code below. Thank you <!DOCTYPE html> <html> <head> <title>Assignment Week 2</title> </head> <body> <h1>jQuery is Exciting</h1> <p>We are learning jQuery this week, and it's been an exciting language to learn. We've talked about all aspects of the library, and really explored what it can do.</p> <h1>jQuery is Irritating</h1> <p>Even though jQuery can be fun, it an also be very confusing! We've learned that there are a vast array of opportunities within the libraries, but the syntax is important and a small mistake can break all…
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">  <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Resources</a></li> <li><a href="#">W3C</a></li> </ul> </nav>  <header> <h1>Responsive Design</h1> </header>  <main>…
Table Layout Open the mi_tables.css and go to the Table Styles section and add a style rule for the table element that: sets the background color to a linear gradient that goes to the bottom of the table background starting from rgb(190, 215, 255) and ending in black and adds a 5-pixels solid gray border. this is a programming question. The following is what I currently have (under table styles), but I am having a hard time getting more of the background columns to show. Thanks. /* Table Styles */ table { background: linear-gradient(to bottom , rgb(190, 215, 255), black); border: 5px solid gray; } th, td { border: 3px solid gray; line-height: 1.4em; padding: 8px; } th { background: black; color: rgb(130, 210, 255); font-weight: normal; } td { color: white; font-size: 0.9em; vertical-align: top; }
Make 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"
4. Code a style rule for the main element that puts padding around its contents. Then, code a style rule for the footer that puts a blue border above it. Note that this border doesn’t touch the border for the body. 5. Code style rules for the h1, h2, and h3 elements. The h1 font should be 150% of the default specified in the body, the h2 font should be 125% of the default font, and the h3 font should be 115% of the default font. The h1 font should also be blue. Then, apply appropriate margins or padding to the h1, h2, and h3 elements so the spacing before and after the headings is similar to what’s shown above.6. Code the style rules for the <p>, blockquote, ul, and li elements so the spacing before and after the elements is similar to what’s shown above.7. Code a style rule for the cite element that changes its color to blue and removes the italics from the text.8. Code a style rule for the paragraphs that contain cite elements. This style rule should right align the paragraphs…