<body>

  <section class="card">
    <header>
      <h2>Chris Mills</h2>
    </header>
    <article>
      <img src="https://mdn.github.io/learning-area/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>

/* 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;
}



/*main styling*/

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

.card h2{
  font-size: 1.25em;
  line-height: 2em;
}

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

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

.card article p{
  padding-left: .7em;
  color: rgb(255, 255, 255,.7);
  padding-top: .5em;
  
}

.card header{
  background: 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: 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: 1.875em;
   padding: 0.625em;         
}

.card footer p{
  font-size: 0.938em;
  line-height: ;
}

h2,
p{
  margin: 0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.