#dailycssimages 08 - Notepad

dailycssimages-08-notepad.markdown

#dailycssimages 08 - Notepad

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="notepad-background"></div>
  <div class="headline"></div>
  <div class="note-block"></div>
  <div id="cloud">
    <div id="bottom_cloud"></div>
    <div id="right_cloud"></div>
    <div id="left_cloud"></div>
  </div>
  <div class="left-eye"></div>
  <div class="left-eye-shine"></div>
  <div class="left-eye-shine-small"></div>
  <div class="right-eye"></div>
  <div class="right-eye-shine"></div>
  <div class="right-eye-shine-small"></div>
  <div class="left-cheek"></div>
  <div class="right-cheek"></div>
  <div class="smile"></div>
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
  <div class="line4"></div>
  <div class="line5"></div>
  <div class="line6"></div>
  <div class="line7"></div>
  <div class="line8"></div>
</div>

style.css

* {
  box-sizing: border-box; 
}

body {
  background-color: gainsboro;
}

.container {
  width: 500px;
  height: 1000px;
  margin: 0 auto;
  margin-top: 6%;
}

.notepad-background {
  width: 400px;
  height: 500px;
  position: absolute;
  background: 
    -webkit-radial-gradient(rgb(25,255,255) 15%, rgba(0,0,0,0) 16%), 
    -webkit-radial-gradient(rgb(255,255,255) 15%, rgba(0,0,0,0) 16%), 
    #DFEAF0;
  background: 
    -moz-radial-gradient(rgb(255,255,255) 15%, rgba(0,0,0,0) 16%), 
    -moz-radial-gradient(rgb(255,255,255) 15%, rgba(0,0,0,0) 16%), 
    #DFEAF0;
  background: 
    radial-gradient(rgb(255,255,255) 15%, 
    rgba(0,0,0,0) 16%), 
    radial-gradient(rgb(255,255,255) 15%, 
    rgba(0,0,0,0) 16%), 
    #DFEAF0;
  background-position: 0 0, 30px 30px;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 60px 60px;
  background-size: 60px 60px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.headline {
  width: 400px;
  border-bottom: 15px solid #B9D7E1;
  position: absolute;
  z-index: 2;
  margin-top: 88px;
}

.note-block {
  width: 400px;
  height: 412px;
  background-color: snow;
  opacity: 0.5;
  position: absolute;
  z-index: 1;
  margin-top: 88px;
}

#cloud {
    height: 230px;
    margin: 20px;
    position: relative;
    width: 400px;
}

#cloud div {
    border: solid 5px #B9D7E1;
}

#bottom_cloud {
    background-color: snow;
    border-radius: 100px;
    height: 70px;
    width: 130px;
    position: absolute; 
    z-index: 3;
    top: 70px;
}

#right_cloud {
    background-color: snow;
    border-radius: 100%;
    height: 70px;
    width: 70px;
    left: 50px;
    top: 50px; 
    position: absolute; 
    z-index: 2;
}

#left_cloud {
    background-color: snow;  
    border-radius: 100%;
    height: 40px;
    width: 40px;
    left: 20px;
    top: 60px; 
    position: absolute; 
    z-index: 2;
}

#cloud::before {
    background-color: snow;
    border-radius: 50%;
    content: '';
    height: 40px;
    width: 40px;
    left: 22px;
    top: 65px; 
    position: absolute; 
    z-index: 4;
}

#cloud::after {
    position: absolute; 
    top: 55px; 
    left: 50px;
    background-color: snow;
    border-radius: 50%;
    content: '';
    width: 70px;
    height: 70px;
    z-index: 4;
}

.left-eye {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  z-index: 5;
  margin-left: 60px;
  margin-top: -150px;
}

.left-eye-shine {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: white;
  position: absolute;
  z-index: 5;
  margin-left: 62px;
  margin-top: -147px;
}

.left-eye-shine-small {
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: white;
  position: absolute;
  z-index: 5;
  margin-left: 70px;
  margin-top: -142px;
}

.right-eye {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  z-index: 5;
  margin-left: 100px;
  margin-top: -150px;
}

.right-eye-shine {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: white;
  position: absolute;
  z-index: 5;
  margin-left: 102px;
  margin-top: -147px;
}

.right-eye-shine-small {
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: white;
  position: absolute;
  z-index: 5;
  margin-left: 110px;
  margin-top: -142px;
}

.left-cheek {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: pink;
  position: absolute;
  z-index: 6;
  margin-left: 50px;
  margin-top: -135px;
}

.right-cheek {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: pink;
  position: absolute;
  z-index: 6;
  margin-left: 115px;
  margin-top: -135px;
}

.smile {
  height: 25px;
  width: 25px;
  border-radius: 40%;
  border-bottom: 3px solid black;
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
  position: absolute;
  z-index: 6;
  margin-top: -147px;
  margin-left: 75px;
}

.line1 {
  width: 340px;
  height: 2px;
  background-color: darkgrey;
  position: absolute;
  margin-top: -80px;
  margin-left: 30px;
  margin-bottom: 20px;
}

.line2 {
  width: 340px;
  height: 2px;
  background-color: darkgrey;
  position: absolute;
  margin-top: -40px;
  margin-left: 30px;
  margin-bottom: 20px;
}

.line3 {
  width: 340px;
  height: 2px;
  background-color: darkgrey;
  position: absolute;
  margin-top: 0px;
  margin-left: 30px;
  margin-bottom: 20px;
}

.line4 {
  width: 340px;
  height: 2px;
  background-color: darkgrey;
  position: absolute;
  margin-top: 40px;
  margin-left: 30px;
  margin-bottom: 20px;
}

.line5 {
  width: 340px;
  height: 2px;
  background-color: darkgrey;
  position: absolute;
  margin-top: 80px;
  margin-left: 30px;
  margin-bottom: 20px;
}

.line6 {
  width: 340px;
  height: 2px;
  background-color: darkgrey;
  position: absolute;
  margin-top: 120px;
  margin-left: 30px;
  margin-bottom: 20px;
}

.line7 {
  width: 340px;
  height: 2px;
  background-color: darkgrey;
  position: absolute;
  margin-top: 160px;
  margin-left: 30px;
  margin-bottom: 20px;
}

.line8 {
  width: 340px;
  height: 2px;
  background-color: darkgrey;
  position: absolute;
  margin-top: 200px;
  margin-left: 30px;
  margin-bottom: 20px;
}