Advertisement
poisonthangs_x

Angel Dust

Feb 17th, 2018
135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.95 KB | None | 0 0
  1. ANGEL DUST TWO COLUMN
  2.  
  3. Do not merge coding or claim as your own.
  4. All credits must stay in tact. You can add your own
  5. graphics. Enjoy - Thank you for using MADLOVE RESOURCES =]
  6.  
  7. -Poison Ivy
  8.  
  9.  
  10. //------------------PASTE IN ABOUT ME--------------------//
  11.  
  12. <style>/* DO NOT REMOVE THE HTML BODY CREDIT * / </style>
  13.  
  14. <html body onContextMenu="alert('Layout by Poison Ivy @ MadLove Resources Do not steal or copy ©all rights reserved');return false;">
  15.  
  16. <style>
  17. @import url('https://fonts.googleapis.com/css?family=Bellefair');
  18. </style>
  19. <style>
  20. @import url('https://fonts.googleapis.com/css?family=Dancing+Script');
  21. </style>
  22. <style>
  23. @import url('https://fonts.googleapis.com/css?family=Great+Vibes');
  24. </style>
  25.  
  26. <style type="text/css">
  27. #madlove_resources {--------->DO NOT REMOVE CREDIT<--------------}
  28. @Elegant_Dreamer {coding & graphics by Poison Ivy @ (c)MADLOVE}
  29.  
  30. #MLR_Poison {------->Background Properties<-----}
  31. body
  32. {
  33. background-color:#E3E3E3;
  34. background-attachment:fixed;
  35. background-repeat:no-repeat;
  36. background-image:url('https://www.pixelstalk.net/wp-content/uploads/2016/03/Sun-And-Clouds-Wallpaper-free-download.jpg');
  37. overflow-x:hidden;
  38. background-size:cover;
  39. font-family: 'Bellefair', serif;
  40. font-family: 'Dancing Script', cursive;
  41. font-family: 'Great Vibes', cursive;
  42. }
  43.  
  44. @POISON{ TEXT P R O P E R T I E S }
  45. div, span.text, span.text p, table, td, tr {text-transform: none; text-decoration: none; font-style: normal; font-weight: normal; font-family: Lato; color: #ffffff; font-size: 1.80vh;}
  46.  
  47. #MLR {----->Scrollbar<------}
  48. ::-webkit-scrollbar
  49. {width: 4px; height: 2px; background: #9D9E9E; }
  50. ::-webkit-scrollbar-thumb
  51. {background-color: #9D9E9E; width: 8px; padding:5px; width: 3px; height: 2px;}
  52.  
  53. .MLR { TABLE P R O P E R T I E S }
  54. table {position: relative; border: 0.20vh; width: 53vh; height: 25vh; margin: 0; top: 40%; left: 17%;}
  55. table, tr, td { background-color:transparent;}
  56. table table table table td { width:0px; border:0px;}
  57. table table table td { border:0px; margin:0px; padding:0px;}
  58. table table br { display:none; margin:0px; padding:0px;}
  59. table table table br { display:block; margin:0px; padding:0px;}
  60. table table table table, table table {border:0px; margin:0px; padding: 1.75px; }
  61. table table table {
  62. background-color:#0BA9DE;
  63. border: 0.60vh solid #F7C1F4;
  64. left: 0%;
  65. right: 0%;
  66. margin: 2;
  67. }
  68.  
  69. td.text table {position:relative; top: 0.65vh; margin: 2; bottom: 0.88vh; padding: 0px; left: -2.35vh; right: 1%; height: 24.75vh;}
  70. td.text table table {position:static;}
  71.  
  72. .MLR { DIV P R O P E R T I E S }
  73. #bar {
  74. background-color:none!important;
  75. z-index:2;
  76. width: 54.85%;
  77. height: 79%;
  78. top: 15%;
  79. left: 41.65%;
  80. position: absolute;
  81. border: none;
  82. color:#ffffff !important;
  83. -webkit-transition: all 1s ease-in-out;
  84. -moz-transition: all 1s ease-in-out;
  85. -ms-transition: all 1s ease-in-out;
  86. -o-transition: all 1s ease-in-out;
  87. transition: all 1s ease-in-out;
  88. }
  89.  
  90. #bar:hover {
  91. background-color:#0BA9DE;
  92. z-index:2;
  93. width: 100%;
  94. height: 101%;
  95. top: -3%;
  96. left: 102%;
  97. position:absolute;
  98. border: 0.60vh solid #F7C1F4;
  99. -webkit-transition: all 1s ease-in-out;
  100. -moz-transition: all 1s ease-in-out;
  101. -ms-transition: all 1s ease-in-out;
  102. -o-transition: all 1s ease-in-out;
  103. transition: all 1s ease-in-out;
  104. }
  105.  
  106. #bar .content {opacity:0; transition: all 1s ease-in-out;}
  107.  
  108. #bar:hover .content,#bar:hover .text,#bar:hover .image
  109. {opacity:1; visibility:visible !important; color:#ffffff; }
  110.  
  111.  
  112.  
  113. #pizza {
  114. background-color:none!important;
  115. z-index:2;
  116. width: 54.85%;
  117. height: 79%;
  118. top: 18%;
  119. left: 43%;
  120. position: absolute;
  121. border: none;
  122. color:#ffffff !important;
  123. -webkit-transition: all 1s ease-in-out;
  124. -moz-transition: all 1s ease-in-out;
  125. -ms-transition: all 1s ease-in-out;
  126. -o-transition: all 1s ease-in-out;
  127. transition: all 1s ease-in-out;
  128. }
  129.  
  130. #pizza:hover {
  131. background-color:#0BA9DE;
  132. z-index:2;
  133. width: 100%;
  134. height: 100%;
  135. top: -2.30%;
  136. left: -104%;
  137. position:absolute;
  138. border: 0.60vh solid #F7C1F4;
  139. -webkit-transition: all 1s ease-in-out;
  140. -moz-transition: all 1s ease-in-out;
  141. -ms-transition: all 1s ease-in-out;
  142. -o-transition: all 1s ease-in-out;
  143. transition: all 1s ease-in-out;
  144. }
  145.  
  146. #pizza .content {opacity:0; transition: all 1s ease-in-out;}
  147.  
  148. #pizza:hover .content,#pizza:hover .text,#pizza:hover .image
  149. {opacity:1; visibility:visible !important; color:#ffffff;
  150. }
  151.  
  152.  
  153. #madloveresources {--------------------->navi links<-------------------}
  154. table table table a
  155. {
  156. background-color:#E3366A;
  157. padding: 0.30%;
  158. display: block;
  159. font-size: 2vh;
  160. float: left;
  161. margin-left: 0.12%;
  162. border-bottom: 0.30vh solid #470738;
  163. font-weight: lighter;
  164. font-variant: normal;
  165. margin-top: 0.12%;
  166. text-decoration: none!important;
  167. color:#3419CF!important;
  168. font-family: 'Dancing Script', cursive;
  169. cursor: pointer;
  170. box-shadow: inset 0 0 0 0 #31302B;
  171. -webkit-transition: all ease 0.8s;
  172. -moz-transition: all ease 0.8s;
  173. transition: all ease 0.8s;
  174. -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  175. -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  176. -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  177. transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  178. -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  179. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  180. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  181. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  182. }
  183.  
  184. table table table a:hover
  185. {
  186. letter-spacing: 1vh;
  187. box-shadow: inset 600px 0 0 0 #31302B;
  188. color: #ffffff!important;
  189. -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  190. -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  191. -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  192. transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  193. -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  194. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  195. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  196. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  197. }
  198.  
  199.  
  200. a.conn, a.conn:link
  201. {
  202. background-color:#FFD1F4;
  203. padding: 0.30%;
  204. display: block;
  205. float: none;
  206. font-size: 2vh;
  207. border-bottom: 0.30vh solid #470738;
  208. font-weight: lighter;
  209. font-variant: normal;
  210. margin-top: 0.12%;
  211. text-decoration: none!important;
  212. color:#3419CF!important;
  213. font-family: 'Dancing Script', cursive;
  214. cursor: pointer;
  215. box-shadow: inset 0 0 0 0 #31302B;
  216. -webkit-transition: all ease 0.8s;
  217. -moz-transition: all ease 0.8s;
  218. transition: all ease 0.8s;
  219. -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  220. -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  221. -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  222. transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  223. -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  224. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  225. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  226. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  227. }
  228.  
  229. a.conn:hover
  230. {
  231. letter-spacing: 1vh;
  232. box-shadow: inset 600px 0 0 0 #31302B;
  233. color: #ffffff!important;
  234. -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  235. -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  236. -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  237. transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  238. -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  239. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  240. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  241. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  242. }
  243.  
  244.  
  245.  
  246. #MLR {------------------------->Headers<----------------------------}
  247. h1
  248. {
  249. background-color:#C9BBA7;
  250. font-size: 2vh;
  251. padding: 1%;
  252. font-weight: lighter;
  253. text-align: center;
  254. font-style: normal;
  255. font-variant: normal;
  256. display: block;
  257. color:#850C7D;
  258. font-family: 'Bellefair', serif;
  259. }
  260.  
  261. h2
  262. {
  263. font-size: 5vh;
  264. font-family: 'Great Vibes', cursive;
  265. padding: 1%;
  266. font-weight: lighter;
  267. text-align: center;
  268. border-bottom: 0.30vh solid #ffffff;
  269. display: block;
  270. font-variant: normal;
  271. color:#ffffff;
  272. }
  273.  
  274. #MLR {------------------------->styes<------------------------}
  275. .xpdonnax { KEEP CREDIT MUSIC DIV BY PRIMADONNA @ /hightimes }
  276. .tunes {
  277. top:10px;
  278. left:10px;
  279. margin:0px;
  280. padding:6px 4px 3px 4px;
  281. width:16px;
  282. height:13px;
  283. overflow:hidden;
  284. text-align:center;
  285. z-index:100;
  286. position:fixed !important;
  287. background-color:#ffffff;
  288. -webkit-transition: all .5s linear;
  289. -moz-transition: all .5s linear;
  290. transition: all .5s linear;}
  291.  
  292. .tunes:hover {
  293. height:32px;}
  294.  
  295.  
  296. #MLR {------------------------------->Hiding Codes<-------------------}
  297. .userAlbums { display:none; }
  298. .profileinfo {display:none;}
  299. .friendSpace { display:none; }
  300. .interestsAndDetails { display:none; }
  301. .userProfiledetail { display:none; }
  302. .friendsComments { display:none; }
  303. .latestBlogEntry { display:none; }
  304. .extendedNetwork { display:none; }
  305. .contactTable { display: none; }
  306. .userProfileURL { display:none; }
  307. .clearfix {display:none !important; position:absolute!important;}
  308. .blurbs td.text {display:none;}
  309. .blurbs td td .orangetext15 {display:none;}
  310. .lightbluetext8 {display:none;}
  311. .profileInfo tr tr td {visibility:hidden;}
  312. .profileInfo td.text {visibility:visible;}
  313. .clearfix {margin-top: -130px;}
  314. #footerWarpper {display: none;}
  315. #profileV1main > tbody > tr > td:nth-child(2) > table > tbody > tr > td.text > p > table.blurbs {display: none;}
  316. #profileV1main > tbody > tr > td:nth-child(2) > table > tbody > tr > td.text > table {display: none;}
  317. </style>
  318.  
  319.  
  320.  
  321. //---------------PASTE IN WHO I'D LIKE TO MEET-----------------//
  322.  
  323.  
  324. </table>
  325. </td>
  326. </tr>
  327. </table>
  328. <br />
  329. <table style="height: 100%; width: 97%; position: absolute; top: -24.25%; left: 0%;" cellspacing="0" cellpadding="0">
  330. <td>
  331. <table cellspacing="0" cellpadding="0">
  332. <td valign="top" align="center">
  333.  
  334. <img src="http://www.placehold.it/800x295/F5BCF1" style="width: 108vh; height: 40vh;">
  335.  
  336. <nav style="position: absolute; width: 100%; top: 1%; left: 0.40%; height: 70%;">
  337. <a href="">Home</a>
  338.  
  339. <a href="">Message</a>
  340.  
  341. <a href="">Comment</a>
  342.  
  343. <a href="">Guidelines</a>
  344.  
  345. <a href="">Stream</a>
  346.  
  347. <a href="">Bulletins</a>
  348.  
  349. <a href="">Gallery</a>
  350.  
  351. <a href="">Ask</a>
  352.  
  353. <a href="">Tumblr</a>
  354.  
  355. <a href="">Twitter</a>
  356.  
  357. <a href="">Link</a>
  358.  
  359. <a href="">Link</a>
  360.  
  361. <a href="">Link</a>
  362.  
  363. <a href="">Link</a>
  364.  
  365. <a href="">Link</a>
  366.  
  367. <a href="">Link</a>
  368.  
  369. <a href="http://www.roleplayer.me/madlove_resources">Credit</a>
  370. </nav>
  371.  
  372.  
  373. <img src="http://static.ncsoft.com/aion/store/product/6407002_CUBE_ThumbLg.png" style="position: fixed; top: 30%; left: 9%; width: 40vh; height: 40vh;">
  374.  
  375.  
  376. <h1 style="font-size: 5vh; position: fixed; bottom: 2%; left: 1%;">
  377. AIM: sn can go here
  378. <br>
  379. LINE: id can go here
  380. </h1>
  381.  
  382.  
  383. </table>
  384. </td>
  385. </tr>
  386. </table>
  387. <br />
  388. <table cellspacing="0" cellpadding="0">
  389. <td>
  390. <table cellspacing="0" cellpadding="0">
  391. <td valign="top" align="center">
  392.  
  393. <h1>Biography</h1>
  394.  
  395. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 86%; margin-top: -2%;">
  396. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies odio augue, id scelerisque augue molestie et. Curabitur eget consequat justo, id vehicula justo. Nam nec hendrerit erat. Phasellus congue scelerisque augue, id maximus est aliquet at. Ut mattis tortor quis nunc fermentum vulputate nec accumsan nisl. Donec condimentum justo id risus semper rutrum. In interdum felis vitae lectus egestas, eu iaculis justo semper. Etiam at tellus sed massa sagittis accumsan in sed nisl. Cras vel sagittis metus. Nunc gravida ac massa at auctor. Aenean risus felis, tincidunt quis mi ut, aliquet rhoncus risus. Vivamus ultrices dolor quis volutpat fermentum. Aliquam fermentum mattis libero a egestas.
  397.  
  398. Nulla facilisi. Nunc id iaculis neque. Suspendisse eros lacus, suscipit id felis quis, malesuada posuere lorem. Duis aliquet risus sapien, sit amet egestas quam congue eu. Vestibulum eleifend ut lacus sit amet varius. Etiam tortor nisl, finibus at venenatis vel, consequat vitae leo. Duis dictum arcu quis nunc ultricies porta.
  399.  
  400. In id gravida mauris. In feugiat mi a pellentesque condimentum. Phasellus est erat, tincidunt vitae condimentum at, facilisis id dolor. Curabitur elementum urna et nibh pretium interdum. Integer quis molestie risus. Pellentesque non posuere est. Praesent et gravida eros. Morbi congue semper lorem at luctus. Nunc id scelerisque felis. Nulla mollis ullamcorper maximus. Sed vehicula at mi quis luctus. Aliquam finibus, enim ac viverra lacinia, turpis urna interdum leo, ut vulputate nibh magna a tellus. Donec ut enim vitae neque lacinia molestie.
  401.  
  402. Etiam mattis maximus nulla, eget aliquam libero egestas eget. Vivamus tempus mi quis velit posuere tincidunt. Phasellus nec nulla faucibus, elementum justo nec, suscipit augue. Curabitur vel felis neque. Donec egestas auctor odio eget luctus. Vestibulum condimentum vehicula ante varius eleifend. Integer nulla risus, tincidunt nec elit vitae, eleifend aliquet erat. Maecenas vehicula orci erat, non eleifend mauris tempor non. Sed auctor varius magna, sed iaculis justo varius id. Duis non accumsan mi, eu fermentum turpis. Suspendisse potenti. Ut consequat consequat porttitor. Pellentesque posuere justo justo. Mauris molestie aliquam odio, sit amet aliquam massa luctus at.
  403.  
  404. Pellentesque eget finibus purus. Nam vestibulum dolor vitae ante hendrerit egestas. Quisque luctus enim neque, ac accumsan quam laoreet ut. Vivamus quis nisl venenatis, porta nisi sed, fringilla nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nunc nunc. Pellentesque mi purus, ullamcorper non condimentum id, pulvinar in elit. Phasellus sit amet sollicitudin dolor, at interdum mauris. Nulla tempor hendrerit sagittis. Etiam sit amet tempus libero. Nunc rhoncus, sem ac euismod consequat, ex elit commodo ante, sit amet porttitor arcu orci ac magna. Aenean ornare libero quis turpis aliquet tristique. Integer interdum arcu dui, a facilisis purus varius non. Sed pretium felis ac mi tempor porttitor. In vel lacus iaculis enim congue pulvinar.
  405. </section>
  406.  
  407.  
  408. </table>
  409. </td>
  410. </tr>
  411. </table>
  412. <br />
  413. <table cellspacing="0" cellpadding="0">
  414. <td>
  415. <table cellspacing="0" cellpadding="0">
  416. <td valign="top" align="center">
  417.  
  418. <img src="http://www.placehold.it/385x148/F5BCF1" style="width: 100%; height: 100%;">
  419.  
  420. </div>
  421.  
  422.  
  423. </table>
  424. </td>
  425. </tr>
  426. </table>
  427. <br />
  428. <table cellspacing="0" cellpadding="0">
  429. <td>
  430. <table cellspacing="0" cellpadding="0">
  431. <td valign="top" align="center">
  432.  
  433. <h1>Personality & Traits</h1>
  434.  
  435. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 86%; margin-top: -2%;">
  436. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies odio augue, id scelerisque augue molestie et. Curabitur eget consequat justo, id vehicula justo. Nam nec hendrerit erat. Phasellus congue scelerisque augue, id maximus est aliquet at. Ut mattis tortor quis nunc fermentum vulputate nec accumsan nisl. Donec condimentum justo id risus semper rutrum. In interdum felis vitae lectus egestas, eu iaculis justo semper. Etiam at tellus sed massa sagittis accumsan in sed nisl. Cras vel sagittis metus. Nunc gravida ac massa at auctor. Aenean risus felis, tincidunt quis mi ut, aliquet rhoncus risus. Vivamus ultrices dolor quis volutpat fermentum. Aliquam fermentum mattis libero a egestas.
  437.  
  438. Nulla facilisi. Nunc id iaculis neque. Suspendisse eros lacus, suscipit id felis quis, malesuada posuere lorem. Duis aliquet risus sapien, sit amet egestas quam congue eu. Vestibulum eleifend ut lacus sit amet varius. Etiam tortor nisl, finibus at venenatis vel, consequat vitae leo. Duis dictum arcu quis nunc ultricies porta.
  439.  
  440. In id gravida mauris. In feugiat mi a pellentesque condimentum. Phasellus est erat, tincidunt vitae condimentum at, facilisis id dolor. Curabitur elementum urna et nibh pretium interdum. Integer quis molestie risus. Pellentesque non posuere est. Praesent et gravida eros. Morbi congue semper lorem at luctus. Nunc id scelerisque felis. Nulla mollis ullamcorper maximus. Sed vehicula at mi quis luctus. Aliquam finibus, enim ac viverra lacinia, turpis urna interdum leo, ut vulputate nibh magna a tellus. Donec ut enim vitae neque lacinia molestie.
  441.  
  442. Etiam mattis maximus nulla, eget aliquam libero egestas eget. Vivamus tempus mi quis velit posuere tincidunt. Phasellus nec nulla faucibus, elementum justo nec, suscipit augue. Curabitur vel felis neque. Donec egestas auctor odio eget luctus. Vestibulum condimentum vehicula ante varius eleifend. Integer nulla risus, tincidunt nec elit vitae, eleifend aliquet erat. Maecenas vehicula orci erat, non eleifend mauris tempor non. Sed auctor varius magna, sed iaculis justo varius id. Duis non accumsan mi, eu fermentum turpis. Suspendisse potenti. Ut consequat consequat porttitor. Pellentesque posuere justo justo. Mauris molestie aliquam odio, sit amet aliquam massa luctus at.
  443.  
  444. Pellentesque eget finibus purus. Nam vestibulum dolor vitae ante hendrerit egestas. Quisque luctus enim neque, ac accumsan quam laoreet ut. Vivamus quis nisl venenatis, porta nisi sed, fringilla nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nunc nunc. Pellentesque mi purus, ullamcorper non condimentum id, pulvinar in elit. Phasellus sit amet sollicitudin dolor, at interdum mauris. Nulla tempor hendrerit sagittis. Etiam sit amet tempus libero. Nunc rhoncus, sem ac euismod consequat, ex elit commodo ante, sit amet porttitor arcu orci ac magna. Aenean ornare libero quis turpis aliquet tristique. Integer interdum arcu dui, a facilisis purus varius non. Sed pretium felis ac mi tempor porttitor. In vel lacus iaculis enim congue pulvinar.
  445. </section>
  446.  
  447.  
  448. </table>
  449. </td>
  450. </tr>
  451. </table>
  452. <br />
  453. <table cellspacing="0" cellpadding="0">
  454. <td>
  455. <table cellspacing="0" cellpadding="0">
  456. <td valign="top" align="center">
  457.  
  458. <img src="http://www.placehold.it/385x148/F5BCF1" style="width: 100%; height: 100%;">
  459.  
  460. </div>
  461.  
  462.  
  463. </table>
  464. </td>
  465. </tr>
  466. </table>
  467. <br />
  468. <table cellspacing="0" cellpadding="0">
  469. <td>
  470. <table cellspacing="0" cellpadding="0">
  471. <td valign="top" align="center">
  472.  
  473. <h1>Main Connection Name</h1>
  474.  
  475. <img src="http://www.placehold.it/227x160/F5BCF1" style="margin-top: -1%; float: right; width: 58.88%; height: 80%;">
  476.  
  477. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 86%; width: 40%; margin-top: -2%;">
  478. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies odio augue, id scelerisque augue molestie et. Curabitur eget consequat justo, id vehicula justo. Nam nec hendrerit erat. Phasellus congue scelerisque augue, id maximus est aliquet at. Ut mattis tortor quis nunc fermentum vulputate nec accumsan nisl. Donec condimentum justo id risus semper rutrum. In interdum felis vitae lectus egestas, eu iaculis justo semper. Etiam at tellus sed massa sagittis accumsan in sed nisl. Cras vel sagittis metus. Nunc gravida ac massa at auctor. Aenean risus felis, tincidunt quis mi ut, aliquet rhoncus risus. Vivamus ultrices dolor quis volutpat fermentum. Aliquam fermentum mattis libero a egestas.
  479.  
  480. Nulla facilisi. Nunc id iaculis neque. Suspendisse eros lacus, suscipit id felis quis, malesuada posuere lorem. Duis aliquet risus sapien, sit amet egestas quam congue eu. Vestibulum eleifend ut lacus sit amet varius. Etiam tortor nisl, finibus at venenatis vel, consequat vitae leo. Duis dictum arcu quis nunc ultricies porta.
  481.  
  482. In id gravida mauris. In feugiat mi a pellentesque condimentum. Phasellus est erat, tincidunt vitae condimentum at, facilisis id dolor. Curabitur elementum urna et nibh pretium interdum. Integer quis molestie risus. Pellentesque non posuere est. Praesent et gravida eros. Morbi congue semper lorem at luctus. Nunc id scelerisque felis. Nulla mollis ullamcorper maximus. Sed vehicula at mi quis luctus. Aliquam finibus, enim ac viverra lacinia, turpis urna interdum leo, ut vulputate nibh magna a tellus. Donec ut enim vitae neque lacinia molestie.
  483.  
  484. Etiam mattis maximus nulla, eget aliquam libero egestas eget. Vivamus tempus mi quis velit posuere tincidunt. Phasellus nec nulla faucibus, elementum justo nec, suscipit augue. Curabitur vel felis neque. Donec egestas auctor odio eget luctus. Vestibulum condimentum vehicula ante varius eleifend. Integer nulla risus, tincidunt nec elit vitae, eleifend aliquet erat. Maecenas vehicula orci erat, non eleifend mauris tempor non. Sed auctor varius magna, sed iaculis justo varius id. Duis non accumsan mi, eu fermentum turpis. Suspendisse potenti. Ut consequat consequat porttitor. Pellentesque posuere justo justo. Mauris molestie aliquam odio, sit amet aliquam massa luctus at.
  485.  
  486. Pellentesque eget finibus purus. Nam vestibulum dolor vitae ante hendrerit egestas. Quisque luctus enim neque, ac accumsan quam laoreet ut. Vivamus quis nisl venenatis, porta nisi sed, fringilla nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nunc nunc. Pellentesque mi purus, ullamcorper non condimentum id, pulvinar in elit. Phasellus sit amet sollicitudin dolor, at interdum mauris. Nulla tempor hendrerit sagittis. Etiam sit amet tempus libero. Nunc rhoncus, sem ac euismod consequat, ex elit commodo ante, sit amet porttitor arcu orci ac magna. Aenean ornare libero quis turpis aliquet tristique. Integer interdum arcu dui, a facilisis purus varius non. Sed pretium felis ac mi tempor porttitor. In vel lacus iaculis enim congue pulvinar.
  487. </section>
  488.  
  489. </table>
  490. </td>
  491. </tr>
  492. </table>
  493. <br />
  494. <table cellspacing="0" cellpadding="0">
  495. <td>
  496. <table cellspacing="0" cellpadding="0">
  497. <td valign="top" align="center">
  498.  
  499. <h1>Main Connection Name</h1>
  500.  
  501. <img src="http://www.placehold.it/227x160/F5BCF1" style="margin-top: -1%; float: right; width: 58.88%; height: 80%;">
  502.  
  503. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 86%; width: 40%; margin-top: -2%;">
  504. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies odio augue, id scelerisque augue molestie et. Curabitur eget consequat justo, id vehicula justo. Nam nec hendrerit erat. Phasellus congue scelerisque augue, id maximus est aliquet at. Ut mattis tortor quis nunc fermentum vulputate nec accumsan nisl. Donec condimentum justo id risus semper rutrum. In interdum felis vitae lectus egestas, eu iaculis justo semper. Etiam at tellus sed massa sagittis accumsan in sed nisl. Cras vel sagittis metus. Nunc gravida ac massa at auctor. Aenean risus felis, tincidunt quis mi ut, aliquet rhoncus risus. Vivamus ultrices dolor quis volutpat fermentum. Aliquam fermentum mattis libero a egestas.
  505.  
  506. Nulla facilisi. Nunc id iaculis neque. Suspendisse eros lacus, suscipit id felis quis, malesuada posuere lorem. Duis aliquet risus sapien, sit amet egestas quam congue eu. Vestibulum eleifend ut lacus sit amet varius. Etiam tortor nisl, finibus at venenatis vel, consequat vitae leo. Duis dictum arcu quis nunc ultricies porta.
  507.  
  508. In id gravida mauris. In feugiat mi a pellentesque condimentum. Phasellus est erat, tincidunt vitae condimentum at, facilisis id dolor. Curabitur elementum urna et nibh pretium interdum. Integer quis molestie risus. Pellentesque non posuere est. Praesent et gravida eros. Morbi congue semper lorem at luctus. Nunc id scelerisque felis. Nulla mollis ullamcorper maximus. Sed vehicula at mi quis luctus. Aliquam finibus, enim ac viverra lacinia, turpis urna interdum leo, ut vulputate nibh magna a tellus. Donec ut enim vitae neque lacinia molestie.
  509.  
  510. Etiam mattis maximus nulla, eget aliquam libero egestas eget. Vivamus tempus mi quis velit posuere tincidunt. Phasellus nec nulla faucibus, elementum justo nec, suscipit augue. Curabitur vel felis neque. Donec egestas auctor odio eget luctus. Vestibulum condimentum vehicula ante varius eleifend. Integer nulla risus, tincidunt nec elit vitae, eleifend aliquet erat. Maecenas vehicula orci erat, non eleifend mauris tempor non. Sed auctor varius magna, sed iaculis justo varius id. Duis non accumsan mi, eu fermentum turpis. Suspendisse potenti. Ut consequat consequat porttitor. Pellentesque posuere justo justo. Mauris molestie aliquam odio, sit amet aliquam massa luctus at.
  511.  
  512. Pellentesque eget finibus purus. Nam vestibulum dolor vitae ante hendrerit egestas. Quisque luctus enim neque, ac accumsan quam laoreet ut. Vivamus quis nisl venenatis, porta nisi sed, fringilla nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nunc nunc. Pellentesque mi purus, ullamcorper non condimentum id, pulvinar in elit. Phasellus sit amet sollicitudin dolor, at interdum mauris. Nulla tempor hendrerit sagittis. Etiam sit amet tempus libero. Nunc rhoncus, sem ac euismod consequat, ex elit commodo ante, sit amet porttitor arcu orci ac magna. Aenean ornare libero quis turpis aliquet tristique. Integer interdum arcu dui, a facilisis purus varius non. Sed pretium felis ac mi tempor porttitor. In vel lacus iaculis enim congue pulvinar.
  513. </section>
  514.  
  515.  
  516. <div id="pizza">
  517. <div class="content">
  518. <h1>Roleplay Business</h1>
  519. <div class="text">
  520. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 78%; width: 100%;">
  521. <h2>Starters I owe you,</h2>
  522. <b>name here</b> -<em>starter</em> - <i>00/00/00</i> - [0% done] <br>
  523. <b>name here</b> -<em>starter</em> - <i>00/00/00</i> - [0% done] <br>
  524. <b>name here</b> -<em>starter</em> - <i>00/00/00</i> - [0% done] <br>
  525. <b>name here</b> -<em>starter</em> - <i>00/00/00</i> - [0% done] <br>
  526.  
  527. <h2>Replies I owe you,</h2>
  528.  
  529. <b>name here</b> -<em>reply</em> - <i>00/00/00</i> - [0% done] <br>
  530. <b>name here</b> -<em>reply</em> - <i>00/00/00</i> - [0% done] <br>
  531. <b>name here</b> -<em>reply</em> - <i>00/00/00</i> - [0% done] <br>
  532. <b>name here</b> -<em>reply</em> - <i>00/00/00</i> - [0% done] <br>
  533.  
  534. <h2>You Owe Me</h2>
  535.  
  536. <b>name here</b> -<em>starter</em> - <i>00/00/00</i> - [0% done] <br>
  537. <b>name here</b> -<em>starter</em> - <i>00/00/00</i> - [0% done] <br>
  538. <b>name here</b> -<em>starter</em> - <i>00/00/00</i> - [0% done] <br>
  539. <b>name here</b> -<em>starter</em> - <i>00/00/00</i> - [0% done] <br>
  540. </section>
  541. </div>
  542. </div>
  543. </div>
  544.  
  545.  
  546.  
  547. //-------------------PASTE IN INTEREST SECTION---------------------//
  548.  
  549. </table>
  550. </td>
  551. </tr>
  552. </table>
  553. <br />
  554. <table cellspacing="0" cellpadding="0">
  555. <td>
  556. <table cellspacing="0" cellpadding="0">
  557. <td valign="top" align="center">
  558.  
  559. <img src="http://www.placehold.it/385x148/F5BCF1" style="width: 100%; height: 100%;">
  560.  
  561. </div>
  562.  
  563.  
  564. </table>
  565. </td>
  566. </tr>
  567. </table>
  568. <br />
  569. <table cellspacing="0" cellpadding="0">
  570. <td>
  571. <table cellspacing="0" cellpadding="0">
  572. <td valign="top" align="center">
  573.  
  574. <h1>Basic Information</h1>
  575.  
  576. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 86%; margin-top: -2%;">
  577. <strong>Full Name</strong> (Self explanatory)<br>
  578. <strong>Pronunciation</strong> (Self explanatory)<br>
  579. <strong>Nickname/Alias</strong> (Does your character have a pet name, fake identity, or any other thing they like to go by? Put it here.)<br>
  580. <strong>Meaning</strong> ([Ex: Emily means "admiring" and William means "protector"] If you aren't sure your character's name has a meaning look it up, I'm sure you'll find something. If it's a fantasy name you made yourself, give it a meaning.)<br>
  581. <strong>Origin</strong> (How did you come up with your character's name?)<br>
  582. <strong>Title</strong> (Do have a title along with their name? [Ex: Sir, Captain, Ms.])<br>
  583. <strong>Pet Name</strong> (What do other people call your character? [kid, squirt, babe, ect] May be insulting, endearing, or a combination of both. May have more than one, if other characters call them different things.<br>
  584. <strong>ID Number</strong> (A number that may also be used to identify your character, such as tournaments and prison settings)<br>
  585. <strong>Signature</strong> (What is their handwriting like?)<br>
  586. <strong>Gender</strong> (Self explanatory)<br>
  587. <strong>Gender Role</strong> (Does your character generally act more feminine or masculine?)<br>
  588. <strong>Orientation</strong> (Ex: Straight, Bisexual, Homosexual)<br>
  589. <strong>Real Age</strong> (How old your character is in years)<br>
  590. <strong>Age Appearance</strong> (How old does your character look? This is mostly for immortal creatures such as deities, but can be used with anybody. [if someone looks older or younger than their age)<br>
  591. <strong>Birthday</strong> (Self explanatory)<br>
  592. <strong>Deathday</strong> (May not have one yet)<br>
  593. <strong>Birthplace</strong> (Where was your character born?)<br>
  594. <strong>Astrological Sign</strong> (Western)<br>
  595. <strong>Zodiac Sign</strong> (Eastern)<br>
  596. <strong>Species</strong> (Human, animal, or a fantasy race)<br>
  597. <strong>Ethnicity</strong> (Self Explanatory)<br>
  598. <strong>Blood Type</strong> (Self explanatory)<br>
  599. <strong>Preferred Hand</strong> (Right handed, left handed, or ambidextrous?)<br>
  600. <strong>Facial Type</strong> (Ex: Oval, heart, square, round, )<br>
  601. <strong>Eye Color</strong> (Self explanatory)<br>
  602. <strong>Hair Color</strong> (Self Explanatory)<br>
  603. <strong>Hairstyle</strong> (Self explanatory)<br>
  604. <strong>Skin Tone</strong> (Self Explanatory)<br>
  605. <strong>Complexion</strong> (Self explanatory)<br>
  606. <strong>Makeup</strong> (If any)<br>
  607. <strong>Body Type</strong> (Endomorph, Ectomorph, Mesomorph, or somewhere in between?)<br>
  608. <strong>Build</strong> (Long legs, chubby cheeks, or muscular arms?)<br>
  609. <strong>Height</strong> (In inches)<br>
  610. <strong>Weight</strong> (In pounds)<br>
  611. <strong>Cup Size</strong> (Self explanatory)<br>
  612. <strong>Facial Hair</strong> (If applicable)<br>
  613. <strong>Shoe Size</strong> (Self Explanatory)<br>
  614. <strong>Birthmarks/scars</strong> (Self explanatory)<br>
  615. <strong>Distinguishing Features</strong> (Something unique that stands out)<br>
  616. <strong>Health</strong> (How healthy is your character?)<br>
  617. <strong>Energy</strong> (How much energy does your character have on a daily basis?)<br>
  618. <strong>Memory</strong> (How well does your character remember things, and what do they remember?)<br>
  619. <strong>Senses</strong> (Are any of your character's senses better or worse than others?)<br>
  620. <strong>Allergies</strong> (Self Explanatory. May be optional.)<br>
  621. <strong>Handicaps</strong> ([Ex: A limp, deafness, missing an eye] May be optional.)<br>
  622. <strong>Medication</strong> (What meds do your character take, if any?)<br>
  623. <strong>Phobias</strong> (Things that simply terrify your character. May be trivial or debilitating. Try to have at least one.)<br>
  624. <strong>Addictions</strong> (Drugs, alcohol, gambling, or bad teen romance)<br>
  625. <strong>Mental Disorders</strong> ([Ex: Depression, Bipolar Disorder, Paranoia.] May be optional.)<br>
  626. </section>
  627.  
  628.  
  629.  
  630. </table>
  631. </td>
  632. </tr>
  633. </table>
  634. <br />
  635. <table cellspacing="0" cellpadding="0">
  636. <td>
  637. <table cellspacing="0" cellpadding="0">
  638. <td valign="top" align="center">
  639.  
  640. <img src="http://www.placehold.it/385x148/F5BCF1" style="width: 100%; height: 100%;">
  641.  
  642. </div>
  643.  
  644.  
  645. </table>
  646. </td>
  647. </tr>
  648. </table>
  649. <br />
  650. <table cellspacing="0" cellpadding="0">
  651. <td>
  652. <table cellspacing="0" cellpadding="0">
  653. <td valign="top" align="center">
  654.  
  655. <h1>Connections</h1>
  656.  
  657. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 77%; margin-top: -8%; width: 99%; margin-top: 0.03%;">
  658. <a href="" class="conn">Connection Here</a>
  659.  
  660. <a href="" class="conn">Connection Here</a>
  661.  
  662. <a href="" class="conn">Connection Here</a>
  663.  
  664. <a href="" class="conn">Connection Here</a>
  665.  
  666. <a href="" class="conn">Connection Here</a>
  667.  
  668. <a href="" class="conn">Connection Here</a>
  669.  
  670. <a href="" class="conn">Connection Here</a>
  671.  
  672. <a href="" class="conn">Connection Here</a>
  673.  
  674. <a href="" class="conn">Connection Here</a>
  675.  
  676. <a href="" class="conn">Connection Here</a>
  677.  
  678. <a href="" class="conn">Connection Here</a>
  679.  
  680. <a href="" class="conn">Connection Here</a>
  681. </section>
  682.  
  683.  
  684. <div class="tunes"><img src="https://i.imgur.com/hF55ahy.gif">
  685.  
  686. <div style="position:absolute; top:25px; left:-18px;">
  687. <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&shuffle=1&f0=MUSICURLGOESHERE&t0=NAMEOFSONG&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
  688. </div></div>
  689.  
  690.  
  691. </table>
  692. </td>
  693. </tr>
  694. </table>
  695. <br />
  696. <table cellspacing="0" cellpadding="0">
  697. <td>
  698. <table cellspacing="0" cellpadding="0">
  699. <td valign="top" align="center">
  700.  
  701. <h1>Main Connection Name</h1>
  702.  
  703. <img src="http://www.placehold.it/227x160/F5BCF1" style="margin-top: -1%; float: right; width: 58.88%; height: 80%;">
  704.  
  705. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 86%; width: 40%; margin-top: -2%;">
  706. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies odio augue, id scelerisque augue molestie et. Curabitur eget consequat justo, id vehicula justo. Nam nec hendrerit erat. Phasellus congue scelerisque augue, id maximus est aliquet at. Ut mattis tortor quis nunc fermentum vulputate nec accumsan nisl. Donec condimentum justo id risus semper rutrum. In interdum felis vitae lectus egestas, eu iaculis justo semper. Etiam at tellus sed massa sagittis accumsan in sed nisl. Cras vel sagittis metus. Nunc gravida ac massa at auctor. Aenean risus felis, tincidunt quis mi ut, aliquet rhoncus risus. Vivamus ultrices dolor quis volutpat fermentum. Aliquam fermentum mattis libero a egestas.
  707.  
  708. Nulla facilisi. Nunc id iaculis neque. Suspendisse eros lacus, suscipit id felis quis, malesuada posuere lorem. Duis aliquet risus sapien, sit amet egestas quam congue eu. Vestibulum eleifend ut lacus sit amet varius. Etiam tortor nisl, finibus at venenatis vel, consequat vitae leo. Duis dictum arcu quis nunc ultricies porta.
  709.  
  710. In id gravida mauris. In feugiat mi a pellentesque condimentum. Phasellus est erat, tincidunt vitae condimentum at, facilisis id dolor. Curabitur elementum urna et nibh pretium interdum. Integer quis molestie risus. Pellentesque non posuere est. Praesent et gravida eros. Morbi congue semper lorem at luctus. Nunc id scelerisque felis. Nulla mollis ullamcorper maximus. Sed vehicula at mi quis luctus. Aliquam finibus, enim ac viverra lacinia, turpis urna interdum leo, ut vulputate nibh magna a tellus. Donec ut enim vitae neque lacinia molestie.
  711.  
  712. Etiam mattis maximus nulla, eget aliquam libero egestas eget. Vivamus tempus mi quis velit posuere tincidunt. Phasellus nec nulla faucibus, elementum justo nec, suscipit augue. Curabitur vel felis neque. Donec egestas auctor odio eget luctus. Vestibulum condimentum vehicula ante varius eleifend. Integer nulla risus, tincidunt nec elit vitae, eleifend aliquet erat. Maecenas vehicula orci erat, non eleifend mauris tempor non. Sed auctor varius magna, sed iaculis justo varius id. Duis non accumsan mi, eu fermentum turpis. Suspendisse potenti. Ut consequat consequat porttitor. Pellentesque posuere justo justo. Mauris molestie aliquam odio, sit amet aliquam massa luctus at.
  713.  
  714. Pellentesque eget finibus purus. Nam vestibulum dolor vitae ante hendrerit egestas. Quisque luctus enim neque, ac accumsan quam laoreet ut. Vivamus quis nisl venenatis, porta nisi sed, fringilla nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nunc nunc. Pellentesque mi purus, ullamcorper non condimentum id, pulvinar in elit. Phasellus sit amet sollicitudin dolor, at interdum mauris. Nulla tempor hendrerit sagittis. Etiam sit amet tempus libero. Nunc rhoncus, sem ac euismod consequat, ex elit commodo ante, sit amet porttitor arcu orci ac magna. Aenean ornare libero quis turpis aliquet tristique. Integer interdum arcu dui, a facilisis purus varius non. Sed pretium felis ac mi tempor porttitor. In vel lacus iaculis enim congue pulvinar.
  715. </section>
  716.  
  717.  
  718. </table>
  719. </td>
  720. </tr>
  721. </table>
  722. <br />
  723. <table cellspacing="0" cellpadding="0">
  724. <td>
  725. <table cellspacing="0" cellpadding="0">
  726. <td valign="top" align="center">
  727.  
  728. <h1>Main Connection Name</h1>
  729.  
  730. <img src="http://www.placehold.it/227x160/F5BCF1" style="margin-top: -1%; float: right; width: 58.88%; height: 85%;">
  731.  
  732. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 86%; width: 40%; margin-top: -2%;">
  733. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies odio augue, id scelerisque augue molestie et. Curabitur eget consequat justo, id vehicula justo. Nam nec hendrerit erat. Phasellus congue scelerisque augue, id maximus est aliquet at. Ut mattis tortor quis nunc fermentum vulputate nec accumsan nisl. Donec condimentum justo id risus semper rutrum. In interdum felis vitae lectus egestas, eu iaculis justo semper. Etiam at tellus sed massa sagittis accumsan in sed nisl. Cras vel sagittis metus. Nunc gravida ac massa at auctor. Aenean risus felis, tincidunt quis mi ut, aliquet rhoncus risus. Vivamus ultrices dolor quis volutpat fermentum. Aliquam fermentum mattis libero a egestas.
  734.  
  735. Nulla facilisi. Nunc id iaculis neque. Suspendisse eros lacus, suscipit id felis quis, malesuada posuere lorem. Duis aliquet risus sapien, sit amet egestas quam congue eu. Vestibulum eleifend ut lacus sit amet varius. Etiam tortor nisl, finibus at venenatis vel, consequat vitae leo. Duis dictum arcu quis nunc ultricies porta.
  736.  
  737. In id gravida mauris. In feugiat mi a pellentesque condimentum. Phasellus est erat, tincidunt vitae condimentum at, facilisis id dolor. Curabitur elementum urna et nibh pretium interdum. Integer quis molestie risus. Pellentesque non posuere est. Praesent et gravida eros. Morbi congue semper lorem at luctus. Nunc id scelerisque felis. Nulla mollis ullamcorper maximus. Sed vehicula at mi quis luctus. Aliquam finibus, enim ac viverra lacinia, turpis urna interdum leo, ut vulputate nibh magna a tellus. Donec ut enim vitae neque lacinia molestie.
  738.  
  739. Etiam mattis maximus nulla, eget aliquam libero egestas eget. Vivamus tempus mi quis velit posuere tincidunt. Phasellus nec nulla faucibus, elementum justo nec, suscipit augue. Curabitur vel felis neque. Donec egestas auctor odio eget luctus. Vestibulum condimentum vehicula ante varius eleifend. Integer nulla risus, tincidunt nec elit vitae, eleifend aliquet erat. Maecenas vehicula orci erat, non eleifend mauris tempor non. Sed auctor varius magna, sed iaculis justo varius id. Duis non accumsan mi, eu fermentum turpis. Suspendisse potenti. Ut consequat consequat porttitor. Pellentesque posuere justo justo. Mauris molestie aliquam odio, sit amet aliquam massa luctus at.
  740.  
  741. Pellentesque eget finibus purus. Nam vestibulum dolor vitae ante hendrerit egestas. Quisque luctus enim neque, ac accumsan quam laoreet ut. Vivamus quis nisl venenatis, porta nisi sed, fringilla nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nec nunc nunc. Pellentesque mi purus, ullamcorper non condimentum id, pulvinar in elit. Phasellus sit amet sollicitudin dolor, at interdum mauris. Nulla tempor hendrerit sagittis. Etiam sit amet tempus libero. Nunc rhoncus, sem ac euismod consequat, ex elit commodo ante, sit amet porttitor arcu orci ac magna. Aenean ornare libero quis turpis aliquet tristique. Integer interdum arcu dui, a facilisis purus varius non. Sed pretium felis ac mi tempor porttitor. In vel lacus iaculis enim congue pulvinar.
  742. </section>
  743.  
  744.  
  745. <div id="bar">
  746. <div class="content">
  747. <h1 style="margin-top: -0.45%;">Fly Away With Me,</h1>
  748. <div class="text">
  749.  
  750. <img src="http://www.placehold.it/227x160/F5BCF1" style="margin-top: -1%; float: right; width: 58.88%; height: 85%;">
  751.  
  752. <section style="position: absolute; overflow: auto; overflow-x:hidden; text-align: justify; font-size: 1vh; height: 83%; width: 40%; margin-top: -1%;">
  753. <strong>Status</strong> ---<br>
  754. <strong>Whom</strong> <a href="/">Name</a><br>
  755. <strong>Dated</strong> 00/00/0000<br>
  756. <strong>Engaged</strong> 00/00/0000<br>
  757. <strong>Married</strong> 00/00/0000<br><br>
  758.  
  759. <strong>Comments</strong> Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here. Your personal comments about your significant other goes here.
  760. </section>
  761. </div>
  762. </div>
  763. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement