Untitled

<!doctype html>
<html lang="en">
<head>
   <!--
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 4
   Coding Challenge 2
   
   Author: John Robert Cabatbat
   Date: 01/31/2025
   Filename: code4-2.html
   -->
   <meta charset="utf-8">
   <title>Coding Challenge 4-2</title>
   <link href="code4-2.css" rel="stylesheet" />
   <link href="code4-2_grad.css" rel="stylesheet" />
</head>
<body>
   <article>
      <h1>Dawn</h1>
      <h2>by Ella Wheeler Wilcox</h2>      
      <p>Day's sweetest moments are at dawn;<br />
      Refreshed by his long sleep, the Light<br />
      Kisses the languid lips of Night,<br />
      Ere she can rise and hasten on.<br />
      All glowing from his dreamless rest<br />
      He holds her closely to his breast,<br />
      Warm lip to lip and limb to limb,<br />
      Until she dies for love of him.</p>
   </article>
</body>
</html>





@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 4
   Coding Challenge 2

   Author: John Robert Cabatbat 
   Date: 01/31/2025
   
   Filename: code4-2.css

*/

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

article {
   padding-left: 40px;
   padding-bottom: 80px;
}

h1, h2 {
   font-weight: normal;
}
h1 {
   color: rgb(255, 155, 155);
   font-size: 2.8em;
   text-align: center;
   line-height: 1.4em;
   margin-bottom: 0px;
}

h2 {
   color: rgb(255, 155, 155);
   font-size: 1.4em;
   text-align: center;
   line-height: 1em;
   margin-top: 0px;
}

p {
   font-size: 1.2em;
   line-height: 2em;
   color: rgb(255, 225, 225);
}





@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 4
   Coding Challenge 2

   Author: John Robert Cabatbat
   Date: 01/31/2025
   
   Filename: code4-2_grad.css

*/
h1, h2 {
   text-shadow: -2px -2px 3px white;
}

p {
   text-shadow: 2px 2px 3px red;
}

article {
   box-shadow: inset 0px 0px 50px 20px black;
   border-radius: 150px;
   background:
      linear-gradient(165deg,
       black 65%,
       rgb(0, 0, 200) 75%,
       rgb(211, 0, 55) 80%,
       orange 82%,
       yellow
      ),
      url('landscape.png') no-repeat bottom right / 100%;      
}
Editor is loading...