API tools faq
paste
Sansaisbae

Herma Mora Commission

Sansaisbae
Jul 15th, 2021 (edited)
370
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.88 KB | None | 0 0
raw download clone embed print report
  1. @import url('https://fonts.googleapis.com/css2?family=Encode+Sans+SC&family=Fjalla+One&family=IM+Fell+English+SC&family=Playfair+Display+SC:wght@700&display=swap');
  2.  
  3.  
  4. body { background: #000; overflow: hidden; cursor: url('https://64.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png'), default; }
  5.  
  6. .texture { position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png"); opacity: .5;}
  7.  
  8. .pic { position: absolute; bottom: 10vh; left: 5vw; height: 60vh; width: 35vw; background: url('https://i.ibb.co/QMxP1gV/48ba74c94ccc12a2c8926faf335c0213fc43a139.jpg') no-repeat; background-size: cover; filter: contrast(120%); border: solid 10px #000;}
  9.  
  10. .title { position: absolute; bottom: 8vh; left: 5.5vw; font-family: 'Playfair Display SC', serif;; color: #fff; font-size: 6vw; pointer-events: none; z-index: 1;}
  11.  
  12. .tabb { z-index: 103; position: absolute; bottom: 4vh; left: 18vw; height: 5vh; width: 17vw; }
  13.  
  14.  
  15. .one { position: absolute; bottom: 3vh; left: 0vw; height: 3vh; width: 1.5vw; background: #fff; transition: all .7s ease-in-out; transform: rotate(50deg); }
  16.  
  17.  
  18. .two { position: absolute; bottom: 3vh; left: 3vw; height: 3vh; width: 1.5vw; background: #fff; transition: all .7s ease-in-out; transform: rotate(50deg);}
  19.  
  20. .three { position: absolute; bottom: 3vh; left: 6vw; height: 3vh; width: 1.5vw; background: #fff; transition: all .7s ease-in-out; transform: rotate(50deg);}
  21.  
  22. .four { position: absolute; bottom: 3vh; left: 9vw; height: 3vh; width: 1.5vw; background: #fff; transition: all .7s ease-in-out; transform: rotate(50deg);}
  23.  
  24.  
  25.  
  26.  
  27.  
  28. .info { z-index: 1; position: absolute; bottom: 20vh; left: 6vw; height: 47vh; width: 15vw; background: #000; padding: 1vh; overflow: auto; opacity: 0; font-family: 'Fjalla One', sans-serif;
  29. color: #fff; text-transform: uppercase; font-size: 1.5vh; line-height: 2vh; text-align: justify; border: solid 5px #fff;}
  30.  
  31. .ooc { z-index: 1; position: absolute; bottom: 20vh; left: 6vw; height: 10vh; width: 15vw; background: #000; padding: 1vh; overflow: auto; opacity: 0; font-family: 'Fjalla One', sans-serif;
  32. color: #fff; text-transform: uppercase; font-size: 1.5vh; line-height: 2vh; text-align: justify; border: solid 5px #fff;}
  33.  
  34.  
  35.  
  36. .info:target { z-index: 100; opacity: 1; transition: all .7s ease-in-out; }
  37.  
  38. U { text-decoration:none; text-transform: ; font-family: 'changa', sans-serif; color: #2A2D3F; font-weight: 900; }
  39.  
  40. h1 {text-decoration: none; text-transform: lowercase; text-align: ; padding-left: .5vw; padding-bottom: -1vh; font-family: 'IM Fell English SC', serif; font-weight: 400; background-color: #222; color: #fff; font-size: 4vh; line-height: 1.5vh; letter-spacing: .3vw; padding-left: 1.5vh; }
  41.  
  42.  
  43. ::-webkit-scrollbar { display: none;}
  44.  
  45. a { text-decoration: none; color: #333; transition: all .55s ease-in-out;} a:hover { text-shadow: 0px 0px 3px #333; cursor: url('https://64.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png'), default;}
  46.  
  47.  
  48. i { color: #A80E22;}
  49.  
  50. b { color: #3D424C; font-weight: 400;}
  51.  
  52. </style>
  53. <div class="texture"></div>
  54. <div class="pic"></div>
  55. <div class="title">title here</div>
  56. <div class="tabb"><a class='one' href='#one'></a>
  57. <a class='two' href='#two'></a>
  58. <a class='three' href='#three'></a>
  59. <a class='four' href='#four'></a>
  60. <a class='five' href='#five'></a></div>
  61. <div class="info" id="one">
  62. <h1>header here</h1>
  63. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  64. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  65. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  66. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  67. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  68. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  69. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  70. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  71. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  72. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  73. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  74. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  75. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  76. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  77. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  78. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  79. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  80. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  81. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  82. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  83. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  84. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  85. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  86. <div style="border-bottom: 1px solid; padding: 4px;"><u>stat</u><font style="float:right;">answer</font></div>
  87.  
  88. </div>
  89.  
  90. <div class="info" id="two">
  91. <h1>header here</h1>
  92. <a target="_blank" href="profile link" title="friend blurb here if you want."><img src="img link here" style="width:100px;padding:4px;background-color:#222;"></a>
  93. <a target="_blank" href="profile link" title="friend blurb here if you want."><img src="img link here" style="width:100px;padding:4px;background-color:#222;"></a>
  94. <a target="_blank" href="profile link" title="friend blurb here if you want."><img src="img link here" style="width:100px;padding:4px;background-color:#222;"></a>
  95. <a target="_blank" href="profile link" title="friend blurb here if you want."><img src="img link here" style="width:100px;padding:4px;background-color:#222;"></a>
  96. <a target="_blank" href="profile link" title="friend blurb here if you want."><img src="img link here" style="width:100px;padding:4px;background-color:#222;"></a>
  97. <a target="_blank" href="profile link" title="friend blurb here if you want."><img src="img link here" style="width:100px;padding:4px;background-color:#222;"></a>
  98. <a target="_blank" href="profile link" title="friend blurb here if you want."><img src="img link here" style="width:100px;padding:4px;background-color:#222;"></a>
  99. <a target="_blank" href="profile link" title="friend blurb here if you want."><img src="img link here" style="width:100px;padding:4px;background-color:#222;"></a>
  100.  
  101.  
  102. </div>
  103.  
  104. <div class="info" id="three">
  105. <h1>header here</h1>
  106. put whatever you want in here, the box scrolls.
  107.  
  108. </div>
  109.  
  110. <div class="info" id="four">
  111. <h1>header here</h1>
  112.  
  113. i. code made for <i>alt name</i> by <a target="_blank" href="https://roleplay.chat/profile.php?user=scoob">scoob</a> for their use only. if you'd like a code of your own, send them mail.
  114. <br>ii. <i>italics</i> <b>bold</b> <u>underline</u> <a title="">hover</a> <a target="_blank" href="">link</a>
  115.  
  116. </div>
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!