API tools faq
paste
Advertisement
mebuckner

Custom Order - AngelicDominatrix - Layout

mebuckner
Nov 30th, 2020
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 31.61 KB | None | 0 0
raw download clone embed print report
  1. <!--about me-->
  2. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  3. <style type="text/css">
  4. @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
  5. @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap');
  6.  
  7. body {
  8. background-color:#000B13;
  9. background-repeat:no-repeat;
  10. background-attachment:fixed;
  11. margin: 0;
  12. overflow:auto;
  13. background-size:cover;
  14. }
  15.  
  16. table, tr, td, li, p, div, .profileInfo td.text {
  17.     font-size: 10px;
  18.     color: #717171;
  19.     font-family: 'Poppins', sans-serif;}
  20.  
  21.  
  22. .container {
  23.     width: 1021px;
  24.     height: 584px;
  25.     position: absolute;
  26.     text-align: center;
  27.     left: 0;
  28.     right: 0;
  29.     top: 0;
  30.     bottom: 0;
  31.     overflow: hidden;
  32.     margin: auto;
  33.     color: #fff;
  34.     font-family: 'Abel', sans-serif;
  35. }
  36.  
  37. #lifeStory{
  38. display:none;
  39. }
  40.  
  41. #lifeStory:target{
  42. display: inline-block;
  43. vertical-align: top;
  44. height: 428px;
  45. width: 486px;
  46. margin-left: 10px;
  47. background: #0d0d0d;
  48. }
  49.  
  50. #facts{
  51. display:none;
  52. }
  53.  
  54. #facts:target{
  55. display: inline-block;
  56. vertical-align: top;
  57. height: 428px;
  58. width: 486px;
  59. margin-left: 10px;
  60. background: #0d0d0d;
  61. }
  62.  
  63. .factHolder{
  64. overflow: auto;
  65. font-family: 'Playfair Display';
  66. font-size: 12px;
  67. text-align: justify;
  68. color: #fff;
  69. height: 139px;
  70. }
  71.  
  72. #connections{
  73. display:none;
  74. }
  75.  
  76. #connections:target{
  77. display: inline-block;
  78. vertical-align: top;
  79. height: 428px;
  80. width: 486px;
  81. margin-left: 10px;
  82. background: #0d0d0d;
  83. overflow:auto;
  84. font-family:Playfair Display;
  85. font-size:12px;
  86. text-align:justify;
  87. }
  88.  
  89. #love{
  90. display:none;
  91. }
  92.  
  93. #love:target{
  94. display: inline-block;
  95. vertical-align: top;
  96. height: 428px;
  97. width: 486px;
  98. margin-left: 10px;
  99. background: #0d0d0d;
  100. overflow:auto;
  101. font-family:Playfair Display;
  102. font-size:12px;
  103. text-align:justify;
  104. color:#fff;
  105. }
  106.  
  107.  
  108. #bioText{
  109. width: 193px;
  110. height: 128px;
  111. overflow: auto;
  112. padding: 20px;
  113. color: #fff;
  114. font-family: 'PLAYFAIR DISPLAY';
  115. font-size: 12px;
  116. text-align: justify;
  117. display: inline-block;
  118. vertical-align: top;
  119. margin-top: 10px;
  120.  
  121. }
  122.  
  123. a.navigationalLinks:link, a.navigationalLinks:visited {
  124.     /* background-color: #ffffff; */
  125.     color: #E5C059;
  126.     padding: 10px 30px;
  127.     text-align: center;
  128.     text-decoration: none;
  129.     display: inline-block;
  130.     margin-top: 9px;
  131.     font-family: 'Dancing Script', cursive;
  132.     font-weight: 100;
  133.     font-size: 35px;
  134.     /* text-transform: uppercase; */
  135.     /* width: 194px; */
  136.     letter-spacing: 2px;
  137.     margin-left: 5px;
  138.     margin-top: 15px;
  139. }
  140.  
  141. a.navigationalLinks:hover, a.navigationalLinks:active {
  142. color: #131313;
  143. }
  144.  
  145. h1{
  146. margin: 0;
  147. font-family: 'Playfair Display';
  148. font-weight: 100;
  149. text-align: center;
  150. background: #F6063F;
  151. padding-top: 10px;
  152. padding-bottom: 10px;
  153. margin-bottom: 10px;
  154. color: #fff;
  155. }
  156.  
  157. h2{
  158. font-family: 'Dancing Script', cursive;
  159. font-weight: 100;
  160. font-size: 37px;
  161. text-align: center;
  162. color: #fff;
  163. margin: 0;
  164. margin-bottom: 10px;
  165. }
  166.  
  167. a.credit:link, a.credit:visited {
  168.     background-color: #ffffff;
  169.     color: #2d0707;
  170.     padding: 5px 3px;
  171.     text-align: center;
  172.     text-decoration: none;
  173.     display: inline-block;
  174.     margin-top: 9px;
  175.     font-family: 'Playfair Display', serif;
  176.     font-weight: 100;
  177.     font-size: 11px;
  178.     text-transform: uppercase;
  179.     width: 78px;
  180.     letter-spacing: 2px;
  181.     margin-left: 5px;
  182.     margin-top: 15px;
  183. }
  184.  
  185. .creditHolder{
  186. position:fixed;
  187. bottom:15;
  188. left:15;
  189. }
  190.  
  191. a.credit:hover, a.credit:active {
  192. background-color: #131313;
  193. }
  194.  
  195. ::-webkit-scrollbar-thumb:vertical {height:12px; background:#0d0d0d; border-top:10px solid #fff; border-bottom:10px solid #fff;}
  196. ::-webkit-scrollbar-thumb:horizontal {background-color:#0d0d0d;}
  197. ::-webkit-scrollbar {width:5px; height:7px;}
  198.  
  199.  
  200. .contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12, .btext, .redtext, .redbtext {display:none;height:0px;!important;visibility:hidden} td td td td {border:0px;width:0px;text-align:left;} table, td, tr {padding:0px;width:;background-color:transparent} table table table {padding:1px;height:.01%;width:100%;} table table,table table table table,table,tr,td {height:0px;!important;border:0px;!important} a.text, table div font a, .navbar font, tr td font {visibility:hidden;display:none;height:0px;!important;} #footerWarpper{display: none;} table table table table,table table table table td.text, td.text td.text table{display:none;} td.text table table{display:inline;visibility:visible;} table td table tr td.text table{visibility:hidden;} table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;} table.footer {display: none;} div table a.navbar img {display:none;} div table.navigationBar {margin-bottom:-30px;} .profileInfo {display:none;} .profileInfo td {text-align:left;} .profileInfo a img {position:relative; margin-bottom:-1px; margin-bottom:-2px; width:125px; margin-right:-6px; margin-top:4px; _margin-top:3px; display:block;} .profileInfo td td, .nametext, .msOnlineNow img {display:none;} .profileInfo td td.text {display:table-cell; _display:inline;} .profileInfo .text {font-size:7px; line-height:8px; text-transform:uppercase; font-family:small fonts;} .msOnlineNow {font-family:small fonts; letter-spacing:0px; font-size:7px; line-height:8px; padding:2px; padding-left:0px; text-transform:uppercase; font-weight:normal; display:none; text-decoration:blink; letter-spacing:2px;} .userAlbums {display:none;} div td {display:none;} </span>
  201. </style>
  202.  
  203.  
  204.  
  205.  
  206.  
  207.  
  208.  
  209.  
  210.  
  211.  
  212. <!--like to meet-->
  213. <html>
  214. <body>
  215. <div class="creditHolder">
  216. <a class="credit" href="https://www.roleplayer.me/1631904">credit</a>
  217. </div>
  218.  
  219.  
  220. <div class="container">
  221. <a href="/home.php" class="navigationalLinks">Home</a>
  222. <a href="/send_message.php?member_id=1658649" class="navigationalLinks">Message</a>
  223. <a href="/albums.php?member_id=1658649" class="navigationalLinks">Photos</a>
  224. <a href="/status_stream.php?member_id=1658649" class="navigationalLinks">Stream</a>
  225. <a href="/view_bulletins.php?member_id=1658649" class="navigationalLinks">Bulletins</a>
  226. <a href="/view_blog.php?id=0000490819" class="navigationalLinks">Rules</a>
  227. <img src="https://i.imgur.com/bGDsO56.png">
  228.  
  229. <div id="facts">
  230. <h1>Basic Facts</h1>
  231. <div class="factHolder">
  232. <b>Full Name</b> here<br>
  233. <b>Pronunciation</b> here<br>
  234. <b>Nickname/Alias</b> here<br>
  235. <b>Gender</b> here<br>
  236. <b>Orientation</b> here<br>
  237. <b>Real Age</b> here<br>
  238. <b>Birthday</b> here<br>
  239. <b>Birthplace</b> here<br>
  240. <b>Astrological Sign</b> here<br>
  241. <b>Species</b> here<br>
  242. <b>Ethnicity</b> here<br>
  243. <b>Preferred Hand</b> here<br>
  244. <b>Eye Color</b> here<br>
  245. <b>Hair Color</b> here<br>
  246. <b>Hairstyle</b> here<br>
  247. <b>Skin Tone</b> here<br>
  248. <b>Makeup</b> here<br>
  249. <b>Build</b> here<br>
  250. <b>Height</b> here<br>
  251. <b>Weight</b> here<br>
  252. <b>Shoe Size</b> here<br>
  253. <b>Birthmarks/scars</b> here<br>
  254. <b>Distinguishing Features</b> here<br>
  255. <b>Health</b> here<br>
  256. <b>Allergies</b> here<br>
  257. </div>
  258. <h1>Powers and Abilities</h1>
  259. <div class="factHolder" style="margin-top:18px;">
  260. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  261. <br><br>
  262. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  263. </div>
  264. </div>
  265.  
  266.  
  267.  
  268. <div id="love">
  269. <h2>Love of My Life</h2>
  270. <b>Status</b> here <br>
  271. <b>Since</b> here <br>
  272. <b>To whom</b> here <br>
  273. <h1 style="margin-top:10px;">Words about my love</h1>
  274.  
  275. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  276.  
  277. <br><br>
  278.  
  279. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  280.  
  281. <br><br>
  282.  
  283. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  284. </div>
  285.  
  286. <div id="connections">
  287. <h2>Connections</h2>
  288.  
  289. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;">
  290. <img src="https://i.imgur.com/XxHBbHG.png">
  291. </div>
  292.  
  293. <div style="width: 328px; height: 150px;display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  294. <h1>Lilliana</h1>
  295. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  296. </div>
  297. <br>
  298.  
  299. <div style="width: 328px; height: 150px; display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  300. <h1>connection name</h1>
  301. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  302. </div>
  303.  
  304. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;"><img src="https://i.imgur.com/FC8zmic.png"></div>
  305.  
  306. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;">
  307. <img src="https://i.imgur.com/9KemkdZ.png">
  308. </div>
  309.  
  310. <div style="width: 328px; height: 150px;display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  311. <h1>Hecate</h1>
  312. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  313. </div>
  314.  
  315.  
  316. <div style="width: 328px; height: 150px; display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  317. <h1>connection name</h1>
  318. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  319. </div>
  320.  
  321. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;"><img src="https://i.imgur.com/GwHsBGA.png"></div>
  322.  
  323. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;">
  324. <img src="https://i.imgur.com/TvjSZwk.png">
  325. </div>
  326.  
  327. <div style="width: 328px; height: 150px;display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  328. <h1>Sabrina</h1>
  329. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  330. </div>
  331.  
  332.  
  333. <div style="width: 328px; height: 150px; display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  334. <h1>connection name</h1>
  335. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  336. </div>
  337.  
  338. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;"><img src="https://i.imgur.com/xpHRiXO.png"></div>
  339.  
  340. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;">
  341. <img src="https://i.imgur.com/O8pVXbQ.png">
  342. </div>
  343.  
  344. <div style="width: 328px; height: 150px;display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  345. <h1>connection name</h1>
  346. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  347. </div>
  348.  
  349.  
  350. <div style="width: 328px; height: 150px; display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  351. <h1>connection name</h1>
  352. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  353. </div>
  354.  
  355. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;"><img src="https://i.imgur.com/Jh5l6fb.png"></div>
  356.  
  357. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;">
  358. <img src="https://i.imgur.com/Wb43HEc.png">
  359. </div>
  360.  
  361. <div style="width: 328px; height: 150px;display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  362. <h1>connection name</h1>
  363. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  364. </div>
  365.  
  366.  
  367. <div style="width: 328px; height: 150px; display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  368. <h1>connection name</h1>
  369. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  370. </div>
  371.  
  372. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;"><img src="https://i.imgur.com/LbtDMgl.png"></div>
  373.  
  374.  
  375. <div style="width:150px; height:150px; background:#fff; display:inline-block; vertical-align:top;">
  376. <img src="https://i.imgur.com/LjJWeHF.png">
  377. </div>
  378.  
  379. <div style="width: 328px; height: 150px;display: inline-block; vertical-align: top; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; color: #fff; overflow: auto;">
  380. <h1>connection name</h1>
  381. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  382. </div>
  383.  
  384.  
  385.  
  386.  
  387.  
  388.  
  389. </div>
  390.  
  391.  
  392. <div id="lifeStory"><img src="https://i.imgur.com/CUz4YiY.png">
  393. <div id="bioText">
  394. <h1>Part One</h1>
  395. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  396. <br><br>
  397. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  398. <br><br>
  399. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  400. <br><br>
  401. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  402. </div>
  403.  
  404. <div id="bioText" style="margin-left:10px;">
  405. <h1>Part Two</h1>
  406. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  407. <br><br>
  408. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  409. <br><br>
  410. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  411. <br><br>
  412. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
  413. </div>
  414. </div>
  415. <br>
  416. <a href="#lifeStory" class="navigationalLinks">Life Story</a>
  417. <a href="#facts" class="navigationalLinks">Quick Facts</a>
  418. <a href="#connections" class="navigationalLinks">Connections</a>
  419. <a href="#love" class="navigationalLinks">Love of my Life</a>
  420. </div>
  421. </body>
  422. </html>
  423.  
  424.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!