Recycle Bin (HTML, CSS)

HTML
<section> <span class="sampah"> <span></span> <i></i> </span> </section>
CSS
body, html { margin:0px; padding:0px; font-family: 'Titillium Web', sans-serif; font-size: 23px; line-height: 42px; font-weight: 100; text-align:center; height: 100%; } section { /* background: #dce7eb; */ width: 100%; height: 100%; display: flex; align-items: center; } .sampah { background:#000; width: 66px; height: 80px; display: inline-block; margin:0 auto; position: relative; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } .sampah:after { content: 'Hover to open the bin'; position: absolute; left: -120px; right: 0; bottom: -50px; width: 300px; } .sampah span { position: absolute; height: 12px; background: #000; top: -19px; left: -10px; right: -10px; border-top-left-radius: 10px; border-top-right-radius: 10px; transform: rotate(0deg); transition: transform 250ms; transform-origin: 19% 100%; } .sampah span:after { content: ''; position: absolute; width: 27px; height: 7px; background: #000; top: -10px; border-top-left-radius: 10px; border-top-right-radius: 10px; transform: rotate(0deg); transition: transform 250ms; transform-origin: 19% 100%; left: 27px; } .sampah i { position:relative; width: 5px; height:50px; background:#fff; display:block; margin:14px auto; border-radius: 5px; } .sampah i:after { content: ''; width: 5px; height: 50px; background: #fff; position: absolute; left: -18px; border-radius: 5px; } .sampah i:before { content: ''; width: 5px; height: 50px; background: #fff; position: absolute; right: -18px; border-radius: 5px; } .sampah:hover span { transform: rotate(-45deg); transition: transform 250ms; }
JAVASCRIPT
Expand for more options Login