Draco AES

<div class="draco">
<div class="dracoheader">name surname<span>quote goes here</span></div>
<div class="dracodesc"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed massa metus. Praesent tempor velit vitae tortor viverra, et vulputate odio sollicitudin. Aliquam erat volutpat. Maecenas ut erat eu dui convallis dapibus eget eget magna. Curabitur turpis velit, lacinia nec condimentum sit amet, mollis sit amet ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam egestas gravida quam, in facilisis dolor blandit ut. Integer venenatis pretium lectus, sit amet luctus mi condimentum sed.</p></div>
<div class="dracoimg1" style="background-image:url(http://via.placeholder.com/400)"></div>
<div class="dracoimg2" style="background-image:url(http://via.placeholder.com/200x362)"></div>
<div class="dracoimg3" style="background-image:url(http://via.placeholder.com/320x150)"></div>
</div>
<a href="http://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+700i" rel="stylesheet"/>
<style>.draco {margin: 10px auto;overflow: hidden;width: 400px;height: 450px;padding: 11px 11px 1px;background-color: #39384a;background-image: url(http://placehold.it/420x470);border: 5px solid #eee;outline: 1px solid #ccc;position: relative;} .draco br { display: none; } .dracodesc p br{display:block;} .dracoheader { text-shadow: 2px 2px 0px rgba(0,0,0,0.1); position: absolute; z-index: 3; left: 0px; top: 0px; height: 100px; background: #48865e; width: 270px; font: 30px 'Playfair Display'; color: white; text-align: center; letter-spacing: -1px; font-weight: bold; font-style: italic; text-transform: lowercase; box-sizing: border-box; padding-top: 20px; } .dracoheader span { border-top: 1px solid rgba(255, 255, 255, 0.1); margin: -5px 20px 0; display: block; font-size: 9px; text-transform: uppercase; font-style: normal; font-weight: normal; letter-spacing: 3px; color: #eee; } .dracoimg1 { width: 400px; height: 400px; position: absolute; top: -150px; right: -210px; border-radius: 100%; } .dracoimg2 { width: 200px; height: 362px; position: absolute; left: 0px; bottom: 0px; } .dracoimg3 { width: 320px; height: 150px; position: absolute; bottom: 0px; right: 0px; } .dracodesc { position: absolute; top: 150px; height: 120px; right: 20px; width: 230px; background: rgba(255,255,255,0.9); text-align: justify; z-index: 3; } .dracodesc p { margin: 10px; font: 11px 'Calibri'; text-align: justify; text-align-last: right; color: #888; height: 100px; overflow: auto; padding-right:3px; position:relative; z-index:3; } .dracodesc:before {content: "";display: block;width: 230px;height: 120px;position: absolute;left: -6px;bottom: -6px;border-left: 1px solid rgba(255,255,255,0.80);border-bottom: 1px solid rgba(255,255,255,0.80);} .dracodesc:after {content: "";display: block;width: 230px;height: 120px;position: absolute;top: -6px;right: -6px;border-top: 1px solid rgba(255,255,255,0.80);border-right: 1px solid rgba(255,255,255,0.80);} .dracoimg2:before { content:""; display: block; background: rgba(255,255,255,0.80); width: 1px; height: 362px; position: absolute; right: -5px; } .dracoimg3:before {content: "";display: block;width: 320px;height: 150px;position: absolute;top: -6px;left: -6px;border-left: 1px solid rgba(255,255,255,0.80);border-top: 1px solid rgba(255,255,255,0.80);} .dracoimg1:before { content:""; width: 400px; height: 400px; position: absolute; bottom: -6px; left: -6px; border-radius: 100%; border:1px solid rgba(255,255,255,0.80); } .draco *::selection { background: #48865e; color: white; } .draco p::-webkit-scrollbar { width: 2px; height: 2px; background: #fafafa; } .draco p::-webkit-scrollbar-thumb { background: #48865e;} .ncredit { width: 420px; text-align: right; margin: 0 auto; display: block; font-size: 10px; text-decoration: none; font: 8px verdana; } .draco + br + .ncredit { margin-top: -15px; } .ncredit:before { content: "©"; }</style>