API tools faq
paste
longituddeonda

tags one / navagation page

longituddeonda
Feb 23rd, 2020 (edited)
4,018
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.85 KB | None | 0 0
raw download clone embed print report
  1. <!-----
  2.  
  3. ;; tags one ;;
  4.  
  5. navigation page by ebrothemes (originally posted by me on my main, @longtud-de-onda)
  6.  
  7. TERMS OF USE:
  8. - do not remove the credit.
  9. - do not repost/redistribute.
  10. - do not take parts of the code and use it as your own.
  11. - do not use as a base code.
  12.  
  13. COLORS:
  14. if you want to change the colors mess with the colors in the ::root section, there are further instructions there, including the code for the dark version.
  15.  
  16. INSTRUCTIONS:
  17. if you like exactly how it looks and just want to fill it in with your links and such, scroll all the way down to where it says 'start editing content' here. if you want to mess with other parts of the code, there are some instructions littered in the css
  18.  
  19. x camila
  20.  
  21. ----->
  22.  
  23.  
  24. <!DOCTYPE html>
  25. <html>
  26. <html lang="en-US">
  27. <head>
  28.  
  29. <title>navigation</title> <!--- edit what the page name looks like on the tab -->  
  30.  
  31. <link rel="shortcut icon" href="{Favicon}">
  32. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  33. <link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,700,700i&display=swap" rel="stylesheet">
  34.  
  35. <style type="text/css">
  36.  
  37. /*
  38. to change color scheme, edit colors here
  39. it works best if you only change the accent colors
  40. and don't mess around too much with the others
  41. unless you know what you're doing*/
  42.  
  43. :root {
  44.   --background: #efefef;
  45.   --white: #fff;
  46.   --text: #181923;
  47.   --blueaccent: #1b929f;
  48.   --pinkaccent: #db93b0;
  49.   --yellowaccent: #ffc857;
  50.   --cardglow: #d6d6d6;
  51. }
  52.  
  53. /*comment out previous colors and uncomment this root for dark scheme*/
  54.  
  55. /*--- Dark Scheme*/
  56. /*:root {
  57.   --background: #181923;
  58.   --white: #000;
  59.   --text: #d1d1d1;
  60.   --blueaccent: #537A5A;
  61.   --pinkaccent: #582630;
  62.   --yellowaccent: #C17019;
  63.   --cardglow: #111111
  64. }  */
  65.  
  66. body > iframe:first-child { display: none !important; }
  67.  
  68. ::-webkit-scrollbar {
  69.     width: 12px;
  70. }
  71.  
  72. ::-webkit-scrollbar-track {
  73.     border: 5px solid var(--white);
  74.     background-color: var(--background);
  75.    
  76. }
  77.  
  78. ::-webkit-scrollbar-thumb {
  79.    border: 2px solid var(--white);
  80.    border-radius: 7px;
  81.    background-color: var(--yellowaccent);
  82.    /* change scrollbar color here */
  83. }
  84.  
  85.  
  86. body {
  87.     background: var(--background);
  88. }
  89.  
  90. a {
  91.     color: var(--text);
  92.     text-decoration: none
  93.    
  94. }
  95.  
  96. a:hover {
  97.     color: var(--text);
  98. }
  99.    
  100. .sidenav {
  101.     height: 100%;
  102.     width: 160px;
  103.     position: fixed;
  104.     z-index: 1;
  105.     top: 0;
  106.     left: 0;
  107.     background-color:var(--white);
  108.     overflow: hidden;
  109.     padding-top: 30px;
  110. }
  111.  
  112. .avatar {
  113.     height: 100px;
  114.     width: 100px;
  115.     margin: auto;
  116.     margin-bottom: 30px;
  117.     border-radius: 10px;
  118. }
  119.  
  120. .vl {
  121.     width: calc(50% - 1px);
  122.     border-right: solid 2px var(--yellowaccent);
  123.     /* change vertical line color here*/
  124.     margin-bottom: 10px;
  125. }
  126.  
  127. .navlink {
  128.     width: max-content;
  129.     margin: auto;
  130.     padding-left: 2px;
  131.     padding-right: 2px;
  132.     text-align: center;
  133.     text-transform: lowercase;
  134.     margin-bottom: 10px;
  135.     color: var(--text);
  136.     font: 15px "Nunito", sans-serif;
  137.     text-decoration: none;
  138.     background-position-y: -0%;
  139.     background-image: linear-gradient(var(--white) 50%, var(--pinkaccent) 50%);
  140.     /* change what color the sidebar link highlights are by changing the word 'pinkaccent' to either another color name from the root menu or by completely removing var() and replacing with an html code*/
  141.     transition: background 500ms ease;
  142.     background-size: auto 200%;
  143. }
  144.  
  145. .navlink:hover {
  146.   background-position-y: 100%;
  147. }
  148.  
  149. .main {
  150.     margin-left: 160px;
  151.     padding: 30px;
  152. }
  153.  
  154. .content {
  155.     height: 500px;
  156.     width: 840px;
  157.     margin: auto;
  158. }
  159.  
  160. .card {
  161.     height: 190px;
  162.     width: 250px;
  163.     margin: 15px;
  164.     border-radius: 10px;
  165.     box-shadow: 0 0 5px 0 var(--cardglow);
  166.     float: left;
  167.     overflow: hidden;
  168. }
  169.  
  170. .upper {
  171.     height: 140px;
  172.     width: 250px;
  173.     position: relative;
  174. }
  175.  
  176. .info {
  177.     height: 90px;
  178.     width: 200px;
  179.     background-color: var(--white);
  180.     position: absolute;
  181.     margin: 15px;
  182.     border-radius: 5px;
  183.     border: 10px var(--white) solid;
  184.     opacity:0;
  185.     transition-duration: 800ms;
  186.     overflow: auto;
  187. }
  188.  
  189. .card:hover .info {opacity:1;}
  190.  
  191. .ilink {
  192.     height: max-content;
  193.     padding: 3px 8px;
  194.     width: max-content;
  195.     max-width: 150px;
  196.     border-radius: 5px;
  197.     color: var(--text);
  198.     font: 15px "Nunito", sans-serif;
  199.     transition: 300ms;
  200.    
  201. }
  202.  
  203. .ilink:nth-child(3n+3) {  
  204.   background-color: var(--pinkaccent);
  205. }
  206.  
  207. .ilink:nth-child(3n+1) {  
  208.   background-color: var(--blueaccent);
  209. }
  210.  
  211. .ilink:nth-child(3n+2) {  
  212.   background-color: var(--yellowaccent);
  213. }
  214.  
  215. .ilink ~ .ilink { margin-top: 5px;}
  216.  
  217. .lower {
  218.     height: 20px;
  219.     width: 220px;
  220.     background-color: var(--white);
  221.     padding: 15px;
  222.     text-align: center;
  223.     color: var(--text);
  224.     font: bold 15px "Nunito", sans-serif;
  225.     letter-spacing: 2px;
  226.     text-transform: uppercase;
  227. }
  228.  
  229. .ilink::-webkit-scrollbar-track {
  230.     border: 5px solid var(--white);
  231.     background-color: var(--background);
  232.    
  233. }
  234.  
  235. .ilink::-webkit-scrollbar-thumb {
  236.    border: 2px solid var(--white);
  237.    border-radius: 7px;
  238.    background-color: var(--blueaccent);
  239. }
  240.  
  241. </style>
  242. </head>
  243.  
  244.  
  245.  
  246. <!-- START EDITING CONTENT HERE -->
  247.  
  248.  
  249. <body>
  250. <div class="sidenav">
  251.  
  252. <!-- this is the sidebar code, remember to put an image where it says 'avatar url here.' you can add as many links as fit on the page, just copy and paste the line with the link-->
  253.  
  254.     <div class="avatar" style="background-image:url('AVATAR URL HERE'); background-size: 100px auto;"></div>
  255.     <div class="vl" style="height:40px;"></div>
  256.     <div class="navlink"><a href="/">home</a></div>
  257.     <div class="navlink"><a href="/ask">ask</a></div>
  258.     <div class="navlink"><a href="URL HERE">link one</a></div>
  259.     <div class="navlink"><a href="URL HERE">link two</a></div>
  260.     <div class="vl" style="height:120px"></div>
  261.  
  262.    
  263. </div>
  264. <div class="main">
  265. <div class="content">
  266.  
  267. <!--- copy and paste card code for as many categories as you need, they will line up in rows of 3, and scroll once there's more than nine --->
  268.        
  269.         <!--- ONE 'CARD' STARTS HERE --->
  270.         <div class="card">
  271.         <div class="upper" style="background-image:url('BACKGROUND HERE'); background-size: 250px auto;">
  272.         <div class="info">
  273.             <div class="ilink"><a href="URL">tag 1</a></div>
  274.             <div class="ilink"><a href="URL">tag 2</a></div>
  275.             <div class="ilink"><a href="URL">tag 3</a></div>
  276.             <div class="ilink"><a href="URL">tag 4</a></div>
  277.             <div class="ilink"><a href="URL">tag 5</a></div>
  278.         </div></div><div class="lower">Category</div></div>
  279.         <!--- ENDS HERE --->
  280.        
  281.         <!--- ONE 'CARD' STARTS HERE --->
  282.         <div class="card">
  283.         <div class="upper" style="background-image:url('BACKGROUND HERE'); background-size: 250px auto;">
  284.         <div class="info">
  285.             <div class="ilink"><a href="URL">tag 1</a></div>
  286.             <div class="ilink"><a href="URL">tag 2</a></div>
  287.             <div class="ilink"><a href="URL">tag 3</a></div>
  288.             <div class="ilink"><a href="URL">tag 4</a></div>
  289.             <div class="ilink"><a href="URL">tag 5</a></div>
  290.         </div></div><div class="lower">Category</div></div>
  291.         <!--- ENDS HERE --->
  292.        
  293.         <!--- ONE 'CARD' STARTS HERE --->
  294.         <div class="card">
  295.         <div class="upper" style="background-image:url('BACKGROUND HERE'); background-size: 250px auto;">
  296.         <div class="info">
  297.             <div class="ilink"><a href="URL">tag 1</a></div>
  298.             <div class="ilink"><a href="URL">tag 2</a></div>
  299.             <div class="ilink"><a href="URL">tag 3</a></div>
  300.             <div class="ilink"><a href="URL">tag 4</a></div>
  301.             <div class="ilink"><a href="URL">tag 5</a></div>
  302.         </div></div><div class="lower">Category</div></div>
  303.         <!--- ENDS HERE --->
  304.        
  305.         <!--- ONE 'CARD' STARTS HERE --->
  306.         <div class="card">
  307.         <div class="upper" style="background-image:url('BACKGROUND HERE'); background-size: 250px auto;">
  308.         <div class="info">
  309.             <div class="ilink"><a href="URL">tag 1</a></div>
  310.             <div class="ilink"><a href="URL">tag 2</a></div>
  311.             <div class="ilink"><a href="URL">tag 3</a></div>
  312.             <div class="ilink"><a href="URL">tag 4</a></div>
  313.             <div class="ilink"><a href="URL">tag 5</a></div>
  314.         </div></div><div class="lower">Category</div></div>
  315.         <!--- ENDS HERE --->
  316.        
  317.        
  318.     </div>
  319.    
  320. </div>
  321. <div style="font-family:'Nunito', sans-serif;position:fixed;bottom:15px;right:10px;font-size:14.5px;line-height:14px;height:14px;width:14px;padding:4px;"><a href="https://ebrothemes.tumblr.com" title="ebrothemes" style="color:#727F78;">E</a></div>
  322. </body>
  323. </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!