Design Interview 1

Write the HTML and CSS needed to make the browser render something as close to the included image as possible.

HTML

<!-- Open this image in a new tab/window:

https://s3.amazonaws.com/ridingtheclutch.com/images/loved_expert2.png

Your job is to write the HTML and CSS needed to duplicate what you see in that image as closely as possible.

  Useful stuff:
  
  Image: http://lorempixel.com/200/200/cats
   Name: Dr. Whiskers McKitten
   
To submit your answer, click "Fork" above and give us the URL. -->
    
<!-- -------------------- -->
<!-- Start your HTML here -->
<!-- -------------------- -->
<div class="kitten">
  <img src="http://lorempixel.com/200/200/cats" class="kitten-img" />
  <div class="kitten-header">Dr. Whiskers Mc</div>
  <div class="kitten-date">Tues, Apr 02, 8:00 am</div>
  <div class="kitten-description">Long-haired tabby, enjoys balls of yarn and naps. Makes a great leg warmer and purrs when happy.</div>
  <div class="kitten-footer">
    <div class="kitten-footer-action--love kitten-footer-action">Love: <strong>15</strong></div>
    <div class="kitten-footer-action--hate kitten-footer-action">Hate: <strong>0</strong></div>
    <div class="kitten-footer-price">$125</div>
  </div>
  <div class="kitten-category">Nutrition</div>
</div>

CSS

<!-- CSS goes here -->
.kitten { padding:20px; background:white; }
.kitten-header {  }
.kitten-date {  }
.kitten-description {  }
.kitten-footer {  }
.kitten-footer-action {  }
.kitten-footer-action--love {  }
.kitten-footer-action--hate {  }
.kitten-footer-price {  }
.kitten-category {  }

JavaScript

// You shouldn't need any Javascript for this one