API tools faq
paste
Advertisement
marshallsmyth

Sonia 3/17/22

marshallsmyth
Mar 18th, 2022
1,102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><html lang="en"><head><title>Sonia</title><style>
  2. @import url(https://fonts.googleapis.com/css?family=Quintessential|Montez|Parisienne|Calligraffitti|Charm|Philosopher);
  3. ::-webkit-scrollbar-thumb:vertical { background:#4e004e;border-radius:0px;box-shadow: 0px 0px 0px #000; }
  4. ::-webkit-scrollbar-thumb:horizontal { background:#4e004e;border-radius:0px;box-shadow: 0px 0px 0px #000; }
  5. ::-webkit-scrollbar { width:7px; background:#8e008e;border-radius:0px; }        body {background:#308;}
  6.  
  7.    .front { position:fixed;background-size:100% 100%;background-image:url(https://i.imgur.com/wkXXhyz.jpg); top:0%;left:15%;
  8. background-repeat:no-repeat;width:70%;height:96.5%;transition:4s;opacity:0.06; }
  9.    .front:hover {transition:4s;opacity:0.9;z-index:-1;transition:4s;}
  10.  
  11.   .box1, .box2, .box3, .box4, .box5, .box6  {position:fixed;width:17%;height:7%;overflow:hidden;border-radius:40px;font-size:22px;letter-spacing:1px;color:lavender;
  12. transition:3s ease;background:#000;border:solid 2px #306;font-family:montez;text-align:center;line-height:39px;left:0%;}
  13.  
  14.   .box1 {top:5%;}  .box2 {top:17%;}  .box3 {top:29%;}  .box4 {top:41%;}  .box5 {top:53%;}  .box6 {top:65%;}
  15.  
  16.   .box1:hover, .box2:hover, .box3:hover, .box4:hover, .box5:hover, .box6:hover {width:99.1%;height:99.1%;top:0.02%;left:0;background:#308;
  17.  z-index:1;overflow:auto;border-radius:0;color:transparent;text-shadow:0 0 0 transparent;line-height:40px;}
  18.  
  19.   .table {width:94%;margin:44px 44px 66px 2px;font-family:montez;font-size:30px;text-align:left;text-indent:22px;
  20.  line-height:33px;color:lavender;word-spacing:0.5px;letter-spacing:0;}
  21.   .td {width:144px;height:88px;color:#000; border-right:4px ridge #000; border-top:4px ridge #000;padding-left:44px; }
  22.   .bars {width:100%;margin:122px 0 0 0.1px;border-bottom:20px ridge #2aa;
  23.  font-family:montez;line-height:33px;font-size:44px;color:#204;}
  24.  
  25.    .titles {margin-top:55px;text-align:center;font-family:montez;font-size:88px;color:#80f;text-shadow:-1px -2px 3px #000;opacity:1;}
  26.    .subtitles {font-size:33px;color:#000;text-align:center;margin:0px 0px 30px 0px;line-height:48px;}
  27.    .subtitles2 {margin:55px 0px 33px 0px;}
  28.  
  29.    .list {background:#004;list-style-type:square;margin:60px 33px -99px 33px;font-family:charm;font-size:33px;
  30. line-height:40px;word-spacing:-3px;color:#2dd;text-align:left;}
  31.    .captions {padding:15px 7px 1px 7px;font-family:montez;line-height:33px;font-size:33px;color:#204;text-align:center;}
  32.    .text {padding:88px 44px 17px 14px;font-family:charm;font-size:33px;font-style:italic;line-height:40px;
  33. word-spacing:1.7px;letter-spacing:-1.3px;color:#abe;text-indent:33px;text-align:left;font-size:33px;}
  34.    .textmargin {margin-top:-33px;}
  35.  
  36.    .center {display:block;margin-left:auto;margin-right:auto;margin-bottom:33px;
  37. border-radius:15px;box-shadow:0 0 33px 22px #204;border:5px solid #203;}
  38.  
  39.    .center2 {display:block;margin-left:auto;margin-right:auto;margin-bottom:33px;}
  40.  
  41.    .date {position:fixed;bottom:0.1%;%;left:14%;font-family:montez;font-size:17px;color:#fa1;}
  42.    .cssvalidator {position:fixed;bottom:0.7%;left:0.9%;z-index:99;opacity:1;}
  43.    .htmlvalidator {position:fixed;bottom:0.5%;left:7%;z-index:99;opacity:1;}
  44.  
  45. </style>
  46.  
  47. <div class="front"></div><div class="titles">Sonia</div>
  48.  
  49. <div class="box1">Sonia<img src="https://i.imgur.com/Ph56r2s.jpg" style="width:99%;" alt="fullpage" class="center2"></div>
  50.  
  51.  
  52.  <div class="box2">Adventures<div class="subtitles">Taklamakan's Adventures</div>
  53.  <div class="titles">Taklamakan</div><div class="text">Tak does many things. She is having an adventure as you are reading this.      </div></div>  
  54.  
  55.  
  56.  <div class="box3">Timeline<div class="subtitles">Life Events</div><div class="titles">Timeline</div>
  57.  <div class="bars">Life History Events</div><ul class="list">
  58.    <li> 2017 - ...  <p>
  59.   <li> 2018 - ...  <p>
  60.   <li> 2018 - ...  </ul>
  61.   <div class="bars">Taklamakan's Story</div><div class="captions">Tak in her human form, and most of us call her Tak for short<br>
  62.  <img src="https://i.imgur.com/RifjewQ.jpg?1" style="width:45%" alt="name" class="center"><br>
  63. <li> ...     </div></div></div>
  64.  
  65.  
  66.  <div class="box4">Images<div class="subtitles">Images<div class="titles">Taklamakan</div></div><div class="captions">
  67.  <img src="https://i.imgur.com/uFfBJ8A.png" style="width:21%;margin-top:133px" alt="photo" class="center">Taklamakan waspreparing for a ceremony to cleanse her thoughts. She gently teaches this to others in the family when she visits them, often just when needed the most. <p>
  68.  <img src="https://i.imgur.com/0EaL0Yr.png" style="width:30%;margin-top:88px" alt="photo" class="center">This photo is Tak being informed of the LHT Collider on the far side of Earth's moon. Particle landed on her finger, and Atom is landing near her ear. This was taken as Particle and Atom were telling Taklamakan that the building of their Ultra Large Transcendental Hadron Collider had begun, on the far side of the moon. <p>
  69.  <img src="https://i.imgur.com/ugt7Drp.png" style="width:33%;margin-top:88px" alt="photo" class="center">Tak has the full range of emotions, but she doesn't much express them. A thing not many know is she is also a highly trained psychologist specializing in various forms of PTSD other trauma induced mental disorders. <p>
  70.  <center><img src="https://i.imgur.com/5l9aRTx.png?2" style="width:25%;margin-top:88px" alt="photo" class="center"><This is Glimmer-Jewel, Tak's beloved Gossamer winged fairy daughter. <p>
  71. <img src="https://i.imgur.com/FNVoIDX.png" style="width:60%;margin-top:88px" alt="photo" class="center"> Tak's human form is super cute and sexy. <p>
  72.  <img src="https://i.imgur.com/dD4AFCb.png" style="width:30%;margin-top:88px" alt="photo" class="center"> Such a teaser! <p>
  73.  <img src="https://i.imgur.com/XYw0BSq.png" style="width:30%;margin-top:88px" alt="photo" class="center"> Pretty sure she wants another child. <p>
  74.  <img src="https://i.imgur.com/DTWO0Ft.png" style="width:30%;margin-top:88px" alt="photo" class="center"> She does, but only with a powerful succubus. <p>
  75.  <img src="x" style="width:30%;margin-top:88px" alt="photo" class="center"> ... <p>   </div></div>
  76.  
  77.  <div class="box5">Sonia5</div>
  78.  <div class="box6">Sonia6</div>
  79.  
  80.  
  81. <div class="date">Coded by Esther 3/18/22</div>
  82. <div class="cssvalidator"><img src="http://jigsaw.w3.org/css-validator/images/vcss" style="width:44px;" alt="css" /></div>
  83. <div class="htmlvalidator"><img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" style="width:44px;" alt="html" /></div> </html>
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!