<div class="organized"></div>
body {
margin:0;
height:100vh;
display:grid;
place-items:center;
background:lightblue;
}
.organized {
width:200px;
height:250px;
position:relative;
background:
repeating-linear-gradient(90deg,#838083 0 10px,#0000 0 40px) 13px 0/100% 20px no-repeat,
linear-gradient(lightblue 10px,#cb2e2f 0) 0 0/100% 48px no-repeat,
conic-gradient(at calc(100% - 5px) calc(100% - 5px),#fff 270deg,#0000 0) left 15px bottom 10px/25px 25px,
linear-gradient(90deg,#ca2f2f 20px,#e5e1de 0) left 15px bottom 15px/ 170px 120px no-repeat,
linear-gradient(#fdfdf9 0 0) 0 10px/100% 100% no-repeat;
}
.organized:first-line {
font-size:37px;
font-weight:bold;
}
.organized:before {
content: "DIVTOBER\A one div illustration per day";
padding-top: 50px;
display: block;
font-family: monospace;
white-space: pre;
font-size: 11px;
text-align: center;
height: calc(100% - 50px);
--g:linear-gradient(to bottom right,#0000 40%,#80008078 41% 60%,#0000 61%);
background:
var(--g) calc(50% + 25px) 50%,
var(--g) calc(50% + 50px) 50%,
var(--g) calc(50% + 75px) 50%,
var(--g) calc(50% - 75px) calc(50% + 25px),
var(--g) calc(50% - 50px) calc(50% + 25px),
var(--g) calc(50% - 25px) calc(50% + 25px),
var(--g) calc(50% - 0px ) calc(50% + 25px),
var(--g) calc(50% + 25px) calc(50% + 25px),
var(--g) calc(50% + 50px) calc(50% + 25px),
var(--g) calc(50% + 75px) calc(50% + 25px);
background-size:20px 20px;
background-repeat: no-repeat;
position:relative;
z-index:1;
}
.organized:after {
content:" 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31";
font-family: monospace;
white-space: pre-wrap;
font-size: 14px;
line-height: 25px;
letter-spacing:0;
position:absolute;
width:170px;
height:120px;
bottom:15px;
left:16px;
color:#0000;
background:linear-gradient(90deg,#fff 20px,#000 0);
background-clip:text;
background-clip:text;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.