API tools faq
paste
Advertisement
solocodes

Page: Filter [About Me Page]

solocodes
Jul 1st, 2022
1,217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.71 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!------------------------------------
  3. ____ ___ _ ___ ___ ___ ___ ___ ___
  4. / __|/ _ \| | / _ \ / __/ _ \| \| __/ __|
  5. \__ \ (_) | |_| (_) | | (_| (_) | |) | _|\__ \
  6. |___/\___/|____\___/ \___\___/|___/|___|___/
  7.  
  8.  
  9. **** PAGE: FILTER ****
  10.  
  11. ***** IMPORTANT *****
  12.  
  13. - As of 2022 : Please contact tumblr support for the use of Javascript on your blogs so you are able to use this page!
  14.  
  15. *************************
  16.  
  17. .Dᴇsɪɢɴᴇᴅ & Cᴏᴅᴇᴅ ʙʏ Sᴏʟᴏ Cᴏᴅᴇs > sᴏʟᴏᴄᴏᴅᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ | solocodes.net
  18. .Send an ask if you need any help for malfunction
  19. .Please look at the coding for labels on how to customize
  20. .Go to imgur to host an image for this page or any site of your choice
  21.  
  22. .Dᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴄʀᴇᴅɪᴛ
  23. .Dᴏ ɴᴏᴛ ʀᴇᴅɪsᴛɪʙᴜᴛᴇ
  24. .Dᴏ ɴᴏᴛ ᴄʟᴀɪᴍ ᴀs ʏᴏᴜʀ ᴏᴡɴ
  25. .Dᴏ ɴᴏᴛ ᴜsᴇ ᴀs ᴀ ʙᴀsᴇ ᴄᴏᴅᴇ
  26. .Dᴏ ɴᴏᴛ sᴛᴇᴀʟ
  27. .Nᴏ ʜᴇᴀᴠʏ ᴛᴡᴇᴀᴋɪɴɢ
  28. .Eᴅɪᴛ ᴍɪɴᴏʀ ᴛʜɪɴɢs ᴛᴏ ʏᴏᴜʀ ʟɪᴋɪɴɢ
  29.  
  30. ------------------------------------>
  31.  
  32.  
  33. <!DOCTYPE html>
  34. <head>
  35.  
  36. <title>Filter</title>
  37.  
  38. <link rel="shortcut icon" href="{Favicon}">
  39. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  40.  
  41.  
  42. <!--- GOOGLE MATERIAL & FONT AWESOME ICONS ---->
  43. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><script defer src="https://use.fontawesome.com/releases/v5.10.1/js/all.js"></script>
  44.  
  45. <!----- GOOGLE FONTS ----->
  46. <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Muli:400,600,700|Poppins:400,500,600,700|Open+Sans:400,600,700|Space+Mono:400,700|Ubuntu:400,700|Raleway:400,600,700|Playfair+Display|Rubik:400,700&display=swap" rel="stylesheet">
  47.  
  48.  
  49. <!--- TOOLTIPS --->
  50. <script type="text/javascript"
  51. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  52.  
  53. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  54. <script>
  55. (function($){
  56. $(document).ready(function(){
  57. $("[title]").style_my_tooltips();
  58. });
  59. })(jQuery);
  60. </script>
  61. <style>
  62.  
  63. /* COLOR THE PAGE HERE */
  64.  
  65. :root {
  66. --background:#ffcc33;
  67. --box:#479aff;
  68. --borders:#eee;
  69. --accent:#2bafc8;
  70. --text:#fff;
  71. --title:#fff;
  72. }
  73.  
  74.  
  75.  
  76. /* TOOLTIPS */
  77. #s-m-t-tooltip {
  78. display: block;
  79. margin: 15px;
  80. color:var(--box);
  81. background:var(--background);
  82. font:0.80em 'Poppins', sans-serif;
  83. font-weight:600;
  84. text-align:center;
  85. border-radius:3px;
  86. padding:4px;
  87. margin-left:25px;
  88. letter-spacing:1px;
  89. text-transform: uppercase;
  90. line-height:130%;
  91. min-width:40px;
  92. max-width:150px;
  93. z-index: 9999999999;}
  94.  
  95.  
  96. /* TUMBLR CONTROLS // HIDDEN // DO NOT TOUCH */
  97. iframe.tmblr-iframe {
  98. display:none;
  99. z-index:99999999!important;
  100. top:8px!important;
  101. right:50px!important;
  102. opacity:0;
  103. transition: all 0.3s ease 0s;
  104. filter:invert(1) contrast(150%);
  105. -webkit-filter:invert(1) contrast(150%);
  106. -o-filter:invert(1) contrast(150%);
  107. -moz-filter:invert(1) contrast(150%);
  108. -ms-filter:invert(1) contrast(150%);
  109. transform:scale(0.65);
  110. transform-origin:100% 0;
  111. -webkit-transform:scale(0.65);
  112. -webkit-transform-origin:100% 0;
  113. -o-transform:scale(0.65);
  114. -o-transform-origin:100% 0;
  115. -moz-transform:scale(0.65);
  116. -moz-transform-origin:100% 0;
  117. -ms-transform:scale(0.65);
  118. -ms-transform-origin:100% 0;}
  119.  
  120.  
  121. /* MAIN BODY/HTML CONTAINER */
  122. body, html {
  123. height: 100%;
  124. margin: 0;
  125. font-size:12px;
  126. font-family:{select:Body Font};
  127. overflow-x:hidden;
  128. background-image:url('{image:Background}');
  129. background-repeat:repeat;
  130. background-attachment:fixed;
  131. /*CHANGE THE MAIN BACKGROUND COLOR*/
  132. background-color:var(--background);}
  133.  
  134.  
  135.  
  136. /* ENTRY LINKS / BODY LINKS */
  137. a:link, a:active, a:visited {
  138. clear:both;
  139. z-index:2!Important;
  140. text-decoration:none;
  141. /*MAIN LINKS COLORS*/
  142. color:var(--text);}
  143.  
  144. a:hover {
  145. clear:both;
  146. z-index:99999999!Important;
  147. -webkit-transition: all .3s;
  148. -moz-transition: all .3s;
  149. -o-transition: all .3s;
  150. -ms-transition: all .3s;
  151. transition: all .3s;
  152. /*MAIN LINKS HOVER COLOR*/
  153. color:var(--text);}
  154.  
  155.  
  156. /* ABOUT ME BOX CONTAINER */
  157. .box {
  158. position:relative;
  159. width:870px;
  160. height:500px;
  161. border-radius:8px;
  162. background:var(--box);
  163. top:calc(50% - 250px);
  164. left:calc(49% - 450px);}
  165.  
  166.  
  167. /*FIRST BOX :: PROFILE CONTAINER*/
  168. .profile {
  169. position:fixed;
  170. width:290px;
  171. height:270px;
  172. border-radius:5px;
  173. border:1px solid var(--borders);
  174. background:var(--boxes);}
  175.  
  176. .pinfo {
  177. position:fixed;
  178. margin-top:200px;
  179. margin-left:350px;
  180. width:290px;
  181. text-align:left;
  182. letter-spacing:1px;
  183. font:0.85em 'Poppins', sans-serif;
  184. line-height:25px;
  185. color:var(--text);}
  186.  
  187.  
  188. .nav {
  189. position:fixed;
  190. z-index:9999999;
  191. width:800px;
  192. text-align:left;
  193. margin-top:130px;
  194. margin-left:0px;}
  195.  
  196. .nav a {
  197. z-index:9999999;
  198. font:1em 'Space Mono', sans-serif;
  199. text-decoration: none;
  200. text-align:center;
  201. padding:20px;
  202. width:100px;}
  203.  
  204.  
  205. /* PROFILE BOX TITLE LABELS */
  206. tt {
  207. text-transform:uppercase;
  208. text-align:left;
  209. letter-spacing:1.3px;
  210. font-weight:700;
  211. font:bold 0.90em 'Poppins', sans-serif;
  212. color:var(--text);}
  213.  
  214.  
  215. /*ICON AND TITLE BOX CONTAINER*/
  216. .titlebox {
  217. position:fixed;
  218. z-index:999999;
  219. margin-top:200px;
  220. margin-left:60px;
  221. width:250px;
  222. height:300px;
  223. border-top-left-radius:5px;
  224. border-top-right-radius:5px;
  225. background:var(--boxes);}
  226.  
  227.  
  228. /*ICON IMAGE*/
  229. .titlebox img {
  230. position:fixed;
  231. z-index:999999;
  232. background:#000;
  233. border-top-left-radius:5px;
  234. border-top-right-radius:5px;
  235. width:250px;
  236. height:300px;}
  237.  
  238.  
  239. /*BIO AREA : HELLO */
  240. .bio {
  241. position:fixed;
  242. z-index:9999999;
  243. width:200px;
  244. margin-left:350px;
  245. margin-top:365px;
  246. font-weight:600px;
  247. letter-spacing:2px;
  248. font:bold 0.85em 'Poppins', sans-serif;
  249. color:var(--text);}
  250.  
  251.  
  252. st {
  253. font:bold 1.8em 'Poppins', sans-serif;
  254. letter-spacing:1.2px;
  255. color:var(--text);
  256. text-transform:uppercase;}
  257.  
  258. /*ICON AND TITLE BOX :: MAIN LINKS/NAVIGATION */
  259. .main {
  260. position:fixed;
  261. margin-top:55px;
  262. margin-left:122px;
  263. text-align:left;
  264. width:190px;
  265. color:var(--text);}
  266.  
  267. .main a {
  268. width:auto;
  269. letter-spacing:1px;
  270. text-align:left;
  271. text-transform:uppercase;
  272. font-weight:600;
  273. font-size:0.80em;
  274. font-family:'Poppins', sans-serif;
  275. color:var(--text);}
  276.  
  277. /* MAIN PAGE TITLE */
  278. .title {
  279. position:fixed;
  280. z-index:999999;
  281. margin-left:10px;
  282. margin-top:-30px;
  283. width:870px;
  284. font-weight:700;
  285. text-transform:uppercase;
  286. text-align:left;
  287. letter-spacing:12px;
  288. font:bold 10em 'Poppins', sans-serif;
  289. color:var(--background);}
  290.  
  291.  
  292. /*SOCIAL MEDIA ICONS LINKS STYLING */
  293. .socials {
  294. position:fixed;
  295. margin-top:230px;
  296. margin-left:10px;}
  297.  
  298. .socials a {
  299. z-index:999999;
  300. display:block;
  301. padding:8px;
  302. font-size:1.6em;
  303. color:var(--text);}
  304.  
  305.  
  306.  
  307. /*NAVIGATION LINK BOX CONTAINER */
  308. .linkbox {
  309. position:fixed;
  310. z-index:99;
  311. margin-left:600px;
  312. margin-top:110px;
  313. width:230px;
  314. height:400px;
  315. border-radius:5px;
  316. background:var(--boxes);}
  317.  
  318.  
  319. /*--- CUSTOM NAVIGATION LINKS CONTAINER ---*/
  320. .links
  321. {position:fixed;
  322. width:150px;
  323. z-index:9999999999;
  324. text-align:left;
  325. color:var(--text);
  326. margin-left:45px;}
  327.  
  328. /*--- CUSTOM NAVIGATION LINKS STYLING ---*/
  329. .links a {
  330. z-index:9999999999;
  331. font:0.90em 'Poppins', sans-serif;
  332. font-weight:600;
  333. width:150px;
  334. letter-spacing:1px;
  335. text-transform:uppercase;
  336. text-align:left;
  337. color:var(--text);
  338. display:block;
  339. padding-left:66px;
  340. padding-top:56px;}
  341.  
  342. /*--- CUSTOM NAVIGATION LINKS LINK STYLE CONTAINER ---*/
  343. .links li {
  344. z-index:9999999999;
  345. margin-left:10px;
  346. float:left;
  347. display:block;}
  348.  
  349. /*--- CUSTOM NAVIGATION LINKS HOVER ---*/
  350. .links a:hover {
  351. z-index:9999999999;
  352. color:{color:Hover};
  353. -webkit-filter: blur(1px);
  354. filter: blur(1px);}
  355.  
  356. /*--- CUSTOM NAVIGATION LINKS SUBTITLE ---*/
  357. .links span {
  358. z-index:9999999999;
  359. font-style:italic;
  360. letter-spacing:1.3px;
  361. color:var(--text);
  362. font:0.88em 'Space Mono', sans-serif;}
  363.  
  364. /*--- CUSTOM NAVIGATION LINKS ICONS CONTANIER ---*/
  365. .links ic {
  366. position:absolute;
  367. width:100px;
  368. height:100px;
  369. float:left;}
  370.  
  371. /*--- CUSTOM NAVIGATION LINKS ICONS STYLE ---*/
  372. .links i {
  373. position:absolute;
  374. z-index:99999999999999999999999!important;
  375. margin-left:-10px;
  376. margin-top:48px;
  377. border-radius:100px;
  378. width:40px;
  379. height:40px;
  380. font-size:1.8em;
  381. text-align:center;
  382. line-height:40px;
  383. color:var(--background);
  384. border:5px solid var(--background);
  385. background:var(--box);}
  386.  
  387. /*--- CUSTOM LINKS NAVIGATION BORDER ---*/
  388. .bdd {
  389. position:fixed;
  390. width:1px;
  391. height:277px;
  392. margin-left:70px;
  393. margin-top:50px;
  394. background-color:var(--background);}
  395.  
  396. {CustomCSS}
  397. </style>
  398.  
  399. </head>
  400. <body>
  401.  
  402. <div class="box">
  403.  
  404. <div class="title">フィルター</div>
  405.  
  406. <div class="nav">
  407. <a href="/" title="link 1">↖ Link One</a>
  408. <a href="/" title="link 2">↖ Link Two</a>
  409. <a href="/" title="link 3">↖ Link Three</a>
  410. <a href="https://www.tumblr.com/{Name}/follow" title="Follow Me">↖ Follow</a>
  411. <a href="https://www.tumblr.com/dashboard" title="return to dashboard">↖ Dash</a>
  412. </div>
  413.  
  414. <div class="socials">
  415. <a href="/" title="twitter"><i class="fab fa-twitter"></i></a>
  416. <a href="/" title="facebook"><i class="fab fa-facebook"></i></a>
  417. <a href="/" title="instagram"><i class="fab fa-instagram"></i></a>
  418. <a href="/" title="snapchat"><i class="fab fa-snapchat"></i></a>
  419. <a href="/" title="last.fm"><i class="fab fa-lastfm"></i></a>
  420. <a href="/" title="pinterest"><i class="fab fa-pinterest"></i></a>
  421. <a href="/" title="spotify"><i class="fab fa-spotify"></i></a>
  422. </div>
  423.  
  424. <div class="titlebox">
  425. <div class="titleboximage"><img src="https://i.imgur.com/2zAI3s4.jpg"></div>
  426. </div>
  427.  
  428.  
  429. <div class="linkbox">
  430. <div class="bdd"></div>
  431. <div class="links" style="list-style-type:none;">
  432. <li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/" title="home"> Index <br><span> Return Home </span></a> </li>
  433. <li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/ask" title="ask"> Ask <br><span> Inbox Me </span></a> </li>
  434. <li> <ic> <i class="material-icons">timeline</i> </ic> <a href="/archive" title="archive"> Past <br><span> Archive </span></a> </li>
  435. <li> <ic> <i class="material-icons">timeline</i> </ic> <a href="https://solocodes.tumblr.com" title="theme credit"> Credit <br><span> Theme Credit </span></a> </li>
  436. </div>
  437. </div>
  438.  
  439.  
  440.  
  441. <div class="bio">
  442. <st>— ABOUT ME —</st> <br><br>
  443. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  444.  
  445.  
  446.  
  447. <div class="pinfo">
  448. <tt>Name:</tt>&nbsp;&nbsp; Park Jimin 박지민 <br>
  449. <tt>Bday:</tt> &nbsp;&nbsp; October 13th, 1995 <br>
  450. <tt>Zodiac:</tt> &nbsp;&nbsp; Libra <br>
  451. <tt>Residence:</tt>&nbsp;&nbsp; Busan, South Korea <br>
  452. <tt>Pronouns:</tt> &nbsp;&nbsp; He / Him <br>
  453. <tt>Hobbies:</tt> &nbsp;&nbsp; Sing, Rap, Dance <br>
  454. </div>
  455. </div>
  456.  
  457.  
  458.  
  459. </div>
  460. </body>
  461. </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!