API tools faq
paste
tricksterkid

tumblr page // strawberry

tricksterkid
Aug 31st, 2020 (edited)
1,193
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARTHEMES ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <!--
  6. || CREDITS ||
  7.  
  8. Custom tooltip by Reinhard Schnetzinger >> https://codepen.io/reiinii1/pen/aPGXEa
  9. Links hover by Larry Geams Parangan >> https://codepen.io/larrygeams/pen/pdchG
  10. Fonts by Google
  11. Placeholders from Unsplash
  12. -->
  13.  
  14. <html>
  15.  
  16. <head>
  17.  
  18. <title>{Name} / strawberry</title> <!-- add page title here -->
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,400i,700,700i|Josefin+Sans:400,400i,700,700i" rel="stylesheet">
  23.  
  24. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  25.  
  26. <style type="text/css">
  27.  
  28. /* color settings for the sidebar links! */
  29.  
  30. #linkhome {border-left: 7px solid #fa96a2; color: #fa96a2;}
  31. #linkhome:after {background-color: #fa96a2;}
  32. #linkhome:hover {color: #f4f4f4; transition: 0.4s;}
  33.  
  34. #link1 {border-left: 7px solid #fba4a7; color: #fba4a7;}
  35. #link1:after {background-color: #fba4a7;}
  36. #link1:hover {color: #f4f4f4; transition: 0.4s;}
  37.  
  38. #link2 {border-left: 7px solid #fbaeaa; color: #fbaeaa;}
  39. #link2:after {background-color: #fbaeaa;}
  40. #link2:hover {color: #f4f4f4; transition: 0.4s;}
  41.  
  42. #link3 {border-left: 7px solid #fcbaae; color: #fcbaae;}
  43. #link3:after {background-color: #fcbaae;}
  44. #link3:hover {color: #f4f4f4; transition: 0.4s;}
  45.  
  46. #link4 {border-left: 7px solid #fdc6b3; color: #fdc6b3;}
  47. #link4:after {background-color: #fdc6b3;}
  48. #link4:hover {color: #f4f4f4; transition: 0.4s;}
  49.  
  50. #link5 {border-left: 7px solid #fed5b8; color: #fed5b8;}
  51. #link5:after {background-color: #fed5b8;}
  52. #link5:hover {color: #f4f4f4; transition: 0.4s;}
  53.  
  54. /* custom colors for selection */
  55.  
  56. ::-moz-selection {background: #fed5b8; color: #f0f0f0;}
  57. ::selection {background: #fed5b8; color: #f0f0f0;}
  58.  
  59. /* custom scrollbar */
  60.  
  61. ::-webkit-scrollbar-thumb {background: #fed5b8;}
  62. ::-webkit-scrollbar {background: #f0f0f0; width: 5px;}
  63.  
  64. * {margin:0; padding:0;}
  65.  
  66. /* tooltip css */
  67.  
  68. [data-tooltip] {
  69. position: relative;
  70. z-index: 10;
  71. }
  72.  
  73. [data-tooltip]:before,[data-tooltip]:after {
  74. bottom: 100%;
  75. left: 50%;
  76. opacity: 0;
  77. pointer-events: none;
  78. position: absolute;
  79. transition: 0.4s;
  80. }
  81.  
  82. [data-tooltip]:before {
  83. background-color: #fed5b8; /* tooltip background color */
  84. content: attr(data-tooltip);
  85. color: #f4f4f4; /* tooltip text color */
  86. font-size: 14px;
  87. padding: 10px 15px;
  88. max-width: 300px;
  89. min-width: 50px;
  90. text-align: center;
  91. text-transform: uppercase;
  92. transform: translate(-50%, -5px) scale(0.5);
  93. width: max-content;
  94. }
  95.  
  96. [data-tooltip]:hover:before, [data-tooltip]:hover:after {
  97. opacity: 1;
  98. transform: translate(-50%, 5px) scale(1);
  99. }
  100.  
  101. /* basic body css */
  102.  
  103. body {
  104. background: #f0f0f0; /* change background color */
  105. color: #979797; /* change text color */
  106. font-family: Josefin Sans; /* change font */
  107. font-size: 14px; /* change font size */
  108. text-align: justify;
  109. }
  110.  
  111. #container {
  112. background: #f0f0f0; /* change container background color */
  113. height: 500px;
  114. left: 50%;
  115. margin-bottom: 40px;
  116. overflow: auto;
  117. padding: 20px;
  118. position: absolute;
  119. top: 50%;
  120. transform: translate(-50%,-50%);
  121. width: 860px;
  122. -ms-overflow-style: none;
  123. }
  124.  
  125. #container::-webkit-scrollbar {
  126. display: none;
  127. }
  128.  
  129. /* text css */
  130.  
  131. h1 { /* page title */
  132. color: #fcbaae;
  133. font-family: Roboto Slab;
  134. font-size: 30px;
  135. margin-bottom: 10px;
  136. padding-bottom: 10px;
  137. text-align: right;
  138. }
  139.  
  140. h2 { /* linkbox titles */
  141. background-color: #fa96a2;
  142. color: #f4f4f4;
  143. display: block;
  144. font-family: Roboto Slab;
  145. font-size: 20px;
  146. padding: 5px;
  147. text-align: right;
  148. }
  149.  
  150. a {
  151. color: #fcbaae; /* link color */
  152. text-decoration: none;
  153. }
  154.  
  155. a:hover {
  156. color: #fa96a2; /* link hover color */
  157. transition: 0.4s;
  158. }
  159.  
  160. /* sidebar menu css */
  161.  
  162. #sidemenu {
  163. background-color: #f4f4f4; /* links background color */
  164. float: left;
  165. height: 500px;
  166. width: 200px;
  167. }
  168.  
  169. img {
  170. height: 200px;
  171. width: 200px;
  172. margin: 0;
  173. }
  174.  
  175. img:hover {
  176. cursor: cell;
  177. }
  178.  
  179. .sidebarlinks a {
  180. box-sizing: border-box;
  181. display: block;
  182. height: 50px;
  183. margin: 0;
  184. padding: 20px;
  185. position: relative;
  186. text-transform: uppercase;
  187. width: 100%;
  188. z-index: 2;
  189. }
  190.  
  191. .sidebarlinks a:after {
  192. content: "";
  193. height: 100%;
  194. left: -1;
  195. position: absolute;
  196. top: 0;
  197. transition: 0.4s;
  198. width: 0px;
  199. z-index: -1;
  200. }
  201.  
  202. .sidebarlinks a:hover:after {
  203. width: calc(100% + 1px);
  204. }
  205.  
  206. /* content css */
  207.  
  208. #contentcontainer { /* invisible container for linkboxes */
  209. float: right;
  210. height: 440px;
  211. overflow: auto;
  212. width: 650px;
  213. -ms-overflow-style: none;
  214. }
  215.  
  216. #contentcontainer::-webkit-scrollbar {
  217. display: none;
  218. }
  219.  
  220. .linkbox { /* individual linkboxes */
  221. background-color: #f4f4f4;
  222. float: left;
  223. height: 250px;
  224. margin: 0px 6px 15px 5px;
  225. overflow-y: auto;
  226. width: 205px;
  227. -ms-overflow-style: none;
  228. }
  229.  
  230. .linkbox::-webkit-scrollbar {
  231. display: none;
  232. }
  233.  
  234. .link { /* normal links */
  235. background-color: #f4f4f4;
  236. display: block;
  237. padding: 15px;
  238. text-transform: uppercase;
  239. }
  240.  
  241. .sublink { /* sublinks */
  242. background-color: #f4f4f4;
  243. display: block;
  244. font-style: italic;
  245. padding: 10px 10px 10px 30px;
  246. text-transform: lowercase;
  247. }
  248.  
  249. .link:hover, .sublink:hover {
  250. background-color: #f0f0f0;
  251. }
  252.  
  253. /* credit button css */
  254.  
  255. #credit {
  256. background-color: #fcbaae;
  257. color: #f4f4f4;
  258. bottom: 0;
  259. display: inline;
  260. margin: 8px;
  261. padding: 8px;
  262. position: fixed;
  263. right: 0;
  264. }
  265.  
  266. #credit:hover {
  267. background-color: #fa96a2;
  268. transition: 0.4s;
  269. }
  270.  
  271. </style>
  272.  
  273. </head>
  274.  
  275. <body>
  276.  
  277. <div id="container">
  278.  
  279. <!-- START SIDEBAR MENU -->
  280.  
  281. <div id="sidemenu">
  282.  
  283. <!-- link goes in "a href"
  284. hover text in "data-tooltip"
  285. image goes in "img src" -->
  286.  
  287. <a href="/" data-tooltip="et in arcadia ego">
  288. <img src="https://i.imgur.com/WSJ6om6.jpg">
  289. </a>
  290.  
  291. <div class="sidebarlinks">
  292. <a href="/" id="linkhome">home</a>
  293. </div>
  294.  
  295. <div class="sidebarlinks">
  296. <a href="/" id="link1">link 1</a>
  297. </div>
  298.  
  299. <div class="sidebarlinks">
  300. <a href="/" id="link2">link 2</a>
  301. </div>
  302.  
  303. <div class="sidebarlinks">
  304. <a href="/" id="link3">link 3</a>
  305. </div>
  306.  
  307. <div class="sidebarlinks">
  308. <a href="/" id="link4">link 4</a>
  309. </div>
  310.  
  311. <div class="sidebarlinks">
  312. <a href="/" id="link5">link 5</a>
  313. </div>
  314.  
  315. </div>
  316.  
  317. <!-- END SIDEBAR MENU -->
  318.  
  319. <h1>strawberry</h1> <!-- page title -->
  320.  
  321. <div id="contentcontainer">
  322.  
  323. <!-- remove "/tagged" if you want to link to pages instead of tags! -->
  324.  
  325. <!-- START LINKBOX -->
  326.  
  327. <div class="linkbox">
  328.  
  329. <h2>linkbox 1</h2>
  330.  
  331. <a class="link" href="/tagged/">link 1</a>
  332. <a class="link" href="/tagged/">link 2</a>
  333. <a class="sublink" href="/tagged/">sublink 1</a>
  334. <a class="sublink" href="/tagged/">sublink 2</a>
  335. <a class="sublink" href="/tagged/">sublink 3</a>
  336. <a class="link" href="/tagged/">link 3</a>
  337. <a class="link" href="/tagged/">link 4</a>
  338. <a class="link" href="/tagged/">link 5</a>
  339.  
  340. </div>
  341.  
  342. <!-- END LINKBOX -->
  343.  
  344. <!-- START LINKBOX -->
  345.  
  346. <div class="linkbox">
  347.  
  348. <h2>linkbox 2</h2>
  349.  
  350. <a class="link" href="/tagged/">link 1</a>
  351. <a class="link" href="/tagged/">link 2</a>
  352. <a class="link" href="/tagged/">link 3</a>
  353. <a class="link" href="/tagged/">link 4</a>
  354. <a class="sublink" href="/tagged/">sublink 1</a>
  355. <a class="sublink" href="/tagged/">sublink 2</a>
  356. <a class="sublink" href="/tagged/">sublink 3</a>
  357.  
  358. </div>
  359.  
  360. <!-- END LINKBOX -->
  361.  
  362. <!-- START LINKBOX -->
  363.  
  364. <div class="linkbox">
  365.  
  366. <h2>linkbox 3</h2>
  367.  
  368. <a class="link" href="/tagged/">link 1</a>
  369. <a class="link" href="/tagged/">link 2</a>
  370. <a class="link" href="/tagged/">link 3</a>
  371. <a class="link" href="/tagged/">link 4</a>
  372. <a class="link" href="/tagged/">link 5</a>
  373.  
  374. </div>
  375.  
  376. <!-- END LINKBOX -->
  377.  
  378. <!-- START LINKBOX -->
  379.  
  380. <div class="linkbox">
  381.  
  382. <h2>linkbox 4</h2>
  383.  
  384. <a class="link" href="/tagged/">link 1</a>
  385. <a class="link" href="/tagged/">link 2</a>
  386. <a class="link" href="/tagged/">link 3</a>
  387. <a class="link" href="/tagged/">link 4</a>
  388. <a class="sublink" href="/tagged/">sublink 1</a>
  389. <a class="link" href="/tagged/">link 5</a>
  390. <a class="link" href="/tagged/">link 6</a>
  391. <a class="link" href="/tagged/">link 7</a>
  392. <a class="link" href="/tagged/">link 8</a>
  393.  
  394. </div>
  395.  
  396. <!-- END LINKBOX -->
  397.  
  398. <!-- START LINKBOX -->
  399.  
  400. <div class="linkbox">
  401.  
  402. <h2>linkbox 5</h2>
  403.  
  404. <a class="link" href="/tagged/">link 1</a>
  405. <a class="sublink" href="/tagged/">sublink 1</a>
  406. <a class="sublink" href="/tagged/">sublink 2</a>
  407. <a class="link" href="/tagged/">link 2</a>
  408. <a class="link" href="/tagged/">link 3</a>
  409. <a class="link" href="/tagged/">link 4</a>
  410. <a class="sublink" href="/tagged/">sublink 3</a>
  411. <a class="sublink" href="/tagged/">sublink 4</a>
  412. <a class="sublink" href="/tagged/">sublink 5</a>
  413. <a class="sublink" href="/tagged/">sublink 6</a>
  414. <a class="link" href="/tagged/">link 5</a>
  415. <a class="link" href="/tagged/">link 6</a>
  416.  
  417. </div>
  418.  
  419. <!-- END LINKBOX -->
  420.  
  421. <!-- START LINKBOX -->
  422.  
  423. <div class="linkbox">
  424.  
  425. <h2>linkbox 6</h2>
  426.  
  427. <a class="link" href="/tagged/">link 1</a>
  428. <a class="link" href="/tagged/">link 2</a>
  429. <a class="link" href="/tagged/">link 3</a>
  430. <a class="link" href="/tagged/">link 4</a>
  431. <a class="sublink" href="/tagged/">sublink 1</a>
  432. <a class="sublink" href="/tagged/">sublink 2</a>
  433. <a class="sublink" href="/tagged/">sublink 3</a>
  434. <a class="sublink" href="/tagged/">sublink 4</a>
  435.  
  436. </div>
  437.  
  438. <!-- END LINKBOX -->
  439.  
  440. </div>
  441.  
  442. </div>
  443.  
  444. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  445.  
  446. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/"><i class="fa fa-anchor" style="font-size:15px"></i></a>
  447.  
  448. </body>
  449.  
  450. </html>
Advertisement
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!