CSS Whiteboard

CSS Whiteboard.markdown

CSS Whiteboard

A Pen by Aled Wassell on CodePen.

License.

index.html

<div id=content>
  <div id="white-board">
    <div id="text">
      <span>Today's Class Kids</span>
    </div>
    <div id="eraser"></div>
    <div id="red-pen"></div>
    <div id="blue-pen"></div>
  </div>
</div>

style.sass

@import url(https://fonts.googleapis.com/css?family=Permanent+Marker)

$bg-color: #00b359
$wb-color: #f2f2f2
$wb-bdr-color: #adb2bd
$wb-shadow: #404040 
$wb-font-color: #1f75fe
$wb-font: 'Permanent Marker', sans-serif, arial
$eraser: #2929a3
$redpen: #FD7C6E
$redpen-shadow: #fc604f
$bluepen: #1f75fe
$bluepen-shadow: #014ecb

body
  background-color: $bg-color
  margin: 0

#content
  display: flex
  justify-content: center
  align-items: center
  width: 100%
  height: 100vh
  
#white-board
  background-color: $wb-color
  position: relative
  width: 80%
  height: 80%
  border-radius: 5px
  border: 10px solid $wb-bdr-color
  box-shadow: inset -1px 2px 2px $wb-shadow, 6px 9px 1px rgba(0, 0, 0, 0.1)
  overflow: hidden

#eraser
  position: absolute
  height: 20px
  width: 100px
  bottom: 0px
  right: 100px
  background-color: $eraser
  border-radius: 5px 5px 0 0
  border-bottom: 7px solid grey
  
#red-pen
  position: absolute
  height: 5px
  width: 80px
  bottom: 0px
  right: 250px
  background-color: $redpen
  border-bottom: 3px solid $redpen-shadow
  
#blue-pen
  position: absolute
  height: 5px
  width: 80px
  bottom: 0px
  right: 350px
  background-color: $bluepen
  border-bottom: 3px solid $bluepen-shadow
  
#text
  font-family: $wb-font
  font-size: 1.5em
  color: $wb-font-color
  position: absolute
  top: 20px
  left: 20%

Just a css whiteboard I'm proud of