|
|
| Line 12: |
Line 12: |
| | | | |
| | | | |
| − | html, body { height: 100%; }
| + | div.blue { |
| − | body {
| + | background-color: #00274c; |
| − | margin: 0;
| + | color: white; |
| − | padding: 0;
| + | margin: 20px 0 20px 0; |
| − | height: 100%;
| + | padding: 20px; |
| − | /* 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;
| + | |
| − | } | + | |
| | | | |
| − | .paper { | + | div.maize { |
| − | margin: 0; | + | background-color: #ffd700; |
| − | display: block;
| + | color: white; |
| − | font: 10pt Arial, sans-serif;
| + | margin: 20px 0 20px 0; |
| − | line-height: 20px;
| + | padding: 20px; |
| − | padding-top: 50px;
| + | |
| − | padding-left: 10.5%;
| + | |
| − | padding-right: 10.5%;
| + | |
| − | text-align: justify;
| + | |
| − | }
| + | |
| − | .paper:first-line {
| + | |
| − | font: 20pt Arial, sans-serif;
| + | |
| − | line-height: 33px;
| + | |
| − | vertical-align: baseline;
| + | |
| − | }
| + | |
| − | .paper:after {
| + | |
| − | content: '';
| + | |
| − | display: block;
| + | |
| − | width: 20px;
| + | |
| − | height: 20px;
| + | |
| − | border-radius: 10px;
| + | |
| − | 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);
| + | |
| | } | | } |
| | + | h2 { |
| | + | font-family: 'Poiret One', cursive; |
| | + | font-size: 40px; |
| | + | color: white; |
| | + | } |
| | + | p { |
| | + | font-family: 'Poiret One', cursive; |
| | + | font-size: 20px; |
| | + | color: white; |
| | + | } |
| | </style> | | </style> |
| | <body> | | <body> |
| − | <div class="container"> | + | |
| − | <p class="paper" contenteditable>Notebook<br>
| + | <h2>February</h2> |
| − | April<br>
| + | <p> We worked and worked</p> |
| − | <br>
| + | </div> |
| − | 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>
| + | <div class = "blue"> |
| − | </p> | + | <h2>February</h2> |
| − | </div> | + | <p> We worked and worked</p> |
| − | </body> | + | </div> |
| | </html> | | </html> |
