<-----lights----->
<div id="note">
  <div id="noten">
    <div id="content">
      enter text ... welcome. 
    </div>
  </div>
</div>
<-----end lights----->

<-----dark----->
<div id="not">
  <div id="nott">
    <div id="cont">
enter text ... welcome. 
    </div>
  </div>
</div>
<-----end dark----->

/-----lights-----/
#note {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 20px auto;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f1f1f1;
  box-shadow: 0px 0px 5px 0px #888;
border-radius:10px;
}
#note::before {
  content: '';
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 40px;
  background-color: #db4034;
}
#noten {
  height: 100%;
  background-image: repeating-linear-gradient(#f1f1f1 0px, #f1f1f1 24px, #00b0d7 25px);
}
#content {
  padding-top: 0px;
  padding-left: 56px;
  padding-right: 16px;
  line-height: 25px;
  font-family: tahoma;
  font-size: 20px;
color:#000;
  letter-spacing: 1px;
  word-spacing: 5px;
}
/-----end lights-----/

/-----dark-----/
#not {
  width: 500px;
  height: 500px;
  position: relative;
  margin: 20px auto;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #252321;
  box-shadow: 0px 0px 5px 0px #888;
border-radius:10px;
}
#not::before {
  content: '';
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 40px;
  background-color: yellow;
}
#nott {
  height: 100%;
  background-image: repeating-linear-gradient(#252321 0px, #252321 24px, #66ff00 25px);
}
#cont{
  padding-top: 0px;
  padding-left: 56px;
  padding-right: 16px;
  line-height: 25px;
  font-family: tahoma;
  font-size: 20px;
color:#fff;
  letter-spacing: 1px;
  word-spacing: 5px;}
/-----end dark-----/

<iframe src="https://www.netbax.net/tab/pages/notebook-paper-design-css.html" style="width: 550px; height:550px;" frameborder="0"></iframe>