#e8e8e8
1.page { 2 position: relative; 3 box-sizing: border-box; 4 max-width: 300px; 5 font-family: cursive; 6 font-size: 20px; 7 border-radius: 10px; 8 background: #fff; 9 background-image: linear-gradient(#f5f5f0 1.1rem, #ccc 1.2rem); 10 background-size: 100% 1.2rem; 11 line-height: 1.2rem; 12 padding: 1.4rem 0.5rem 0.3rem 4.5rem; 13} 14 15.page::before, 16.page::after { 17 position: absolute; 18 content: ""; 19 bottom: 10px; 20 width: 40%; 21 height: 10px; 22 box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7); 23 z-index: -1; 24 transition: all 0.3s ease; 25} 26 27.page::before { 28 left: 15px; 29 transform: skew(-5deg) rotate(-5deg); 30} 31 32.page::after { 33 right: 15px; 34 transform: skew(5deg) rotate(5deg); 35} 36 37.page:hover::before, 38.page:hover::after { 39 box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); 40} 41 42.margin { 43 position: absolute; 44 border-left: 1px solid #d88; 45 height: 100%; 46 left: 3.3rem; 47 top: 0; 48} 49 50.page p { 51 margin: 0; 52 text-indent: 1rem; 53 padding-bottom: 1.2rem; 54 color: black; 55 line-height: 20px; 56}
1.7K views
1.7K views
Comments
2Joel12r Today at 10:10
Today at 10:10
this is very impressive
Yaya12085 Today at 16:43
Today at 16:43
@Joel12r Thanks
MIT License