Untitled

@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Coding Challenge 1

   Author: John Robert Cabatbat
   Date: 01/30/2025
   
   Filename: code3-1_float.css

*/
img {
   height: 3.3em;
   clear: right;
   float: right;
}





@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Coding Challenge 1

   Author: John Robert Cabatbat
   Date: 01/30/2025
   
   Filename: code3-1.css

*/




@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Coding Challenge 1

   Author: John Robert Cabatbat
   Date: 01/30/2025
   
   Filename: code3-1.css

*/

body {
   width: 900px;
   margin: 20px auto;
   font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
   font-size: 1.25em;
   padding-bottom: 30px;
}

h1 {
   font-size: 2.2em;
   text-align: center;
}


<!doctype html>
<html lang="en">
<head>
   <!--
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 3
   Coding Challenge 1
   
   Author: John Robert Cabatbat
   Date: 01/30/2025
   Filename: code3-1.html
   -->
   <meta charset="utf-8">
   <title>Coding Challenge 3-1</title>
   <link href="code3-1.css" rel="stylesheet" />
   <link href="code3-1_float.css" rel="stylesheet" />
   <style>
      p:first-of-type::first-letter {
      float: left;
      font-size: 4em;
      line-height: 0.8em;
      margin-right: 0.1em;
      padding-right: 0.1em;
      padding-bottom: 0.2em;
   }

      p:first-of-type::first-line {
      font-variant: small-caps;
      font-size: 1.4em;
   }
   </style>
</head>
<body>
   <h1>Lincoln's Second Inaugural</h1>
   <p>The Almighty has his own purposes. "Woe unto the world because of offenses! For 
      <img src="lincoln01.png" alt="" />
      <img src="lincoln02.png" alt="" />
      <img src="lincoln03.png" alt="" />
      <img src="lincoln04.png" alt="" />
      <img src="lincoln05.png" alt="" />
      <img src="lincoln06.png" alt="" />
      <img src="lincoln07.png" alt="" />
      <img src="lincoln08.png" alt="" />
      <img src="lincoln09.png" alt="" />
      <img src="lincoln10.png" alt="" />
      it must needs be that offenses come; but woe to that man by whom the offense 
      cometh." If we shall suppose that American slavery is one of those offenses 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 war, as the woe due to those by whom the offense came, shall we discern 
      therein any departure from those divine attributes which the believers in a living 
      God always ascribe to him?
   </p>
   <p>Fondly do we hope &mdash; fervently do we pray &mdash; that this 
      mighty scourge of war may speedily pass away. Yet, if God wills that it continue 
      until all the wealth piled by the bondsman's two hundred and fifty years of unrequited 
      toil shall be sunk, and until every drop of blood drawn by the lash shall be paid by 
      another drawn with the sword, as was said three thousand years ago, so still it must 
      be said, "The judgments of the Lord are true and righteous altogether."
   </p>
   <p>With malice toward none; with charity for all; with firmness in the right, as God 
      gives us to see the right, let us strive on to finish the work we are in; to bind up 
      the nation's wounds; to care for him who shall have borne the battle, and for his 
      widow, and his orphan &mdash; to do all which may achieve and cherish a just and lasting peace 
      among ourselves, and with all nations.
   </p>
</body>
</html>
Editor is loading...