Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <body><style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Quintessential|Allura|Montez|Parisienne|Kavivanar|Nanum+Brush+Script|Satisfy|Calligraffitti|Charm|Philosopher);
- ::-webkit-scrollbar-thumb:vertical { background:#209;border-radius:20px;border:dotted 3px #f00; }
- ::-webkit-scrollbar-thumb:horizontal {border:dotted 3px yellow; background:#709;border-radius:20px;box-shadow:32px 0px 12px #ff0; }
- ::-webkit-scrollbar { width:11px; background:#007;border-radius:0px; }
- .tab { text-indent:70px; }
- .clouds {position:fixed;left:0%;bottom:0%;width:100%;height:60%;
- display:inline;overflow:visible;pointer-events:none;opacity:0.7;
- background:transparent url('https://i.imgur.com/geosgmp.png') repeat top center;
- z-index:1; -moz-animation:move-scrolling-front 200s linear infinite; -ms-animation:move-scrolling-front 200s linear infinite;
- -o-animation:move-scrolling-front 200s linear infinite; -webkit-animation:move-scrolling-front 200s linear infinite;
- animation:move-scrolling-front 200s linear infinite; } @keyframes move-scrolling-front{from{background-position:0% 0%}
- to{background-position:300% 0%}} @-webkit-keyframes move-scrolling-front{from{background-position:0% 0%}
- to{background-position:300% 0%}} @-moz-keyframes move-scrolling-front{from{background-position:0% 0%}
- to{background-position:300% 0%}} @-ms-keyframes move-scrolling-front{from{background-position:0% 0%} to{background-position:300% 0%}}
- body { background-size:500.5% 99.9%; background-image:url( https://i.imgur.com/1XsNrSG.png );
- background-repeat:no-repeat;width:499.4%; }
- </style>
- <div id="1" class="genealogy"> </style> <style type="text/css">
- #box1 { width:9.35%; height:11%; left:0%; top:60%; position:fixed; overflow:hidden;
- transition:4s ease; padding:1px; background:#000; border:solid 4px #f03;
- border-radius:50px; font-family:allura, times; color:#fed;
- font-size:22px; line-height:44px; letter-spacing:0px; text-align:center; }
- #box1:hover { width:99%; height:98%; transition:1s ease; left:0.4%; top:0.5%; z-index:1;
- background:#112; opacity:1.0; background-size:100% 100%; background-image:url( ); background-repeat:no-repeat;
- border-radius:20px; border:dotted 1px #c682f9; box-shadow:0px 0px 20px 300px #8e002e,inset 0px 0px 80px 1px #8e002e;
- overflow:auto; color:transparent; padding:1px; font-size:20px; line-height:0px; }</style>
- <div id="box1"> Overview <div class="clouds"> </div>
- <img src=" https://i.imgur.com/egaMyvR.jpg " style="width:100%;">
- </div></div>
- <div id="2" class="genealogy"> </style> <style type="text/css">
- #box2 { width:15.5%; height:13%; left:10%; top:60%; position:fixed; overflow:hidden;
- transition:4s ease; padding:1px; border:solid 4px #f03;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1;
- border-radius:50px; font-family:parisienne, allura, philosopher, times; color:#fed; text-shadow:2px 0px 0px #000;
- font-size:30px; line-height:50px; letter-spacing:2px; text-align:center; }
- #box2:hover { width:99%; height:98%; transition:1s ease; left:0.4%; top:0.5%; z-index:1;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1;
- border-radius:20px; border:solid 3px #803; box-shadow:0px 0px 20px 300px #6a9,inset 0px 0px 370px 110px #505;
- overflow:auto; color:transparent; padding:0px; font-size:20px; line-height:20px; }
- </style> <div id="box2"> Name
- <div class="clouds"> </div>
- <div style="font-size:0px;line-height:30px;color:#706; text-align:center;"> Profile Stats </div>
- <div style="color:#706;font-size:344px;text-align:center;line-height:204px;font-family:parisienne, allura, times;
- text-shadow:4px 5px 9px #f03;margin-top:235px;letter-spacing:1px;"> <i> Name </i> </div>
- <table style="width:100%;color:#100;text-align:justify;font-size:46px;line-height:48px;padding:235px 20px 10px 12px;
- font-family:parisienne, allura, times;text-shadow:4px 0px 0px #cdf;"><tr>
- <td style="color:#770100;" valign="top">Name: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Parents: </td><td><li> Mother: ... <li>Father: ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Children: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Birth: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Gender: </td><td> <li>... <li>... <p><br> </td></tr><tr>
- <td style="color:#770100;" valign="top">Further: </td><td> <li>... <li>... <p><br> </td></tr><tr>
- <td style="color:#770100;" valign="top">Home: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Work: </td><td> ... <p><br> </td></tr><tr>
- <td style="color:#770100;" valign="top">Recently: </td><td> ... <p><br> </td></tr><tr>
- <td style="color:#770100;" valign="top">Current: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Status: </td><td> ... <p><br> </td></tr><tr>
- <td style="color:#770100;" valign="top">Weight: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Height: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Eyes: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Hair: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Lips: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Tattoos: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Scars: </td><td> ... <p><br> </td></tr><tr>
- <td style="color:#770100;" valign="top">Teeth: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Nails: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Style: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Pets: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Breast: </td><td> ... </td></tr><tr>
- <td style="color:#770100;" valign="top">Pleasure: </td><td> ... <p><br> </td></tr><tr>
- <td style="color:#2e007e;" valign="top">Essay: </td><td> ... <p><br> </td></tr><tr>
- </tr></table>
- <div style="font-size:40px;color:#cdf;margin:-60px 0px 60px 0px;"><center><p><br><h1>Code by</h1>Kathy WayStone
- </div></div></div>
- <div id="3" class="genealogy"> </style> <style type="text/css">
- #box3 { width:15.5%; height:13%; left:26%; top:60%; position:fixed; overflow:hidden;
- transition:4s ease; padding:1px;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0; border:solid 4px #f03;
- border-radius:50px; font-family:parisienne, allura, montez, times; color:#fed; text-shadow:2px 0px 0px #000;
- font-size:30px; line-height:50px; letter-spacing:2px; text-align:center; }
- #box3:hover { width:99%; height:98%; transition:1s ease; left:0.4%; top:0.5%; z-index:1;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0;
- border-radius:20px; border:solid 3px #50a; box-shadow:0px 0px 20px 300px #206,inset 0px 0px 170px 40px #001;
- overflow:auto; color:transparent; padding:0px; font-size:20px; line-height:20px; }
- </style> <div id="box3"> Music
- <div class="clouds"> </div>
- <div style="color:#706;font-size:344px;text-align:center;line-height:204px;font-family:parisienne, allura, times;
- text-shadow:4px 5px 9px #f03;margin-top:285px;letter-spacing:1px;"> <i> Name </i> </div>
- </div>
- <div id="4" class="genealogy"> </style> <style type="text/css">
- #box4 { width:15.5%; height:13%; left:42%; top:60%; position:fixed; overflow:hidden;
- transition:4s ease; padding:1px;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0; border:solid 4px #f03;
- border-radius:50px; font-family:parisienne, allura, philosopher, times; color:#fed; text-shadow:2px 0px 0px #000;
- font-size:30px; line-height:50px; letter-spacing:2px; text-align:center; }
- #box4:hover { width:99%; height:98%; transition:1s ease; left:0.4%; top:0.5%; z-index:1;
- background:linear-gradient(to right,#202,#606 30%,#909 70%,#c0c); opacity:1.0;
- border-radius:20px; border:solid 3px #50a; box-shadow:0px 0px 20px 300px #206,inset 0px 0px 70px 30px #001;
- overflow:auto; color:transparent; padding:0px; font-size:20px; line-height:20px; }
- </style> <div id="box4"> Timeline
- <div class="clouds"> </div>
- <div style="font-size:304px;letter-spacing:-1px;text-align:center;color:#706;margin-top:370px;
- text-shadow:4px 5px 9px #f03;"> Name </div>
- <div style="line-height:41px;border-bottom:30px double #706;color:#f03;font-size:80px;
- letter-spacing:3px;margin-top:300px;"> Life History Events </div>
- <ul style="font-size:50px;color:#f0a;list-style-type:square;
- line-height:70px;margin:60px 30px -20px 60px;text-align:justify;">
- <li> 2017 - ... <p>
- <li> 2018 - ... <p>
- <li> 2019 - ... <p><br> </ul>
- <div style="line-height:41px;border-bottom:30px double #706;
- color:#f03;font-size:80px;letter-spacing:3px;padding-top:90px;"> ...'s Point of View Story </div>
- <div style="font-size:34px;line-height:40px;font-family:philosopher, times;text-align:justify;
- padding:60px 30px 10px 30px;color:#f0b;text-shadow:2px 0px 0px #000;"><center> Caption </center>
- <center><img src=" x " style="width:45%;border-radius:20px;padding-top:5px;"></center><br>
- <li>... <p><br>
- </div></div>
- <div id="5" class="genealogy"> </style> <style type="text/css">
- #box5 { width:15.5%; height:13%; left:58%; top:60%; position:fixed; overflow:hidden;
- transition:4s ease; padding:1px;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0; border:solid 4px #f03;
- border-radius:50px; font-family:parisienne, allura, philosopher, times; color:#fed; text-shadow:2px 0px 0px #000;
- font-size:30px; line-height:50px; letter-spacing:2px; text-align:center; }
- #box5:hover { width:99%; height:98%; transition:1s ease; left:0.4%; top:0.5%; z-index:1;
- background-size:100% 99.5%; background-image:url( https://i.imgur.com/y6zbfvj.png ); background-repeat:no-repeat;
- border-radius:20px; border:dotted 1px #c682f9; box-shadow:0px 0px 20px 300px #8e002e,inset 0px 0px 80px 1px #400;
- overflow:auto; color:transparent; padding:1px; font-size:20px; line-height:20px; }
- </style> <div id="box5"> Inlaws
- <div class="clouds"> </div>
- <img src=" https://i.imgur.com/kVpO9xz.png " style="width:100%;margin-top:10px;opacity:0.5;">
- </div></div>
- <div id="6" class="genealogy"> </style> <style type="text/css">
- #box6 { width:15.5%; height:13%; left:74%; top:60%; position:fixed; overflow:hidden;
- transition:4s ease; padding:1px;
- background:linear-gradient(to right,#202,#606 30%,#909 70%,#c0c); opacity:1.0; border:solid 4px #f03;
- border-radius:50px; font-family:parisienne, allura, philosopher, sans-serif; color:#fed; text-shadow:2px 0px 0px #000;
- font-size:30px; line-height:50px; letter-spacing:2px; text-align:center; }
- #box6:hover { width:99%; height:98%; transition:1s ease; left:0.4%; top:0.5%; z-index:1;
- background:#706; background-size:100% 100%; background-image:url( ); background-repeat:no-repeat;
- border-radius:20px; border:solid 3px #50a; box-shadow:0px 0px 20px 300px #206,inset 0px 0px 80px 60px #c0c;
- overflow:auto; color:transparent; padding:0px; font-size:20px; line-height:20px; }
- </style> <div id="box6"> Images
- <div class="clouds"></div>
- <div style="font-size:94px;letter-spacing:-1px;text-align:center;color:#306;margin-top:220px;
- text-shadow:2px 0px 0px #f00;"> ...'s Photo Album </div>
- <div id="aa" class="g"> </style> <style type="text/css">
- #boxaa { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:transparent; left:4%; top:22%; }
- #boxaa:hover {width:74%;height:95%;line-height:40px;font-weight:none;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0;
- border:4px solid #f10;transition:3s ease;left:0.5%;top:1%;z-index:1;color:transparent;
- padding:1px; font-size:40px; border-radius:40px; overflow:auto; }
- </style> <div id="boxaa">
- <center><img src=" x " style="width:28%;border:3px solid yellow;border-radius:40px;
- margin:25px 0px 10px 0px;"><br> caption </center> </div></div>
- <div id="bb" class="g"> </style> <style type="text/css">
- #boxbb { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:transparent; left:10%; top:22%; }
- #boxbb:hover {width:74%;height:95%;line-height:40px;font-weight:none;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0;
- border:4px solid #f10;transition:3s ease;left:0.5%;top:1%;z-index:1;color:transparent;
- padding:1px; font-size:40px; border-radius:40px; overflow:auto; }
- </style> <div id="boxbb">
- <center><img src=" x " style="width:28%;border:3px solid yellow;border-radius:40px;
- margin:25px 0px 10px 0px;"><br> caption </center> </div></div>
- <div id="cc" class="g"> </style> <style type="text/css">
- #boxcc { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:#ff3388; left:16%; top:22%; }
- #boxcc:hover {width:74%;height:95%;line-height:20px;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0;
- border:4px solid #80d;transition:3s ease;left:0.5%;top:1%;z-index:1;color:lavender;
- padding:1px; font-size:40px; border-radius:40px; overflow:auto; }
- </style> <div id="boxcc">
- <center><img src=" x " style="width:28%;border:3px solid #ddf;border-radius:40px;
- margin:25px 0px 10px 0px;"><br> caption </center> </div></div>
- <div id="dd" class="g"> </style> <style type="text/css">
- #boxdd { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:#ff3388; left:22%; top:22%; }
- #boxdd:hover {width:74%;height:95%;line-height:48px;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0;
- border:4px solid #80d;transition:3s ease;left:0.5%;top:1%;z-index:1;color:lavender;
- padding:1px; font-size:48px; border-radius:40px; overflow:auto; }
- </style> <div id="boxdd">
- <center><img src=" x " style="width:28%;border:3px solid #ddf;border-radius:40px;
- margin:25px 0px 10px 0px;"><br> caption </center> </div></div>
- <div id="ee" class="g"> </style> <style type="text/css">
- #boxee { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:#ff3388; left:28%; top:22%; }
- #boxee:hover {width:74%;height:95%;line-height:36px;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0;
- border:4px solid #80d;transition:3s ease;left:0.5%;top:1%;z-index:1;color:lavender;
- padding:1px; font-size:40px; border-radius:40px; overflow:auto; }
- </style> <div id="boxee">
- <center><img src=" x " style="width:28%;border:3px solid #ddf;border-radius:40px;
- margin:25px 0px 10px 0px;"><br> caption </center> </div></div>
- <div id="ff" class="g"> </style> <style type="text/css">
- #boxff { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:#ff3388; left:34%; top:22%; }
- #boxff:hover {width:74%;height:95%;line-height:28px;
- background:linear-gradient( to right,#202,#606 30%,#909 70%,#c0c ); opacity:1.0;
- border:4px solid #80d;transition:3s ease;left:0.5%;top:1%;z-index:1;color:lavender; padding:1px;
- font-size:36px; border-radius:40px; overflow:auto; }
- </style> <div id="boxff">
- <center><img src=" x " style="width:28%;border:3px solid #ddf;border-radius:40px;
- margin:25px 0px 5px 0px;"><br> caption </center> </div></div>
- <div id="gg" class="g"> </style> <style type="text/css">
- #boxgg { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;
- background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:#ff3388; left:40%; top:22%; }
- #boxgg:hover {width:74%;height:95%;line-height:42px; font-size:44px; text-align:justify;
- background:#777;
- border:4px solid #80d;transition:3s ease;left:0.5%;top:1%;z-index:1;color:lavender;
- padding:1px; border-radius:40px; overflow:auto; }
- </style> <div id="boxgg">
- <center><img src=" x " style="width:28%;border:3px solid #ddf;border-radius:40px;
- margin:25px 0px 6px 0px;"><br> caption </center> </div></div>
- <div id="hh" class="g"> </style> <style type="text/css">
- #boxhh { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;
- background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:#ff3388; left:46%; top:22%; }
- #boxhh:hover {width:74%;height:95%;line-height:42px; font-size:44px; text-align:justify;
- background:#777;
- border:4px solid #80d;transition:3s ease;left:0.5%;top:1%;z-index:1;color:lavender;
- padding:1px; border-radius:40px; overflow:auto; }
- </style> <div id="boxhh">
- <center><img src=" x " style="width:28%;border:3px solid #ddf;border-radius:40px;
- margin:25px 0px 6px 0px;"><br> caption </center> </div></div>
- <div id="ii" class="g"> </style> <style type="text/css">
- #boxii { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;
- background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:#ff3388; left:52%; top:22%; }
- #boxii:hover {width:74%;height:95%;line-height:42px; font-size:44px; text-align:justify;
- background:#777;
- border:4px solid #80d;transition:3s ease;left:0.5%;top:1%;z-index:1;color:lavender;
- padding:1px; border-radius:40px; overflow:auto; }
- </style> <div id="boxii">
- <center><img src=" x " style="width:28%;border:3px solid #ddf;border-radius:40px;
- margin:25px 0px 6px 0px;"><br> caption </center> </div></div>
- <div id="jj" class="g"> </style> <style type="text/css">
- #boxjj { width:52px;height:24px;position:absolute;overflow:hidden;border-radius:5px;
- background:transparent;transition:3s ease;font-family:montez, times;line-height:29px; padding:1px;box-shadow:0px 0px 0px 1px #60d;color:#ff3388; left:58%; top:22%; }
- #boxjj:hover {width:74%;height:95%;line-height:42px; font-size:44px; text-align:justify;
- background:#777; opacity:1;
- border:4px solid #80d;transition:3s ease;left:0.5%;top:1%;z-index:1;color:lavender;
- padding:1px; border-radius:40px; overflow:auto; }
- </style> <div id="boxjj">
- <center><img src=" https://i.imgur.com/iSyFGxz.png " style="width:80%;border:3px solid #ddf;border-radius:40px; opacity:1.0;
- margin:25px 0px 2px 0px;"><br> Test image, for sizing </center> </div></div>
- </div> </div>
- <div id="7" class="genealogy"> </style> <style type="text/css">
- #box7 { width:9.35%;height:11%;left:90%;top:60%;position:fixed;overflow:hidden;
- transition:4s ease;padding:1px;background:#000;border:solid 4px #f03;
- border-radius:50px;font-family:allura, times;color:#fed;font-size:22px;
- line-height:44px;text-align:center; }
- #box7:hover { width:99%;height:98%;transition:1s ease;left:0.4%;top:0.5%;z-index:1;
- border-radius:20px;border:dotted 1px #c682f9;box-shadow:0px 0px 20px 300px #8e002e,inset 0px 0px 80px 1px #aa22dd;
- overflow:auto;color:transparent;padding:1px;font-size:20px;line-height:0px;}</style> <div id="box7"> Background <div>
- class="clouds"> </div>
- <img src=" https://i.imgur.com/1tffTYT.png " style="width:100%;margin-top:0px;">
- </div>
- <div style="margin-top:0px;opacity:0.99;font-size:34px;color:#0ff;font-family:satisfy, times;"> Template-Itazura 2/10/20
- </div></script></body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement