Make a chalkboard with html!

Chalkboard.scss

/*
 *
 * To build a chalkboard, use the following HTML structure
 *       
 *  <div class="chalkboard-frame">
 *     <div class="chalkboard">
 *     <div class="chalkboard-interior">
 *         <div class="chalkboard-content">
 *           <!-- Enter your content here -->
 *         </div>
 *     </div>
 *     <div class="chalkboard-dots frame-top"></div>
 *     <div class="chalkboard-dots frame-bottom"></div>
 *  </div>
 *
*/


$chalkboard-brown-dark: #654118;
$chalkboard-brown-light: #C9974C;
$chalkboard-brown-lighter: #E7BF87;
$chalkboard-bg: #231F20;
$chalkboard-text-color: darken(#FFF, 8%);
$chalkboard-border-width: 4px;

.chalkboard-frame {

  border: $chalkboard-border-width solid $chalkboard-brown-dark;
  border-top-width: $chalkboard-border-width - 1px;
  border-bottom-width: $chalkboard-border-width + 2px;
  border-radius: 37px;
  margin-left: 10px;
  position: relative;

  box-shadow: 0 5px 20px -5px darken($chalkboard-brown-dark, 30%);
}

.chalkboard {
  padding: 0 40px;

  font-family: 'Schoolbell', cursive;

  &:before, &:after {
    content: "";
    width: 40px;
    height: 100%;
    background-color: $chalkboard-brown-light;
    display: block;
    position: absolute;

    background-image: url(images/woodgrain-vertical-bg.png);
    background-repeat-x: no-repeat;
    background-repeat-y: repeat;
  }
  &:before {
    top: 0;
    left: 0;
    border-radius: 33px 0 0 33px;
    border-right: ($chalkboard-border-width / 2) solid $chalkboard-brown-lighter;
  }
  &:after {
    top: 0;
    right: 0;
    border-radius: 0 33px 33px 0;
    border-left: ($chalkboard-border-width / 2) solid $chalkboard-brown-lighter;
  }
}

.chalkboard-interior {
  padding: 40px 0;
  position: relative;

  background-color: $chalkboard-bg;
  color: $chalkboard-text-color;

  border-left: ($chalkboard-border-width - 1px ) solid $chalkboard-brown-dark;
  border-right: ($chalkboard-border-width - 1px ) solid $chalkboard-brown-dark;

  a {
    color: $chalkboard-text-color;
    &:hover, &:focus {
      outline: none;
      text-decoration: none;
    }
  }

  &:before, &:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background-color: $chalkboard-brown-light;
    height: 40px;

    background-image: url(images/woodgrain-horizontal-bg.png);
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;

  }
  &:before {
    top: 0;
    border-bottom: $chalkboard-border-width solid $chalkboard-brown-dark;
  }
  &:after {
    bottom: 0;
    border-top: $chalkboard-border-width solid $chalkboard-brown-lighter;
  }
}

.chalkboard-content {
  padding: 20px;
  border: 3px solid $chalkboard-brown-dark;
  border-top-width: 1px;
  border-bottom-width: 5px;
}

.chalkboard-p {
  text-align: center;
  letter-spacing: 0.9px;
  line-height: 20px;
}

.chalkboard-dots {
  &:before, &:after {
    content: "";
    position: absolute;
    height: 11px;
    width: 11px;
    background-color: $chalkboard-brown-dark;
    border: 1px solid darken($chalkboard-brown-dark, 3%);
    border-radius: 50%;
    z-index: 10;

    box-shadow: 0 1px 4px -1px lighten(#000, 10%);
  }

  &.frame-top:before {
    top: 13px;
    left: 18px;
  }
  &.frame-top:after {
    top: 13px;
    right: 18px;
  }
  &.frame-bottom:before {
    bottom: 13px;
    left: 18px;
  }
  &.frame-bottom:after {
    bottom: 13px;
    right: 18px;
  }
}

.chalkboard-dismiss {
  position: absolute;
  top: -10px;
  right: -10px;
  height: 30px;
  width: 30px;
  color: #FFF;
  background-color: #D01F37;
  text-align: center;
  border-radius: 50%;
  border: 3px solid $chalkboard-brown-dark;
  &:before {
    content: "×";
    position: relative;
    font-weight: bold;
    font-size: 23px;
    top: -10px;
  }

}