Fundamental CSS comprehension

Task

by EiNzp

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fundamental CSS comprehension</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <body>

  <section class="card">
    <header>
      <h2>Chris Mills</h2>
    </header>
    <article>
      <img src="https://raw.githubusercontent.com/mdn/learning-area/main/css/introduction-to-css/fundamental-css-comprehension/chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
      <p>50 My Street<br>
         The Town<br>
         Gray Peach<br>
         UK<br>
         ZO50 1MU<br>
        <strong>Tel</strong>: 01234 567 890<br>
        <strong>Mail</strong>: chris@nothere.com</p>
    </article>
    <footer>
      <p>Editing, writing, and web development services</p>
    </footer>
  </section>

  </body>
</html>

CSS

/* General styles */

/* specificity 
.card article img   0-0-1-2 
.card footer        0-0-1-1
.card header        0-0-1-1
.card               0-0-1-0
*/

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

/* card  styles */

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

.card h2, .card p {
    margin: 0;
}

/* header and footer styles */

.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 header h2 {
    font-size: 2em;
    height: 1.5em;
}

.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 header, .card footer {
    height: 3em;
    padding: 1em;
}

.card footer p {
    font-size: 1.5em;
    height: 2em;
}

/* article styles */

.card article img {
    max-height: 100%;
    float: right;
}

.card article {
    height: 12em;
    background-color: rgba(0,0,0,0.5);
}

.card article p {
    padding: 10px;
    color: white;
}