API tools faq
paste
rapsodias

.artdeco nav.

rapsodias
Nov 4th, 2025 (edited)
813
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 50.20 KB | Source Code | 1 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>navigation</title>
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. <!---
  10.  
  11. ⠀⠀⠀⠀⠀⠀⠀⣠⠔⣲⠤⠤⠤⠤⠤⠤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  12. ⠀⠀⠀⠀⠀⢠⠞⣥⠋⠀⠀⠀⠀⠀⠀⠀⠀⠈⠑⠢⠤⣄⡀⠀⠀⠀⠀⠀⠀
  13. ⠀⠀⠀⠀⢠⠛⣸⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣆⠀⠀⠀⠀⠀
  14. ⠀⠀⣀⡴⠋⣰⠁⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀  ⠀⠀⠀⠀⠛⡄⠀⠀⠀⠀
  15. ⢠⠋⠁⠀⢰⠉⢸⢠⡇⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣷⠀⠀⠀⠀
  16. ⢸⠀⠀⠀⣼⠀⠀⠉⠀⠀⠀⠀⠀⠀⣆⣿⠀⠀⢀⠀⠀⠀ ⠀⠀⠀⣧⠀⠀⠀
  17. ⠀⠓⠤⠴⠤⢛⠜⠒⠒⢄⢀⠤⠤⣄⠉⡄⠀⢀⠀⡇⠀⠀⠀⠀⠀⠀⠓⣄⠀
  18. ⠀⠀⠀⠀⠀⢈⠀⠀⠀⠀⠁⠀⠀⠀⣶⣀⣀⣠⡦⠺⡀⠀⠀⠀⠀⠀  ⠀⠀⢆
  19. ⠀⠀⠀⠀⠀⠘⣆⠀⠀⠀⠀⠀⠀⠀⠿⠀⠀⢺⣐⠀⡗⢆⡀⠀⠀⠀  ⠀⠀⢸
  20. ⠀⠀⠀⠀⠀⠸⡘⢦⡀⠀⠀⢀⣀⡖⠷⠶⠒⣺⣀⠖⠁⠀⠑⠲⣆⣀⣀⡠⠊
  21. ⠀⠀⠀⠀⠀⠀⠙⠶⠷⠶⠖⢻⠁⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  22. ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢆⣀⣀⠚⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  23.  
  24.  
  25.                               .by raffaella.
  26.                                 @userraffa
  27.  
  28.  
  29. ═══════════════════════════════  ♦ ARTDECO ♦  ═══════════════════════════════════
  30.                               NAVIGATION PAGE
  31.  
  32.                            
  33.            
  34. --->
  35.  
  36. <!--- JQUERY --->
  37.  
  38. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  39.  
  40. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  41.  
  42.  
  43. <!--- GOOGLE FONTS --->
  44.  
  45. <link rel="preconnect" href="https://fonts.googleapis.com">
  46.  
  47. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  48.  
  49. <link href="https://fonts.googleapis.com/css2?family=Agbalumo&family=DM+Serif+Text:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Karla:ital,wght@0,200..800;1,200..800&family=Limelight&family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Playwrite+US+Modern:[email protected]&family=Tiny5&display=swap" rel="stylesheet">
  50.  
  51. <!--- ICONS --->
  52.  
  53. <!--- PHOSPHOR ICONS --->
  54.  
  55. <script src="https://unpkg.com/@phosphor-icons/[email protected]"></script>
  56.  
  57.  <link
  58.      rel="stylesheet"
  59.      type="text/css"
  60.      href="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/bold/style.css"
  61.    />
  62.  
  63. <!--- TOOLTIPS (@ATOMIKS) --->
  64.  
  65. <script src="https://unpkg.com/popper.js@1"></script>
  66.  
  67. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  68.  
  69. <!--- CSS --->
  70.  
  71. <style type="text/css">
  72.  
  73.  
  74.                         /*--- EDIT CSS HERE ---*/
  75.  
  76. :root {
  77.    
  78.     /*--- FONTS ---*/
  79.    
  80.     --Font: 'Karla';
  81.     --Title-Font:'Literata';
  82.     --Font-Size: 13px;
  83.     --Description-Font-Size: 12px;
  84.     --Title-Font-Size: 25px;
  85.    
  86. /*---
  87.  
  88. AVAILABLE FONTS:
  89.       - Agbalumo;
  90.       - DM Serif Text;
  91.       - Inter;
  92.       - Josefin Slab;
  93.       - Karla;
  94.       - Limelight;
  95.       - Literata;
  96.       - Nunito Sans.
  97.  
  98. ABOUT DESCRIPTION & TITLE:
  99. if you want to change the page title and/or the description, search (ctrl/cmmd + F) "navigation" and "lorem ipsum" respectively, and replace with the text you want
  100.  
  101. ---*/
  102.    
  103.    /*--- COLORS ---*/
  104.    
  105.    --Background: #ffdfe8;
  106.     --Container: #fff;
  107.     --Title: #ff7785;
  108.     --Text: #000;
  109.     --Link: #ff7785;
  110.     --Accent: #ffaeb3;
  111.     --Diamonds: #fff;
  112.     --Borders: #ff7785;
  113.  
  114.     /*--- COLORS (NIGHT MODE) ---*/
  115.    
  116.     --NightBackground: black;
  117.     --NightContainer: black;
  118.     --NightTitle: #ff7785;
  119.     --NightText: white;
  120.     --NightLink: #ff7785;
  121.     --NightAccent: #ffaeb3;
  122.     --NightDiamonds: black;
  123.     --NightBorders: #ff7785;
  124.        
  125. }
  126.  
  127. /*--- if you want a dark background, don't forget to search (ctrl/cmmd + F) and remove "filter: invert(100%);" otherwise Tumblr controls will be hard to see ---*/
  128.  
  129.                     /*--- END OF EDITING SECTION ---*/
  130.  
  131. /*--- search HOW TO EDIT THE HTML next and follow the instructions ---*/
  132.  
  133.  
  134. /*--- TEXT SELECTION ---*/
  135.  
  136. ::-moz-selection {
  137.   color: var(--Accent);
  138.   background: var(--Borders);
  139. }
  140.  
  141. ::selection {
  142.   color: var(--Accent);
  143.   background: var(--Borders);
  144. }
  145.  
  146. /*--- TOOLTIPS ---*/
  147.  
  148. .tippy-tooltip.custom-theme {
  149.     background-color: var(--Container);
  150.     border: 1px solid var(--Borders);
  151.     font-weight: bold;
  152.     color: var(--Link);
  153.     text-align: center;
  154.     font-family: var(--Font);
  155.     text-transform: uppercase;
  156.     padding: 0.3em 0.3em 0.3em 0.3em;
  157.     margin: 15px 0 0 0;
  158.     font-size: 10px;
  159.     border-radius: 0%;
  160. }
  161.  
  162. body.night .tippy-tooltip.custom-theme {
  163.     background-color: var(--NightContainer);
  164.     border: 1px solid var(--NightBorders);
  165.     color: var(--NightLink);
  166. }
  167.  
  168. /*--- SCROLLBAR ---*/
  169.  
  170. ::-webkit-scrollbar {
  171.    width: 2px;
  172.    height: 15px;
  173. }
  174.  
  175. ::-webkit-scrollbar {
  176.    background: var(--Background);
  177. }
  178.  
  179. ::-webkit-scrollbar-track {
  180.    border: none;
  181.    background: var(--Background);
  182. }
  183.  
  184. ::-webkit-scrollbar-thumb {
  185.    border: none;
  186.    background: var(--Borders);
  187.    min-height: 24px;
  188.    min-width: 24px;
  189. }
  190.  
  191. /*--- CONTROLS ---*/
  192.  
  193. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  194.     position: fixed !important;
  195.     transform: scale(0.7, 0.7);
  196.     filter: invert(100%);
  197. }
  198.  
  199. body.night .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  200.     filter: invert(0%);
  201. }
  202.  
  203. /*---- DAYNIGHT ---*/
  204.  
  205. .daynight {
  206.     position: fixed;
  207.     display: flex;
  208.     justify-content: center;
  209.     text-align: center;
  210.     bottom: 110px;
  211.     right: 20px;
  212.     width: 30px;
  213.     height: 30px;
  214.     border: 1px solid var(--Borders);
  215.     background: var(--Diamonds);
  216.     transform: rotate(45deg);
  217. }
  218.  
  219. body.night .daynight {
  220.     border: 1px solid var(--NightBorders);
  221.     background: var(--NightDiamonds);
  222. }
  223.  
  224. .daynight:hover {
  225.     cursor: pointer;
  226.     background-color: var(--Borders);
  227. }
  228.  
  229. body.night .daynight:hover {
  230.     background-color: var(--NightBorders);
  231. }
  232.  
  233. .daynight i {
  234.     padding: 6px;
  235.     font-size: 18px;
  236.     color: var(--Link);
  237.     transform: rotate(-45deg);
  238. }
  239.  
  240. body.night .daynight i {
  241.     color: var(--NightLink);
  242. }
  243.  
  244. body.night .daynight:hover i {
  245.     color: var(--NightAccent);
  246. }
  247.  
  248. .daynight:hover i {
  249.     color: var(--Accent);
  250. }
  251.  
  252. /*---- SCROLL TO TOP ---*/
  253.  
  254. .scrolltotop {
  255.     position: fixed;
  256.     display: flex;
  257.     justify-content: center;
  258.     text-align: center;
  259.     bottom: 65px;
  260.     right: 20px;
  261.     width: 30px;
  262.     height: 30px;
  263.     border: 1px solid var(--Borders);
  264.     background: var(--Diamonds);
  265.     transform: rotate(45deg);
  266. }
  267.  
  268. body.night .scrolltotop {
  269.     border: 1px solid var(--NightBorders);
  270.     background: var(--NightDiamonds);
  271. }
  272.  
  273. body.night .scrolltotop:hover {
  274.     background-color: var(--NightBorders);
  275. }
  276.  
  277. .scrolltotop:hover {
  278.     background-color: var(--Borders);
  279.    
  280. }
  281.  
  282. body.night .scrolltotop i {
  283.     color: var(--NightLink);
  284. }
  285.  
  286. .scrolltotop i {
  287.     padding: 6px;
  288.     font-size: 18px;
  289.     color: var(--Link);
  290.     transform: rotate(-45deg);
  291. }
  292.  
  293. .scrolltotop:hover i {
  294.     color: var(--Accent);
  295. }
  296.  
  297. body.night .scrolltotop:hover i {
  298.     color: var(--NightAccent);
  299. }
  300.  
  301. /*--- BASIC STYLING ---*/
  302.  
  303. body {
  304.     font-family: var(--Font);
  305.     font-size: var(--Font-Size);
  306.     color: var(--Text);
  307.     background: var(--Background);
  308.     line-height: 160%;
  309.     word-wrap: break-word;
  310.     letter-spacing: 0.04em;
  311.     margin: 0;
  312.     padding: 0;
  313. }
  314.  
  315. body.night {
  316.     color: var(--NightText);
  317.     background: var(--NightBackground);
  318. }
  319.  
  320. a {
  321.     color: var(--Link);
  322.     text-decoration: none;
  323.     -webkit-transition: all 0.3s;
  324.     -moz-transition: all 0.3s;
  325.     -ms-transition: all 0.3s;
  326.     -o-transition: all 0.3s;
  327.     transition: all 0.3s;
  328.     cursor: pointer;
  329. }
  330.  
  331. a:hover {
  332.     color: var(--Accent);
  333.     -webkit-transition: all 0.3s;
  334.     -moz-transition: all 0.3s;
  335.     -ms-transition: all 0.3s;
  336.     -o-transition: all 0.3s;
  337.     transition: all 0.3s;
  338. }
  339.  
  340. body.night a {
  341.     color: var(--NightLink);
  342.     text-decoration: none;
  343.     -webkit-transition: all 0.3s;
  344.     -moz-transition: all 0.3s;
  345.     -ms-transition: all 0.3s;
  346.     -o-transition: all 0.3s;
  347.     transition: all 0.3s;
  348.     cursor: pointer;
  349. }
  350.  
  351. body.night a:hover {
  352.     color: var(--NightAccent);
  353.     -webkit-transition: all 0.3s;
  354.     -moz-transition: all 0.3s;
  355.     -ms-transition: all 0.3s;
  356.     -o-transition: all 0.3s;
  357.     transition: all 0.3s;
  358. }
  359.  
  360. i {
  361.     color: var(--Link);
  362.     font-size: 20px;
  363. }
  364.  
  365. body.night i {
  366.     color: var(--NightLink);
  367.     font-size: 20px;
  368. }
  369.  
  370. h1, h2, h3, h4, h5, .title {
  371.     letter-spacing: 0.06em;
  372.     line-height: 125%;
  373. }
  374.  
  375. h1, h2, h3, h5 {
  376.     font-weight: bold;
  377. }
  378.  
  379. h4 {
  380.     color: var(--Link);
  381.     display: flex;
  382.     justify-content: center;
  383.     width: 100%;
  384.     font-weight: bold;
  385.     margin-left: 0;
  386.     margin-bottom: -0.5em;
  387.     margin-top: -0.5em;
  388. }
  389.  
  390. body.night h4 {
  391.     color: var(--NightLink);
  392. }
  393.  
  394. h1 {font-size: 1.5em;}
  395. h2 {font-size: 1.3em;}
  396. h3 {font-size: 1.25em;}
  397. h4 {font-size: 1.1em;}
  398. h5 {font-size: 1em;}
  399.  
  400. small {font-size: 0.9em;}
  401. big {font-size: 1.1em;}
  402.  
  403. hr {
  404.     height: 1px;
  405.     border: none;
  406.     box-shadow: none;
  407.     background-color: var(--Borders);
  408. }
  409.  
  410. body.night hr {
  411.     background-color: var(--NightBorders);
  412. }
  413.  
  414. pre {
  415.     line-height: inherit;
  416.     font-size: inherit;
  417.     white-space: pre-wrap;
  418.     white-space: -moz-pre-wrap;
  419.     white-space: -pre-wrap;
  420.     white-space: -o-pre-wrap;
  421.     word-wrap: break-word;
  422. }
  423.  
  424. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  425.  
  426. /*--- CONTENT ---*/
  427.  
  428. #content {
  429.     display: block;
  430.     min-height: 100vh;
  431.     position: relative;
  432.     margin: 35px;
  433.     background: var(--Background);
  434. }
  435.  
  436. body.night #content {
  437.     background: var(--NightBackground);
  438. }
  439.  
  440. /*--- HEADER ---*/
  441.  
  442. .header-container {
  443.     display: flex;
  444.     justify-content: center;
  445.     width: 100%
  446.     height: auto;
  447. }
  448.  
  449. #header {
  450.     display: inline-block;
  451.     text-align: center;
  452.     width: 350px;
  453.     height: 150px;
  454.     background: var(--Container);
  455.     position: absolute;
  456. }
  457.  
  458. body.night #header {
  459.     background: var(--NightContainer);
  460. }
  461.  
  462. /*--- HEADER IMAGE ---*/
  463.  
  464. .header-image-container {
  465.     display: flex;
  466.     justify-content: center;
  467.     width: 100px;
  468.     height: 100px;
  469.     margin-bottom:10px;
  470. }
  471.  
  472. .header-image-container img {
  473.     width: 100%;
  474.     height: 100%;
  475.     border-radius: 0%;
  476. }
  477.  
  478. /*--- HEADER TITLE ---*/
  479.  
  480. .title {
  481.     position: relative;
  482.     font-weight: bold;
  483.     text-align: center;
  484.     margin-top: -175px;
  485.     margin-left: 110px;
  486.     height: 30px;
  487.     font-family: var(--Title-Font);
  488.     color: var(--Link);
  489.     font-size: var(--Title-Font-Size);
  490. }
  491.  
  492. body.night .title {
  493.     color: var(--NightLink);
  494. }
  495.  
  496. /*--- HEADER DESCRIPTION ---*/
  497.  
  498. .description {
  499.     display: flex;
  500.     justify-content: center;
  501.     text-align: center;
  502.     height: 60px;
  503.     margin-top: -60px;
  504.     margin-left: 110px;
  505.     position: relative;
  506.     overflow: auto;
  507.     font-size: var(--Description-Font-Size);
  508. }
  509.  
  510. /*--- HEADER BUTTONS ---*/
  511.  
  512. .bottom-nav {
  513.   display: flex;
  514.   justify-content: center;
  515.   align-items: center;
  516.   position: relative;
  517.   width: 100%;
  518.   gap: 1.2em;
  519.   z-index:10;
  520.   margin-top:127px;
  521. }
  522.  
  523. #header .square-deco-container {
  524.     height: 100%;
  525. }
  526.  
  527. #header .square-deco-content {
  528.     padding:10px;
  529. }
  530.  
  531. /*--- TAG BOXES CONTAINER ---*/
  532.  
  533. #container {
  534.     display: inline-grid;
  535.     justify-content: center;
  536.     grid-template-columns: auto auto auto;
  537.     grid-template-rows: auto auto auto;
  538.     width: 100%;
  539.     top: 22%;
  540.     height: auto;
  541.     position: absolute;
  542.     column-gap: 3em;
  543.     row-gap: 1.5em;
  544.     padding-bottom: 35px;
  545. }
  546.  
  547. /*--- TAG BOXES ---*/
  548.  
  549. /*--- BIG BOXES ---*/
  550.  
  551. .bigbox {
  552.     position: relative;
  553.     display: flex;
  554.     flex-direction: column;
  555.     align-items: center;
  556.     justify-content: center;
  557.     width: auto;
  558.     height: auto;
  559. }
  560.  
  561. .bigbox .diamond {
  562.     margin-bottom: -23px;
  563.     color: var(--Borders);
  564. }
  565.  
  566. body.night .bigbox .diamond {
  567.     color: var(--NightBorders);
  568. }
  569.  
  570. /*--- BOXES ---*/
  571.  
  572. .box {
  573.     display: inline-block;
  574.     width: 300px;
  575.     position: relative;
  576.     z-index: 2;
  577.     height: 310px;
  578.     background: var(--Container);
  579. }
  580.  
  581. body.night .box {
  582.     background: var(--NightContainer);
  583. }
  584.  
  585. .box .square-deco-container {
  586.     width: 100%;
  587.     height: 100%;
  588. }
  589.  
  590. .box .square-deco-content {
  591.     padding: 10px;
  592. }
  593.  
  594. .boxcontent {
  595.     display: column;
  596.     width: 100%;
  597.     height: 100%;
  598.     justify-content: center;
  599.     overflow-y: auto;
  600. }
  601.  
  602. .linkwrap {
  603.     display: flex;
  604.     justify-content: center;
  605.     flex-wrap: wrap;
  606.     gap: 0.5em;
  607. }
  608.  
  609. .linkwrap a {
  610.     display: inline-block;
  611.     text-decoration: underline;
  612.     text-underline-offset: 5px;
  613.     padding:3px;
  614. }
  615.  
  616. body.night .linkwrap a {
  617.     text-decoration: underline;
  618.     text-underline-offset: 5px;
  619.     padding: 3px;
  620. }
  621.  
  622. .linkwrap a:hover {
  623.     background: var(--Link);
  624.     text-decoration: none;
  625. }
  626.  
  627.  
  628. body.night .linkwrap a:hover {
  629.     background: var(--NightLink);
  630. }
  631.  
  632. /*--- TAG BOXES TITLES & SUBTITLES ---*/
  633.  
  634. .tagtitle {
  635.    display: flex;
  636.     justify-content: center;
  637.     width: auto;
  638.     height: auto;
  639.     text-align: center;
  640.     font-weight: bold;
  641.     padding:8px;
  642.     font-size: calc(var(--Font-Size) + 6px);
  643.     color: var(--Accent);
  644.     font-family: var(--Title-Font);
  645. }
  646.  
  647. body.night .tagtitle {
  648.     color: var(--NightAccent);
  649. }
  650.  
  651. .tagtitle a {
  652.     text-decoration: underline;
  653.     text-underline-offset: 5px;
  654. }
  655.  
  656. .tagtitle a:hover {
  657.     background: var(--Link);
  658.     text-decoration: none;
  659. }
  660.  
  661. body.night .tagtitle a:hover {
  662.     background: var(--NightLink);
  663. }
  664.  
  665. .tagsub {
  666.     display: flex;
  667.     justify-content: center;
  668.     width: auto;
  669.     height: auto;
  670.     text-align: center;
  671.     font-weight: bold;
  672.     padding:8px;
  673.     font-size: calc(var(--Font-Size) + 3px);
  674.     color: var(--Accent);
  675.     font-family: var(--Title-Font);
  676. }
  677.  
  678. body.night {
  679.     color: var(--NightAccent);
  680. }
  681.  
  682. .tagsub a {
  683.     text-decoration: underline;
  684.     text-underline-offset: 5px;
  685. }
  686.  
  687. body.night .tagsub a {
  688.     text-decoration: underline;
  689. }
  690.  
  691. .tagtitle a:hover {
  692.     background: var(--Link);
  693.     text-decoration: none;
  694. }
  695.  
  696. body.night .tagtitle a:hover {
  697.     background: var(--NightLink);
  698. }
  699.  
  700. /*--- DECORATION ---*/
  701.  
  702. .square-deco-container {
  703.       display: grid;
  704.       position: relative;
  705.       flex-direction: column;
  706.       justify-content:center;
  707.       box-sizing: border-box;
  708.       width: auto;
  709.       height: auto;
  710.       grid-template-columns:
  711.         [outer-start]  5px
  712.         [mid-start]    5px
  713.         [inner-start]  2px
  714.         [gap-start]    1fr
  715.         [gap-end]      2px
  716.         [inner-end]    5px
  717.         [mid-end]      5px
  718.         [outer-end];
  719.  
  720.       grid-template-rows:
  721.         [outer-start]  5px
  722.         [mid-start]    5px
  723.         [inner-start]  2px
  724.         [gap-start]    1fr
  725.         [gap-end]      2px
  726.         [inner-end]    5px
  727.         [mid-end]      5px
  728.         [outer-end];
  729.  
  730. }
  731.    
  732. .square-deco-square-* {
  733.     background: inherit;
  734. }
  735.  
  736. .square-deco-content {
  737.     grid-column: inner-start / inner-end;
  738.     grid-row: inner-start / inner-end;
  739.     font-family: inherit;
  740.     font-size: inherit;
  741.     background: transparent;
  742.     z-index: 1;
  743.     box-sizing: border-box;
  744.     display: flex;
  745.     flex-direction: column;
  746.     justify-content: space-between;
  747.     height: 100%;
  748.     width: 100%;
  749. }
  750.  
  751. .square-deco-inner {    
  752.     grid-column: mid-start / mid-end;
  753.     grid-row: mid-start / mid-end;
  754.     border: 1px solid var(--Borders);
  755. }
  756.  
  757. .square-deco-square-left-top {
  758.     grid-column: outer-start / inner-start;
  759.     grid-row: outer-start / inner-start;
  760.     border: 1px solid var(--Borders);
  761. }
  762.  
  763. .square-deco-square-left-bottom {
  764.     grid-column: outer-start / inner-start;
  765.     grid-row: inner-end / outer-end;
  766.     border: 1px solid var(--Borders);
  767. }
  768.  
  769. .square-deco-square-right-top {
  770.     grid-column: inner-end / outer-end;
  771.     grid-row: outer-start / inner-start;
  772.     border: 1px solid var(--Borders);
  773. }
  774.  
  775. .square-deco-square-right-bottom {
  776.     grid-column: inner-end / outer-end;
  777.     grid-row: inner-end / outer-end;
  778.     border: 1px solid var(--Borders);
  779. }
  780.  
  781. .square-deco-tall {
  782.     grid-column: gap-start / gap-end;
  783.     grid-row: outer-start / outer-end;
  784.     border-top: 1px solid var(--Borders);
  785.     border-bottom: 1px solid var(--Borders);
  786. }
  787.  
  788. .square-deco-wide {
  789.     grid-column: outer-start / outer-end;
  790.     grid-row: gap-start / gap-end;
  791.     border-left: 1px solid var(--Borders);
  792.     border-right: 1px solid var(--Borders);
  793. }
  794.  
  795. /*---- DIAMONDS ----*/
  796.  
  797. .diamond {
  798.   display: inline-flex;
  799.   justify-content: center;
  800.   align-items: center;
  801.   position: relative;
  802.   transform: rotate(45deg);
  803.   border: 1px solid var(--Borders);
  804.   width: 40px;
  805.   height: 40px;
  806.   background: var(--Diamonds);
  807.   box-sizing: border-box;
  808.   transition: background 0.3s, border-color 0.3s;
  809.   cursor: pointer;
  810.   font-size: 14px;
  811.   font-weight: bold;
  812.   text-align: center;
  813.   z-index: 11;
  814. }
  815.  
  816. body.night .diamond {
  817.     border: 1px solid var(--NightBorders);
  818.     background: var(--NightDiamonds);
  819. }
  820.  
  821. .diamond:hover {
  822.     background-color: var(--Borders);
  823.     border-color: var(--Borders);
  824.     color: var(--Accent);
  825. }
  826.  
  827. body.night .diamond:hover {
  828.     background-color: var(--NightBorders);
  829.     border-color: var(--NightBorders);
  830.     color: var(--NightAccent);
  831. }
  832.  
  833. .diamond svg {
  834.   width: 18px !important;
  835.   height: 18px !important;
  836.   transform: rotate(-45deg);
  837. }
  838.  
  839. .diamond i {
  840.     font-size:20px;
  841.     color: var(--Link);
  842. }
  843.  
  844. body.night .diamond i {
  845.     color: var(--NightLink);
  846. }
  847.  
  848. body.night .diamond:hover i {
  849.     color: var(--NightAccent);
  850. }
  851.  
  852. .diamond:hover i {
  853.     color: var(--Accent);    
  854. }
  855.  
  856. body.night .diamond:hover i {
  857.     color: var(--NightAccent);    
  858. }
  859.  
  860. .diamond > * {
  861.   transform: rotate(-45deg);
  862. }
  863.  
  864. /*---- CREDIT ----*/
  865.  
  866. .credit {
  867.     position: fixed;
  868.     display: flex;
  869.     justify-content: center;
  870.     text-align: center;
  871.     bottom: 20px;
  872.     right: 20px;
  873.     width: 30px;
  874.     height: 30px;
  875.     border: 1px solid var(--Borders);
  876.     background: var(--Diamonds);
  877.     transform: rotate(45deg);
  878. }
  879.  
  880. body.night .credit {
  881.     background: var(--NightDiamonds);
  882.     border: 1px solid var(--NightBorders);    
  883. }
  884.  
  885. body.night .credit:hover {
  886.     background-color: var(--NightBorders);
  887. }
  888.  
  889. .credit:hover {
  890.     cursor: pointer;
  891.     background-color: var(--Borders);
  892. }
  893.  
  894. .credit:hover i {
  895.     color: var(--Accent);
  896. }
  897.  
  898. body.night .credit:hover i {
  899.     color: var(--NightAccent);
  900. }
  901.  
  902. body.night .credit i {
  903.     color: var(--Link);
  904. }
  905.  
  906. .credit i {
  907.     padding: 6px;
  908.     font-size: 18px;
  909.     color: var(--Link);
  910.     transform: rotate(-45deg);
  911. }
  912.  
  913. /*--- MEDIA QUERIES AND RESPONSIVENESS ---*/
  914.  
  915. /*-- for small desktop/tablet screens --*/
  916.  
  917. @media only screen and (max-width: 1400px) {
  918.  
  919. #container {
  920.     margin-top:70px;
  921. }
  922.  
  923. }
  924.  
  925. /*--- for mobile devices ---*/
  926.  
  927. @media only screen and (max-width: 720px) {
  928.    
  929. #content {
  930.     width: 80vw;
  931. }
  932.  
  933. #container {
  934.     display: flex;
  935.     flex-direction: column;
  936.     justify-content: center;
  937. }
  938.  
  939. }
  940.  
  941. /*--- END OF MEDIA QUERIES ---*/
  942.  
  943. </style>    
  944.  
  945. </head>
  946.  
  947. <body>
  948.  
  949. <!--✻✻✻✻✻✻  SEARCHBAR + CUSTOM SUGGESTIONS by @glenthemes  ✻✻✻✻✻✻-->
  950. <link href="https://search-dropdown.gitlab.io/i/2.1/style.css" rel="stylesheet">
  951. <script src="https://search-dropdown.gitlab.io/i/2.1/init.min.js"></script>
  952.  
  953. <style searchbar>
  954. :root {
  955.     /*----- GENERAL SETTINGS -----*/
  956.     --Search-Max-Width:200px;
  957.     --Search-Shadow-Strength:0%;
  958.    
  959.     /*----- SEARCHBAR -----*/
  960.     --Searchbar-Field-Border:var(--Borders);
  961.     --Searchbar-Field-Corner-Rounding:0px;
  962.     --Searchbar-Field-Background:var(--Container);
  963.     --Searchbar-Field-Padding:10px;
  964.     --Searchbar-Field-Font: var(--Font);
  965.     --Searchbar-Field-Font-Size:10px;
  966.     --Searchbar-Field-Placeholder-Color:var(--Borders);
  967.     --Searchbar-Field-Typing-Color:var(--Text);
  968.     --Searchbar-Spacing:9px;
  969.    
  970.     /*----- SEARCHBAR BUTTON -----*/
  971.     --Searchbar-Button-Border:var(--Borders);
  972.     --Searchbar-Button-Corner-Rounding:0px;
  973.     --Searchbar-Button-Background:var(--Borders);
  974.     --Searchbar-Button-Padding:10px;
  975.     --Searchbar-Button-Font:var(--Font);
  976.     --Searchbar-Button-Font-Size:8px;
  977.     --Searchbar-Button-Text-Color:var(--Container);
  978.    
  979. }
  980.  
  981. body.night .searchbar-field {
  982.     border: 1px solid var(--NightBorders);
  983.     background: var(--NightContainer);
  984.     color: var(--TextNight);
  985. }
  986.  
  987. body.night .searchbar-field-placeholder-color {
  988.     color: var(--NightBorders);
  989. }
  990.  
  991. .searchblock {
  992.     position:absolute;
  993.     margin-top:-38px;
  994.     margin-left:60px;
  995.     z-index:69;
  996. }
  997.  
  998. .searchbar-button:hover {
  999.     background:var(--Background);
  1000.     color:var(--Accent);
  1001. }
  1002.  
  1003. .searchbar-button i {
  1004.     color:var(--Container);
  1005.     font-size:15px;
  1006. }
  1007.  
  1008. body.night .searchbar-button:hover {
  1009.     background: var(--NightBackground);
  1010.     color: var(--NightAccent);
  1011. }
  1012.  
  1013. body.night .searchbar-button i {
  1014.     color: var(--NightContainer);
  1015.     font-size:15px;
  1016. }
  1017.    
  1018. </style>
  1019.  
  1020. <div id="content">
  1021.  
  1022.     <div class="header-container">
  1023.    
  1024.     <div id="header">
  1025.  
  1026.         <div class="square-deco-container">
  1027.        
  1028.             <div class="square-deco-square-left-top"></div>
  1029.             <div class="square-deco-square-left-bottom"></div>
  1030.             <div class="square-deco-square-right-top"></div>
  1031.             <div class="square-deco-square-right-bottom"></div>
  1032.             <div class="square-deco-tall"></div>
  1033.             <div class="square-deco-wide"></div>
  1034.             <div class="square-deco-inner"></div>
  1035.  
  1036.         <div class="square-deco-content">
  1037.  
  1038. <!--- SEARCHBAR BEGINS HERE --->
  1039.  
  1040. <form class="searchblock" action="/search" method="get">
  1041.    
  1042.     <input class="searchbar-field" type="text" name="q" value="{SearchQuery}" placeholder="SEARCH">
  1043.    
  1044.     <div class="searchbar-button">
  1045.         <button type="submit"><i class="ph ph-magnifying-glass"></i></button>
  1046.     </div>
  1047.  
  1048. </form>
  1049.  
  1050. <!--- SEARCHBAR ENDS HERE --->
  1051.    
  1052.             <div class="header-image-container"><img src="{PortraitURL-128}"></div>
  1053.  
  1054.             <div class="title">navigation</div>
  1055.        
  1056.             <div class="description">you can add basic html here. lorem ipsum dolor sit amet.</div>
  1057.                
  1058.         </div>
  1059.         </div>
  1060. </div>
  1061.  
  1062.         <div class="bottom-nav">
  1063.            
  1064.             <a href="/" title="return"><div class="diamond"><i class="ph ph-house-line"></i></div></a>
  1065.            
  1066.             <a href="/ask" title="message"><div class="diamond"><i class="ph ph-envelope"></i></div></a>
  1067.            
  1068.             <a href="/archive" title="archive"><div class="diamond"><i class="ph ph-archive"></i></div></a>
  1069.        
  1070.     </div>
  1071.    
  1072.     </div>
  1073.  
  1074. <div id="container">
  1075.  
  1076. <!---
  1077.  
  1078.                            HOW TO EDIT THE HTML
  1079.                            
  1080. ----------------------------------------------------------------------------------
  1081.                
  1082.    1. to add new boxes, copy the code below and paste it before the warning "END OF TAG BOXES";
  1083.                
  1084.    2. if you want to change the icon of each box, go to phosphoricons.com and search its catalogue for the icon names. next, replace the word "moon" in "ph ph-moon" with the name you want;
  1085.                
  1086.    3. just add the add the tag handle after "tagged/", but before ">tag</a>";
  1087.                
  1088.    4. and replace "tag" in ">tag</a>" with the tag name;
  1089.                
  1090.    5. EXAMPLE: "<a href="/tagged/taghandle">tag name</a>";
  1091.                
  1092.    6. you can add links to category titles and subtitles if you want. all you need to do is add "<a href="(insertlink)">link name</a>" before and after the tagtitle/tagsub class;
  1093.    
  1094.    - "<a href="(insertlink"> goes before "<div class="tagtitle/tagsub">
  1095.    
  1096.    - "</a>" goes after "</div>"
  1097.                
  1098.    7. EXAMPLES:
  1099.    - for a tag:
  1100.    "<a href="/tagged/taghandle"><div class="tagtitle">category</div></a>
  1101.                
  1102.    - for a custom page of your blog:
  1103.    "<a href="/custompagename"><div class="tagtitle">category</div></a>"
  1104.    
  1105.    - for an external link:
  1106.    "<a href="https://(link).com"><div class="tagtitle">category</div></a>"
  1107.                
  1108.    8. you can delete subtitles and/or category titles by deleting "<div class="tagtitle">category</div>" and "div class="tagsub">subtitle</div>" respectively;
  1109.                
  1110.    9. you can add new categories and subtitles inside a box by doing the opposite - as in, copying and pasting "<div class="tagtitle">category</div>" and "div class="tagsub">subtitle</div>" (always without the outer quotation marks (""), and that goes for every piece of code in this list);
  1111.    
  1112.    10. if you want a custom image in the header instead of your icon, just search "<img src="{PortraitURL-128}">" and replace {PortraitURL-128} with the image link . the image has to be hosted somewhere else, and that host site can be tumblr itself by including said image in a post and copying its image URL (through a right click).
  1113.  
  1114. ----------------------------------------------------------------------------------
  1115.  
  1116.                                COPY THIS:
  1117.  
  1118. <div class="bigbox">
  1119.  
  1120.        <div class="diamond"><i class="ph ph-moon"></i></div>
  1121.  
  1122.        <div class="box">
  1123.  
  1124.            <div class="square-deco-container">
  1125.        
  1126.                <div class="square-deco-square-left-top"></div>
  1127.                <div class="square-deco-square-left-bottom"></div>
  1128.                <div class="square-deco-square-right-top"></div>
  1129.                <div class="square-deco-square-right-bottom"></div>
  1130.                <div class="square-deco-tall"></div>
  1131.                <div class="square-deco-wide"></div>
  1132.                <div class="square-deco-inner"></div>
  1133.  
  1134.                <div class="square-deco-content">
  1135.  
  1136.                    <div class="boxcontent">
  1137.            
  1138.                        <div class="tagtitle">category</div>
  1139.                
  1140.                        <div class="tagsub">subtitle</div>
  1141.                
  1142.                            <div class="linkwrap">
  1143.                                <a href="/tagged/">tag</a>
  1144.                                <a href="/tagged/">tag</a>
  1145.                                <a href="/tagged/">tag</a>
  1146.                                <a href="/tagged/">tag</a>
  1147.                                <a href="/tagged/">tag</a>
  1148.                                <a href="/tagged/">tag</a>
  1149.                                <a href="/tagged/">tag</a>
  1150.                            </div>
  1151.                    
  1152.                        <div class="tagsub">subtitle</div>
  1153.                        
  1154.                        <div class="linkwrap">
  1155.                                <a href="/tagged/">tag</a>
  1156.                                <a href="/tagged/">tag</a>
  1157.                                <a href="/tagged/">tag</a>
  1158.                                <a href="/tagged/">tag</a>
  1159.                                <a href="/tagged/">tag</a>
  1160.                                <a href="/tagged/">tag</a>
  1161.                                <a href="/tagged/">tag</a>
  1162.                                <a href="/tagged/">tag</a>
  1163.                                <a href="/tagged/">tag</a>
  1164.                                <a href="/tagged/">tag</a>
  1165.                                <a href="/tagged/">tag</a>
  1166.                                <a href="/tagged/">tag</a>
  1167.                                <a href="/tagged/">tag</a>
  1168.                                <a href="/tagged/">tag</a>
  1169.                                <a href="/tagged/">tag</a>
  1170.                                <a href="/tagged/">tag</a>
  1171.                                <a href="/tagged/">tag</a>
  1172.                                <a href="/tagged/">tag</a>
  1173.                                <a href="/tagged/">tag</a>
  1174.                                <a href="/tagged/">tag</a>
  1175.                                <a href="/tagged/">tag</a>
  1176.                                <a href="/tagged/">tag</a>
  1177.                                <a href="/tagged/">tag</a>
  1178.                                <a href="/tagged/">tag</a>
  1179.                                <a href="/tagged/">tag</a>
  1180.                                <a href="/tagged/">tag</a>
  1181.                                <a href="/tagged/">tag</a>
  1182.                                <a href="/tagged/">tag</a>
  1183.                            </div>
  1184.                </div>
  1185.            </div>
  1186.        </div>
  1187.    </div>
  1188. </div>
  1189.  
  1190. --->
  1191.  
  1192. <div class="bigbox">
  1193.  
  1194.         <div class="diamond"><i class="ph ph-moon"></i></div>
  1195.  
  1196.         <div class="box">
  1197.  
  1198.             <div class="square-deco-container">
  1199.        
  1200.                 <div class="square-deco-square-left-top"></div>
  1201.                 <div class="square-deco-square-left-bottom"></div>
  1202.                 <div class="square-deco-square-right-top"></div>
  1203.                 <div class="square-deco-square-right-bottom"></div>
  1204.                 <div class="square-deco-tall"></div>
  1205.                 <div class="square-deco-wide"></div>
  1206.                 <div class="square-deco-inner"></div>
  1207.  
  1208.                 <div class="square-deco-content">
  1209.  
  1210.                     <div class="boxcontent">
  1211.            
  1212.                         <div class="tagtitle">category</div>
  1213.                
  1214.                         <div class="tagsub">subtitle</div>
  1215.                
  1216.                             <div class="linkwrap">
  1217.                                 <a href="/tagged/">tag</a>
  1218.                                 <a href="/tagged/">tag</a>
  1219.                                 <a href="/tagged/">tag</a>
  1220.                                 <a href="/tagged/">tag</a>
  1221.                                 <a href="/tagged/">tag</a>
  1222.                                 <a href="/tagged/">tag</a>
  1223.                                 <a href="/tagged/">tag</a>
  1224.                             </div>
  1225.                    
  1226.                         <div class="tagsub">subtitle</div>
  1227.                        
  1228.                         <div class="linkwrap">
  1229.                                 <a href="/tagged/">tag</a>
  1230.                                 <a href="/tagged/">tag</a>
  1231.                                 <a href="/tagged/">tag</a>
  1232.                                 <a href="/tagged/">tag</a>
  1233.                                 <a href="/tagged/">tag</a>
  1234.                                 <a href="/tagged/">tag</a>
  1235.                                 <a href="/tagged/">tag</a>
  1236.                                 <a href="/tagged/">tag</a>
  1237.                                 <a href="/tagged/">tag</a>
  1238.                                 <a href="/tagged/">tag</a>
  1239.                                 <a href="/tagged/">tag</a>
  1240.                                 <a href="/tagged/">tag</a>
  1241.                                 <a href="/tagged/">tag</a>
  1242.                                 <a href="/tagged/">tag</a>
  1243.                                 <a href="/tagged/">tag</a>
  1244.                                 <a href="/tagged/">tag</a>
  1245.                                 <a href="/tagged/">tag</a>
  1246.                                 <a href="/tagged/">tag</a>
  1247.                                 <a href="/tagged/">tag</a>
  1248.                                 <a href="/tagged/">tag</a>
  1249.                                 <a href="/tagged/">tag</a>
  1250.                                 <a href="/tagged/">tag</a>
  1251.                                 <a href="/tagged/">tag</a>
  1252.                                 <a href="/tagged/">tag</a>
  1253.                                 <a href="/tagged/">tag</a>
  1254.                                 <a href="/tagged/">tag</a>
  1255.                                 <a href="/tagged/">tag</a>
  1256.                                 <a href="/tagged/">tag</a>
  1257.                                 <a href="/tagged/">tag</a>
  1258.                                 <a href="/tagged/">tag</a>
  1259.                                 <a href="/tagged/">tag</a>
  1260.                                 <a href="/tagged/">tag</a>
  1261.                                 <a href="/tagged/">tag</a>
  1262.                                 <a href="/tagged/">tag</a>
  1263.                                 <a href="/tagged/">tag</a>
  1264.                             </div>
  1265.                 </div>
  1266.             </div>
  1267.         </div>
  1268.     </div>
  1269. </div>
  1270.  
  1271.  <div class="bigbox">
  1272.  
  1273.         <div class="diamond"><i class="ph ph-star"></i></div>
  1274.  
  1275.         <div class="box">
  1276.  
  1277.             <div class="square-deco-container">
  1278.        
  1279.                 <div class="square-deco-square-left-top"></div>
  1280.                 <div class="square-deco-square-left-bottom"></div>
  1281.                 <div class="square-deco-square-right-top"></div>
  1282.                 <div class="square-deco-square-right-bottom"></div>
  1283.                 <div class="square-deco-tall"></div>
  1284.                 <div class="square-deco-wide"></div>
  1285.                 <div class="square-deco-inner"></div>
  1286.  
  1287.                 <div class="square-deco-content">
  1288.  
  1289.                     <div class="boxcontent">
  1290.            
  1291.                         <div class="tagtitle">category</div>
  1292.                
  1293.                         <div class="tagsub">subtitle</div>
  1294.                
  1295.                             <div class="linkwrap">
  1296.                                 <a href="/tagged/">tag</a>
  1297.                                 <a href="/tagged/">tag</a>
  1298.                                 <a href="/tagged/">tag</a>
  1299.                                 <a href="/tagged/">tag</a>
  1300.                                 <a href="/tagged/">tag</a>
  1301.                                 <a href="/tagged/">tag</a>
  1302.                                 <a href="/tagged/">tag</a>
  1303.                             </div>
  1304.                    
  1305.                         <div class="tagsub">subtitle</div>
  1306.            
  1307.                         <div class="linkwrap">
  1308.                                 <a href="/tagged/">tag</a>
  1309.                                 <a href="/tagged/">tag</a>
  1310.                                 <a href="/tagged/">tag</a>
  1311.                                 <a href="/tagged/">tag</a>
  1312.                                 <a href="/tagged/">tag</a>
  1313.                                 <a href="/tagged/">tag</a>
  1314.                                 <a href="/tagged/">tag</a>
  1315.                                 <a href="/tagged/">tag</a>
  1316.                                 <a href="/tagged/">tag</a>
  1317.                                 <a href="/tagged/">tag</a>
  1318.                                 <a href="/tagged/">tag</a>
  1319.                                 <a href="/tagged/">tag</a>
  1320.                                 <a href="/tagged/">tag</a>
  1321.                                 <a href="/tagged/">tag</a>
  1322.                                 <a href="/tagged/">tag</a>
  1323.                                 <a href="/tagged/">tag</a>
  1324.                                 <a href="/tagged/">tag</a>
  1325.                                 <a href="/tagged/">tag</a>
  1326.                                 <a href="/tagged/">tag</a>
  1327.                                 <a href="/tagged/">tag</a>
  1328.                                 <a href="/tagged/">tag</a>
  1329.                                 <a href="/tagged/">tag</a>
  1330.                                 <a href="/tagged/">tag</a>
  1331.                                 <a href="/tagged/">tag</a>
  1332.                                 <a href="/tagged/">tag</a>
  1333.                                 <a href="/tagged/">tag</a>
  1334.                                 <a href="/tagged/">tag</a>
  1335.                                 <a href="/tagged/">tag</a>
  1336.                             </div>
  1337.                 </div>
  1338.             </div>
  1339.         </div>
  1340.     </div>
  1341. </div>
  1342.    
  1343.  <div class="bigbox">
  1344.  
  1345.         <div class="diamond"><i class="ph ph-star-and-crescent"></i></div>
  1346.  
  1347.         <div class="box">
  1348.  
  1349.             <div class="square-deco-container">
  1350.        
  1351.                 <div class="square-deco-square-left-top"></div>
  1352.                 <div class="square-deco-square-left-bottom"></div>
  1353.                 <div class="square-deco-square-right-top"></div>
  1354.                 <div class="square-deco-square-right-bottom"></div>
  1355.                 <div class="square-deco-tall"></div>
  1356.                 <div class="square-deco-wide"></div>
  1357.                 <div class="square-deco-inner"></div>
  1358.  
  1359.                 <div class="square-deco-content">
  1360.  
  1361.                     <div class="boxcontent">
  1362.            
  1363.                         <div class="tagtitle">category</div>
  1364.                
  1365.                         <div class="tagsub">subtitle</div>
  1366.                
  1367.                             <div class="linkwrap">
  1368.                                 <a href="/tagged/">tag</a>
  1369.                                 <a href="/tagged/">tag</a>
  1370.                                 <a href="/tagged/">tag</a>
  1371.                                 <a href="/tagged/">tag</a>
  1372.                                 <a href="/tagged/">tag</a>
  1373.                                 <a href="/tagged/">tag</a>
  1374.                                 <a href="/tagged/">tag</a>
  1375.                             </div>
  1376.                    
  1377.                         <div class="tagsub">subtitle</div>
  1378.            
  1379.                         <div class="linkwrap">
  1380.                                 <a href="/tagged/">tag</a>
  1381.                                 <a href="/tagged/">tag</a>
  1382.                                 <a href="/tagged/">tag</a>
  1383.                                 <a href="/tagged/">tag</a>
  1384.                                 <a href="/tagged/">tag</a>
  1385.                                 <a href="/tagged/">tag</a>
  1386.                                 <a href="/tagged/">tag</a>
  1387.                                 <a href="/tagged/">tag</a>
  1388.                                 <a href="/tagged/">tag</a>
  1389.                                 <a href="/tagged/">tag</a>
  1390.                                 <a href="/tagged/">tag</a>
  1391.                                 <a href="/tagged/">tag</a>
  1392.                                 <a href="/tagged/">tag</a>
  1393.                                 <a href="/tagged/">tag</a>
  1394.                                 <a href="/tagged/">tag</a>
  1395.                                 <a href="/tagged/">tag</a>
  1396.                                 <a href="/tagged/">tag</a>
  1397.                                 <a href="/tagged/">tag</a>
  1398.                                 <a href="/tagged/">tag</a>
  1399.                                 <a href="/tagged/">tag</a>
  1400.                                 <a href="/tagged/">tag</a>
  1401.                                 <a href="/tagged/">tag</a>
  1402.                                 <a href="/tagged/">tag</a>
  1403.                                 <a href="/tagged/">tag</a>
  1404.                                 <a href="/tagged/">tag</a>
  1405.                                 <a href="/tagged/">tag</a>
  1406.                                 <a href="/tagged/">tag</a>
  1407.                                 <a href="/tagged/">tag</a>
  1408.                     </div>
  1409.                 </div>
  1410.             </div>
  1411.         </div>
  1412.     </div>
  1413. </div>
  1414.  
  1415. <div class="bigbox">
  1416.  
  1417.         <div class="diamond"><i class="ph ph-star-four"></i></div>
  1418.  
  1419.         <div class="box">
  1420.  
  1421.             <div class="square-deco-container">
  1422.        
  1423.                 <div class="square-deco-square-left-top"></div>
  1424.                 <div class="square-deco-square-left-bottom"></div>
  1425.                 <div class="square-deco-square-right-top"></div>
  1426.                 <div class="square-deco-square-right-bottom"></div>
  1427.                 <div class="square-deco-tall"></div>
  1428.                 <div class="square-deco-wide"></div>
  1429.                 <div class="square-deco-inner"></div>
  1430.  
  1431.                 <div class="square-deco-content">
  1432.  
  1433.                     <div class="boxcontent">
  1434.            
  1435.                         <div class="tagtitle">category</div>
  1436.                
  1437.                         <div class="tagsub">subtitle</div>
  1438.                
  1439.                             <div class="linkwrap">
  1440.                                 <a href="/tagged/">tag</a>
  1441.                                 <a href="/tagged/">tag</a>
  1442.                                 <a href="/tagged/">tag</a>
  1443.                                 <a href="/tagged/">tag</a>
  1444.                                 <a href="/tagged/">tag</a>
  1445.                                 <a href="/tagged/">tag</a>
  1446.                                 <a href="/tagged/">tag</a>
  1447.                             </div>
  1448.                    
  1449.                         <div class="tagsub">subtitle</div>
  1450.                        
  1451.                         <div class="linkwrap">
  1452.                                 <a href="/tagged/">tag</a>
  1453.                                 <a href="/tagged/">tag</a>
  1454.                                 <a href="/tagged/">tag</a>
  1455.                                 <a href="/tagged/">tag</a>
  1456.                                 <a href="/tagged/">tag</a>
  1457.                                 <a href="/tagged/">tag</a>
  1458.                                 <a href="/tagged/">tag</a>
  1459.                                 <a href="/tagged/">tag</a>
  1460.                                 <a href="/tagged/">tag</a>
  1461.                                 <a href="/tagged/">tag</a>
  1462.                                 <a href="/tagged/">tag</a>
  1463.                                 <a href="/tagged/">tag</a>
  1464.                                 <a href="/tagged/">tag</a>
  1465.                                 <a href="/tagged/">tag</a>
  1466.                                 <a href="/tagged/">tag</a>
  1467.                                 <a href="/tagged/">tag</a>
  1468.                                 <a href="/tagged/">tag</a>
  1469.                                 <a href="/tagged/">tag</a>
  1470.                                 <a href="/tagged/">tag</a>
  1471.                                 <a href="/tagged/">tag</a>
  1472.                                 <a href="/tagged/">tag</a>
  1473.                                 <a href="/tagged/">tag</a>
  1474.                                 <a href="/tagged/">tag</a>
  1475.                                 <a href="/tagged/">tag</a>
  1476.                                 <a href="/tagged/">tag</a>
  1477.                                 <a href="/tagged/">tag</a>
  1478.                                 <a href="/tagged/">tag</a>
  1479.                                 <a href="/tagged/">tag</a>
  1480.                             </div>
  1481.                 </div>
  1482.             </div>
  1483.         </div>
  1484.     </div>
  1485. </div>
  1486.  
  1487. <div class="bigbox">
  1488.  
  1489.         <div class="diamond"><i class="ph ph-shooting-star"></i></div>
  1490.  
  1491.         <div class="box">
  1492.  
  1493.             <div class="square-deco-container">
  1494.        
  1495.                 <div class="square-deco-square-left-top"></div>
  1496.                 <div class="square-deco-square-left-bottom"></div>
  1497.                 <div class="square-deco-square-right-top"></div>
  1498.                 <div class="square-deco-square-right-bottom"></div>
  1499.                 <div class="square-deco-tall"></div>
  1500.                 <div class="square-deco-wide"></div>
  1501.                 <div class="square-deco-inner"></div>
  1502.  
  1503.                 <div class="square-deco-content">
  1504.  
  1505.                     <div class="boxcontent">
  1506.            
  1507.                         <div class="tagtitle">category</div>
  1508.                
  1509.                         <div class="tagsub">subtitle</div>
  1510.                
  1511.                             <div class="linkwrap">
  1512.                                 <a href="/tagged/">tag</a>
  1513.                                 <a href="/tagged/">tag</a>
  1514.                                 <a href="/tagged/">tag</a>
  1515.                                 <a href="/tagged/">tag</a>
  1516.                                 <a href="/tagged/">tag</a>
  1517.                                 <a href="/tagged/">tag</a>
  1518.                                 <a href="/tagged/">tag</a>
  1519.                             </div>
  1520.                    
  1521.                         <div class="tagsub">subtitle</div>
  1522.                        
  1523.                         <div class="linkwrap">
  1524.                                 <a href="/tagged/">tag</a>
  1525.                                 <a href="/tagged/">tag</a>
  1526.                                 <a href="/tagged/">tag</a>
  1527.                                 <a href="/tagged/">tag</a>
  1528.                                 <a href="/tagged/">tag</a>
  1529.                                 <a href="/tagged/">tag</a>
  1530.                                 <a href="/tagged/">tag</a>
  1531.                                 <a href="/tagged/">tag</a>
  1532.                                 <a href="/tagged/">tag</a>
  1533.                                 <a href="/tagged/">tag</a>
  1534.                                 <a href="/tagged/">tag</a>
  1535.                                 <a href="/tagged/">tag</a>
  1536.                                 <a href="/tagged/">tag</a>
  1537.                                 <a href="/tagged/">tag</a>
  1538.                                 <a href="/tagged/">tag</a>
  1539.                                 <a href="/tagged/">tag</a>
  1540.                                 <a href="/tagged/">tag</a>
  1541.                                 <a href="/tagged/">tag</a>
  1542.                                 <a href="/tagged/">tag</a>
  1543.                                 <a href="/tagged/">tag</a>
  1544.                                 <a href="/tagged/">tag</a>
  1545.                                 <a href="/tagged/">tag</a>
  1546.                                 <a href="/tagged/">tag</a>
  1547.                                 <a href="/tagged/">tag</a>
  1548.                                 <a href="/tagged/">tag</a>
  1549.                                 <a href="/tagged/">tag</a>
  1550.                                 <a href="/tagged/">tag</a>
  1551.                                 <a href="/tagged/">tag</a>
  1552.                             </div>
  1553.                 </div>
  1554.             </div>
  1555.         </div>
  1556.     </div>
  1557. </div>
  1558.  
  1559. <div class="bigbox">
  1560.  
  1561.         <div class="diamond"><i class="ph ph-sparkle"></i></div>
  1562.  
  1563.         <div class="box">
  1564.  
  1565.             <div class="square-deco-container">
  1566.        
  1567.                 <div class="square-deco-square-left-top"></div>
  1568.                 <div class="square-deco-square-left-bottom"></div>
  1569.                 <div class="square-deco-square-right-top"></div>
  1570.                 <div class="square-deco-square-right-bottom"></div>
  1571.                 <div class="square-deco-tall"></div>
  1572.                 <div class="square-deco-wide"></div>
  1573.                 <div class="square-deco-inner"></div>
  1574.  
  1575.                 <div class="square-deco-content">
  1576.  
  1577.                     <div class="boxcontent">
  1578.            
  1579.                         <div class="tagtitle">category</div>
  1580.                
  1581.                         <div class="tagsub">subtitle</div>
  1582.                
  1583.                             <div class="linkwrap">
  1584.                                 <a href="/tagged/">tag</a>
  1585.                                 <a href="/tagged/">tag</a>
  1586.                                 <a href="/tagged/">tag</a>
  1587.                                 <a href="/tagged/">tag</a>
  1588.                                 <a href="/tagged/">tag</a>
  1589.                                 <a href="/tagged/">tag</a>
  1590.                                 <a href="/tagged/">tag</a>
  1591.                             </div>
  1592.                    
  1593.                         <div class="tagsub">subtitle</div>
  1594.                        
  1595.                         <div class="linkwrap">
  1596.                                 <a href="/tagged/">tag</a>
  1597.                                 <a href="/tagged/">tag</a>
  1598.                                 <a href="/tagged/">tag</a>
  1599.                                 <a href="/tagged/">tag</a>
  1600.                                 <a href="/tagged/">tag</a>
  1601.                                 <a href="/tagged/">tag</a>
  1602.                                 <a href="/tagged/">tag</a>
  1603.                                 <a href="/tagged/">tag</a>
  1604.                                 <a href="/tagged/">tag</a>
  1605.                                 <a href="/tagged/">tag</a>
  1606.                                 <a href="/tagged/">tag</a>
  1607.                                 <a href="/tagged/">tag</a>
  1608.                                 <a href="/tagged/">tag</a>
  1609.                                 <a href="/tagged/">tag</a>
  1610.                                 <a href="/tagged/">tag</a>
  1611.                                 <a href="/tagged/">tag</a>
  1612.                                 <a href="/tagged/">tag</a>
  1613.                                 <a href="/tagged/">tag</a>
  1614.                                 <a href="/tagged/">tag</a>
  1615.                                 <a href="/tagged/">tag</a>
  1616.                                 <a href="/tagged/">tag</a>
  1617.                                 <a href="/tagged/">tag</a>
  1618.                                 <a href="/tagged/">tag</a>
  1619.                                 <a href="/tagged/">tag</a>
  1620.                                 <a href="/tagged/">tag</a>
  1621.                                 <a href="/tagged/">tag</a>
  1622.                                 <a href="/tagged/">tag</a>
  1623.                                 <a href="/tagged/">tag</a>
  1624.                             </div>
  1625.                 </div>
  1626.             </div>
  1627.         </div>
  1628.     </div>
  1629. </div>
  1630. <!--- END OF TAG BOXES --->
  1631.  
  1632. </div>  
  1633.  
  1634. </div>
  1635.  
  1636. <!--- SCROLL TO TOP --->
  1637.  
  1638. <a href="#" title="scroll to top" class="scrolltotop"><i class="ph ph-arrow-up"></i></a>
  1639.  
  1640. <!--- DAYNIGHT --->
  1641.  
  1642. <div class="daynight" title="change mode"><i class="ph ph-moon"></i></div>
  1643.  
  1644.  
  1645. <!--- CREDIT | DO NOT REMOVE --->
  1646.  
  1647. <a href="https://userraffa.tumblr.com" title="by userraffa" class="credit"><i class="ph ph-heart"></i></a>
  1648.  
  1649. <!--- SCRIPTS --->
  1650.  
  1651. <!--- TOOLTIPS (@ATOMIKS) --->
  1652.  
  1653. <script>
  1654.  
  1655.     tippy('[title]',
  1656.     {
  1657.         theme: 'custom',
  1658.         animation: 'fade',
  1659.         arrow: false,
  1660.         followCursor: true,
  1661.         delay: 100,
  1662.         placement: 'bottom',
  1663.         zIndex: 999893275999,
  1664.         maxWidth: 300,
  1665.  
  1666.         content(reference) {
  1667.             const title = reference.getAttribute('title');
  1668.             reference.removeAttribute('title');
  1669.             return title;
  1670.         },
  1671.     });
  1672.  
  1673. </script>
  1674.  
  1675. <script>
  1676.    
  1677. $(document).ready(function() {
  1678.   $(".scrolltotop").click(function(e) {
  1679.     e.preventDefault();
  1680.     $("html, body").animate({ scrollTop: 0 }, "slow");
  1681.     return false;
  1682.   });
  1683. });
  1684.  
  1685. </script>
  1686.  
  1687. <script>
  1688.    
  1689.     $(document).ready(function(){
  1690.       $('.daynight').click(function(){
  1691.          $('body').toggleClass('night');
  1692.          $('.daynight span').toggleClass('fa-sun');
  1693.       });
  1694.    });
  1695.    
  1696. </script>
  1697.  
  1698. </body>
  1699. </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!