Advertisement
marshallsmyth

jane waystone

Jul 12th, 2020
1,530
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.37 KB | None | 0 0
  1. <body>
  2. body><style type="text/css">
  3. @import url(https://fonts.googleapis.com/css?family=Quintessential|Allura|Montez|Parisienne|Kavivanar|Playball|Satisfy|Calligraffitti|Charm|Philosopher);
  4. ::-webkit-scrollbar-thumb:vertical { background:#4e004e;border-radius:20px;box-shadow: 0px 13px 13px #000; }
  5. ::-webkit-scrollbar-thumb:horizontal { background:#4e004e;border-radius:20px;box-shadow: 0px 13px 13px #000; }
  6. ::-webkit-scrollbar { width:0px; height:3px;background:#f80073;border-radius:20px; }
  7.  
  8.  .tab { text-indent:70px; }
  9.  
  10.  .clouds {position:fixed;left:0%;bottom:0%;width:100%;height:22%;
  11. display:inline;overflow:visible;pointer-events:none;opacity:0.3;
  12. background:transparent url('https://i.imgur.com/geosgmp.png') repeat top center;
  13. z-index:1; -moz-animation:move-scrolling-front 200s linear infinite; -ms-animation:move-scrolling-front 200s linear infinite;
  14. -o-animation:move-scrolling-front 200s linear infinite; -webkit-animation:move-scrolling-front 200s linear infinite;
  15. animation:move-scrolling-front 200s linear infinite; } @keyframes move-scrolling-front{from{background-position:0% 0%}
  16. to{background-position:300% 0%}} @-webkit-keyframes move-scrolling-front{from{background-position:0% 0%}
  17. to{background-position:300% 0%}} @-moz-keyframes move-scrolling-front{from{background-position:0% 0%}
  18. to{background-position:300% 0%}} @-ms-keyframes move-scrolling-front{from{background-position:0% 0%} to{background-position:300% 0%}}
  19.  
  20. body { background-size:829%; background-image:url( https://i.imgur.com/AgnZpAj.png );
  21. background-repeat:no-repeat;width:829%; }
  22.  </style>
  23.  
  24.  <div id="1" class="genealogy"> </style> <style type="text/css">
  25. #box1 { width:21%; height:9%; left:0%; top:2%; position:fixed; overflow:hidden;
  26. transition:7s ease; padding:0px 22px 15px 0px; background:linear-gradient(to right,#69b,#119895 30%,#fff 70%,#119895);
  27. border:solid 4px #033;border-radius:50px; font-family:playball, times; color:#600;
  28. font-size:50px; line-height:84px; letter-spacing:0px; text-align:center; box-shadow:inset 0px 0px 30px 10px #055; }
  29.  #box1:hover { width:96.9%; height:94.5%; transition:6s ease; left:0%; top:0%; z-index:1;
  30. border-radius:20px; border:solid 7px #c682f9; box-shadow:0px 0px 20px 30px #206;
  31. overflow:auto; color:transparent;line-height:0px; }</style>
  32. <div id="box1"> Overview <div class="clouds"> </div>
  33. <center><img src=" https://i.imgur.com/egaMyvR.jpg " style="width:102.2%;margin-top:-5px;margin-left:0px;margin-bottom:-20px; transform:rotate (360deg);"></center> </div></div>
  34.  
  35.  <div id="2" class="genealogy"> </style> <style type="text/css">
  36. #box2 { width:21%;height:9%;left:76.8%;top:2%;position:fixed;overflow:hidden;
  37. transition:7s ease; padding:0px 22px 15px 0px; background:linear-gradient(to right,#69b,#119895 30%,#fff 70%,#119895);
  38. border:solid 4px #033;border-radius:50px; font-family:playball, times; color:#600;
  39. font-size:50px; line-height:84px; letter-spacing:0px; text-align:center; box-shadow:inset 0px 0px 30px 10px #055; }
  40.  #box2:hover { width:99%;height:97.7%;transition:6s ease;left:0%;top:0%;z-index:1;
  41. border-radius:20px;border:solid 7px #c682f9;box-shadow:0px 0px 20px 30px #206;
  42. overflow:auto;color:transparent;padding:1px;font-size:20px;line-height:0px;}
  43. </style> <div id="box2"> Background <div class="clouds"> </div>
  44. <img src=" https://i.imgur.com/1tffTYT.png " style="width:100%;margin-top:8px;"> </div>
  45.  
  46.  <div id="3" class="genealogy"> </style> <style type="text/css">
  47. #box3 { width:17%; height:9%; left:0%; top:74%; position:fixed; overflow:hidden;
  48. transition:7s ease; padding:0px 22px 15px 0px; background:linear-gradient(to right,#69b,#119895 30%,#fff 70%,#119895);
  49. border:solid 4px #033;border-radius:50px; font-family:playball, times; color:#600;
  50. font-size:50px; line-height:84px; letter-spacing:0px; text-align:center; box-shadow:inset 0px 0px 30px 10px #055; }
  51.  #box3:hover { width:98%; height:95.7%; transition:6s ease; left:0%; top:0%; z-index:1; background:#408;
  52. border-radius:20px; border:solid 11px #408; box-shadow:0px 0px 20px 30px #408;
  53. overflow:auto; color:transparent; padding:0px; font-size:20px; line-height:0px; }
  54. </style> <div id="box3"> <i>Jane</i> <div class="clouds"> </div>
  55. <img src=" https://i.imgur.com/0bky1zR.jpg " style="width:100%;"> </div></div>
  56.  
  57.  <div id="4" class="genealogy"> </style> <style type="text/css">
  58. #box4 { width:17%; height:9%; left:20.2%; top:74%; position:fixed; overflow:hidden;
  59. transition:7s ease; padding:0px 22px 15px 0px; background:linear-gradient(to right,#69b,#119895 30%,#fff 70%,#119895);
  60. border:solid 4px #033;border-radius:50px; font-family:playball, times; color:#600;
  61. font-size:50px; line-height:84px; letter-spacing:0px; text-align:center; box-shadow:inset 0px 0px 30px 10px #055; }
  62.  #box4:hover { width:99%; height:97.7%; transition:6s ease; left:0%; top:0%; z-index:1; background:#ff0;
  63. border-radius:20px; border:solid 7px #50a; box-shadow:0px 0px 20px 30px #206;
  64. overflow:auto; color:transparent; padding:0px; font-size:20px; line-height:0px; }
  65. </style> <div id="box4"> <i>Training</i> <div class="clouds"> </div>
  66. <img src=" " style="width:100%;"> </div></div>
  67.  
  68. <div id="5" class="genealogy"> </style> <style type="text/css">
  69. #box5 { width:17%; height:9%; left:40.4%; top:74%; position:fixed; overflow:hidden;
  70. transition:7s ease; padding:0px 22px 15px 0px; background:linear-gradient(to right,#69b,#119895 30%,#fff 70%,#119895);
  71. border:solid 4px #033;border-radius:50px; font-family:playball, times; color:#600;
  72. font-size:50px; line-height:84px; letter-spacing:0px; text-align:center; box-shadow:inset 0px 0px 30px 10px #055; }
  73.  #box5:hover { width:99%; height:97.7%; transition:6s ease; left:0%; top:0%; z-index:1;
  74. border-radius:20px; border:solid 7px #ffa; box-shadow:0px 0px 20px 30px #206;
  75. overflow:auto; color:transparent; padding:0px; font-size:20px; line-height:0px; }
  76. </style> <div id="box5"> <i>Timeline</i> <div class="clouds"> </div>
  77.  
  78.  <div style="color:#500;font-size:344px;text-align:center;
  79. margin-top:280px;letter-spacing:-0.5px;font-style:italic;"> Jane </div>
  80.  
  81.  <div style="width:70%;height:0px;border-bottom:10px solid #900;color:#600;margin:6% 0% 5% 15%;line-height:70px;
  82. font-size:80px;letter-spacing:3px;padding:200px 0px 60px 0px;"> Jane's Early Timeline </div>
  83.  
  84. <ul style="list-style-type:square;color:#604;margin:40px 60px -20px 30px;text-align:left;font-size:50px;line-height:56px;letter-spacing:0px;">
  85.  
  86. <center> ... </center><br>
  87.  
  88. <li> 2020 - April 23rd, Jane was born.
  89. <li> 2020 - ... <p>
  90. <li> ... <p>
  91. <li> ... <p><br> </ul>
  92.  
  93. <div style="width:70%;height:22px;border-bottom:10px solid #900;color:#600;margin:0% 0% 0% 15%;
  94. font-size:80px;letter-spacing:3px;"> Jane's POV Story </div>
  95.  
  96. <div style="font-size:60px;line-height:60px;font-family:niconne, playball, times;
  97. text-align:left;padding:20px 35px 60px 65px;color:#404;letter-spacing:0.3px;">
  98. <center> Jane </center><br>
  99.  
  100. <center><img src=" x " style="width:32%;box-shadow:0px 0px 44px 22px gold;
  101. border-radius:22px;margin:-30px 0px -80px 0px;border:solid 2px #ffb;"></center><br> <p style="p:50px;">
  102.  
  103. </div></div></div>
  104.  
  105. <div id="6" class="genealogy"> </style> <style type="text/css">
  106. #box6 { width:17%; height:9%; left:60.6%; top:74%; position:fixed; overflow:hidden;
  107. transition:7s ease; padding:0px 22px 15px 0px; background:linear-gradient(to right,#69b,#119895 30%,#fff 70%,#119895);
  108. border:solid 4px #033;border-radius:50px; font-family:playball, times; color:#600;
  109. font-size:50px; line-height:84px; letter-spacing:0px; text-align:center; box-shadow:inset 0px 0px 30px 10px #055; }
  110.  #box6:hover { width:99%; height:97.7%; transition:6s ease; left:0%; top:0%; z-index:1;
  111. background-size:100% 99.5%; background-image:url( https://i.imgur.com/y6zbfvj.png ); background-repeat:no-repeat;
  112. border-radius:20px; border:solid 7px #ff9; box-shadow:0px 0px 20px 30px #206;
  113. overflow:auto; color:transparent; padding:1px; font-size:20px; line-height:0px; }
  114. </style> <div id="box6"> <i>Inlaws</i> <div class="clouds"> </div>
  115.  <img src=" https://i.imgur.com/kVpO9xz.png " style="width:100%;margin-top:10px;opacity:0.5;"> </div></div>
  116.  
  117.  <div id="7" class="genealogy"> </style> <style type="text/css">
  118. #box7 { width:17%; height:9%; left:80.7%; top:74%; position:fixed; overflow:hidden;
  119. transition:7s ease; padding:0px 22px 15px 0px; background:linear-gradient(to right,#69b,#119895 30%,#fff 70%,#119895);
  120. border:solid 4px #033;border-radius:50px; font-family:playball, times; color:#600;
  121. font-size:50px; line-height:84px; letter-spacing:0px; text-align:center; box-shadow:inset 0px 0px 30px 10px #055; }
  122.  #box7:hover { width:99%; height:97.7%; transition:6s ease; left:0%; top:0%; z-index:1; background:#e06;
  123. border-radius:20px; border:solid 7px #50a; box-shadow:0px 0px 20px 30px #206;
  124. overflow:auto; color:transparent; padding:0px; font-size:20px; line-height:0px; }
  125. </style> <div id="box7"> <i> Images </i> <div class="clouds"></div>
  126. <img src=" https://i.imgur.com/mgAOQF5.png " style="width:100%;"> </div> </div>
  127.  
  128.  <div id="8" class="genealogy"> </style> <style type="text/css">
  129. #box8 { width:17%; height:9%; left:40.4%; top:87%; position:fixed; overflow:hidden;
  130. transition:7s ease; padding:0px 22px 15px 0px; background:linear-gradient(to right,#69b,#119895 30%,#fff 70%,#119895);
  131. border:solid 4px #033;border-radius:50px; font-family:playball, times; color:#600;
  132. font-size:50px; line-height:84px; letter-spacing:0px; text-align:center; box-shadow:inset 0px 0px 30px 10px #055; }
  133.  #box8:hover { width:99%; height:97.7%; transition:6s ease; left:0%; top:0%; z-index:1;
  134. background:linear-gradient(to right,#69b,#119895 30%,#fff 70%,#119895);
  135. border-radius:20px; border:solid 7px #50a; box-shadow:0px 0px 20px 30px #206;
  136. overflow:auto; color:transparent; padding:0px; font-size:20px; line-height:0px; }
  137. </style> <div id="box8"> Updates <div class="clouds"> </div>
  138.  
  139.  <div style="color:#500;font-size:344px;text-align:center;
  140. margin-top:280px;letter-spacing:-0.5px;font-style:italic;"> Jane </div>
  141.  
  142.  <div style="width:70%;height:0px;border-bottom:10px solid #900;color:#600;margin:6% 0% 5% 15%;line-height:70px;
  143. font-size:80px;letter-spacing:3px;padding:200px 0px 60px 0px;"> Jane's Personal Updates </div>
  144.  
  145. <ul style="list-style-type:square;color:#604;margin:40px 60px -20px 30px;text-align:left;font-size:50px;line-height:56px;letter-spacing:0px;">
  146.  
  147. <center> ... </center><br>
  148.  
  149. <li> 2020 - April 23rd, Jane was born.
  150.  
  151. <table style="width:100%;color:#505;float:left;font-family:charm, arial;font-size:50px;line-height:66px;padding:5px 20px 5px 0px;margin-top:10px;"><tr>
  152. <td style="color:#a02;" valign="top"><li> </td><td> ... </td></tr><tr></table></tr>
  153.  
  154. <li> 2020 - ... <p>
  155. <li> ... <p>
  156. <li> ... <p><br> </ul>
  157.  
  158. <div style="width:70%;height:22px;border-bottom:10px solid #900;color:#600;margin:0% 0% 0% 15%;
  159. font-size:80px;letter-spacing:3px;"> Jane's Continuing Story </div>
  160.  
  161. <div style="font-size:60px;line-height:60px;font-family:niconne, playball, times;
  162. text-align:left;padding:20px 35px 60px 65px;color:#404;letter-spacing:0.3px;">
  163. <center> Jane </center><br>
  164.  
  165. <center><img src=" x " style="width:32%;box-shadow:0px 0px 44px 22px gold;
  166. border-radius:22px;margin:-30px 0px -80px 0px;border:solid 2px #ffb;"></center><br> <p style="p:50px;">
  167.  
  168. </div></div></div>
  169.  
  170. <div id="end" class="genealogy"></style><style type="text/css">
  171. #boxend {left:38.4%;top:1.5%;opacity:1;font-size:40px;letter-spacing:3.5px;font-family:playball, arial;font-style:italic;color:#f00;position:fixed;}
  172. </style><div id="boxend"> LS Jane 6/4/20 </div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement