Black out.
@tag
notes
- Code:
<link href='https://fonts.googleapis.com/css?family=Playfair+Display|Lato|PT+Serif' rel='stylesheet' type='text/css'><style>.black-out {width: 500px;height: 500px;margin: 10px auto;position: relative;box-sizing: border-box;padding: 1px;border: 1px solid #000;}.black-out > div:first-child {width: 100%;height: 100%;background-color: #000;display: flex;overflow: hidden;}.black-out > div > div {flex: 1;min-width: 248px;}.black-out > div > div:first-child {background-image: url("http://image.noelshack.com/fichiers/2018/09/7/1520175827-pixiv-id-10226946-full-2277487.jpg");background-size: cover;flex: 1;transition: all 0.3s;}.black-out > div:first-child:hover > div:first-child {flex:0;min-width: 0;}.black-out > div > div:nth-child(2) {display: flex;flex-direction: column;box-sizing: border-box;padding: 10px;}.black-out > div > div:nth-child(2) h2 {color: #fff;margin: auto 0 0;font-family: "Playfair Display", serif;font-size: 30px;}.black-out-accent {color: #a55753;}.black-out > div > div:nth-child(2) h2 + div {margin-top: auto;border-top: 1px solid #fff;margin-bottom: 2px;}.black-out > div > div:nth-child(2) h2 + div span {display: inline-block;border-top: 2px solid #fff;padding-top: 3px;}.black-out > div > div:nth-child(2) div {color: #fff;letter-spacing: 1px;font-family: "Lato", sans-serif;font-size: 7px;line-height: 7px;}.black-out > div > div:nth-child(3) {height: 100%;padding: 10px;box-sizing: border-box;background: #fff;}.black-out > div > div:nth-child(3) > div {font-family: "Source Sans Pro", sans-serif;font-family: "PT Serif", serif;height: 100%;overflow: auto;font-size: 11px;text-align: justify;padding-right: 10px;}.black-out > div > div:nth-child(3) > div l {font-size: 2.8em;float: left;margin-right: 5px;}.black-out > div > div:nth-child(3) > div::-webkit-scrollbar { width: 2px;background: #A1A2A7;border: 3px solid #fafafa;}.black-out > div > div:nth-child(3) > div::-webkit-scrollbar-thumb {background: #000; }.black-out-credit {margin-top: 5px;}.black-out-credit a {font-family: "Lato", sans-serif;font-size: 8px;text-transform: uppercase;letter-spacing: 1px;text-decoration: none !important;color: #999!important;font-weight: bold;}</style><div class="black-out"><div><div></div><div><h2>Black out<span class="black-out-accent">.</span></h2><div><span>@tag</span></div><div>notes</div></div><div><div><l>L</l>orem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut.</div></div></div><div class="black-out-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>