API tools faq
paste
silbrigthemes

Passionsblume (Page #12)

silbrigthemes
Jun 29th, 2018
952
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. PASSIONSBLUME
  7. Page #12 by @silbrigthemes
  8.  
  9. A simple navigation page.
  10.  
  11. Features:
  12. Custom scrollbar, tooltips, text selection and mobile toolbar.
  13. Responsive layout.
  14. Gooey menu.
  15. Searchbar.
  16.  
  17. Rules:
  18. 1) Do not edit beyond recogniton.
  19. 2) Do not steal (parts of) the code.
  20. 3) Do not claim as your own.
  21. 4) Do not delete the credit.
  22. 5) Please like / reblog if using.
  23.  
  24. If you have any questions, need help or notice any oddities, please feel free to contact me:
  25.  
  26. silbrigthemes.tumblr.com/ask
  27. silbrigsupport.tumblr.com
  28.  
  29. Have fun with this page!
  30.  
  31. -->
  32.  
  33.  
  34. <head>
  35.  
  36. <meta charset="utf-16">
  37. <title>Navigation</title> <!-- Change title here. -->
  38. <link rel="shortcut icon" href="{Favicon}"/>
  39. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  40. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  41.  
  42. <!-- Necessary for the theme to be responsive. -->
  43. <meta name="viewport" content="width=device-width, initial-scale=1">
  44.  
  45. <!-- Tooltips Script -->
  46. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  47. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  48. <script>
  49. (function($){
  50. $(document).ready(function(){
  51. $("[title]").style_my_tooltips({
  52. tip_follows_cursor:true,
  53. tip_delay_time:200,
  54. tip_fade_speed:300
  55. }
  56. );
  57. });
  58. })(jQuery);
  59. </script>
  60.  
  61. <!-- Changes the toolbar color on mobile. -->
  62. <meta name="theme-color" content="#ac9cfb"/>
  63.  
  64. <!-- Necessary for the icon font to work. -->
  65. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  66.  
  67. <!-- Custom font: Open Sans -->
  68. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  69.  
  70. <style>
  71.  
  72. body{
  73. margin:0;
  74. font-size:1em; /* font size, 16px */
  75. font-family: "Open Sans", Verdana;
  76. overflow-x:hidden;
  77. background-color:white;
  78. }
  79.  
  80. /* Custom Scrollbar */
  81. ::-webkit-scrollbar{
  82. width:10px;
  83. background:linear-gradient(to bottom, #ff6ffa, #6fbbff);
  84. border:4px solid white;
  85. }
  86.  
  87. ::-webkit-scrollbar-thumb{
  88. background:linear-gradient(to bottom, #ff6ffa, #6fbbff);
  89. width:10px;
  90. border-radius:5px;
  91. }
  92.  
  93. /* Custom Text Selection */
  94. ::selection{
  95. background-color:#ac9cfb;
  96. color:white;
  97. }
  98.  
  99. ::-moz-selection{
  100. background-color:#ac9cfb;
  101. color:white;
  102. }
  103.  
  104. ::-o-selection{
  105. background-color:#ac9cfb;
  106. color:white;
  107. }
  108.  
  109. ::-webkit-selection{
  110. background-color:#ac9cfb;
  111. color:white;
  112. }
  113.  
  114. /* Custom Tooltips */
  115. #s-m-t-tooltip{
  116. max-width:300px;
  117. margin:15px;
  118. padding:0.5em;
  119. background:white; /* Tooltip Background Color */
  120. color:#6fbbff; /* Toolip Color */
  121. z-index:999999;
  122. font-size:12px;
  123. text-transform:uppercase;
  124. font-weight:300;
  125. }
  126.  
  127. #left{
  128. width:50vw;
  129. height:100vh;
  130. background-color:pink;
  131. background:linear-gradient(to bottom, #ff6ffa, #6fbbff);
  132. display:flex;
  133. align-items:center;
  134. justify-content:center;
  135. flex-direction:column;
  136. }
  137.  
  138. #circle{
  139. width:150px;
  140. height:150px;
  141. border-radius:50%;
  142. margin-top:200px;
  143. background-color:white;
  144. display:flex;
  145. align-items:center;
  146. justify-content:center;
  147. }
  148.  
  149. .sfm input {
  150. background-color: white;
  151. border-radius:16px;
  152. font-size: 12px;
  153. border: 0px;
  154. text-transform: uppercase;
  155. color: black;
  156. width:150px;
  157. text-align:center;
  158. letter-spacing: 1px;
  159. padding: 4px 8px;
  160. font-family: "Open Sans", Verdana;
  161. margin-top:200px;
  162. }
  163.  
  164. /* I have played with this by commenting out the .menu{}, and apparently it does not affect the styling on the customization page. */
  165. .menu {
  166. filter: url("#goo");
  167. }
  168.  
  169. /* These lines are very important as they are responsible for styling the whole menu. Without them, the icons just appear in one row. */
  170. .menu-item, .menu-open-button {
  171. background-color: pink; /* pink background of the menu*/
  172. background:linear-gradient(to bottom, #ff6ffa, #6fbbff);
  173. border-radius: 50%; /* minimum is 50% for a perfect circle */
  174. width: 80px; /* circle width */
  175. height: 80px; /* circle height */
  176. position: absolute;
  177. color: white; /* color of the icons */
  178. text-align: center; /* horizontal centering of icons */
  179. line-height: 80px; /* vertical centering of icons */
  180. transform: translate3d(0, 0, 0);
  181. transition: transform ease-out 200ms;
  182. /* transformation and duration of the transformation */
  183. }
  184.  
  185. /* These lines seemingly only affect the margin to the left. */
  186. .menu-open {
  187. display: none;
  188. }
  189.  
  190. /* Hamburger menu (≡) within the pink circle. */
  191. .hamburger {
  192. width: 25px; /* line width */
  193. height: 3px; /* line height */
  194. background: white; /* color of the lines (≡) */
  195. display: block;
  196. position: absolute;
  197. top: 50%; /* offset from top */
  198. left: 50%; /* offset from left */
  199. /* since the lines are 25px long and 3px high, the following lines are necessary to center-align the menu properly */
  200. margin-left: -12.5px;
  201. margin-top: -1.5px;
  202. /* transformation duration */
  203. transition: transform 200ms;
  204.  
  205. }
  206.  
  207. .hamburger-1 {
  208. transform: translate3d(0, -8px, 0);
  209. /* (-8px) is the offset to the second line*/
  210. }
  211.  
  212. .hamburger-2 {
  213. transform: translate3d(0, 0, 0);
  214. }
  215.  
  216. .hamburger-3 {
  217. transform: translate3d(0, 8px, 0);
  218. /* (8px) is the offset to the second line*/
  219. }
  220.  
  221. /* Upon clicking on the menu, the lines of the hamburger menu rotate and realign. The middle line is scaled down to 0, so that it disappeares. The top and bottom lines will be rotated so that they form an (x). */
  222. .menu-open:checked + .menu-open-button .hamburger-1 {
  223. transform: translate3d(0, 0, 0) rotate(45deg);
  224. }
  225. .menu-open:checked + .menu-open-button .hamburger-2 {
  226. transform: translate3d(0, 0, 0) scale(0, 1);
  227. }
  228. .menu-open:checked + .menu-open-button .hamburger-3 {
  229. transform: translate3d(0, 0, 0) rotate(-45deg);
  230. }
  231.  
  232. .menu {
  233. position: relative;
  234. font-size: 20px;
  235. text-align: left;
  236. border:2px solid rgba(255,255,255,0);
  237. left: -40px;
  238. top: -40px;
  239. transition: 0.5s;
  240. -moz-transition: 0.5s;
  241. -o-transition: 0.5s;
  242. -webkit-transition: 0.5s;
  243.  
  244. }
  245.  
  246. .menu-item:hover {
  247. background: white;
  248. color: #6fbbff;
  249. border:2px solid rgba(255,255,255,0);
  250. transition:0.5s;
  251. -moz-transition:0.5s;
  252. -o-transition:0.5s;
  253. -webkit-transition:0.5s;
  254.  
  255. }
  256.  
  257. /*
  258. duration for the items to be displayed
  259. the items are displayed after one another
  260. */
  261. .menu-item:nth-child(3) {
  262. transition-duration: 180ms;
  263. }
  264. .menu-item:nth-child(4) {
  265. transition-duration: 180ms;
  266. }
  267. .menu-item:nth-child(5) {
  268. transition-duration: 180ms;
  269. }
  270. .menu-item:nth-child(6) {
  271. transition-duration: 180ms;
  272. }
  273. .menu-item:nth-child(7) {
  274. transition-duration: 180ms;
  275. }
  276. .menu-item:nth-child(8) {
  277. transition-duration: 180ms;
  278. }
  279. .menu-item:nth-child(9) {
  280. transition-duration: 180ms;
  281. }
  282.  
  283. .menu-open-button {
  284. z-index: 2;
  285. transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  286. transition-duration: 400ms;
  287. transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  288. cursor: pointer;
  289. }
  290.  
  291. .menu-open-button:hover {
  292. transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  293. }
  294.  
  295. .menu-open:checked + .menu-open-button {
  296. transition-timing-function: linear;
  297. transition-duration: 200ms;
  298. transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  299. }
  300.  
  301. .menu-open:checked ~ .menu-item {
  302. transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  303. }
  304. .menu-open:checked ~ .menu-item:nth-child(3) {
  305. transition-duration: 180ms;
  306. transform: translate3d(0.08361px, -104.99997px, 0);
  307. }
  308. .menu-open:checked ~ .menu-item:nth-child(4) {
  309. transition-duration: 280ms;
  310. transform: translate3d(90.9466px, -52.47586px, 0);
  311. }
  312. .menu-open:checked ~ .menu-item:nth-child(5) {
  313. transition-duration: 380ms;
  314. transform: translate3d(90.9466px, 52.47586px, 0);
  315. }
  316. .menu-open:checked ~ .menu-item:nth-child(6) {
  317. transition-duration: 480ms;
  318. transform: translate3d(0.08361px, 104.99997px, 0);
  319. }
  320. .menu-open:checked ~ .menu-item:nth-child(7) {
  321. transition-duration: 580ms;
  322. transform: translate3d(-90.86291px, 52.62064px, 0);
  323. }
  324. .menu-open:checked ~ .menu-item:nth-child(8) {
  325. transition-duration: 680ms;
  326. transform: translate3d(-91.03006px, -52.33095px, 0);
  327. }
  328. .menu-open:checked ~ .menu-item:nth-child(9) {
  329. transition-duration: 780ms;
  330. transform: translate3d(-0.25084px, -104.9997px, 0);
  331. }
  332.  
  333. #right{
  334. width:50vw;
  335. height:101vh;
  336. margin-left:50vw;
  337. margin-top:-100vh;
  338. display:flex;
  339. align-items:center;
  340. justify-content:center;
  341. flex-direction:column;
  342. max-height:100vh;
  343. overflow-y:scroll;
  344. overflow-x:hidden;
  345. }
  346.  
  347. .section-title{
  348. width:80%;
  349. height:auto;
  350. background-color:lightblue;
  351. background:linear-gradient(to bottom, #ff6ffa, #6fbbff);
  352. padding:0.25em 0.5em;
  353. border-radius:1em;
  354. font-size:1.5em;
  355. color:white;
  356. text-align:center;
  357. }
  358.  
  359. .section{
  360. width:80%;
  361. height:auto;
  362. border-radius:1em;
  363. border:2px solid #f3f4f5;
  364. display:flex;
  365. align-items:space-evenly;
  366. justify-content:space-evenly;
  367. flex-wrap:wrap;
  368. margin-bottom:1em;
  369. margin-top:0.25em;
  370. padding:0.5em;
  371. }
  372.  
  373. a.sec-links{
  374. text-decoration:none;
  375. color:black;
  376. border-bottom:2px solid #ff6ffa;
  377. transition:0.5s;
  378. -moz-transition:0.5s;
  379. -o-transition:0.5s;
  380. -webkit-transition:0.5s;
  381. margin-right:0.5em;
  382. margin-bottom:0.5em;
  383. }
  384.  
  385. a.sec-links:hover{
  386. border-bottom:2px solid #6fbbff;
  387. transition:0.5s;
  388. -moz-transition:0.5s;
  389. -o-transition:0.5s;
  390. -webkit-transition:0.5s;
  391. }
  392.  
  393. /* Hides the tumblr app button. By @yeoli-thm */
  394. .tmblr-iframe--app-cta-button {
  395. display: none!important;
  396. }
  397.  
  398. /* Hides standard tumblr controls */
  399. body > iframe:first-child {
  400. display: none !important;
  401. }
  402.  
  403. /* Necessary for responsive layout */
  404. @media only screen and (max-width:800px){
  405. #left{
  406. width:100vw;
  407. }
  408.  
  409. #right{
  410. width:100vw;
  411. margin-top:0;
  412. margin-left:0;
  413. }
  414. }
  415.  
  416. </style>
  417. </head>
  418.  
  419. <body>
  420.  
  421. <div id="left">
  422.  
  423. <div id="circle">
  424. <!-- HAMBURGER MENU -->
  425. <!-- Hamburger menu within the white circle. -->
  426. <nav class="menu">
  427. <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  428. <label class="menu-open-button" for="menu-open">
  429. <span class="hamburger hamburger-1"></span>
  430. <span class="hamburger hamburger-2"></span>
  431. <span class="hamburger hamburger-3"></span>
  432. </label>
  433.  
  434. <!-- GOOEY MENU -->
  435. <!-- This is where the menu links start. -->
  436. <!-- Replace the '#' with the link of your choice. -->
  437. <!-- i.e.: <a href="#"></a> ==> <a href="/ask"></a> -->
  438. <!-- If you want to change the displayed icons, just change i.e.
  439. 'fa fa-heart' to 'fa fa-adjust' or any icon of your choice.
  440. -->
  441. <a href="/" title="index" class="menu-item"> <i class="fa fa-home"></i> </a>
  442. <a href="/ask" title="ask" class="menu-item"> <i class="fa fa-envelope"></i> </a>
  443. <a href="/archive" title="archive" class="menu-item"> <i class="fa fa-th-large"></i> </a>
  444. <a href="/" title="about" class="menu-item"> <i class="fa fa-user"></i> </a>
  445. <a href="/" title="custom link" class="menu-item"> <i class="fa fa-compass"></i> </a>
  446. <!-- Don't touch this link it's my credit and I expect from you to leave it this way! -->
  447. <a href="https://silbrigthemes.tumblr.com/" title="theme by @silbrigthemes" class="menu-item"> <i class="fa fa-code"></i> </a>
  448.  
  449. </nav>
  450. </div>
  451.  
  452. <form action="/search" method="get" class="sfm" name="theform">
  453. <input type="text" name="q" value="SEARCH"/>
  454. </form>
  455.  
  456. </div>
  457.  
  458. <div id="right">
  459. <!-- First Section -->
  460. <div class="section-title">Pride</div>
  461. <div class="section">
  462. <a class="sec-links" href="/" title="">
  463. <div class="element">bisexual</div>
  464. </a>
  465.  
  466. <a class="sec-links" href="/" title="">
  467. <div class="element">gay</div>
  468. </a>
  469.  
  470. <a class="sec-links" href="/" title="">
  471. <div class="element">genderfluid</div>
  472. </a>
  473.  
  474. <a class="sec-links" href="/" title="">
  475. <div class="element">lesbian</div>
  476. </a>
  477.  
  478. <a class="sec-links" href="/" title="">
  479. <div class="element">non-binary</div>
  480. </a>
  481.  
  482. <a class="sec-links" href="/" title="">
  483. <div class="element">pansexual</div>
  484. </a>
  485.  
  486. <a class="sec-links" href="/" title="">
  487. <div class="element">trans</div>
  488. </a>
  489.  
  490. <a class="sec-links" href="/" title="">
  491. <div class="element">third-gender</div>
  492. </a>
  493.  
  494. <a class="sec-links" href="/" title="">
  495. <div class="element">questioning</div>
  496. </a>
  497. </div>
  498.  
  499. <!-- Second Section -->
  500. <div class="section-title">Colors</div>
  501. <div class="section">
  502. <a class="sec-links" href="/" title="tagged: pink">
  503. <div class="element">pink</div>
  504. </a>
  505.  
  506. <a class="sec-links" href="/" title="tagged: red">
  507. <div class="element">red</div>
  508. </a>
  509.  
  510. <a class="sec-links" href="/" title="tagged: orange">
  511. <div class="element">orange</div>
  512. </a>
  513.  
  514. <a class="sec-links" href="/" title="tagged: yellow">
  515. <div class="element">yellow</div>
  516. </a>
  517.  
  518. <a class="sec-links" href="/" title="tagged: green">
  519. <div class="element">green</div>
  520. </a>
  521.  
  522. <a class="sec-links" href="/" title="tagged:turquoise">
  523. <div class="element">turquoise</div>
  524. </a>
  525.  
  526. <a class="sec-links" href="/" title="tagged: blue">
  527. <div class="element">blue</div>
  528. </a>
  529.  
  530. <a class="sec-links" href="/" title="tagged: purple">
  531. <div class="element">purple</div>
  532. </a>
  533. </div>
  534.  
  535. <!-- Third Section -->
  536. <div class="section-title">Section</div>
  537. <div class="section">
  538. <a class="sec-links" href="/" title="tagged: link">
  539. <div class="element">link</div>
  540. </a>
  541.  
  542. <a class="sec-links" href="/" title="tagged: link">
  543. <div class="element">link</div>
  544. </a>
  545.  
  546. <a class="sec-links" href="/" title="tagged: link">
  547. <div class="element">link</div>
  548. </a>
  549.  
  550. <a class="sec-links" href="/" title="tagged: link">
  551. <div class="element">link</div>
  552. </a>
  553.  
  554. <a class="sec-links" href="/" title="tagged: link">
  555. <div class="element">link</div>
  556. </a>
  557.  
  558. <a class="sec-links" href="/" title="tagged:link">
  559. <div class="element">link</div>
  560. </a>
  561.  
  562. <a class="sec-links" href="/" title="tagged: link">
  563. <div class="element">link</div>
  564. </a>
  565.  
  566. <a class="sec-links" href="/" title="tagged: link">
  567. <div class="element">link</div>
  568. </a>
  569. </div>
  570. </div>
  571.  
  572. </body>
  573. </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!