Difference between revisions of "Team:Michigan/Notebook"

Line 4: Line 4:
 
<html>
 
<html>
 
<style>
 
<style>
 +
html, body { height: 100%; }
 
body {
 
body {
−
  background-color :#f5f5f5;
+
    margin: 0;
−
  width: 600px;
+
    padding: 0;
−
  margin: 0 auto;
+
    height: 100%;
−
  padding: 0;
+
/* gradients - second red border, first red border, top white space, blue lines */
 +
    background-image: -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
 +
    background-image: -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
 +
    background-image: -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
 +
    background-image: -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
 +
    background-image:  linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
 +
    background-size: 1px, 1px, auto, auto 20px;
 +
    background-repeat: repeat-y, repeat-y, no-repeat, repeat;
 +
    background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
 
}
 
}
−
h4 {
+
 
−
  color: #cd0000;
+
.paper {
−
  font-size: 42px;
+
margin: 0;
−
  letter-spacing: -2px;
+
    display: block;
−
  text-align: left;
+
    font: 10pt Arial, sans-serif;   
 +
    line-height: 20px;
 +
    padding-top: 50px;
 +
    padding-left: 10.5%;
 +
    padding-right: 10.5%;
 +
    text-align: justify;
 
}
 
}
−
.list {
+
.paper:first-line {
−
  color: #555;
+
    font: 20pt Arial, sans-serif;
−
  font-size: 22px;
+
    line-height: 33px;
−
  padding: 0 !important;
+
    vertical-align: baseline;
−
  width: 500px;
+
−
  font-family: courier, monospace;
+
−
  border: 1px solid #dedede;
+
 
}
 
}
−
.list li {
+
.paper:after {  
−
  list-style: none;
+
    content: '';
−
  border-bottom: 1px dotted #ccc;
+
    display: block;
−
  text-indent: 25px;
+
    width: 20px;
−
  height: auto;
+
    height: 20px;
−
  padding: 10px;
+
    border-radius: 10px;
−
  text-transform: capitalize;
+
    position: absolute;
 +
    background: rgba(255,255,255,1);
 +
    top: 40px;
 +
    left: 2%;
 +
    z-index: 10;
 +
    -webkit-box-shadow:  
 +
        inset 2px 2px 5px rgba(125,125,125,1), 
 +
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75), 
 +
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
 +
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
 +
    -moz-box-shadow:  
 +
        inset 2px 2px 5px rgba(125,125,125,1), 
 +
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75), 
 +
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
 +
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
 +
    box-shadow:  
 +
        inset 2px 2px 5px rgba(125,125,125,1), 
 +
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75), 
 +
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
 +
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
 
}
 
}
−
.list li:hover {
+
 
−
  background-color: #f0f0f0;
+
.paper:focus {
−
  -webkit-transition: all 0.2s;
+
     outline: none;
−
  -moz-transition:    all 0.2s;
+
−
  -ms-transition:     all 0.2s;
+
−
  -o-transition:      all 0.2s;
+
−
}
+
−
.lines {
+
−
  border-left: 1px solid #ffaa9f;
+
−
  border-right: 1px solid #ffaa9f;
+
−
  width: 2px;
+
−
  float: left;
+
−
  height: 495px;
+
−
  margin-left: 40px;
+
 
}
 
}
 
</style>
 
</style>
 
<body>
 
<body>
−
<h4>Notes</h4>
+
<p class="paper" contenteditable>CSS3 Notebook Paper<br>
−
 
+
    This element is contenteditable.<br>
−
<div class="lines"></div>
+
    <br>
−
 
+
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sem vel mauris porttitor sit amet adipiscing odio interdum. Nunc non magna sit amet augue rutrum laoreet in in nulla. Nunc et malesuada orci. Sed metus enim, venenatis tincidunt tincidunt a, malesuada nec dolor. Nam volutpat, augue fringilla mattis venenatis, odio ipsum porta sapien, et tincidunt tortor erat quis nulla. Mauris dictum laoreet purus, et gravida magna aliquet quis. Phasellus sollicitudin tortor ut leo fringilla sed scelerisque diam suscipit. Donec non tortor id ante adipiscing tempus vitae et massa. Donec risus nisl, tincidunt quis facilisis blandit, lacinia vestibulum nulla.<br>
−
<ul class="list">
+
</p>​
−
  <li>Eat Breakfeast</li>
+
−
  <li>Feed Pugsly, the cow</li>
+
−
  <li>Sit Down</li>
+
−
  <li>Eat lunch</li>
+
−
  <li>Call mom</li>
+
−
  <li>Tweet about feeding my cow, pugsly</li>
+
−
  <li>Join a hangout in google+</li>
+
−
  <li>Prepare Dinner</li>
+
−
  <li>Eat Dinner</li>
+
−
  <li>Get ready for bed</li>
+
−
  <li>Go to bed</li>
+
−
</ul>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 01:38, 18 August 2016

Home Project Modeling Team BioBrick Human Practices Safety Awards

  • CSS3 Notebook Paper
    This element is contenteditable.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sem vel mauris porttitor sit amet adipiscing odio interdum. Nunc non magna sit amet augue rutrum laoreet in in nulla. Nunc et malesuada orci. Sed metus enim, venenatis tincidunt tincidunt a, malesuada nec dolor. Nam volutpat, augue fringilla mattis venenatis, odio ipsum porta sapien, et tincidunt tortor erat quis nulla. Mauris dictum laoreet purus, et gravida magna aliquet quis. Phasellus sollicitudin tortor ut leo fringilla sed scelerisque diam suscipit. Donec non tortor id ante adipiscing tempus vitae et massa. Donec risus nisl, tincidunt quis facilisis blandit, lacinia vestibulum nulla.

    ​