error

by jayhilwig

HTML

<div class="home container">
  <div class="error text">
    Error
  </div>

  <div class="error text">
    <span class="verbose">Whoops! At least one of your answers is not quite right.</span>
  </div>
<br/>
  <div style="position: relative; left: 0; top: 0;">
    <div class="challengeitem challenge"></div>
    <div class="errorOverlay"></div>
  </div>
</div>

CSS

div.error {}

.container {
  border: 1px solid #111111;
  border-radius: 4px;
  width: 312px;
  padding: 12px;
}

.text {
  font-size: 17px;
  font-family: 'AmazonEmber-Regular', 'Amazon Ember', sans-serif;
  text-align: left;
  color: #c40101;
  font-weight: 700;
}

.verbose {
  color: #111111;
  text-align: left;
  line-height: 80%;
}

.text:before {
  font-size: 27px;
  content: "\26A0\00A0\00A0";
  vertical-align: sub;
}


div.challengeitem {}


.challenge {
  width: 312px;
  height: 272px;
  background-image: url("http://fpoimg.com/312x272?text=Preview");
}

.errorOverlay:before {
  color: #c40101;
  font-size: 27px;
  content: "\00A0\26A0";
  vertical-align: sub;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background: white;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
}