Question: I need help to figure out those questions. code3-1.html X code3-1_float.css code3-1.css + Instructions Figure 3-79 shows an example page containing two applications of floating
I need help to figure out those questions. 


code3-1.html X code3-1_float.css code3-1.css + Instructions Figure 3-79 shows an example page containing two applications of floating objects. In the first line of Lincoln's second inaugural speech a drop capital is created by floating the first letter of the first paragraph next to the surrounding text. The text of the speech is wrapped around the image of Lincoln using an irregular line wrap. This effect is created by cutting the Lincoln image into separate strips which are floated and stacked on top of each other. In this Coding Challenge you will explore how to create both effects. 1 @charset "utf-8"; 2 3 /* 4 New Perspectives on HTML5 and CSS3, 8th Edition 5 Tutorial 3 6 Coding Challenge 1 7 8 Author: 9 Date:02/22/2021 10 11 Filename: code3-1_float.css 12 13 */ 14 15 16 img { 17 height: 3.3em; 18 float: right; 19 } 20 h1, p{ 21 clear: right; 22 } 23 Lincoln's Second Inaugural HE ALMIGHTY HAS HIS OWN PURPOSES. "WOE UNTO THE WORLD because of odenses! For it must needs be that offenses comes but 24 suppose that American slavery is one of those onses which, in the providence of God, must needs come, but which, having continued through his appointed time, he now wills to remove, and that he gives to both North and South this terrible was, as the word those by whom therein any departure from those divine attributes which the believes in a living God always ascribe to him? Fondly do we hope - fervently do we pray - that this mighty scourge of war may speedily pass away. Yet, if God wills that it contine until all the wealth piled by the bondsman's two hundred and fifty years of unrequited fol shall be sunk, and untill every drop of blood drawn by the lash shall be paid by other drawn with the sword, as was said three thousand years ago, so still it be said, "The judgments of the Lord are true and righteous altogether." With malice toward none with charity for all with firmness in the right, as God gives us to see the right, let us strive con to finish the work we are in to bind up the nation's wounds: to care for him who shall have bome the battle and for his widow, and his orphan-to do all which may achieve and cherisha past and lasting peace among ourselves and with all mations Instructions code3-1.html X code3-1_float.css code3-1.css + 0.00 out of 10.00 Open the file code3-1_float.css, and for all ing elements create a style rule to set the height of the image to 3.3em. Float all img elements on the right margin, but only when the right margin is first cleared of any floats. (Hint: clear: right ). 1 @charset "utf-8"; 2 3 /* 4 New Perspectives on HTML5 and CSS3, 8th Edition 5 Tutorial 3 6 Coding Challenge 1 7 8 Author: 9 Date:02/22/2021 10 11 Filename: code3-1_float.css 12 13 */ 14 Make sure you complete this step prior to formatting or applying styles to the paragraph element. 15 Checks Webpage Test Incomplete Apply the style rules to the inline image elements 16 img { 17 height: 3.3em; 18 float: right; 19} 20 hi, p{ 21 clear: right; 22 } 23 > 4 5 New Perspectives on HTML5 and CSS3, 8th Edition Tutorial 3 Coding Challenge 1 To create a drop cap insert a style rule for the selector p:first-of-type: :first-letter and add the following styles: 1. Float the element on the left margin. 2. Set the font size to 4em and the line height to 0.8em. 3. Set the size of the right margin and padding space to 0.1em. Set the bottom padding to 0.2em. 6 7 8 9 10 11 Author: Date:02/22/2021 Filename: code3-1_float.css 12 Display the first line of the speech in small caps by adding a style rule for the selector P:first-of-type: :first-line that changes the font variant to small- caps and the font size to 1.4em. 13 */ 14 15 16 img { 17 height: 3.3em; 18 float: right; 19 } 20 h1, p{ 21 clear: right; 22 } 23 24 > Open the page in the browser preview and verify the layout of the page resembles that shown in Figure 3-79
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
