API tools faq
paste
Advertisement
poisonthangs_x

Wonderland: Part One.

poisonthangs_x
Mar 6th, 2018
112
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.53 KB | None | 0 0
raw download clone embed print report
  1. WONDERLAND MINIMALIST LAYOUT
  2. ----------------------------------------------------------------------------------------
  3. Hello & Welcome to Our Collaboration Layouts.
  4. These layouts are special because they are made by the three of us: Poison Ivy, Harley Quinn and Joker.
  5. If you are using one of these layouts, please make sure to comment on our blog that you are!
  6. Do not remove credits and do not claim as your own.
  7. If you have any questions about these layouts do please ask, thank you.
  8.  
  9. coding is done by Ivy, Graphics are done by Harley and the coloring psd is done by Joker.
  10.  
  11. THIS IS THE COLOR PALLET THAT IS USED ON THIS LAYOUT: https://i.imgur.com/EJf1Xwb.jpg
  12.  
  13. DOWNLOAD LINK TO MATCHING PSD: link coming soon
  14.  
  15.  
  16.  
  17. Please paste the following codes in their right sections. Thank you and enjoy :)
  18.  
  19.  
  20.  
  21.  
  22.  
  23. //------*** PASTE IN ABOUT ME SECTION ***--------//
  24.  
  25. <style>/* DO NOT REMOVE THE HTML BODY CREDIT * / </style>
  26.  
  27. <html body onContextMenu="alert('MAD LOVE RESOURCES. Do not remove any credit. Do not steal anything, do not claim as your own. Coding done by Ivy, graphics made by Harley and coloring made by Joker. This is our collab layout, Enjoy! ');return false;">
  28.  
  29. <style>
  30. @import url('https://fonts.googleapis.com/css?family=Great+Vibes');
  31. </style>
  32. <style>
  33. @import url('https://fonts.googleapis.com/css?family=Anton');
  34. </style>
  35. <style>
  36. @import url('https://fonts.googleapis.com/css?family=Crimson+Text');
  37. </style>
  38. <style>
  39. @import url('https://fonts.googleapis.com/css?family=Fjalla+One');
  40. </style>
  41. <style>
  42. @import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');
  43. </style>
  44.  
  45.  
  46. <style type="text/css">
  47. body
  48. {
  49. background-color:#6f3d56;
  50. background-attachment:fixed;
  51. background-repeat: repeat;
  52. background-image:url('');
  53. overflow-x:hidden;
  54. background-position: center;
  55. background-size: contain;
  56. font-family: 'Great Vibes', cursive;
  57. }
  58.  
  59. span {font-size: 4.11vh; color:#c73d54; }
  60.  
  61. @madloveresources {------->Div Styles<------}
  62.  
  63. #biography
  64. {
  65. padding: 0.22%;
  66. display: block;
  67. width: 25%;
  68. height: 30%;
  69. position: fixed;
  70. top: 41.44%;
  71. left: 5%;
  72. background-color:#d1af70;
  73. border: 3px solid #d5374e;
  74. }
  75.  
  76. #facts
  77. {
  78. padding: 0.22%;
  79. display: block;
  80. width: 12.44%;
  81. height: 30%;
  82. position: fixed;
  83. top: 41.44%;
  84. left: 30.88%;
  85. background-color:#d1af70;
  86. border: 3px solid #d5374e;
  87. }
  88.  
  89. .credit {display: block; position: fixed; bottom: 0%; right: 0%; font-size: 1.10vh; text-transform: uppercase; color:#292d1c; letter-spacing: 0.11vh; text-align: right; font-weight: bolder;}
  90.  
  91. .credit a {text-decoration: none!important; color:#292d1c; letter-spacing: 0.11vh; text-align: right; font-weight: bolder; opacity: 0.6;}
  92. .credit a:hover {opacity: 1;}
  93.  
  94. .MLR {--->headings and styles<----}
  95.  
  96. h1 {display: block; background-color:#718a39; padding: 1%; font-size: 1.33vh; text-align: center; font-weight: lighter; text-transform: uppercase; letter-spacing: 1vh; color:#d1af70; z-index: -2;}
  97.  
  98. h2 {display: block; font-size: 5vh; text-align: left; color:#ffffff; font-family: 'Great Vibes', cursive; z-index:2;}
  99.  
  100. h3 {}
  101.  
  102. h4 {}
  103.  
  104. h5 {}
  105.  
  106.  
  107. i {color:#d5374e; font-weight: lighter; font-size: 2vh;}
  108. b {color:#256e67; font-weight: bolder; text-transform: uppercase; font-family: 'Anton', sans-serif; font-size: 2vh;}
  109. u {color:#ce3b4e; letter-spacing: 0.11vh; font-weight: light; font-size: 2vh;}
  110. s {color:#292d1c; font-weight: bolder; font-family: 'Crimson Text', serif; font-size: 2vh;}
  111. strong {font-size: 4.55vh; color:#9E116D; font-weight: bolder; text-shadow: 1px 1px 1px #000000; text-transform: uppercase; font-size: 1.11vh;}
  112. tt {color:#4f201a; font-weight: lighter; text-transform: lowercase; font-family: 'Cormorant Garamond', serif; font-size: 2vh;}
  113. em {color:#236e67; font-weight: lighter; text-transform: lowercase; font-family: 'Great Vibes', cursive; font-size: 4vh;}
  114. small {color:#292d1c; font-weight: lighter; font-size: 2vh;}
  115.  
  116. blockquote {}
  117. first {font-family: 'Great Vibes', cursive; font-size: 2.44vh; color:#4F163B;}
  118.  
  119. .poisonivy {----->Navigation Link Styles<-----}
  120.  
  121. nav a
  122. {
  123. display: block;
  124. border-radius: 360%;
  125. padding: 1%;
  126. background-color:#718a39;
  127. height: 37%;
  128. width: 25%;
  129. margin-top: 7%;
  130. -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  131. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  132. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  133. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  134. }
  135.  
  136. nav a:hover
  137. {
  138. background-color:#d1af70!important;
  139. -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  140. -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  141. -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  142. transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
  143. }
  144.  
  145. @MLR /* text stuff */
  146. 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;}
  147.  
  148. /*Scrollbar Content*/
  149. ::-webkit-scrollbar
  150. {border-radius: 20px; width: 1px; height: 1px; background: #9D9E9E; }
  151. ::-webkit-scrollbar-thumb
  152. {background-color: #9D9E9E; width: 3px; height: 1px;}
  153.  
  154.  
  155. /* Tooltip container */
  156. .tooltip {
  157. position: relative;
  158. display: block;
  159.  
  160.  
  161. }
  162.  
  163. /* Tooltip text */
  164. .tooltip .tooltiptext {
  165. visibility: hidden;
  166. width: 100px;
  167. background-color: #d1af70;
  168. color: #fff;
  169. text-align: center;
  170. margin-top: 4%;
  171. border-bottom-right-radius: 50%;
  172. border-top-left-radius: 30%;
  173. margin-left: 12%;
  174. position: absolute;
  175. z-index: 2;
  176. font-size: 1.22vh;
  177. padding: 2%;
  178. font-weight: lighter;
  179. }
  180.  
  181.  
  182. /* Show the tooltip text when you mouse over the tooltip container */
  183. .tooltip:hover .tooltiptext {
  184. visibility: visible;
  185. }
  186.  
  187.  
  188. .DO NOT COPY /*Personal hiding codes by Ivy*/
  189. .userAlbums { display:none; }
  190. .profileinfo {display:none;}
  191. .friendSpace { display:none; }
  192. .interestsAndDetails { display:none; }
  193. .userProfiledetail { display:none; }
  194. .friendsComments { display:none; }
  195. .latestBlogEntry { display:none; }
  196. .extendedNetwork { display:none; }
  197. .contactTable { display: none; }
  198. .userProfileURL { display:none; }
  199. .clearfix {display:none !important; position:absolute!important;}
  200. .blurbs td.text {display:none;}
  201. .blurbs td td .orangetext15 {display:none;}
  202. .lightbluetext8 {display:none;}
  203. .profileInfo tr tr td {visibility:hidden;}
  204. .profileInfo td.text {visibility:visible;}
  205. .clearfix {margin-top: -130px;}
  206. #footerWarpper div font {display:none;}
  207. #footerWarpper div div {display: none;}
  208. a.text, table div font a, table div div {visibility:hidden;}
  209. table, tr, td {background-color:transparent !important;}
  210. </style>
  211.  
  212.  
  213.  
  214. //------*** PASTE IN ABOUT WHO I'D LIKE TO MEET ***--------//
  215.  
  216. <nav style="position: fixed; top: 8%; left: 46%; display: block; width: 15%; height: 15%;">
  217.  
  218. <div class="tooltip">
  219. <a href=""><span class="tooltiptext">Leave</span>
  220. </a>
  221. </div>
  222.  
  223. <div class="tooltip">
  224. <a href=""><span class="tooltiptext">Message</span>
  225. </a>
  226. </div>
  227.  
  228. <div class="tooltip">
  229. <a href=""><span class="tooltiptext">Comment</span>
  230. </a>
  231. </div>
  232.  
  233. <div class="tooltip">
  234. <a href=""><span class="tooltiptext">Rulebook</span>
  235. </a>
  236. </div>
  237.  
  238. <div class="tooltip">
  239. <a href=""><span class="tooltiptext">Photogallary</span>
  240. </a>
  241. </div>
  242.  
  243. <div class="tooltip">
  244. <a href=""><span class="tooltiptext">Status Stream</span>
  245. </a>
  246. </div>
  247.  
  248. <div class="tooltip">
  249. <a href=""><span class="tooltiptext">Bulletins</span>
  250. </a>
  251. </div>
  252.  
  253. <div class="tooltip">
  254. <a href=""><span class="tooltiptext">View all My blogs</span>
  255. </a>
  256. </div>
  257.  
  258. </nav>
  259.  
  260. <h2 style="position: fixed; top: -2%; left: 5%;">Display Name <span>◉◉◉◉◉◉◉◉◉◉◉◉</span></h2>
  261.  
  262. <h1 style="position: fixed; top: 7%; left: 5%; width:37%;">
  263. Your Character Name can go here
  264. </h1>
  265.  
  266. <img src="http://www.placehold.it/510x180" width="510" height="180" style="position: fixed; top: 14%; left: 5%; width: 39%; object-fit: cover;">
  267.  
  268. <div ID="biography">
  269.  
  270. <h1 style="margin-top: -0.45%;">Biography</h1>
  271.  
  272. <p style="overflow: auto; overflow-x: hidden; text-align: justify; font-size: 1.44vh; color:#292d1c; height: 93%; display: block; font-weight: lighter; line-height: 88%; margin-top: -2.40%;">
  273.  
  274. <br>
  275.  
  276. <i>this is italics</i> <br><br>
  277. <b>this is bold</b> <br><br>
  278. <u>this is underline</u> <br><br>
  279. <s>this is strikethrough</s> <br><br>
  280. <strong>this is strong</strong> <br><br>
  281. <tt>this is teletype</tt> <br> <br>
  282. <em>this is empathize</em> <br>
  283.  
  284. <br>
  285.  
  286. <first>L</first>orem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna ex, imperdiet non consectetur ultrices, pellentesque vitae magna. Aliquam erat volutpat. Cras ornare maximus imperdiet. Aliquam convallis fringilla nibh, non laoreet velit mattis vitae. Aenean euismod laoreet tempus. Aliquam tincidunt, tellus eu rhoncus porttitor, justo arcu consectetur augue, vitae tempor mi arcu sed nisi. Maecenas tempor ligula lectus, quis sodales eros dictum in.
  287.  
  288. Quisque maximus enim nec nulla faucibus rhoncus. Pellentesque nec porta sapien. Ut leo mauris, molestie id est eget, finibus finibus libero. Donec congue mauris est, at tincidunt nisi gravida rhoncus. Suspendisse et imperdiet libero. Praesent lacinia sollicitudin volutpat. In malesuada sed mauris at volutpat. Phasellus nec fermentum libero. In dapibus pulvinar mattis.
  289.  
  290. Mauris ut turpis porta justo tincidunt congue et non orci. Quisque accumsan ultricies ex, sed tempor ante facilisis sit amet. Nunc orci sapien, pretium id varius et, ultricies vitae mi. Vestibulum scelerisque, magna eget rhoncus lobortis, turpis dolor lacinia eros, at sodales nulla erat eget enim. Ut scelerisque, diam ac pulvinar tempor, tortor mi finibus ex, nec interdum mi nulla ac quam. Cras maximus eu ante commodo placerat. Vestibulum ac pulvinar erat, eget rutrum turpis. Nulla est tellus, rutrum vitae justo vitae, porttitor feugiat neque. Ut et tortor augue. Donec sit amet felis in libero egestas porttitor ut ac eros. Aenean consequat aliquet purus sit amet volutpat. Donec molestie, augue eget iaculis ornare, diam justo placerat elit, vitae fermentum diam eros et metus. Nulla enim sem, efficitur ac augue eu, faucibus ultrices risus. Nam ornare erat lectus, in semper tortor varius id. Nulla scelerisque nisl et dui convallis euismod.
  291.  
  292. Integer pretium condimentum ipsum sit amet sagittis. Etiam condimentum libero sit amet efficitur accumsan. Duis molestie nisi iaculis, ultrices augue nec, pellentesque erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pretium ultricies maximus. Praesent malesuada felis ipsum, ac lacinia nulla iaculis a. Aliquam nunc lorem, porta at pulvinar eget, suscipit et dolor. Ut at odio viverra, blandit dolor et, finibus justo. Nam et viverra mi. Vestibulum orci ante, pretium sit amet tempus ut, iaculis eu lorem. Nam hendrerit rutrum diam elementum tempor. Quisque in dolor arcu. Cras metus est, posuere volutpat libero ac, elementum pharetra elit. Aenean imperdiet, enim quis bibendum imperdiet, velit nulla dictum neque, eget ultricies sapien libero ac metus. Nam vitae turpis consectetur, convallis lectus ac, euismod orci.
  293.  
  294. In a auctor sem. Sed lobortis felis a sem pulvinar, id sollicitudin dolor consequat. Sed non convallis neque, ut vehicula tellus. Maecenas varius, ex eu venenatis fermentum, nisl neque tempor leo, tincidunt vulputate ipsum leo ut tellus. Sed quis libero vestibulum, cursus magna sit amet, dignissim urna. Cras consectetur sed enim non efficitur. Sed ac pulvinar tellus. Nunc ac sapien id ipsum lacinia maximus.
  295. </p>
  296.  
  297. </div>
  298.  
  299.  
  300. <div ID="facts">
  301.  
  302. <h1 style="margin-top: -1%;">Basic Facts</h1>
  303.  
  304. <p style="overflow: auto; overflow-x: hidden; text-align: justify; font-size: 1.44vh; color:#292d1c; height: 92%; margin-top: -2.40%; display: block; font-weight: lighter; line-height: 88%;">
  305. <first>L</first>orem ipsum dolor sit amet, consectetur adipiscing elit. Nam urna ex, imperdiet non consectetur ultrices, pellentesque vitae magna. Aliquam erat volutpat. Cras ornare maximus imperdiet. Aliquam convallis fringilla nibh, non laoreet velit mattis vitae. Aenean euismod laoreet tempus. Aliquam tincidunt, tellus eu rhoncus porttitor, justo arcu consectetur augue, vitae tempor mi arcu sed nisi. Maecenas tempor ligula lectus, quis sodales eros dictum in.
  306.  
  307. Quisque maximus enim nec nulla faucibus rhoncus. Pellentesque nec porta sapien. Ut leo mauris, molestie id est eget, finibus finibus libero. Donec congue mauris est, at tincidunt nisi gravida rhoncus. Suspendisse et imperdiet libero. Praesent lacinia sollicitudin volutpat. In malesuada sed mauris at volutpat. Phasellus nec fermentum libero. In dapibus pulvinar mattis.
  308.  
  309. Mauris ut turpis porta justo tincidunt congue et non orci. Quisque accumsan ultricies ex, sed tempor ante facilisis sit amet. Nunc orci sapien, pretium id varius et, ultricies vitae mi. Vestibulum scelerisque, magna eget rhoncus lobortis, turpis dolor lacinia eros, at sodales nulla erat eget enim. Ut scelerisque, diam ac pulvinar tempor, tortor mi finibus ex, nec interdum mi nulla ac quam. Cras maximus eu ante commodo placerat. Vestibulum ac pulvinar erat, eget rutrum turpis. Nulla est tellus, rutrum vitae justo vitae, porttitor feugiat neque. Ut et tortor augue. Donec sit amet felis in libero egestas porttitor ut ac eros. Aenean consequat aliquet purus sit amet volutpat. Donec molestie, augue eget iaculis ornare, diam justo placerat elit, vitae fermentum diam eros et metus. Nulla enim sem, efficitur ac augue eu, faucibus ultrices risus. Nam ornare erat lectus, in semper tortor varius id. Nulla scelerisque nisl et dui convallis euismod.
  310.  
  311. Integer pretium condimentum ipsum sit amet sagittis. Etiam condimentum libero sit amet efficitur accumsan. Duis molestie nisi iaculis, ultrices augue nec, pellentesque erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pretium ultricies maximus. Praesent malesuada felis ipsum, ac lacinia nulla iaculis a. Aliquam nunc lorem, porta at pulvinar eget, suscipit et dolor. Ut at odio viverra, blandit dolor et, finibus justo. Nam et viverra mi. Vestibulum orci ante, pretium sit amet tempus ut, iaculis eu lorem. Nam hendrerit rutrum diam elementum tempor. Quisque in dolor arcu. Cras metus est, posuere volutpat libero ac, elementum pharetra elit. Aenean imperdiet, enim quis bibendum imperdiet, velit nulla dictum neque, eget ultricies sapien libero ac metus. Nam vitae turpis consectetur, convallis lectus ac, euismod orci.
  312.  
  313. In a auctor sem. Sed lobortis felis a sem pulvinar, id sollicitudin dolor consequat. Sed non convallis neque, ut vehicula tellus. Maecenas varius, ex eu venenatis fermentum, nisl neque tempor leo, tincidunt vulputate ipsum leo ut tellus. Sed quis libero vestibulum, cursus magna sit amet, dignissim urna. Cras consectetur sed enim non efficitur. Sed ac pulvinar tellus. Nunc ac sapien id ipsum lacinia maximus.
  314. </p>
  315.  
  316. </div>
  317.  
  318. <img src="http://www.placehold.it/145x140" width="145" height="140" style="position: fixed; top: 73.34%; left: 5%; width: 9.25%; object-fit: contain;">
  319.  
  320. <img src="http://www.placehold.it/318x140" width="318" height="140" style="position: fixed; top: 73.34%; left: 14.35%; width: 20.33%; object-fit: contain;">
  321.  
  322. <img src="http://www.placehold.it/145x140" width="145" height="140" style="position: fixed; top: 73.34%; left: 34.77%; width: 9.25%; object-fit: contain;">
  323.  
  324. <h2 style="bottom: -3%; left:8%; position: fixed;">"You can put a short quote here of your character"</h2>
  325.  
  326. <!--------DO NOT REMOVE CREDIT-------->
  327.  
  328. <div class="credit">
  329. <a href="http://www.roleplayer.me/752901">madlove resources</a>
  330. </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!