This is a simple calendar ruler example make just with HTML5 and one CSS file.
The example can be seen here.
Create one folder and put two files named: index.html and style.css.
The style.css file comes with this source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | *, *:before, *:after { box-sizing: border-box; } body { background: #000; } h1 { text-align: center; color: white; font-family: 'Arial', cursive; } .calendar { position: relative; margin: 10px auto; width: 400px; height: 250px; background: #eab57a; background-image: -webkit-linear-gradient(right, black 2px, transparent 2px); background-image: linear-gradient(to left, black 2px, transparent 2px); background-repeat: repeat-x; background-size: 5px 15px; border-radius: 2px; } .calendar:before { background-image: -webkit-linear-gradient(right, black 2px, transparent 2px); background-image: linear-gradient(to left, black 2px, transparent 2px); background-repeat: repeat-x; background-size: 5px 15px; } .calendar:after { content: ""; position: absolute; width: 100%; z-index: 3; height: 50%; top: 10px; left: 0; background-image: -webkit-linear-gradient(right, black 2px, transparent px); background-image: linear-gradient(to left, black 2px, transparent 2px); background-repeat: repeat-x; background-size: 25px 15px; } .week { position: absolute; top: 40px; left: 45px; word-spacing: 34px; font-size: 16px; font-family: 'Arial', cursive; color: #blue; } .week:before { content: ""; position: absolute; left: -37px; width: 18px; height: 18px; background: black; border-radius: 50%; } .days { position: relative; top: 80px; left: 38px; word-spacing: 25px; font-size: 18px; font-family: 'Arial', cursive; color: red; } .days:before { content: ""; position: relative; top: 80px; left: 38px; width: 18px; height: 18px; } |
The index.html file can have this source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Calendar Jan 2018 : Ruler</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Calendar Jan 2018 : Ruler </h1> <div class="calendar"> <div class="week"> L M M J V S D</div> <div class="days"> 31 01 02 03 04 05 06</div> <div class="days"> 07 08 09 10 11 12 13</div> <div class="days"> 14 15 16 17 18 19 20</div> <div class="days"> 21 22 23 24 00 00 00</div> <div class="days"> 00 00 00 00 00 00 00</div> </div> </body> </html> |