API tools faq
paste
Advertisement
poisonthangs_x

Clary Fray Div Themed Layout

poisonthangs_x
Jan 23rd, 2018
122
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.70 KB | None | 0 0
raw download clone embed print report
  1. IMPORTANT - Do not remove any credit. Comment if you use this.
  2. This was made by Ivy at Mad love resources. Do not claim as your
  3. own.
  4.  
  5. -Ivy
  6.  
  7.  
  8.  
  9.  
  10.  
  11. [PASTE THIS IN ABOUT ME SECTION]
  12.  
  13.  
  14.  
  15. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16.  
  17. <style>/* DO NOT REMOVE THE HTML BODY CREDIT * / </style>
  18.  
  19. <html body onContextMenu="alert('MAD LOVE RESOURCES. Do not remove any credit. Do not steal anything, do not claim as your own. All rights reserved poison ivy ');return false;">
  20.  
  21. <style>
  22. @import url('https://fonts.googleapis.com/css?family=Supermercado+One');
  23. </style>
  24. <style>
  25. @import url('https://fonts.googleapis.com/css?family=Acme');
  26. </style>
  27. <style>
  28. @import url('https://fonts.googleapis.com/css?family=Great+Vibes');
  29. </style>
  30. <style>
  31. @import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');
  32. </style>
  33. <style>
  34. @import url('https://fonts.googleapis.com/css?family=Great+Vibes');
  35. </style>
  36.  
  37. <style type="text/css">
  38. body
  39. {
  40. background-color:#dddfeb;
  41. background-attachment:fixed;
  42. background-repeat: repeat;
  43. background-image:url('https://img00.deviantart.net/f25d/i/2015/250/0/3/clary_wallpaper_by_shadowhunterwitch-d98rhea.jpg');
  44. overflow-x:hidden;
  45. background-position: center;
  46. background-size: cover;
  47. height: 100vh;
  48. background-position: -70%;
  49. font-family: 'Supermercado One', cursive;
  50. font-family: 'Acme', sans-serif;
  51. font-family: 'Berkshire Swash', cursive;
  52. font-family: 'Great Vibes', cursive;
  53. }
  54.  
  55. .animated {
  56. animation-duration: 1s;
  57. animation-fill-mode: both;
  58. }
  59.  
  60. .animated.infinite {
  61. animation-iteration-count: infinite;
  62. }
  63.  
  64. .parallax {
  65.  
  66. background-image: url("https://i.ytimg.com/vi/aLEtDSrK7sk/maxresdefault.jpg");
  67.  
  68. height: 100vh;
  69. width: 100%;
  70. top: 100%;
  71. left: 0%;
  72.  
  73. background-attachment: fixed;
  74. background-position: center;
  75. background-repeat: no-repeat;
  76. background-size: cover;
  77. position: absolute;
  78. }
  79.  
  80.  
  81. .second {
  82.  
  83. background-image: url("http://getwallpapers.com/wallpaper/full/2/e/a/648711.jpg");
  84.  
  85. height: 100vh;
  86. width: 100%;
  87. top: 200%;
  88. left: 0%;
  89.  
  90. background-attachment: fixed;
  91. background-position: center;
  92. background-repeat: no-repeat;
  93. background-size: cover;
  94. position: absolute;
  95. }
  96.  
  97. @madloveresources {------->Div Styles<------}
  98.  
  99. .about
  100. {
  101. display: block;
  102. background-color: #566061;
  103. border: 0.22vh solid #695336;
  104. width: 37%;
  105. height: 25%;
  106. position: absolute;
  107. top: 10%;
  108. left: 40%;
  109. }
  110.  
  111.  
  112. .facts
  113. {
  114. display: block;
  115. background-color: #566061;
  116. border: 0.22vh solid #695336;
  117. width: 37%;
  118. height: 25%;
  119. position: absolute;
  120. top: 54.22%;
  121. left: 40%;
  122. }
  123.  
  124. .love
  125. {
  126. display: block;
  127. background-color: #566061;
  128. border: 0.22vh solid #695336;
  129. width: 39.77%;
  130. height: 35%;
  131. position: absolute;
  132. top: 130%;
  133. left: 10%;
  134. }
  135.  
  136.  
  137. .conns
  138. {
  139. display: block;
  140. background-color: #566061;
  141. border: 0.22vh solid #695336;
  142. width: 37%;
  143. height: 35%;
  144. position: absolute;
  145. top: 250%;
  146. left: 10%;
  147. }
  148.  
  149. .powers_abb
  150. {
  151. display: block;
  152. background-color: #566061;
  153. border: 0.22vh solid #695336;
  154. width: 30%;
  155. height: 35%;
  156. position: absolute;
  157. top: 130%;
  158. left: 50%;
  159. }
  160.  
  161.  
  162. .MLR {--->headings and styles<----}
  163.  
  164. h1 {display: block; background-color:#8A7867; font-size: 5vh; text-align: center; color:#F0DECC; border-bottom: 1vh solid #362514; border-top: 1vh solid #362514; font-family: 'Supermercado One', cursive; margin-top: -3.88%; font-weight: lighter;}
  165.  
  166. h2 {display: block; background-color:#695336; padding: 1%; text-align: center; font-weight: lighter; font-size: 1.88vh; color:#F2CC9B; font-family: 'Acme', sans-serif; margin-top: -0.33%;}
  167.  
  168. h3 {font-weight: lighter; color:#ffffff; font-size: 5vh; font-family: 'Great Vibes', cursive; line-height: 5vh;}
  169.  
  170. h4 {}
  171.  
  172. h5 {}
  173.  
  174.  
  175. i {}
  176. b {}
  177. u {}
  178. s {}
  179. strong {}
  180. tt {}
  181. em {}
  182. big {}
  183. small {}
  184.  
  185. blockquote {}
  186.  
  187. .poisonivy {----->Navigation Link Styles<-----}
  188.  
  189. nav a {display: block; background-color:#BDA2A2; padding: 1%; color:#F7D9C3!important; text-decoration: none!important; text-align: center; font-weight: lighter; float: left; margin-left: 0.40%; font-size: 2vh; border: 0.11vh dotted #CCF7FF; font-family: 'Supermercado One', cursive; -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  190. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  191. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  192. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);}
  193.  
  194. nav a:hover {border: 0px; background-color: none!important; color:#ffffff!important; text-transform: uppercase; -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  195. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  196. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  197. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);}
  198.  
  199.  
  200. .conns a {display: block; width: 100%; padding: 1%; text-align: center; background-color:#75685E; color:#E8D5B5!important; font-weight: lighter; font-size: 1.45vh; letter-spacing: -0.11vh; text-decoration: none!important; -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  201. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  202. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  203. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);}
  204.  
  205. .conns a:hover {background-color: none!important; font-size: 3vh; letter-spacing: 1vh; color:#A89677!important; border-bottom: 0.33vh solid #ffffff; -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  206. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  207. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  208. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);}
  209.  
  210.  
  211. @MLR /* text stuff */
  212. div, span.text, span.text p, table, td, tr {text-transform: none; text-decoration: none; font-style: normal; font-weight: normal; font-family: 'Patrick Hand SC', cursive; color: #ffffff; font-size: 1.60vh;}
  213.  
  214. /*Scrollbar Content*/
  215. ::-webkit-scrollbar
  216. {border-radius: 20px; width: 1px; height: 1px; background: #9D9E9E; }
  217. ::-webkit-scrollbar-thumb
  218. {background-color: #9D9E9E; width: 3px; height: 1px;}
  219.  
  220. .DO NOT COPY /*Personal hiding codes by Ivy*/
  221. .userAlbums { display:none; }
  222. .profileinfo {display:none;}
  223. .friendSpace { display:none; }
  224. .interestsAndDetails { display:none; }
  225. .userProfiledetail { display:none; }
  226. .friendsComments { display:none; }
  227. .latestBlogEntry { display:none; }
  228. .extendedNetwork { display:none; }
  229. .contactTable { display: none; }
  230. .userProfileURL { display:none; }
  231. .clearfix {display:none !important; position:absolute!important;}
  232. .blurbs td.text {display:none;}
  233. .blurbs td td .orangetext15 {display:none;}
  234. .lightbluetext8 {display:none;}
  235. .profileInfo tr tr td {visibility:hidden;}
  236. .profileInfo td.text {visibility:visible;}
  237. .clearfix {margin-top: -130px;}
  238. #footerWarpper div font {display:none;}
  239. #footerWarpper div div {display: none;}
  240. a.text, table div font a, table div div {visibility:hidden;}
  241. table, tr, td {background-color:transparent !important;}
  242. </style>
  243.  
  244.  
  245. <style>
  246.  
  247. @media only screen
  248. and (min-device-width: 375px)
  249. and (max-device-width: 667px)
  250. and (-webkit-min-device-pixel-ratio: 2) {
  251.  
  252. .clary {width: 70%;}
  253.  
  254. }
  255.  
  256.  
  257. </style>
  258.  
  259.  
  260. <style>
  261. { MUSIC P L A Y E R }
  262. .music {
  263. bottom:-28px;
  264. right:8px;
  265. width:24px;
  266. height:66px;
  267. position:fixed!important;
  268. -webkit-transition: all .3s linear;
  269. -moz-transition: all .3s linear;
  270. -o-transition: all .3s linear;}
  271.  
  272. .music:hover {
  273. bottom:8px; }
  274. </style>
  275.  
  276.  
  277. <style>
  278. @keyframes bounceIn {
  279. from, 20%, 40%, 60%, 80%, to {
  280. animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  281. }
  282.  
  283. 0% {
  284. opacity: 0;
  285. transform: scale3d(.3, .3, .3);
  286. }
  287.  
  288. 20% {
  289. transform: scale3d(1.1, 1.1, 1.1);
  290. }
  291.  
  292. 40% {
  293. transform: scale3d(.9, .9, .9);
  294. }
  295.  
  296. 60% {
  297. opacity: 1;
  298. transform: scale3d(1.03, 1.03, 1.03);
  299. }
  300.  
  301. 80% {
  302. transform: scale3d(.97, .97, .97);
  303. }
  304.  
  305. to {
  306. opacity: 1;
  307. transform: scale3d(1, 1, 1);
  308. }
  309. }
  310.  
  311. .bounceIn {
  312. animation-duration: .75s;
  313. animation-name: bounceIn;
  314. }
  315.  
  316. @keyframes fadeIn {
  317. from {
  318. opacity: 0;
  319. }
  320.  
  321. to {
  322. opacity: 1;
  323. }
  324. }
  325.  
  326. .fadeIn {
  327. animation-name: fadeIn;
  328. }
  329.  
  330.  
  331. .xpdonnax { KEEP CREDIT YOUTUBE DIV BY PRIMADONNA @ /hightimes }
  332. .video{
  333. padding:10px;
  334. bottom:10px;
  335. width:150px;
  336. left:10px;
  337. height:85px;
  338. z-index:100;
  339. position: fixed;
  340. background:#4A3E34;
  341. -webkit-transition: all 0.6s ease;
  342. -moz-transition: all 0.6s ease;
  343. transition: all 0.6s ease;}
  344.  
  345. .video:hover{
  346. width:525px;
  347. height:300px;}
  348.  
  349. </style>
  350.  
  351.  
  352.  
  353.  
  354. [PASTE IN WHO I'D LIKE TO MEET SECTION] section note: the order is important do not arrange.
  355.  
  356.  
  357. <!--------CLARY IMAGE--------->
  358.  
  359. <img class="clary" src="https://img00.deviantart.net/e4bf/i/2016/163/c/0/png___katherine_mcnamara_by_andie_mikaelson-da5z8zy.png" style="position: fixed; top: 10%; right: 2%; width: 30%; z-index: 2;">
  360.  
  361. <!--------QUOTE---------->
  362.  
  363. <h3 style="position: absolute; top: 54%; left: 1%; width: 30%;">
  364. “She wept for herself and the changes that had been wrought in her, because sometimes even change for the better felt like a little death.”
  365. </h1>
  366.  
  367. <!----------------NAVIGATION-------------->
  368.  
  369. <nav style="background-color:#914E33; border-bottom: 1vh solid #2E0F02; padding: 0.22%; position: fixed; top: 0%; left: 0%; display: block; width: 100%;">
  370.  
  371. <center style="margin-left: 26%;">
  372. <a href="">Home</a>
  373.  
  374. <a href="">Message</a>
  375.  
  376. <a href="">Comment</a>
  377.  
  378. <a href="">Guidelines</a>
  379.  
  380. <a href="">Gallery</a>
  381.  
  382. <a href="">Stream</a>
  383.  
  384. <a href="">Bulletins</a>
  385.  
  386. <a href="">Extra Link</a>
  387.  
  388. <a href="">Credit</a>
  389.  
  390. </center>
  391.  
  392. </nav>
  393.  
  394. <!---------RUNE IMAGE #1----------->
  395.  
  396. <img class="animated bounceIn" src="http://vignette1.wikia.nocookie.net/mortalinstruments/images/4/47/VF_Rune%2C_Vision.png/revision/latest?cb=20160119155216" style="position: absolute; top: 7%; left: 5%; widht: 17%; text-shadow: 0.55vh 0.44vh #000000; -webkit-transform: rotateX(-10deg) rotateY(36deg);
  397. transform: rotateX(-10deg) rotateY(36deg);
  398. -webkit-perspective: 317px;
  399. perspective: 317px;">
  400.  
  401. <!---------RUNE IMAGE #2----------->
  402.  
  403. <img class="animated bounceIn" src="https://vignette.wikia.nocookie.net/mortalinstruments/images/9/9c/VF_Rune%2C_Iratze_-_Heal.png/revision/latest?cb=20160205031100" style="position: absolute; top: 54%; left: 27%; widht: 17%; text-shadow: 0.55vh 0.44vh #000000; -webkit-transform: rotateX(-10deg) rotateY(36deg);
  404. transform: rotateX(-10deg) rotateY(36deg);
  405. -webkit-perspective: 317px;
  406. perspective: 317px;">
  407.  
  408. <!---------RUNE IMAGE #3----------->
  409.  
  410. <img class="animated bounceIn" src="https://vignette.wikia.nocookie.net/mortalinstruments/images/6/60/VF_Rune%2C_Voyance.png/revision/latest?cb=20160119155250" style="z-index:2; position: absolute; top: 77%; left: 2%; widht: 17%; text-shadow: 0.55vh 0.44vh #000000; -webkit-transform: rotateX(-10deg) rotateY(36deg);
  411. transform: rotateX(-10deg) rotateY(36deg);
  412. -webkit-perspective: 317px;
  413. perspective: 317px;">
  414.  
  415. <!---------PARALLAX BACKGROUND----------->
  416.  
  417. <div class="parallax">
  418.  
  419. <!---------NAME TITLE----------->
  420.  
  421. <h1>Clary Fairchild</h1>
  422.  
  423. <!---------LOVE INTEREST IMAGE----------->
  424.  
  425. <img src="https://data.whicdn.com/images/267903937/original.gif" style="position: absolute; margin-left: 50%; margin-top: -1.65%; width: 30%;">
  426. </div>
  427.  
  428. <!--------------LOVE BOX---------->
  429.  
  430. <div class="love">
  431.  
  432. <h2>Jace & Clary</h2>
  433.  
  434. <p style="overflow: auto; overflow-x: hidden; width: 100%; height: 88%; text-align: justify; color: #ffffff; font-weight: lighter; font-size: 1.44vh; margin-top: -2%;">
  435.  
  436. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor commodo tempus. Mauris consectetur maximus lacus, et consectetur dui rhoncus nec. Vivamus efficitur lacus commodo pellentesque ultricies. Suspendisse accumsan lacus ex, iaculis accumsan quam luctus quis. Phasellus posuere facilisis eros vitae sodales. Morbi interdum lobortis ex tristique porttitor. Praesent congue, magna eget molestie suscipit, tortor dui auctor velit, ac vehicula dolor mauris ac sem. Vivamus elit odio, condimentum eu accumsan sed, pulvinar eu neque. Fusce fermentum est dolor, ac venenatis orci dignissim at.
  437.  
  438. Vestibulum porttitor metus eu felis placerat, id gravida libero porttitor. Curabitur viverra id turpis non fermentum. Maecenas consectetur varius ligula sit amet commodo. Morbi blandit libero in sodales tristique. Cras euismod fermentum felis, sit amet placerat ligula tincidunt non. Cras pretium, est quis accumsan condimentum, lectus nisl vehicula dui, id scelerisque risus mi et turpis. Maecenas mollis ultrices elit a commodo. Pellentesque sit amet interdum libero, eget egestas nisl. Donec elementum malesuada metus, sed imperdiet felis volutpat nec. Fusce ac nunc ut ante viverra hendrerit. Vestibulum vehicula pretium dui eget luctus. Sed ullamcorper facilisis diam, eu vehicula magna ultrices sit amet.
  439.  
  440. Fusce laoreet quam velit, vel aliquet eros pharetra quis. Praesent molestie, magna in semper molestie, ipsum massa sagittis lorem, nec cursus metus sem vel purus. Morbi nunc est, congue at tincidunt id, iaculis vitae velit. Etiam varius nulla eget nulla commodo lobortis. Etiam tincidunt pharetra velit eu ultrices. Cras faucibus sapien at tellus viverra, eget porttitor libero tristique. Mauris quis justo magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce efficitur, nisi quis ornare lacinia, libero urna eleifend turpis, a tempor lorem sapien et tellus. Etiam tincidunt rutrum orci ac elementum. Nunc ullamcorper massa eget ante lacinia tempor. Sed id lorem at metus lacinia rhoncus eget ut ligula. Aenean euismod fermentum arcu et vestibulum. In quis imperdiet quam. Etiam ut erat elementum, pharetra augue id, laoreet orci.
  441.  
  442. Aenean lacinia condimentum felis. Sed ut urna finibus, viverra justo id, tincidunt ipsum. Integer in ultrices nulla. Phasellus lectus odio, mollis eu ligula non, imperdiet aliquam nunc. Vivamus non rutrum ante. Vivamus accumsan tempor purus vel blandit. Donec iaculis nec nisi eu facilisis. Proin orci nisl, mollis vehicula leo non, porttitor tincidunt massa. Nullam non libero pulvinar, eleifend eros eget, imperdiet nulla. Vestibulum in nunc sed sem congue imperdiet. Vivamus justo odio, malesuada ac aliquam et, tempor id nibh. Aenean et orci quam. Vestibulum ultrices elit ut quam finibus auctor.
  443.  
  444. </p>
  445.  
  446. </div>
  447.  
  448. <!----------------POWERS AND ABILITIES-------------->
  449.  
  450. <div class="powers_abb">
  451.  
  452. <h2>Powers and Abilities</h2>
  453.  
  454. <p style="overflow: auto; overflow-x: hidden; width: 100%; height: 88%; text-align: justify; color: #ffffff; font-weight: lighter; font-size: 1.44vh; margin-top: -2%;">
  455.  
  456. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor commodo tempus. Mauris consectetur maximus lacus, et consectetur dui rhoncus nec. Vivamus efficitur lacus commodo pellentesque ultricies. Suspendisse accumsan lacus ex, iaculis accumsan quam luctus quis. Phasellus posuere facilisis eros vitae sodales. Morbi interdum lobortis ex tristique porttitor. Praesent congue, magna eget molestie suscipit, tortor dui auctor velit, ac vehicula dolor mauris ac sem. Vivamus elit odio, condimentum eu accumsan sed, pulvinar eu neque. Fusce fermentum est dolor, ac venenatis orci dignissim at.
  457.  
  458. Vestibulum porttitor metus eu felis placerat, id gravida libero porttitor. Curabitur viverra id turpis non fermentum. Maecenas consectetur varius ligula sit amet commodo. Morbi blandit libero in sodales tristique. Cras euismod fermentum felis, sit amet placerat ligula tincidunt non. Cras pretium, est quis accumsan condimentum, lectus nisl vehicula dui, id scelerisque risus mi et turpis. Maecenas mollis ultrices elit a commodo. Pellentesque sit amet interdum libero, eget egestas nisl. Donec elementum malesuada metus, sed imperdiet felis volutpat nec. Fusce ac nunc ut ante viverra hendrerit. Vestibulum vehicula pretium dui eget luctus. Sed ullamcorper facilisis diam, eu vehicula magna ultrices sit amet.
  459.  
  460. Fusce laoreet quam velit, vel aliquet eros pharetra quis. Praesent molestie, magna in semper molestie, ipsum massa sagittis lorem, nec cursus metus sem vel purus. Morbi nunc est, congue at tincidunt id, iaculis vitae velit. Etiam varius nulla eget nulla commodo lobortis. Etiam tincidunt pharetra velit eu ultrices. Cras faucibus sapien at tellus viverra, eget porttitor libero tristique. Mauris quis justo magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce efficitur, nisi quis ornare lacinia, libero urna eleifend turpis, a tempor lorem sapien et tellus. Etiam tincidunt rutrum orci ac elementum. Nunc ullamcorper massa eget ante lacinia tempor. Sed id lorem at metus lacinia rhoncus eget ut ligula. Aenean euismod fermentum arcu et vestibulum. In quis imperdiet quam. Etiam ut erat elementum, pharetra augue id, laoreet orci.
  461.  
  462. Aenean lacinia condimentum felis. Sed ut urna finibus, viverra justo id, tincidunt ipsum. Integer in ultrices nulla. Phasellus lectus odio, mollis eu ligula non, imperdiet aliquam nunc. Vivamus non rutrum ante. Vivamus accumsan tempor purus vel blandit. Donec iaculis nec nisi eu facilisis. Proin orci nisl, mollis vehicula leo non, porttitor tincidunt massa. Nullam non libero pulvinar, eleifend eros eget, imperdiet nulla. Vestibulum in nunc sed sem congue imperdiet. Vivamus justo odio, malesuada ac aliquam et, tempor id nibh. Aenean et orci quam. Vestibulum ultrices elit ut quam finibus auctor.
  463.  
  464. </p>
  465.  
  466. </div>
  467.  
  468. </div>
  469.  
  470. <!--------------PARALLAX BACKGROUND #2----------->
  471.  
  472. <div class="second">
  473.  
  474. <!----------------CHARACTER TITLE----------->
  475. <h1>Display Name Here</h1>
  476.  
  477. <!---------------------IMAGE NEXT TO CONNECTIONS---------------->
  478. <img src="http://pa1.narvii.com/6388/787586aa2e973366c27311648a3fbe1d12ef0e3d_hq.gif" style="position: absolute; margin-left: 47%; margin-top: 23.65%; width: 35.77%;">
  479.  
  480. </div>
  481.  
  482. <!---------CONNECTION LINKS----------->
  483.  
  484.  
  485. <div class="conns">
  486.  
  487. <h2>Friends | Family</h2>
  488.  
  489. <p style="overflow: auto; overflow-x: hidden; width: 100%; height: 88%; text-align: justify; color: #ffffff; font-weight: lighter; font-size: 1.44vh; margin-top: -2%;">
  490.  
  491. <a href="">Connection Name</a>
  492. <a href="">Connection Name</a>
  493. <a href="">Connection Name</a>
  494. <a href="">Connection Name</a>
  495. <a href="">Connection Name</a>
  496. <a href="">Connection Name</a>
  497. <a href="">Connection Name</a>
  498. <a href="">Connection Name</a>
  499. <a href="">Connection Name</a>
  500. <a href="">Connection Name</a>
  501. <a href="">Connection Name</a>
  502. <a href="">Connection Name</a>
  503. <a href="">Connection Name</a>
  504. <a href="">Connection Name</a>
  505. <a href="">Connection Name</a>
  506. <a href="">Connection Name</a>
  507. <a href="">Connection Name</a>
  508. <a href="">Connection Name</a>
  509. <a href="">Connection Name</a>
  510. <a href="">Connection Name</a>
  511.  
  512. </p>
  513.  
  514. </div>
  515.  
  516. <!---------BIOGRAPHY----------->
  517.  
  518. <div class="about">
  519.  
  520. <h2> Biography Title </h2>
  521.  
  522. <p style="overflow: auto; overflow-x: hidden; width: 100%; height: 88%; text-align: justify; color: #ffffff; font-weight: lighter; font-size: 1.44vh; margin-top: -2%;">
  523.  
  524. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor commodo tempus. Mauris consectetur maximus lacus, et consectetur dui rhoncus nec. Vivamus efficitur lacus commodo pellentesque ultricies. Suspendisse accumsan lacus ex, iaculis accumsan quam luctus quis. Phasellus posuere facilisis eros vitae sodales. Morbi interdum lobortis ex tristique porttitor. Praesent congue, magna eget molestie suscipit, tortor dui auctor velit, ac vehicula dolor mauris ac sem. Vivamus elit odio, condimentum eu accumsan sed, pulvinar eu neque. Fusce fermentum est dolor, ac venenatis orci dignissim at.
  525.  
  526. Vestibulum porttitor metus eu felis placerat, id gravida libero porttitor. Curabitur viverra id turpis non fermentum. Maecenas consectetur varius ligula sit amet commodo. Morbi blandit libero in sodales tristique. Cras euismod fermentum felis, sit amet placerat ligula tincidunt non. Cras pretium, est quis accumsan condimentum, lectus nisl vehicula dui, id scelerisque risus mi et turpis. Maecenas mollis ultrices elit a commodo. Pellentesque sit amet interdum libero, eget egestas nisl. Donec elementum malesuada metus, sed imperdiet felis volutpat nec. Fusce ac nunc ut ante viverra hendrerit. Vestibulum vehicula pretium dui eget luctus. Sed ullamcorper facilisis diam, eu vehicula magna ultrices sit amet.
  527.  
  528. Fusce laoreet quam velit, vel aliquet eros pharetra quis. Praesent molestie, magna in semper molestie, ipsum massa sagittis lorem, nec cursus metus sem vel purus. Morbi nunc est, congue at tincidunt id, iaculis vitae velit. Etiam varius nulla eget nulla commodo lobortis. Etiam tincidunt pharetra velit eu ultrices. Cras faucibus sapien at tellus viverra, eget porttitor libero tristique. Mauris quis justo magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce efficitur, nisi quis ornare lacinia, libero urna eleifend turpis, a tempor lorem sapien et tellus. Etiam tincidunt rutrum orci ac elementum. Nunc ullamcorper massa eget ante lacinia tempor. Sed id lorem at metus lacinia rhoncus eget ut ligula. Aenean euismod fermentum arcu et vestibulum. In quis imperdiet quam. Etiam ut erat elementum, pharetra augue id, laoreet orci.
  529.  
  530. Aenean lacinia condimentum felis. Sed ut urna finibus, viverra justo id, tincidunt ipsum. Integer in ultrices nulla. Phasellus lectus odio, mollis eu ligula non, imperdiet aliquam nunc. Vivamus non rutrum ante. Vivamus accumsan tempor purus vel blandit. Donec iaculis nec nisi eu facilisis. Proin orci nisl, mollis vehicula leo non, porttitor tincidunt massa. Nullam non libero pulvinar, eleifend eros eget, imperdiet nulla. Vestibulum in nunc sed sem congue imperdiet. Vivamus justo odio, malesuada ac aliquam et, tempor id nibh. Aenean et orci quam. Vestibulum ultrices elit ut quam finibus auctor.
  531.  
  532. </p>
  533.  
  534. </div>
  535.  
  536. <!---------LEFT IMAGE OF BIO----------->
  537.  
  538. <img src="http://images6.fanpop.com/image/photos/39100000/Clary-shadowhunters-tv-show-39116247-245-135.gif" style="position: absolute; top: 35.45%; left: 40%; width: 20%; height: 18.77%;">
  539.  
  540. <!---------RIGHT IMAGE OF BIO----------->
  541.  
  542. <img src="https://media.tenor.com/images/56e7d5f969f10d081f3e9d36630a5edd/tenor.gif" style="position: absolute; top: 35.45%; left: 60%; width: 17%;">
  543.  
  544. <!---------BASIC FACTS----------->
  545.  
  546. <div class="facts">
  547.  
  548. <h2> Basic Information </h2>
  549.  
  550. <p style="float: left; overflow: auto; overflow-x: hidden; width: 51%; height: 86%; text-align: justify; color: #ffffff; font-weight: lighter; font-size: 1.44vh; margin-top: -2%;">
  551.  
  552. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor commodo tempus. Mauris consectetur maximus lacus, et consectetur dui rhoncus nec. Vivamus efficitur lacus commodo pellentesque ultricies. Suspendisse accumsan lacus ex, iaculis accumsan quam luctus quis. Phasellus posuere facilisis eros vitae sodales. Morbi interdum lobortis ex tristique porttitor. Praesent congue, magna eget molestie suscipit, tortor dui auctor velit, ac vehicula dolor mauris ac sem. Vivamus elit odio, condimentum eu accumsan sed, pulvinar eu neque. Fusce fermentum est dolor, ac venenatis orci dignissim at.
  553.  
  554. Vestibulum porttitor metus eu felis placerat, id gravida libero porttitor. Curabitur viverra id turpis non fermentum. Maecenas consectetur varius ligula sit amet commodo. Morbi blandit libero in sodales tristique. Cras euismod fermentum felis, sit amet placerat ligula tincidunt non. Cras pretium, est quis accumsan condimentum, lectus nisl vehicula dui, id scelerisque risus mi et turpis. Maecenas mollis ultrices elit a commodo. Pellentesque sit amet interdum libero, eget egestas nisl. Donec elementum malesuada metus, sed imperdiet felis volutpat nec. Fusce ac nunc ut ante viverra hendrerit. Vestibulum vehicula pretium dui eget luctus. Sed ullamcorper facilisis diam, eu vehicula magna ultrices sit amet.
  555.  
  556. Fusce laoreet quam velit, vel aliquet eros pharetra quis. Praesent molestie, magna in semper molestie, ipsum massa sagittis lorem, nec cursus metus sem vel purus. Morbi nunc est, congue at tincidunt id, iaculis vitae velit. Etiam varius nulla eget nulla commodo lobortis. Etiam tincidunt pharetra velit eu ultrices. Cras faucibus sapien at tellus viverra, eget porttitor libero tristique. Mauris quis justo magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce efficitur, nisi quis ornare lacinia, libero urna eleifend turpis, a tempor lorem sapien et tellus. Etiam tincidunt rutrum orci ac elementum. Nunc ullamcorper massa eget ante lacinia tempor. Sed id lorem at metus lacinia rhoncus eget ut ligula. Aenean euismod fermentum arcu et vestibulum. In quis imperdiet quam. Etiam ut erat elementum, pharetra augue id, laoreet orci.
  557.  
  558. Aenean lacinia condimentum felis. Sed ut urna finibus, viverra justo id, tincidunt ipsum. Integer in ultrices nulla. Phasellus lectus odio, mollis eu ligula non, imperdiet aliquam nunc. Vivamus non rutrum ante. Vivamus accumsan tempor purus vel blandit. Donec iaculis nec nisi eu facilisis. Proin orci nisl, mollis vehicula leo non, porttitor tincidunt massa. Nullam non libero pulvinar, eleifend eros eget, imperdiet nulla. Vestibulum in nunc sed sem congue imperdiet. Vivamus justo odio, malesuada ac aliquam et, tempor id nibh. Aenean et orci quam. Vestibulum ultrices elit ut quam finibus auctor.
  559.  
  560. </p>
  561.  
  562. <!---------RIGHT IMAGE OF CONNECTIONS----------->
  563.  
  564. <img src="https://78.media.tumblr.com/e639c347e373eba89fdeb6e7b51757a8/tumblr_ou81tn5qCZ1vi2wlno6_r2_400.png" style="width: 49%; height: 85%; float: right; margin-top: -2%;">
  565.  
  566. </div>
  567.  
  568. <!---------RUNE IMAGE #4----------->
  569.  
  570. <img class="animated bounceIn" src="https://vignette.wikia.nocookie.net/mortalinstruments/images/0/04/VF_Rune%2C_Success.png/revision/latest?cb=20160205023823" style="z-index:2; position: absolute; top: 90%; right: 2%; widht: 17%; text-shadow: 0.55vh 0.44vh #000000; -webkit-transform: rotateX(-10deg) rotateY(36deg);
  571. transform: rotateX(-10deg) rotateY(36deg);
  572. -webkit-perspective: 317px;
  573. perspective: 317px;">
  574.  
  575. <!---------RUNE IMAGE #5----------->
  576.  
  577. <img class="animated bounceIn" src="http://vignette2.wikia.nocookie.net/mortalinstruments/images/6/69/VF_Rune%2C_True_North.png/revision/latest?cb=20160205023905" style="z-index:2; position: absolute; top: 70%; right: 30%; widht: 17%; text-shadow: 0.55vh 0.44vh #000000; -webkit-transform: rotateX(-10deg) rotateY(36deg);
  578. transform: rotateX(-10deg) rotateY(36deg);
  579. -webkit-perspective: 317px;
  580. perspective: 317px;">
  581.  
  582.  
  583. <!---------MUSIC----------->
  584.  
  585. <div class="music">
  586. <div style="height:33px; width:33px; margin-bottom:5px; text-align:center; font-size:33px; line-height:34px; color:#5a5a5a; background-color:#fafafa;">🔊</div>
  587. <audio autoplay controls loop>
  588. <source src="http://k003.kiwi6.com/hotlink/vdu61b4xy6/Clary_Fray_Glorious.mp3">
  589. </audio>
  590. </div>
  591. </div>
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!