Skip to content

Instantly share code, notes, and snippets.

@rose-quartz
Created February 13, 2017 13:01
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save rose-quartz/d49016fba50976fba96d24cbc9485687 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:540px;background-color:none;height:615px;margin:auto;">
<div style="width:540px;height:300px;float:left;">
<img src="http://i.imgur.com/sHHVIFL.png" style="float:left;width:540px;height:300px;" >
<div style="width:300px;height:50px;background-color:#F8E9E9;float:left;margin:-25px 0px -50px 120px"></div>
<div style="width:540px;height:300px;background-color:#F8E9E9;float:left;margin:0px 0px 0px 0px">
<div style="width:540px;height:1px;background-color:#F89E9E;float:left;margin:10px 0px;"></div>
<div style="width:280px;height:55px;background-color:#F8E9E9;float:left;margin:-35px 0px 0px 130px;border:1px solid #F89E9E;box-sizing:border-box;font-size:12px;letter-spacing:1px;text-align:center;line-height:12px;color:#B9806A;font-family:times new roman;"><div style="display:inline-block;margin:14.5px 0px 0px 0px;"><em>They're way too fragile aren't they,</em><em> these feelings that sway ever so slightly.</em></div></div>
<div style="width:300px;height:239px;background-color:none;float:left;margin:10px 0px 0px 120px;font-family:calibri;font-size:10px;line-height:10px;color:#3d3d3d;overflow:hidden;">
<div style="width:320px;height:239px;overflow:auto;">
<div style="width:70px;height:70px;float:left;background-color:none;margin:0px 0px 0px 54.5px;"><img src="http://i.imgur.com/U7GMH9X.png" style="width:70px;height:70px;"></div>
<div style="height:70px;width:111px;background-color:none;float:left;margin:0px 0px 0px 10px;">
Name: Seo Joohyun
<br>Nickname: Seohyun, or Joo
<br>Age: 24 years old
<br>Occupation: Job
<br>Orientation: Sexual
<br>Status: Single
<br>Birthday: Month 00, 2017</div>
<div style="width:280px;background-color:#F8E9E9;float:left;border:1px solid #F89E9E;box-sizing:border-box;font-size:12px;letter-spacing:1px;text-align:center;line-height:12px;color:#B9806A;margin:10px 0px 0px 10px;font-family:times new roman;padding:5px 0px;"><em>Biography</em></div>
<div style="width:280px;float:left;text-align:justify;margin:10px 0px 0px 10px;color:#3d3d3d;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus risus vel odio elementum fringilla. Nunc elementum, nibh eget suscipit semper, augue libero ultricies ex, vitae luctus metus massa ut nunc. In eu commodo turpis, in euismod massa. Nam suscipit, augue eu auctor viverra, lectus dolor facilisis eros, a lacinia arcu justo sed leo. Sed mattis eros augue, at vulputate dolor eleifend ac. Proin tempor sem ut orci mollis, quis pellentesque arcu facilisis. Sed eget erat efficitur, lacinia urna vel, porttitor turpis. Nulla tincidunt lorem vestibulum velit auctor maximus. Integer nisi lacus, ornare vel rutrum ut, cursus sed erat. Fusce scelerisque, nibh nec laoreet pharetra, mauris nulla bibendum mi, non maximus est lacus id nisi. Quisque viverra arcu sed mi hendrerit tempus</div>
<div style="width:280px;padding:10px 10px;float:left;margin:5px 0px 0px 10px;text-align:justify;background-color:#F89E9E;box-sizing:border-box;color:#fff;;"><em><strong>PERSONALITY</strong></em> – Duis at erat ut dolor ornare dignissim eu ut nunc. Sed lorem sapien, interdum quis odio sit amet, maximus aliquam velit. Curabitur a aliquet arcu. Curabitur sed lacinia nisl. Suspendisse a interdum odio. Ut ac tempus ipsum. Sed ornare, lorem id ultricies ornare, lectus ligula dignissim dolor, non scelerisque risus tortor sit amet metus. Proin vehicula, ligula auctor venenatis pharetra, est eros bibendum urna, eget posuere mauris urna eu mi. Suspendisse interdum, eros non ullamcorper consectetur, quam purus tristique tortor, nec ultrices nisl nulla convallis nisl. Curabitur iaculis dolor sit amet nisl molestie ullamcorper.</div>
<div style="width:280px;background-color:#F8E9E9;float:left;border:1px solid #F89E9E;box-sizing:border-box;font-size:12px;letter-spacing:1px;text-align:center;line-height:12px;color:#B9806A;margin:10px 0px 0px 10px;font-family:times new roman;padding:5px 0px;"><em>Facts About Seohyun</em></div>
<div style="width:280px;float:left;text-align:justify;margin:10px 0px 0px 10px;color:#3d3d3d;">
Maecenas convallis urna massa, a rhoncus ex lobortis a. Mauris sodales lorem nisl, sagittis accumsan sem tristique sed. Donec nec iaculis ex. Nullam a nisl accumsan magna egestas scelerisque eget nec nibh. Praesent rhoncus, nisl dictum consequat ullamcorper, magna velit hendrerit metus, ac facilisis velit augue nec diam. In suscipit fermentum diam nec faucibus. Integer dignissim risus in lorem eleifend consectetur. Mauris at enim eu leo viverra molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus libero est, pulvinar ac faucibus quis, dictum suscipit ex. Mauris consectetur nibh nec aliquam vestibulum. Nunc mollis venenatis velit, a efficitur tortor tincidunt quis. Morbi dui ipsum, cursus nec sollicitudin vitae, tempor at nibh.</div>
<div style="width:280px;background-color:#F8E9E9;float:left;border:1px solid #F89E9E;box-sizing:border-box;font-size:12px;letter-spacing:1px;text-align:center;line-height:12px;color:#B9806A;margin:10px 0px 0px 10px;font-family:times new roman;padding:5px 0px;"><em>Plots</em></div>
<div style="float:left;width:280px;margin:5px 0px 0px 10px;">Plot Title – Male or Female</div>
<div style="width:280px;float:left;margin:5px 0px 0px 10px;">
<div style="width:5px;background-color:#FAD9D9;float:left;">
<div style="width:265px;float:left;margin:0px 0px 0px 10px;">
Cras hendrerit nibh dui, ut ultrices magna sodales vel. Donec et tempus nisi. Fusce scelerisque lacinia eleifend. Vivamus justo sem, dignissim eu pretium sed, commodo et lectus. Phasellus sem turpis, elementum ut ornare non, pulvinar ac arcu. Integer elementum pellentesque diam nec sollicitudin. Phasellus in neque turpis. Etiam aliquam, ex quis vehicula vestibulum.</div></div>
</div>
<div style="float:left;width:280px;margin:5px 0px 0px 10px;">Plot Title – Male or Female</div>
<div style="width:280px;float:left;margin:5px 0px 0px 10px;">
<div style="width:5px;background-color:#FAD9D9;float:left;">
<div style="width:265px;float:left;margin:0px 0px 0px 10px;">
Cras hendrerit nibh dui, ut ultrices magna sodales vel. Donec et tempus nisi. Fusce scelerisque lacinia eleifend. Vivamus justo sem, dignissim eu pretium sed, commodo et lectus. Phasellus sem turpis, elementum ut ornare non, pulvinar ac arcu. Integer elementum pellentesque diam nec sollicitudin. Phasellus in neque turpis. Etiam aliquam, ex quis vehicula vestibulum.</div></div>
</div>
<div style="float:left;width:280px;margin:5px 0px 0px 10px;">Plot Title – Male or Female</div>
<div style="width:280px;float:left;margin:5px 0px 0px 10px;">
<div style="width:5px;background-color:#FAD9D9;float:left;">
<div style="width:265px;float:left;margin:0px 0px 0px 10px;">
Cras hendrerit nibh dui, ut ultrices magna sodales vel. Donec et tempus nisi. Fusce scelerisque lacinia eleifend. Vivamus justo sem, dignissim eu pretium sed, commodo et lectus. Phasellus sem turpis, elementum ut ornare non, pulvinar ac arcu. Integer elementum pellentesque diam nec sollicitudin. Phasellus in neque turpis. Etiam aliquam, ex quis vehicula vestibulum.</div></div>
</div>
<div style="float:left;width:280px;margin:5px 0px 0px 10px;">Plot Title – Male or Female</div>
<div style="width:280px;float:left;margin:5px 0px 0px 10px;">
<div style="width:5px;background-color:#FAD9D9;float:left;">
<div style="width:265px;float:left;margin:0px 0px 0px 10px;">
Cras hendrerit nibh dui, ut ultrices magna sodales vel. Donec et tempus nisi. Fusce scelerisque lacinia eleifend. Vivamus justo sem, dignissim eu pretium sed, commodo et lectus. Phasellus sem turpis, elementum ut ornare non, pulvinar ac arcu. Integer elementum pellentesque diam nec sollicitudin. Phasellus in neque turpis. Etiam aliquam, ex quis vehicula vestibulum.</div></div>
</div>
</div>
</div>
</div>
<div style="text-align:center;font-family:calibri;font-size:8px;font-color:#3d3d3d;text-transform:uppercase;letter-spacing:1px;line-height:15px;">Designed and coded by rose-quartz</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment