API tools faq
paste
Advertisement
uchihaclan

MTFUJI ABOUT PAGE

uchihaclan
Oct 23rd, 2021 (edited)
1,020
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <meta charset="utf-8">
  3. <HTML>
  4.  
  5. <!--
  6. about code by @sadthemes on tumblr
  7.  
  8. PICK COLORS FROM IMAGE YOU USE :D
  9. https://imagecolorpicker.com/
  10.  
  11. HEX COLOR TO RGBA CONVERTER
  12. http://hex2rgba.devoth.com/
  13.  
  14. UPLOAD IMAGES HERE
  15. https://imgur.com/
  16.  
  17. TOOLTIP LINK
  18. <a href="/" data-toggle="tooltip" title="TITLE">LINK</a>
  19.  
  20. REGULAR LINK
  21. <a href="/">LINK</a>
  22.  
  23. -->
  24.  
  25. <!-- FAVICON -->
  26. <link rel="icon" href="https://i.imgur.com/gjJVigm.png" type="image/gif" >
  27.  
  28. <HEAD>
  29. <!-- GOOGLE FONTS HERE! -->
  30.  
  31.  
  32.  
  33. <!-- https://fonts.google.com/ -->
  34.  
  35. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  36.  
  37. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  38. <script>
  39. (function($){
  40. $(document).ready(function(){
  41. $("[title]").style_my_tooltips();
  42. });
  43. })(jQuery);
  44. </script>
  45.  
  46.  
  47. <!-- TITLE FOR THE PAGE -->
  48. <TITLE>INFO</TITLE>
  49.  
  50.  
  51.  
  52. <style type="text/css">
  53.  
  54. #s-m-t-tooltip {
  55. background: rgba(0, 0, 0, 0.5);
  56. color: #000;
  57. text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  58. z-index: 999999999;
  59. Text-transform: none;
  60. text-align: center;
  61. line-height: 130%;
  62. transition: all 0.3s ease-out;
  63. -o-transition: all 0.3s ease-out;
  64. -webkit-transition: all 0.3s ease-out;
  65. -moz-transition: all 0.3s ease-out;
  66. max-width: 430px;
  67. word-wrap: break-word;
  68. padding: 5px 5px 5px 5px;
  69. display: block;
  70. margin:-40px 7px -2px 20px;
  71. z-index: 999999999999;}
  72.  
  73.  
  74. body {
  75. /* FONT STYLE */
  76. font-family: consolas;
  77. font-size: 18px;
  78. /* PAGE BACKGROUND */
  79. background-color: #000;
  80. background-image: url("URL.PNG");
  81. /* if you want your background covered use this instead and remove the background-image line above and the '/ *'
  82.  
  83. background-image: url("URL.PNG") no-repeat center center fixed;
  84. -webkit-background-size: cover;
  85. -moz-background-size: cover;
  86. -o-background-size: cover;
  87. background-size: cover;
  88.  
  89. */
  90. margin: 0;
  91. line-height: 120%;
  92. -webkit-font-smoothing: antialiased;
  93. text-rendering: optimizeLegibility;
  94. -moz-osx-font-smoothing: grayscale;
  95. }
  96.  
  97. ::-webkit-scrollbar {
  98. width: 2px;
  99. }
  100.  
  101. ::-webkit-scrollbar-track {
  102. /* SCROLL BACKGROUND */
  103. background: #aaa;
  104. }
  105.  
  106. ::-webkit-scrollbar-thumb {
  107. /* SCROLL THUMB BACKGROUND */
  108. background: #000;
  109. }
  110.  
  111. /* WHEN TEXT IS HILIGHTED [gotta edit both to same color]*/
  112. ::-moz-selection {
  113. background: #444;
  114. color: #fff;
  115. }
  116. ::selection {
  117. background: #444;
  118. color: #fff;
  119. }
  120.  
  121. #main {
  122. /* STYLE FOR INFO AREA */
  123. border: 2px outset #ff0000;
  124. BACKGROUND: #aaa;
  125. text-align: justify;
  126. width: 500px;
  127. height: 200px;
  128. margin: 200px auto;
  129. overflow: auto;
  130. }
  131.  
  132. a {
  133. /* CONTENT LINK COLOR [NOT FOR HOVER LINKS] */
  134. color: #000;
  135. text-decoration: underline;
  136. transition: 0.3s;
  137. }
  138.  
  139. a:hover {
  140. /* HOVER OBVI LOL */
  141. color: #ff0000;
  142. transition: 0.3s;
  143. }
  144.  
  145. p {
  146. margin: 10px 0 0 0;
  147. }
  148.  
  149. h1 {
  150. /* STYLE FOR TITLE OF INFO [this might need some editing for whatever you'll make for the title] */
  151. background: #000;
  152. color: #000;
  153. text-shadow: -1px 0 #ff0000, 0 1px #ff0000, 1px 0 #ff0000, 0 -1px #ff0000;
  154. font-size: 28px;
  155. margin: 0px;
  156. text-align: center;
  157. font-weight: 700;
  158. padding: 20px 0 20px 0;
  159. text-transform: uppercase;
  160. }
  161.  
  162. h2 {
  163. /* SUBTITLE OF INFO AREA */
  164. color: #ff0000;
  165. font-size: 26px;
  166. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
  167. font-weight: normal;
  168. margin: 5px 0 5px 0;
  169. }
  170.  
  171. .desc {
  172. padding: 0 5px;
  173. }
  174.  
  175. /* this is ONLY the border for the right side of your image */
  176. .container img {
  177. border-right: 2px solid #ff0000;
  178. }
  179.  
  180. /* style for hover links container */
  181. .ah {
  182. background: #000;
  183. border: 2px solid #ff0000;
  184. border-left: 0; border-top: 0;
  185. padding: 5px;
  186. }
  187.  
  188. /* HOVER LINKS OVER IMAGE */
  189. .ah a {
  190. color: #000;
  191. font-size: 14px;
  192. text-shadow: -1px 0 #ff0000, 0 1px #ff0000, 1px 0 #ff0000, 0 -1px #ff0000;
  193. filter: drop-shadow(0 0 2px #9A483F);
  194. font-weight: 700;
  195. padding: 5px;
  196. text-decoration: none;
  197. }
  198.  
  199. /* HOVER LINKS WHEN HOVERED LOL */
  200. .ah a:hover {
  201. background-color: #ff0000;
  202. color: #000;
  203. filter: drop-shadow(0 0 0);
  204. }
  205.  
  206.  
  207. /* IGNORE ALL OF THE REST OF THE CODE */
  208.  
  209. .content {
  210. margin-left: 200px;
  211. }
  212.  
  213. .left {
  214. bottom: 0;
  215. left: 0;
  216. position:fixed;
  217. z-index: -1;
  218. }
  219.  
  220. .left img {
  221. max-width: 100%;
  222. max-height: 100vh;
  223. height: auto;
  224. }
  225.  
  226. .right {
  227. bottom: 0;
  228. right: 0;
  229. position:fixed;
  230. z-index: -1;
  231. }
  232. .right img {
  233. max-width: 100%;
  234. max-height: 100vh;
  235. height: auto;
  236.  
  237. }
  238.  
  239. .container {
  240. position: fixed;
  241.  
  242. }
  243.  
  244. .image {
  245. opacity: 1;
  246. display: block;
  247. width: 100%;
  248. height: auto;
  249. transition: .5s ease;
  250. backface-visibility: hidden;
  251.  
  252. }
  253.  
  254. .middle {
  255. transition: .5s ease;
  256. opacity: 0;
  257. position: absolute;
  258. bottom: 4px;
  259. width: 100%;
  260. text-align: center;
  261. }
  262.  
  263. .container:hover .image {
  264. opacity: 0.3;
  265. }
  266.  
  267. .container:hover .middle {
  268. opacity: 1;
  269. }
  270.  
  271. .text {
  272. font-family: inherit;
  273. }
  274.  
  275. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  276. -webkit-filter: opacity(0);
  277. filter: opacity(0);
  278. transition: all 0.3s ease-out;
  279. -o-transition: all 0.3s ease-out;
  280. -webkit-transition: all 0.3s ease-out;
  281. -moz-transition: all 0.3s ease-out;
  282. }
  283.  
  284. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  285. -webkit-filter: opacity(1);
  286. filter: opacity(1);
  287. transition: all 0.3s ease-out;
  288. -o-transition: all 0.3s ease-out;
  289. -webkit-transition: all 0.3s ease-out;
  290. -moz-transition: all 0.3s ease-out;
  291. }
  292.  
  293. </style>
  294.  
  295. </HEAD>
  296.  
  297. <body>
  298. <div id="main">
  299. <div class="sidenav">
  300. <div class="container">
  301.  
  302. <!--IMAGE HAS TO BE 200x200 pixels! -->
  303.  
  304. <img src="https://i.imgur.com/gWlV5AC.png">
  305.  
  306. <div class="middle">
  307. <div class="text">
  308. <div class="ah">
  309.  
  310. <!-- your links add as many as you want tbh -->
  311.  
  312. <a href="/" data-toggle="tooltip" title="TITLE">ONE</a>
  313. <a href="/">TWO</a>
  314. <a href="/" data-toggle="tooltip" title="TITLE">THREE</a>
  315. <a href="/">FOUR</a>
  316.  
  317. </div></div></div></div>
  318.  
  319.  
  320. </div>
  321.  
  322. <div class="content">
  323.  
  324. <!-- INFO TITLE -->
  325. <h1>TITLE</h1>
  326.  
  327. <div class="desc">
  328. <!-- <P>WORDS WORDS WORDS</P> TO BREAK INTO PARAGRAPHS -->
  329.  
  330. <p>name, age, pronouns. <a href="https://pastebin.com/R0qYrtdG">code here</a>
  331. </p>
  332.  
  333. <p>
  334. <!-- SUB TITLES -->
  335. <h2>YES!</h2>
  336.  
  337. words, and words, maybe another word!
  338. </P>
  339.  
  340. <p>
  341. <h2>NO!</h2>
  342.  
  343. people who are gross and like gross media.
  344.  
  345. </p>
  346.  
  347. <p>
  348. <h2>HUH</h2>
  349.  
  350. wuh?
  351.  
  352. </p>
  353.  
  354. <p>
  355. <!-- i normally put credit to whatever image i'm using here or whatever items you are using that's not yours. or extra links! -->
  356.  
  357. <a href="/" data-toggle="tooltip" title="CREDIT">&copy;</a>
  358.  
  359.  
  360. <!-- don't remove this link pls :3 -->
  361. <a href="https://sadthemes.tumblr.com/" data-toggle="tooltip" title="about code">&copy;</a>
  362.  
  363. </div></div>
  364.  
  365.  
  366. <!-- these are containers for images to float on the left/right side
  367. if you dont want them just remove the image! -->
  368. <div class="left">
  369.  
  370. <!-- use
  371.  
  372. <img src="URL.PNG">
  373.  
  374. -->
  375.  
  376. </div>
  377.  
  378. <div class="right">
  379.  
  380. <img src="https://i.imgur.com/1lGpaEt.png">
  381.  
  382. <!-- use
  383.  
  384. <img src="URL.PNG">
  385.  
  386. -->
  387.  
  388. </div>
  389. </body>
  390. </HTML>
  391.  
  392.  
  393.  
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!