mdn assess

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="2113.6">
  <link rel="stylesheet" href="style.css">
<!--   <style type="text/css">
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Times; color: #000000; -webkit-text-stroke: #000000; min-height: 14.0px}
    p.p3 {margin: 0.0px 0.0px 12.0px 0.0px; font: 12.0px Times; color: #000000; -webkit-text-stroke: #000000}
    span.s1 {font-kerning: none}
  </style> -->
</head>
<body>
  <div class="card">
    <header>
      <h2 style="margin: 0.0px 0.0px 14.9px 0.0px; font: 18.0px Times; color: #000000; -webkit-text-stroke: #000000"><span class="s1"><b>Chris Mills</b></span></h2>
    </header>
    <article>
      <img src="https://raw.githubusercontent.com/mdn/learning-area/main/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">


      <p class="p2"><span class="s1"></span><br></p>
      <p class="p3"><span class="s1">50 My Street<br>
      The Town<br>
      Gray Peach<br>
      UK<br>
      ZO50 1MU<br>
      <b>Tel</b>: 01234 567 890<br>
      <b>Mail</b>: chris@nothere.com</span></p>

    </article>
    <footer>
      <p class="p3"><span class="s1">Editing, writing, and web development services</span></p>
    </footer>
  </div>


</body>
</html>

CSS

/* General styles - put these straight into your stylesheet */

body {
  margin: 0;
}

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
  background-color: #ccc;
}

    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Times; color: #000000; -webkit-text-stroke: #000000; min-height: 14.0px}
    p.p3 {margin: 0.0px 0.0px 12.0px 0.0px; font: 12.0px Times; color: #000000; -webkit-text-stroke: #000000}
    span.s1 {font-kerning: none}

    h2, p {
      margin: 0 !important;
    }

/* Selectors to be matched up with rulesets */ /* Rulesets to be matched up with selectors */


/*styles specific to the setup of the card container, */

.card {
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-color: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
  box-sizing: border-box;
}



/*styles specific to the header and footer, */

.card header, footer{
  /*border: 1px solid green;*/
  padding: 1em;
  height: 2.8em;
}

.card h2 {
  font-size: 2em !important;
  line-height: 1.5em !important;
}

.card header {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
  border-radius: 1.5em 1.5em 0 0;
}

.card footer {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
  border-radius: 0 0 1.5em 1.5em;
}

.card footer p {
  font-size: 1.5em !important;
  line-height: 1.5em;
}


/*and styles specific to the main business card contents*/

.card article {
  height: 12em;
  background-color: rgba(0,0,0,.25);
  padding-left: 1em;
  color: white;
}
.card article img {
  max-height: 100%;
  float: right;
}

.card article p {
  color: white;
}