API tools faq
paste
RageQxeen

The SIn of Sloth

RageQxeen
Jun 11th, 2018
661
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.02 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <body>
  3. <style type="text/css">
  4.  
  5. @import url(https://fonts.googleapis.com/css?family=Great+Vibes|Lovers+Quarrel|Tangerine);
  6.  
  7. html, body {
  8. background: #fce7e7;
  9. background-image:url("");
  10. background-size: 100%;
  11. background-repeat:no-repeat;
  12. background-position:center bottom;
  13. }
  14.  
  15. ::-webkit-scrollbar-button:vertical:{
  16. background-color: #transparent;}
  17.  
  18. ::-webkit-scrollbar-thumb:vertical {
  19. background-color:#transparent;
  20. height:150px;}
  21.  
  22. ::-webkit-scrollbar-thumb:horizontal {
  23. background-color:#transparent;
  24. height:60px;}
  25.  
  26. ::-webkit-scrollbar {
  27. height:60px;
  28. width:5px;
  29. background-color:#transparent;}
  30. /* This is the content and nav part */
  31.  
  32. #content {
  33. background-color: #111;
  34. width: 450px;
  35. height: 300px;
  36. margin:auto;
  37. position: absolute;
  38. right: 10%;
  39. bottom: 12%;
  40. z-index:1;
  41. border: #000000 solid 1px;
  42. }
  43.  
  44. #nav {
  45. background-color: transparent;
  46. width: 250px;
  47. height:45px;
  48. margin:auto;
  49. position: absolute;
  50. right: 18%;
  51. top: 35%;
  52. text-align: center;
  53. z-index:1;
  54. }
  55.  
  56. #nav a, #nav a:link, #nav a:visited {
  57. display:inline-block;
  58. background: #000;
  59. color: #000;
  60. margin-top: 0px;
  61. margin-bottom: 0px;
  62. margin-left: 0px;
  63. height: 20px;
  64. width: 40px;
  65. border-radius: 5px;
  66. }
  67.  
  68. #nav a:active, #nav a:hover {
  69. display:inline-block;
  70. height: 20px;
  71. width: 40px;
  72. text-decoration:none;
  73. background: #ffa2fb;
  74. color: #ffa2fb;
  75. margin: 0px;
  76. }
  77.  
  78. .font {
  79. font-family: 'Tangerine';
  80. font-size: 20px;
  81. font-weight:bold;
  82. font-style:none;
  83. color:#ffa2fb;
  84. padding: 10px;
  85. letter-spacing: 2px;
  86. text-transform:none;
  87. text-align:center;
  88. }
  89.  
  90.  
  91. /* This is the image part */
  92.  
  93. #image {
  94. width: 600px;
  95. height: 100%;
  96. margin: 0px;
  97. border: none;
  98. background-color:transparent;
  99. position: fixed;
  100. left: 5%;
  101. bottom: 5%;
  102. background-image:url("http://i.picpar.com/vjFc.png");
  103. background-repeat:no-repeat;
  104. background-position: bottom;
  105. background-size: 100%;
  106. }
  107.  
  108. #image2 {
  109. width: 450px;
  110. height: 100px;
  111. margin: 0px;
  112. border: none;
  113. background-color:transparent;
  114. position: fixed;
  115. right: 0%;
  116. top: 0%;
  117. background-image:url("https://78.media.tumblr.com/51d0149da05a0f1545c6452622e8e389/tumblr_owp4j2oL9j1vvfsp9o1_500.gif");
  118. background-repeat:no-repeat;
  119. background-position: center;
  120. background-size: 100%;
  121. }
  122.  
  123. /* This is the image2 container border */
  124.  
  125. #container {
  126. background-color:transparent;
  127. width: 450px;
  128. height: 100px;
  129. margin:auto;
  130. border: 5px solid #000;
  131. position: fixed;
  132. right: 10%;
  133. top: 15%;
  134. z-index:1;
  135. transform-origin: bottom right;
  136. -ms-transform: skew(20deg, 0deg);
  137. -webkit-transform: skew(20deg, 0deg);
  138. transform: skew(20deg, 0deg);
  139. }
  140.  
  141. /* This is the header/name part */
  142.  
  143. #name {
  144. z-index:15;
  145. position: fixed;
  146. left: -10%;
  147. top: 60%;
  148. margin: auto;
  149. background: transparent;
  150. width: 50vw;
  151. height: 7vw;
  152. font-family: 'Lovers Quarrel';
  153. font-size: 60px;
  154. background: url(https://i.giphy.com/media/XA8btwjWSf5za/200.gif) -20px -20px repeat;
  155. -webkit-text-fill-color: transparent;
  156. -webkit-background-clip: text;
  157. display:block;
  158. text-align: center;
  159. letter-spacing: 1px;
  160. -webkit-transition:opacity 2s linear;
  161. line-height:3.6vw;
  162. }
  163.  
  164. #nameunder{
  165. z-index:15;
  166. position: fixed;
  167. left: -10%;
  168. top: 60%;
  169. margin: auto;
  170. background: transparent;
  171. width: 50vw;
  172. height: 7vw;
  173. font-family: 'Lovers Quarrel';
  174. font-size: 60px;
  175. -webkit-text-fill-color: transparent;
  176. text-transform: none;
  177. -webkit-background-clip: text;
  178. display:block;
  179. text-shadow: -1px 0 #333, 0 1px #333,1px 0 #333, 0 -1px #333;
  180. text-align: center;
  181. letter-spacing: 1px;
  182. -webkit-transition:opacity 2s linear;
  183. line-height:3.6vw;
  184. }
  185.  
  186. .header{
  187. position:absolute;
  188. width:500px;
  189. background: transparent;
  190. height:50px;
  191. overflow:hidden;
  192. font-family: 'Great Vibes', cursive;
  193. font-size: 40px;
  194. font-weight:lighter;
  195. font-style:bold;
  196. color:#000;
  197. letter-spacing: 0px;
  198. text-transform:none;
  199. text-align:center;
  200. }
  201.  
  202. /* Inner header parts */
  203.  
  204. h1 {
  205. font-family: 'Great Vibes', cursive;
  206. font-size: 30px;
  207. line-height: 22px;
  208. color: #b031e0;
  209. text-align: center;
  210. letter-spacing:1px;
  211. word-spacing: 2px;
  212. text-decoration:none!important;
  213. }
  214.  
  215. h2 {
  216. font-family: 'Great Vibes', cursive;
  217. font-size: 20px;
  218. line-height: 22px;
  219. color: #b031e0;
  220. text-align: center;
  221. letter-spacing:1px;
  222. word-spacing: 2px;
  223. text-decoration:none!important;
  224. }
  225.  
  226. /* Credits and text stuff!~ */
  227.  
  228. p {
  229. text-indent: 10px;
  230. }
  231.  
  232. .credit {
  233. position: fixed;
  234. bottom: 0px;
  235. right: 2px;
  236. height: 25px;
  237. width: 25px;
  238. line-height: 15px;
  239. font-size: 10px;
  240. color: #999;
  241. text-align: center;
  242. font-family: roboto;
  243. }
  244.  
  245. i{color: #EE82EE;}
  246. b{color: #9932CC;}
  247. a{color: #9370DB; text-decoration: none;}
  248. </style>
  249. <div class="credit" title="Profile by RageQxeen">♛</div>
  250.  
  251. <div id="container">
  252. <div id="image2"></div>
  253. <div id="nameunder">The Sin of Sloth</div><div id="name">The Sin of Sloth</div>
  254. </div>
  255.  
  256. <div id="image"></div>
  257.  
  258. <div id="nav">
  259. <a href="#one">1</a>
  260. <a href="#two">2</a>
  261. <a href="#three">3</a>
  262. <a href="#four">4</a>
  263. <a href="#five">5</a>
  264. </div>
  265.  
  266. <div id="content" class="font">
  267.  
  268.  
  269. <div style="width: 450px; height: 300px; overflow-y: hidden;">
  270.  
  271. <a name="one"></a>
  272. <div style="width: 450px; height: 300px; overflow: auto;" align="center">
  273. <font style=float:left>Name:</font> <font style=float:right>Zaleth</font><br>
  274. <br><font style=float:left>Age: </font><font style=float:right>Unknown</font>
  275. <br><font style=float:left>Race: </font><font style=float:right>Sin</font><br>
  276. <br><font style=float:left>Height:</font> <font style=float:right>5'6"</font>
  277. <br><font style=float:left>Weight:</font> <font style=float:right>140 lbs</font><br>
  278. <br><font style=float:left>Marital:</font> <font style=float:right>Single</font>
  279. <br><font style=float:left>Orientation:</font> <font style=float:right>Heterosexual</font><br>
  280. <br><font style=float:left>Occupation</font><font style=float:right>Freelance Nap Giver</font>
  281. </div>
  282.  
  283. <a name="two"></a>
  284. <div style="width: 450px; height: 300px; overflow: auto;" align="center">
  285. POWERS TBA
  286. </div>
  287.  
  288. <a name="three"></a>
  289. <div style="width: 450px; height: 300px; overflow: auto;" align="center">
  290. <img src="http://i.picpar.com/SjFc.jpg" style="float:left; width:100px; height:100px; border: 1px solid #000;">
  291. <p>Lorem ipsum dolor sit amet, at duo homero doming salutatus, sed equidem accumsan id, no debitis luptatum volutpat nec. Paulo accusata ocurreret ut sed, dico laoreet patrioque vis at. Vel vidit dicam noluisse cu, pri minim quaerendum ullamcorper ei, mutat inimicus has at. Mel cu feugiat mediocritatem, cu qui placerat inimicus mediocritatem, viderer fabulas corpora an eam.</p>
  292.  
  293. <img src="http://i.picpar.com/VjFc.jpg" style="float:right; width:100px; height:100px; border: 1px solid #000;">
  294. <p>Eum ex cibo nostrum, sit soluta nonumes deserunt cu. Verear offendit gloriatur ea his. Consetetur liberavisse disputationi quo ut, natum corrumpit maiestatis vel at, sea id summo phaedrum mediocrem. Posse tacimates accommodare has at, ex per nihil appareat. Vero malorum pri ex, illum virtute facilisi ne eum, labores habemus at vix.</p>
  295.  
  296. <img src="http://i.picpar.com/XjFc.jpg" style="float:left; width:100px; height:100px; border: 1px solid #000;">
  297. <p>Purto discere oportere sed te. Intellegebat conclusionemque eos ut, id illum partem ius. Ei his vero cetero consequuntur, nostrud veritus evertitur mei ei. Eos patrioque consectetuer no, velit corrumpit vim et, fugit minimum intellegam eam in. Meis causae intellegebat ut eos, mel solum ignota te.</p>
  298.  
  299. <img src="http://i.picpar.com/YjFc.jpg" style="float:right; width:100px; height:100px; border: 1px solid #000;">
  300. <p>An aeterno debitis oporteat est, eum ut putent debitis torquatos. Ex facilisi reprimique cotidieque est. Ius sint alienum ne, has summo utroque quaestio id. Sint dicam te eum, no quem augue ius, nam fuisset accusamus democritum te. Ad ridens habemus nec, cu tibique dolores offendit vel.</p>
  301. </div>
  302.  
  303. <a name="four"></a>
  304. <div style="width: 450px; height: 300px; overflow: auto;" align="center">
  305. FRIENDS TBA
  306. </div>
  307.  
  308. <a name="five"></a>
  309. <div style="width: 450px; height: 300px; overflow: auto;" align="center">
  310. OOC TBA
  311. </div>
  312.  
  313.  
  314. </body>
  315. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!