API tools faq
paste
Advertisement
Imyan

page 12 june {css tumblr}

Imyan
Aug 7th, 2022
1,003
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 41.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title}: members</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.                |  |__|  |__| |   JUNIE MEMBERS PAGE BY SAGE / DEMONTIMES
  14.                |             |   https://demontimes.tumblr.com
  15.                |  _   _   _  |
  16.                |_| |_| |_| |_|
  17.  
  18. SEARCH 'EDIT HERE'
  19.  
  20. CREDITS:
  21.     - phosphor icons / phosphoricons.com
  22.     - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  23.     - google fonts / https://fonts.google.com/
  24.     - hide tutorial by lmthemes / https://lmthemes.tumblr.com/post/30046967698/tutorial-05-hide-stuff-tutorial-in-this
  25.  
  26. ---->
  27.  
  28. <!---- JQUERY ---->
  29. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  30.  
  31. <!----- GOOGLE FONTS ---->
  32. <link rel="preconnect" href="https://fonts.googleapis.com">
  33. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  34. <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  35. <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  36.  
  37. <!---- ICONS ---->
  38. <script src="https://unpkg.com/phosphor-icons"></script>
  39. <script src="https://unpkg.com/phosphor-icons@1.4.0"></script>
  40.  
  41. <!---- TOOLTIPS ---->
  42. <script src="https://unpkg.com/popper.js@1"></script>
  43. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  44.  
  45. <!----- CSS ----->
  46.  
  47. <style type="text/css">
  48.  
  49. /*--- EDIT HERE ----*/
  50. :root {
  51.    
  52.     /*---- COLORS -----*/
  53.     --background:#eee;
  54.     --content:#f8f8f8;
  55.     --title:#666;
  56.     --text:#888;
  57.     --link:#e6676b;
  58.     --accent:#f57e82;
  59.     --accent-two:#f38e78;
  60.     --accent-three:#f3ac8f;
  61.     --borders:#ddd;
  62.     --shadow:#edd1c6;
  63.     --gradient-one:#e6676b;
  64.     --gradient-two:#e67e67;
  65.     --gradient-three:#e29b7d;
  66.     --gradient-text:#fff;
  67.  
  68.     /*---- VARIABLES ---*/
  69.     --border-radius:10px; /*-- 0px, 5px, or 10px recommended --*/
  70.     --glow: 0 0 10px; /*-- change to 0 if you don't want the glow --*/
  71.  
  72.     /*---- FONT STYLE -----*/
  73.     --body-font:'Jost';
  74.     --title-font:'Montserrat Alternates';
  75.     /*-- to change the fonts: search the font name and replace with the name of the font you want --*/
  76.     --font-size:16px;
  77. }
  78.  
  79. /*----- TOOLTIPS -----*/
  80.  
  81. .tippy-tooltip.custom-theme {
  82.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two));
  83.     color:var(--gradient-text);
  84.     text-shadow:var(--glow);
  85.     text-align:center;
  86.     text-transform:uppercase;
  87.     letter-spacing:.1em;
  88.     font-size:.95em;
  89.     border-radius:var(--border-radius);
  90.     margin-bottom:.5em;
  91. }
  92.  
  93. /*--- SCROLLBAR ---*/
  94. ::-webkit-scrollbar {
  95.     width:5px;
  96.     height:5px;
  97.     background:var(--background);
  98. }
  99.  
  100. ::-webkit-scrollbar-track {
  101.     background:var(--background);
  102.     border-radius: 5px;
  103. }
  104.  
  105. ::-webkit-scrollbar-thumb {
  106.     background:linear-gradient(to bottom, var(--gradient-one), var(--gradient-two));
  107.     border-radius: 5px;
  108. }
  109.  
  110. /*--- TEXT SELECTION ---*/
  111. ::-moz-selection { /* Code for Firefox */
  112.     color:var(--gradient-text);
  113.     background:var(--accent);
  114. }
  115.  
  116. ::selection {
  117.     color:var(--gradient-text);
  118.     background:var(--accent);
  119. }
  120.  
  121. /*----- BASIC STYLING -----*/
  122.  
  123. body {
  124.     font-family: var(--body-font), sans-serif;
  125.     font-size: var(--font-size);
  126.     color: var(--text);
  127.     background:var(--background);
  128.     line-height:140%;
  129.     word-wrap: break-word;
  130.     letter-spacing:.04em;
  131.     margin:0;
  132.     padding:0;
  133.     transition:.5s;
  134. }
  135.  
  136. a {
  137.     color:var(--link);
  138.     text-decoration: none;
  139.     -webkit-transition: all 0.3s;
  140.     -moz-transition: all 0.3s;
  141.     -ms-transition: all 0.3s;
  142.     -o-transition: all 0.3s;
  143.     transition: all 0.3s;
  144. }
  145.  
  146. a:hover {
  147.     color: var(--accent);
  148.     -webkit-transition: all 0.3s;
  149.     -moz-transition: all 0.3s;
  150.     -ms-transition: all 0.3s;
  151.     -o-transition: all 0.3s;
  152.     transition: all 0.3s;
  153. }
  154.  
  155. #hua {
  156.   display: inline-block;
  157.   position: relative;
  158. }
  159.  
  160. #hua:after {
  161.   content: '';
  162.   position: absolute;
  163.   width: 100%;
  164.   transform: scaleX(0);
  165.   height: 2px;
  166.   bottom: 0;
  167.   left: 0;
  168.   background-color: var(--link);
  169.   transform-origin: bottom right;
  170.   transition: transform 0.25s ease-out;
  171. }
  172.  
  173. #hua:hover:after {
  174.   transform: scaleX(1);
  175.   transform-origin: bottom left;
  176. }
  177.        
  178. blockquote {
  179.     border-left:2px solid var(--borders);
  180.     padding-left:.75em;
  181.     margin-left:1em;
  182. }
  183.  
  184. li {list-style-type:circle;}
  185. li::marker {color:var(--accent)}
  186.  
  187. h1, h1 a, h2, h3, h4, h5 {
  188.     font-family:var(--title-font), sans-serif;
  189.     letter-spacing:.1em;
  190.     color:var(--title);
  191. }
  192.  
  193. h1 {font-size:1.3em;}
  194. h2 {font-size:1.2em;}
  195. h3 {font-size:1.1em;}
  196. h4 {font-size:1.05em;}
  197. h5 {font-size:1.025em;}
  198. h1 a:hover {color:var(--accent);}
  199.  
  200. h4 {margin:0 0 1em 0; text-align:center;}
  201. h5 {margin:0; padding:0;}
  202.  
  203. small {font-size: 0.95em;}
  204. big {font-size: 1.1em;}
  205.  
  206. hr {
  207.     height: 1px;
  208.     border: none;
  209.     box-shadow: none;
  210.     background-color: var(--borders);
  211. }
  212.  
  213. pre {
  214.     line-height: inherit;
  215.     font-size: inherit;
  216.     white-space: pre-wrap;
  217.     white-space: -moz-pre-wrap;
  218.     white-space: -pre-wrap;
  219.     white-space: -o-pre-wrap;
  220.     word-wrap: break-word;
  221. }
  222.  
  223. b, strong {
  224.     color:var(--title);
  225.     font-weight:800;
  226. }
  227.  
  228. b a:hover {
  229.     color:var(--accent);
  230.     -webkit-transition: all 0.3s;
  231.     -moz-transition: all 0.3s;
  232.     -ms-transition: all 0.3s;
  233.     -o-transition: all 0.3s;
  234.     transition: all 0.3s;
  235. }
  236.  
  237. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  238.     z-index: 999999999!important;
  239.     margin-top:60px;
  240.     opacity:0;
  241.     -webkit-transition: all 0.4s;
  242.     -moz-transition: all 0.4s;
  243.     -ms-transition: all 0.4s;
  244.     -o-transition: all 0.4s;
  245.     transition: all 0.4s;
  246. }
  247.  
  248. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  249.     opacity:1;
  250.     -webkit-transition: all 0.4s;
  251.     -moz-transition: all 0.4s;
  252.     -ms-transition: all 0.4s;
  253.     -o-transition: all 0.4s;
  254.     transition: all 0.4s;
  255. }
  256.  
  257. /*---- HEADER ----*/
  258.  
  259. header {
  260.     position:fixed;
  261.     top:0;
  262.     left:300px;
  263.     right:0;
  264.     height:50px;
  265.     padding:.25em 1em .25em 1em;
  266.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  267.     display:flex;
  268.     align-items:center;
  269.     justify-content:space-between;
  270.     gap:1em;
  271.     z-index:999;
  272. }
  273.  
  274. .topicon {
  275.     display:flex;
  276.     align-items:center;
  277.     gap:.5em;
  278. }
  279.  
  280. .topicon img {
  281.     width:2.5em;
  282.     height:2.5em;
  283.     padding:4px;
  284.     border-radius:100%;
  285.     background:var(--accent);
  286.     box-shadow:2px 8px 8px rgba(0,0,0,.1);
  287. }
  288.  
  289. .topicon b {
  290.     font-family:var(--title-font), sans-serif;
  291.     color:var(--gradient-text);
  292.     letter-spacing:.1em;
  293.     font-size:1.1em;
  294. }
  295.  
  296. nav {
  297.     display:flex;
  298.     justify-content:center;
  299.     align-items:center;
  300.     gap:1em;
  301. }
  302.  
  303. nav .topnav, nav #totop {
  304.     display:flex;
  305.     justify-content:center;
  306.     align-items:center;
  307.     padding:2px;
  308.     border-radius:100%;
  309.     background:rgba(255,255,255,.25);
  310.     box-shadow:2px 8px 8px rgba(0,0,0,.1);
  311.     -webkit-transition: all 0.4s;
  312.     -moz-transition: all 0.4s;
  313.     -ms-transition: all 0.4s;
  314.     -o-transition: all 0.4s;
  315.     transition: all 0.4s;
  316. }
  317.  
  318. nav a {
  319.     display:flex;
  320.     justify-content:space-between;
  321.     align-items:center;
  322.     gap:1em;
  323.     padding:.5em;
  324.     border-radius:100%;
  325. }
  326.  
  327. nav i {
  328.     font-size:1.4em;
  329.     color:var(--gradient-text);
  330.     text-shadow:var(--glow)
  331.     -webkit-transition: all 0.4s;
  332.     -moz-transition: all 0.4s;
  333.     -ms-transition: all 0.4s;
  334.     -o-transition: all 0.4s;
  335.     transition: all 0.4s;
  336. }
  337.  
  338. .topnav:hover, #totop:hover {
  339.     box-shadow:2px 5px 8px transparent;
  340.     transform:scale(.95);
  341.     -webkit-transition: all 0.4s;
  342.     -moz-transition: all 0.4s;
  343.     -ms-transition: all 0.4s;
  344.     -o-transition: all 0.4s;
  345.     transition: all 0.4s;
  346. }
  347.  
  348. #totop:hover i {
  349.     -webkit-transition: all 0.4s;
  350.     -moz-transition: all 0.4s;
  351.     -ms-transition: all 0.4s;
  352.     -o-transition: all 0.4s;
  353.     transition: all 0.4s;
  354.     -webkit-animation-duration: 2s;
  355.     animation-duration: 2s;
  356.     -webkit-animation-fill-mode: both;
  357.     animation-fill-mode: both;
  358.     -webkit-animation-timing-function: ease-in-out;
  359.     animation-timing-function: ease-in-out;
  360.     animation-iteration-count:1;
  361.     -webkit-animation-iteration-count:1;
  362.     animation-name: totop;
  363.     -moz-animation-name: totop;
  364. }
  365.  
  366. #totop a {cursor:help;}
  367.  
  368. @keyframes totop {
  369.     0% {
  370.         -webkit-transform: translateY(0px);
  371.         -ms-transform:     translateY(0px);
  372.         transform:         translateY(0px)
  373.     }
  374.     18% {
  375.         -webkit-transform: translateY(-3px);
  376.         -ms-transform:     translateY(-3px);
  377.         transform:         translateY(-3px)
  378.     }
  379.     36% {
  380.         -webkit-transform: translateY(0px);
  381.         -ms-transform:     translateY(0px);
  382.         transform:         translateY(0px)
  383.     }
  384.     54% {
  385.         -webkit-transform: translateY(-3px);
  386.         -ms-transform:     translateY(-3px);
  387.         transform:         translateY(-3px)
  388.     }
  389.     82% {
  390.         -webkit-transform: translateY(0px);
  391.         -ms-transform:     translateY(0px);
  392.         transform:         translateY(0px)
  393.     }
  394.     100% {
  395.         -webkit-transform: translateY(0px);
  396.         -ms-transform:     translateY(0px);
  397.         transform:         translateY(0px)
  398.     }
  399. }
  400.  
  401. /*--- CREDIT: DO NOT TOUCH ---*/
  402.  
  403. .credit {
  404.     z-index:999999;
  405. }
  406.  
  407. .credit {
  408.     padding:2px;
  409.     border-radius:100%;
  410.     background:var(--accent-three);
  411.     box-shadow:2px 8px 8px rgba(0,0,0,.1);
  412.     display:flex;
  413.     justify-content:center;
  414.     align-items:center;
  415.     -webkit-transition: all 0.4s;
  416.     -moz-transition: all 0.4s;
  417.     -ms-transition: all 0.4s;
  418.     -o-transition: all 0.4s;
  419.     transition: all 0.4s;
  420. }
  421.  
  422. .credit i {
  423.     font-size:1.5em;
  424.     color:var(--gradient-text);
  425.     text-shadow:var(--glow);
  426. }
  427.  
  428. .credit:hover {
  429.     transform:scale(1.05);
  430.     -webkit-transition: all 0.4s;
  431.     -moz-transition: all 0.4s;
  432.     -ms-transition: all 0.4s;
  433.     -o-transition: all 0.4s;
  434.     transition: all 0.4s;
  435. }
  436. .credit:hover i {
  437.     -webkit-animation-duration: 2s;
  438.     animation-duration: 2s;
  439.     -webkit-animation-fill-mode: both;
  440.     animation-fill-mode: both;
  441.     -webkit-animation-timing-function: ease-in-out;
  442.     animation-timing-function: ease-in-out;
  443.     animation-iteration-count:infinite;
  444.     -webkit-animation-iteration-count:infinite;
  445.     animation-name: bounce;
  446.     -moz-animation-name: bounce;
  447. }
  448.  
  449. .credit a {
  450.     display:flex;
  451.     justify-content:center;
  452.     align-items:center;
  453.     gap:1em;
  454.     padding:.5em;
  455. }
  456.  
  457. @keyframes bounce {
  458.     0% {
  459.         -webkit-transform: translateY(0px);
  460.         -ms-transform:     translateY(0px);
  461.         transform:         translateY(0px)
  462.     }
  463.     25% {
  464.         -webkit-transform: translateY(-3px);
  465.         -ms-transform:     translateY(-3px);
  466.         transform:         translateY(-3px)
  467.     }
  468.     50% {
  469.         -webkit-transform: translateY(0px);
  470.         -ms-transform:     translateY(0px);
  471.         transform:         translateY(0px)
  472.     }
  473.     75% {
  474.         -webkit-transform: translateY(-3px);
  475.         -ms-transform:     translateY(-3px);
  476.         transform:         translateY(-3px)
  477.     }
  478.     100% {
  479.         -webkit-transform: translateY(0px);
  480.         -ms-transform:     translateY(0px);
  481.         transform:         translateY(0px)
  482.     }
  483. }
  484.  
  485. /*----- CONTAINERS -----*/
  486.  
  487. main {
  488.     position: relative;
  489.     width:90%;
  490.     margin:80px auto 2em auto;
  491. }
  492.  
  493. section {
  494.     display:flex;
  495.     justify-content:flex-end;
  496.     flex-wrap:wrap;
  497.     gap:1em;
  498. }
  499.  
  500. .sidepanel {
  501.     position:fixed;
  502.     top:0;
  503.     left:0;
  504.     bottom:0;
  505.     width:300px;
  506.     overflow:auto;
  507.     padding:1em 0 1em 0;
  508.     display:flex;
  509.     flex-direction:column;
  510.     align-items:center;
  511.     justify-content:flex-start;
  512.     gap:1em;
  513.     background:var(--content);
  514. }
  515.  
  516. article {
  517.     width:calc(100% - 300px - 2em);
  518.     position:relative;
  519.     padding:1em;
  520.     border-radius:var(--border-radius);
  521.     background:var(--content);
  522.     display:flex;
  523.     flex-direction:column;
  524.     gap:.5em;
  525. }
  526.  
  527. /*---- BASICS ----*/
  528.  
  529. .heading {
  530.     width:calc(100% - 2em);
  531.     display:flex;
  532.     justify-content:space-between;
  533.     align-items:center;
  534.     padding:.4em 1em .4em 1em;
  535.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  536.     border-radius:30px;
  537.     margin-bottom:.5em;
  538. }
  539.  
  540. .heading i {
  541.     font-size:1.4em;
  542.     color:var(--gradient-text);
  543.     text-shadow:var(--glow);
  544. }
  545.  
  546. .heading span {
  547.     font-family:var(--title-font), sans-serif;
  548.     color:var(--gradient-text);
  549.     font-size:1.1em;
  550.     letter-spacing:.1em;
  551.     font-weight:600;
  552. }
  553.  
  554. .subheading {
  555.     font-family:var(--title-font), sans-serif;
  556.     color:var(--title);
  557.     letter-spacing:.1em;
  558.     font-weight:600;
  559.     margin-top:.25em;
  560. }
  561.  
  562. .sidedesc a, .sidestats a, .sidestatus a {
  563.     display:inline-block;
  564.     position:relative;
  565.     border-bottom:2px solid var(--borders);
  566. }
  567.  
  568. .sidedesc a:after, .sidestats a:after, .sidestatus a:after {
  569.     content: '';
  570.     position:absolute;
  571.     width:100%;
  572.     transform:scaleX(0);
  573.     height:2px;
  574.     bottom:-2px;
  575.     left:0;
  576.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  577.     transform-origin:middle;
  578.     transition: transform 0.25s ease-out;
  579. }
  580.  
  581. .sidedesc a:hover:after, .sidestats a:hover:after, .sidestatus a:hover:after {
  582.     transform: scaleX(1);
  583.     transform-origin: middle;
  584. }
  585.  
  586. /*--- SIDE PANEL CONT'D ---*/
  587.  
  588. .sidepanel .subtitle {
  589.     width:100%;
  590.     font-family:var(--title-font), sans-serif;
  591.     font-size:1.2em;
  592.     color:var(--title);
  593.     letter-spacing:.1em;
  594.     font-weight:600;
  595.     padding-bottom:.25em;
  596.     border-bottom:1px solid var(--borders);
  597. }
  598.  
  599. .sidedesc {
  600.     width:calc(100% - 2em);
  601.     display:flex;
  602.     flex-direction:column;
  603.     align-items:center;
  604. }
  605.  
  606. .sidedesc #text {
  607.     padding:0 1em 0 1em;
  608.     text-align:center;
  609. }
  610. .sidedesc #text h1 {margin-bottom:.25em;}
  611.  
  612. .sideimg {
  613.     width:150px;
  614.     height:150px;
  615.     padding:4px;
  616.     border-radius:100%;
  617.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  618.     box-shadow:2px 8px 8px var(--shadow);
  619. }
  620. .sideimg img {
  621.     width:150px;
  622.     height:150px;
  623.     border-radius:100%;
  624.     object-fit:cover;
  625. }
  626.  
  627. .sideicon {
  628.     width:90px;
  629.     height:90px;
  630.     padding:4px;
  631.     border-radius:100%;
  632.     background:linear-gradient(to right, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  633. }
  634. .sideicon img {
  635.     width:90px;
  636.     height:90px;
  637.     border-radius:100%;
  638. }
  639.  
  640. .sidestats {
  641.     width:calc(100% - 2em);
  642.     padding:0 1em 0 1em;
  643.     display:flex;
  644.     flex-direction:column;
  645.     gap:.75em;
  646. }
  647.  
  648. .sidestats li {
  649.     display:flex;
  650.     justify-content:center;
  651.     align-items:center;
  652.     gap:1em;
  653. }
  654.  
  655. .sidestats b {
  656.     width:28%;
  657.     text-align:center;
  658.     font-size:1.5em;
  659.     color:var(--accent);
  660.     text-shadow:2px 2px 1px var(--shadow);
  661. }
  662.  
  663. .sidestats span {width:72%; color:var(--text);}
  664.  
  665. .sidestatus {
  666.     width:calc(100% - 2em);
  667.     padding:0 1em 0 1em;
  668.     display:flex;
  669.     flex-direction:column;
  670.     gap:.5em;
  671. }
  672.  
  673. .sidestatus li {
  674.     margin-left:1.5em;
  675.     display:flex;
  676.     align-items:center;
  677.     gap:1em;
  678. }
  679.  
  680. .sidestatus i {
  681.     font-size:1.6em;
  682.     color:var(--accent);
  683.     text-shadow:2px 2px 1px var(--shadow);
  684. }
  685. .sidestatus li.off i {
  686.     color:var(--borders);
  687.     text-shadow:none;
  688. }
  689.  
  690. .sidestatus b {font-weight:normal; color:var(--text);}
  691.  
  692. .sidelinks {
  693.     width:calc(100% - 2em);
  694.     padding:0 1em 0 1em;
  695.     display:flex;
  696.     flex-direction:column;
  697.     gap:.5em;
  698. }
  699.  
  700. .sidelinks a {
  701.     display:flex;
  702.     justify-content:space-between;
  703.     align-items:center;
  704.     gap:1em;
  705.     padding:.25em 1em .25em 1em;
  706.     border-radius:30px;
  707.     background:var(--content);
  708.     border:2px solid var(--link);
  709. }
  710.  
  711. .sidelinks i {
  712.     font-size:1.3em;
  713.     color:var(--link);
  714.     -webkit-transition: all 0.4s;
  715.     -moz-transition: all 0.4s;
  716.     -ms-transition: all 0.4s;
  717.     -o-transition: all 0.4s;
  718.     transition: all 0.4s;
  719. }
  720.  
  721. .sidelinks span {
  722.     letter-spacing:.1em;
  723.     color:var(--link);
  724.     -webkit-transition: all 0.4s;
  725.     -moz-transition: all 0.4s;
  726.     -ms-transition: all 0.4s;
  727.     -o-transition: all 0.4s;
  728.     transition: all 0.4s;
  729. }
  730.  
  731. .sidelinks a:hover {background:var(--link);}
  732. .sidelinks a:hover i {
  733.     color:var(--content);
  734.     -webkit-transition: all 0.4s;
  735.     -moz-transition: all 0.4s;
  736.     -ms-transition: all 0.4s;
  737.     -o-transition: all 0.4s;
  738.     transition: all 0.4s;
  739. }
  740. .sidelinks a:hover i:last-of-type {margin-right:1em;}
  741. .sidelinks a:hover span {
  742.     color:var(--content);
  743.     -webkit-transition: all 0.4s;
  744.     -moz-transition: all 0.4s;
  745.     -ms-transition: all 0.4s;
  746.     -o-transition: all 0.4s;
  747.     transition: all 0.4s;
  748. }
  749.  
  750. /*--- ADMINS ---*/
  751.  
  752. .admins {
  753.     width:100%;
  754.     display:flex;
  755.     justify-content:space-evenly;
  756.     flex-wrap:wrap;
  757.     gap:1em;
  758. }
  759.  
  760. .admin {
  761.     position:relative;
  762.     width:250px;
  763.     display:flex;
  764.     flex-direction:column;
  765.     gap:.25em;
  766. }
  767.  
  768. .adminimg {
  769.     position:relative;
  770.     width:250px;
  771.     height:250px;
  772.     padding:2px;
  773.     border-radius:var(--border-radius);
  774.     background:linear-gradient(to top, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  775. }
  776.  
  777. .adminimg img {
  778.     width:250px;
  779.     height:250px;
  780.     object-fit:cover;
  781.     border-radius:var(--border-radius);
  782. }
  783.  
  784. .adminname {
  785.     width:250px;
  786.     display:flex;
  787.     justify-content:space-between;
  788.     align-items:center;
  789.     gap:.5em;
  790. }
  791.  
  792. .adminname .name {
  793.     font-family:var(--title-font), sans-serif;
  794.     color:var(--title);
  795.     font-size:1.1em;
  796.     font-weight:600;
  797.     text-shadow:2px 2px 1px var(--shadow);
  798. }
  799.  
  800. a.cthrough {cursor:help;}
  801. .dropdown i {
  802.     font-size:1.4em;
  803.     color:var(--gradient-text);
  804.     padding:.1em;
  805.     text-shadow:var(--glow);
  806.     border-radius:100%;
  807.     background:linear-gradient(to top, var(--accent), var(--accent-two), var(--accent-three));
  808. }
  809.  
  810. .admins .sub {
  811.     position:absolute;
  812.     top:2px;
  813.     left:2px;
  814.     bottom:2px;
  815.     right:2px;
  816.     width:calc(250px - 2em);
  817.     height:calc(250px - 2em);
  818.     display:flex;
  819.     flex-direction:column;
  820.     justify-content:space-between;
  821.     gap:.5em;
  822.     padding:1em;
  823.     border-radius:var(--border-radius);
  824.     background:linear-gradient(to top, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  825.     z-index:99;
  826. }
  827.  
  828. .admins .sub #subtitle {
  829.     font-family:var(--title-font), sans-serif;
  830.     color:var(--gradient-text);
  831.     text-align:center;
  832.     padding-bottom:.25em;
  833.     border-bottom:1px solid rgba(255,255,255,.1);
  834. }
  835.  
  836. .admins .sub #text {
  837.     text-align:center;
  838.     color:var(--gradient-text);
  839. }
  840.  
  841. .admins .sub #sublinks {
  842.     display:flex;
  843.     justify-content:center;
  844.     align-items:center;
  845.     gap:.5em;
  846. }
  847.  
  848. .admins #sublinks i {
  849.     font-size:1.2em;
  850.     color:var(--gradient-text);
  851.     padding:.4em;
  852.     border-radius:100%;
  853.     background:var(--accent);
  854.     text-shadow:var(--glow);
  855.     box-shadow:2px 2px 2px rgba(0,0,0,.1);
  856.     -webkit-transition: all 0.4s;
  857.     -moz-transition: all 0.4s;
  858.     -ms-transition: all 0.4s;
  859.     -o-transition: all 0.4s;
  860.     transition: all 0.4s;
  861. }
  862.  
  863. .admins #sublinks a:hover i {
  864.     transform:scale(.95);
  865.     box-shadow:none;
  866.     -webkit-transition: all 0.4s;
  867.     -moz-transition: all 0.4s;
  868.     -ms-transition: all 0.4s;
  869.     -o-transition: all 0.4s;
  870.     transition: all 0.4s;
  871. }
  872.  
  873. /*--- STAFF ---*/
  874.  
  875. .staff-wrap {
  876.     width:100%;
  877.     display:flex;
  878.     justify-content:space-evenly;
  879.     flex-wrap:wrap;
  880.     gap:1em;
  881. }
  882.  
  883. .staff {
  884.     position:relative;
  885.     width:200px;
  886.     display:flex;
  887.     flex-direction:column;
  888.     gap:.25em;
  889. }
  890.  
  891. .staffimg {
  892.     position:relative;
  893.     width:200px;
  894.     height:200px;
  895.     padding:2px;
  896.     border-radius:var(--border-radius);
  897.     background:linear-gradient(to top, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  898. }
  899.  
  900. .staffimg img {
  901.     width:200px;
  902.     height:200px;
  903.     object-fit:cover;
  904.     border-radius:var(--border-radius);
  905. }
  906.  
  907. .staffname {
  908.     width:200px;
  909.     display:flex;
  910.     justify-content:space-between;
  911.     align-items:center;
  912.     gap:.5em;
  913. }
  914.  
  915. .staffname .name {
  916.     font-family:var(--title-font), sans-serif;
  917.     color:var(--title);
  918.     font-size:1.1em;
  919.     font-weight:600;
  920.     text-shadow:2px 2px 1px var(--shadow);
  921. }
  922.  
  923. a.cthrough {cursor:help;}
  924. .dropdown i {
  925.     font-size:1.4em;
  926.     color:var(--gradient-text);
  927.     padding:.1em;
  928.     text-shadow:var(--glow);
  929.     border-radius:100%;
  930.     background:linear-gradient(to top, var(--accent), var(--accent-two), var(--accent-three));
  931. }
  932.  
  933. .staff .sub {
  934.     position:absolute;
  935.     top:2px;
  936.     left:2px;
  937.     bottom:2px;
  938.     right:2px;
  939.     width:calc(200px - 2em);
  940.     height:calc(200px - 2em);
  941.     display:flex;
  942.     flex-direction:column;
  943.     justify-content:space-between;
  944.     gap:.5em;
  945.     padding:1em;
  946.     border-radius:var(--border-radius);
  947.     background:linear-gradient(to top, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  948.     z-index:99;
  949. }
  950.  
  951. .staff .sub #subtitle {
  952.     font-family:var(--title-font), sans-serif;
  953.     color:var(--gradient-text);
  954.     text-align:center;
  955.     padding-bottom:.25em;
  956.     border-bottom:1px solid rgba(255,255,255,.1);
  957. }
  958.  
  959. .staff .sub #text {
  960.     text-align:center;
  961.     color:var(--gradient-text);
  962. }
  963.  
  964. .staff .sub #sublinks {
  965.     display:flex;
  966.     justify-content:center;
  967.     align-items:center;
  968.     gap:.5em;
  969. }
  970.  
  971. .staff #sublinks i {
  972.     font-size:1.2em;
  973.     color:var(--gradient-text);
  974.     padding:.4em;
  975.     border-radius:100%;
  976.     background:var(--accent);
  977.     text-shadow:var(--glow);
  978.     box-shadow:2px 2px 2px rgba(0,0,0,.1);
  979.     -webkit-transition: all 0.4s;
  980.     -moz-transition: all 0.4s;
  981.     -ms-transition: all 0.4s;
  982.     -o-transition: all 0.4s;
  983.     transition: all 0.4s;
  984. }
  985.  
  986. .staff #sublinks a:hover i {
  987.     transform:scale(.95);
  988.     box-shadow:none;
  989.     -webkit-transition: all 0.4s;
  990.     -moz-transition: all 0.4s;
  991.     -ms-transition: all 0.4s;
  992.     -o-transition: all 0.4s;
  993.     transition: all 0.4s;
  994. }
  995.  
  996. /*--- MEMBERS ---*/
  997.  
  998. .members {
  999.     width:100%;
  1000.     display:flex;
  1001.     justify-content:space-evenly;
  1002.     flex-wrap:wrap;
  1003.     gap:.5em;
  1004. }
  1005.  
  1006. .member {
  1007.     position:relative;
  1008.     width:23.5%;
  1009.     display:flex;
  1010.     align-items:center;
  1011.     gap:.5em;
  1012. }
  1013.  
  1014. .memberimg {
  1015.     width:4em;
  1016.     height:4em;
  1017.     padding:2px;
  1018.     border-radius:100%;
  1019.     background:linear-gradient(to top, var(--gradient-one), var(--gradient-two), var(--gradient-three));
  1020. }
  1021. .memberimg img {
  1022.     width:4em;
  1023.     height:4em;
  1024.     border-radius:100%;
  1025.     object-fit:cover;
  1026. }
  1027.  
  1028. a.membername {
  1029.     display:flex;
  1030.     flex-direction:column;
  1031.     align-items:flex-start;
  1032.     text-align:left;
  1033.     line-height:120%;
  1034. }
  1035.  
  1036. .membername .name {
  1037.     font-family:var(--title-font), sans-serif;
  1038.     color:var(--title);
  1039.     font-weight:600;
  1040.     text-shadow:2px 2px 1px var(--shadow);
  1041.     -webkit-transition: all 0.4s;
  1042.     -moz-transition: all 0.4s;
  1043.     -ms-transition: all 0.4s;
  1044.     -o-transition: all 0.4s;
  1045.     transition: all 0.4s;
  1046. }
  1047. .membername .namesub {
  1048.     color:var(--text);
  1049.     -webkit-transition: all 0.4s;
  1050.     -moz-transition: all 0.4s;
  1051.     -ms-transition: all 0.4s;
  1052.     -o-transition: all 0.4s;
  1053.     transition: all 0.4s;
  1054. }
  1055.  
  1056. a.membername:hover .name {
  1057.     color:var(--accent);
  1058.     text-shadow:none;
  1059.     -webkit-transition: all 0.4s;
  1060.     -moz-transition: all 0.4s;
  1061.     -ms-transition: all 0.4s;
  1062.     -o-transition: all 0.4s;
  1063.     transition: all 0.4s;
  1064. }
  1065. a.membername:hover .namesub {
  1066.     color:var(--title);
  1067.     -webkit-transition: all 0.4s;
  1068.     -moz-transition: all 0.4s;
  1069.     -ms-transition: all 0.4s;
  1070.     -o-transition: all 0.4s;
  1071.     transition: all 0.4s;
  1072. }
  1073.  
  1074. /*---- RESPONSIVENESS ---*/
  1075.  
  1076. @media only screen and (max-width: 1000px) {
  1077. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;!important;}
  1078.  
  1079. .admin {width:200px;}
  1080. .adminimg {width:200px;height:200px;}
  1081. .adminimg img {width:200px;height:200px;}
  1082. .adminname {width:200px;}
  1083. .admin .sub {width:calc(200px - 2em); height:calc(200px - 2em);}
  1084.  
  1085. .member {width:49%;}
  1086.  
  1087. }
  1088.  
  1089. @media only screen and (max-width: 825px) {
  1090. header {left:0;}
  1091. article {width:100%;}
  1092. .sidepanel {display:none;}
  1093.  
  1094. tumblr_controls, .tmblr-iframe{display:none!important;}
  1095. }
  1096.  
  1097. @media only screen and (max-width: 600px) {
  1098. .topicon img {display:none;}
  1099. }
  1100.  
  1101. @media only screen and (max-width: 500px) {
  1102. .topnav:not(:first-child) {display:none;}
  1103. .members {justify-content:flex-start;}
  1104. }
  1105.  
  1106.  
  1107. {CustomCSS}
  1108.  
  1109. </style>
  1110. </head>
  1111.  
  1112. <!----- HTML ----->
  1113.  
  1114. <body>
  1115.  
  1116. <main> <!-- main container -->
  1117.  
  1118. <!--- EDIT HERE: HEADER
  1119.  
  1120. - by default the header will show your icon, page title, and links
  1121. - feel free to change the links/icons & the title/icon img if you want
  1122.  
  1123. --->
  1124. <header>
  1125.     <div class="topicon">
  1126.         <img src="{portraiturl-128}">
  1127.         <b>members</b>
  1128.     </div>
  1129.     <nav>
  1130.         <div class="topnav"><a title="home" href="/"><i class="ph-house"></i></a></div>
  1131.         <div class="topnav"><a title="contact" href="/ask"><i class="ph-chats-circle"></i></a></div>
  1132.         <div class="topnav"><a title="archive" href="/archive"><i class="ph-archive"></i></a></div>
  1133.        
  1134.         <!-- TO TOP BUTTON -->
  1135.         <div id="totop"><a href="#top" target="_self"><i title="back to top" class="ph-arrow-up"></i></a></div>
  1136.     </nav>
  1137.  
  1138.     <!--- CREDIT: DO NOT TOUCH --->
  1139.     <div class="credit"><a title="junie page by sage" href="https://demontimes.tumblr.com"><i class="ph-ghost"></i></a></div>
  1140. </header><!-- header ends -->
  1141.  
  1142. <section><!-- section -->
  1143.  
  1144. <div class="sidepanel">
  1145.     <div class="sidedesc">
  1146.    
  1147. <!-- EDIT HERE: SIDE IMG AND DESCRIPTION
  1148.  
  1149. - replace the image url below with your image url, make sure it stays between the ""
  1150.  
  1151. *if you want your icon here instead of a different image, replace with the following line:
  1152.     <div class="sideicon"><img src="{PortraitURL-128}"></div>
  1153. -->
  1154.         <!-- *for icon instead of image: replace from here --><div class="sideimg"><img src="https://64.media.tumblr.com/f82641e0e8a74ee3f7c70ecfb8c2d640/2942418c550d8a9e-ba/s2048x3072/b13ffbfb754fee55cc6cd9d43410b97c8160a25d.png"></div><!-- *to here -->
  1155.        
  1156.         <div id="text"><!-- all text below this line -->
  1157.         <h1>junie</h1>
  1158.         this is a members/character page made to go with both <a href="/post/686464195842211840/teyana-fansite-theme-by-sage-static-preview">teyana</a> & <a href="/post/685608005883101184/tangerine-theme-by-sage-static-preview-code">tangerine</a>
  1159.         </div><!-- #text / all text above this line -->
  1160.     </div><!-- .sidedesc -->
  1161.  
  1162. <!-- EDIT HERE: SIDE STATS
  1163. - make sure the number is wrapped in <b></b> and your text is wrapped in <span></span>
  1164. -->
  1165.     <div class="sidestats">
  1166.         <div class="subtitle">stats</div>
  1167.         <!-- all stats below this line -->
  1168.         <li><b>3</b><span>admins</span></li>
  1169.         <li><b>4</b><span>staff</span></li>
  1170.         <li><b>52</b><span>members</span></li>
  1171.     </div><!-- .sidestats / all stats above this line -->
  1172.    
  1173. <!-- EDIT HERE: SIDE STATUSES
  1174.     - do not delete '-fill'
  1175.  
  1176. TOGGLE OFF FORMAT:
  1177.         <li class="off"><i class="ph-toggle-left-fill"></i><b>your text here</b></li>
  1178.        
  1179. TOGGLE ON FORMAT:
  1180.         <li><i class="ph-toggle-right-fill"></i><b>your text here</b></li>
  1181. -->
  1182.     <div class="sidestatus">
  1183.         <div class="subtitle">status</div>
  1184.         <!-- all statuses below this line -->
  1185.         <li class="off"><i class="ph-toggle-left-fill"></i><b>staff apps are closed</b></li>
  1186.         <li><i class="ph-toggle-right-fill"></i><b>open for members</b></li>
  1187.         <li><i class="ph-toggle-right-fill"></i><b>accepting affiliates</b></li>
  1188.     </div><!-- .sidestatus / all statuses above this line -->
  1189.  
  1190. <!-- EDIT HERE: LINKS
  1191. LINK FORMAT:
  1192.         <a href="link url here"><span>link name here</span> <i class="ph-caret-right"></i></a>
  1193.  
  1194. -->
  1195.     <div class="sidelinks">
  1196.         <div class="subtitle">links</div>
  1197.         <a href="/"><span>link name</span> <i class="ph-caret-right"></i></a>
  1198.         <a href="/"><span>link name</span> <i class="ph-caret-right"></i></a>
  1199.         <a href="/"><span>link name</span> <i class="ph-caret-right"></i></a>
  1200.     </div>
  1201.    
  1202. </div><!-- side panel ends -->
  1203.  
  1204. <!--- ADMINS / read more in the post --->
  1205. <article>
  1206. <div class="heading"><span>admins</span><i class="ph-flower-lotus"></i></div>
  1207.     <div class="admins"><!-- all admins below this line -->
  1208.    
  1209.         <!-- admin -->
  1210.         <div class="admin">
  1211.             <div class="adminimg"><img src="https://64.media.tumblr.com/93f8cb9f7febd7d9b5b7bfa7bb997c4a/b6c29d4ce381faa2-53/s540x810/c2748fe4c282ab66fa3234d0eed5514c9d092f59.pnj">
  1212.             </div>
  1213.             <div class="adminname">
  1214.                 <div class="name">admin name</div>
  1215.                 <div class="dropdown"><a title="more info" href="#" class="cthrough"><i class="ph-info"></i></a>
  1216.                     <div class="sub">
  1217.                         <div id="subtitle">@name</div>
  1218.                         <div id="text">this is a description, put whatever  you want here!</div>
  1219.                         <div id="sublinks">
  1220.                         <a title="link" href="/"><i class="ph-user-fill"></i></a>
  1221.                         <a title="link" href="/"><i class="ph-heart-fill"></i></a>
  1222.                         </div><!-- #sublinks -->
  1223.                     </div><!-- .sub -->
  1224.                 </div><!-- .dropdown -->
  1225.             </div><!-- .adminname -->
  1226.         </div><!-- .admin -->
  1227.        
  1228.         <!-- admin -->
  1229.         <div class="admin">
  1230.             <div class="adminimg"><img src="https://64.media.tumblr.com/9f06eedb0a96ade93249d10bfe4d6317/b6c29d4ce381faa2-3d/s540x810/941c52f28244900568bcc2a9b2817c574bd0de38.pnj">
  1231.             </div>
  1232.             <div class="adminname">
  1233.                 <div class="name">admin name</div>
  1234.                 <div class="dropdown"><a title="more info" href="#" class="cthrough"><i class="ph-info"></i></a>
  1235.                     <div class="sub">
  1236.                         <div id="subtitle">@name</div>
  1237.                         <div id="text">this is a description, put whatever  you want here!</div>
  1238.                         <div id="sublinks">
  1239.                         <a title="link" href="/"><i class="ph-user-fill"></i></a>
  1240.                         <a title="link" href="/"><i class="ph-heart-fill"></i></a>
  1241.                         </div><!-- #sublinks -->
  1242.                     </div><!-- .sub -->
  1243.                 </div><!-- .dropdown -->
  1244.             </div><!-- .adminname -->
  1245.         </div><!-- .admin -->
  1246.        
  1247.         <!-- admin -->
  1248.         <div class="admin">
  1249.             <div class="adminimg"><img src="https://64.media.tumblr.com/f956e04836b8765f92c13565ac914c3d/b6c29d4ce381faa2-b3/s540x810/639c0fe350cddfb3bd2c7e60a01d72e1dfbfb682.pnj">
  1250.             </div>
  1251.             <div class="adminname">
  1252.                 <div class="name">admin name</div>
  1253.                 <div class="dropdown"><a title="more info" href="#" class="cthrough"><i class="ph-info"></i></a>
  1254.                     <div class="sub">
  1255.                         <div id="subtitle">@name</div>
  1256.                         <div id="text">this is a description, put whatever  you want here!</div>
  1257.                         <div id="sublinks">
  1258.                         <a title="link" href="/"><i class="ph-user-fill"></i></a>
  1259.                         <a title="link" href="/"><i class="ph-heart-fill"></i></a>
  1260.                         </div><!-- #sublinks -->
  1261.                     </div><!-- .sub -->
  1262.                 </div><!-- .dropdown -->
  1263.             </div><!-- .adminname -->
  1264.         </div><!-- .admin -->
  1265.        
  1266.     </div><!-- .admins / all admins above this line -->
  1267. </article>
  1268.  
  1269. <!-- STAFF / read more in the post -->
  1270. <article>
  1271. <div class="heading"><span>staff</span><i class="ph-moon-stars"></i></div>
  1272.     <div class="staff-wrap"><!-- all staff below this line -->
  1273.        
  1274.         <!-- staff -->
  1275.         <div class="staff">
  1276.             <div class="staffimg"><img src="https://64.media.tumblr.com/56006d3ac9e2ded901785609f7374528/b6c29d4ce381faa2-fd/s540x810/6fb07180bf79525123b3d484a470b646608e99fa.pnj">
  1277.             </div>
  1278.             <div class="staffname">
  1279.                 <div class="name">staff name</div>
  1280.                 <div class="dropdown"><a title="more info" href="#" class="cthrough"><i class="ph-info"></i></a>
  1281.                     <div class="sub">
  1282.                         <div id="subtitle">@name</div>
  1283.                         <div id="text">this is a description, put whatever  you want here!</div>
  1284.                         <div id="sublinks">
  1285.                         <a title="link" href="/"><i class="ph-user-fill"></i></a>
  1286.                         <a title="link" href="/"><i class="ph-heart-fill"></i></a>
  1287.                         </div><!-- #sublinks -->
  1288.                     </div><!-- .sub -->
  1289.                 </div><!-- .dropdown -->
  1290.             </div><!-- .staffname -->
  1291.         </div><!-- .staff -->
  1292.        
  1293.         <!-- staff -->
  1294.         <div class="staff">
  1295.             <div class="staffimg"><img src="https://64.media.tumblr.com/a988b7a1f6f77921c13034bb424ea591/121993c594cd7392-86/s500x750/97cddca261c2f448045e780d017feb8ee2a49c52.pnj">
  1296.             </div>
  1297.             <div class="staffname">
  1298.                 <div class="name">staff name</div>
  1299.                 <div class="dropdown"><a title="more info" href="#" class="cthrough"><i class="ph-info"></i></a>
  1300.                     <div class="sub">
  1301.                         <div id="subtitle">@name</div>
  1302.                         <div id="text">this is a description, put whatever  you want here!</div>
  1303.                         <div id="sublinks">
  1304.                         <a title="link" href="/"><i class="ph-user-fill"></i></a>
  1305.                         <a title="link" href="/"><i class="ph-heart-fill"></i></a>
  1306.                         </div><!-- #sublinks -->
  1307.                     </div><!-- .sub -->
  1308.                 </div><!-- .dropdown -->
  1309.             </div><!-- .staffname -->
  1310.         </div><!-- .staff -->
  1311.        
  1312.         <!-- staff -->
  1313.         <div class="staff">
  1314.             <div class="staffimg"><img src="https://64.media.tumblr.com/7cbbc758447b8ade70c8ca4051523b79/b6c29d4ce381faa2-41/s500x750/9cbd9bb7eff7d60ec91c1ff2accc6185705fbce5.pnj">
  1315.             </div>
  1316.             <div class="staffname">
  1317.                 <div class="name">staff name</div>
  1318.                 <div class="dropdown"><a title="more info" href="#" class="cthrough"><i class="ph-info"></i></a>
  1319.                     <div class="sub">
  1320.                         <div id="subtitle">@name</div>
  1321.                         <div id="text">this is a description, put whatever  you want here!</div>
  1322.                         <div id="sublinks">
  1323.                         <a title="link" href="/"><i class="ph-user-fill"></i></a>
  1324.                         <a title="link" href="/"><i class="ph-heart-fill"></i></a>
  1325.                         </div><!-- #sublinks -->
  1326.                     </div><!-- .sub -->
  1327.                 </div><!-- .dropdown -->
  1328.             </div><!-- .staffname -->
  1329.         </div><!-- .staff -->
  1330.        
  1331.         <!-- staff -->
  1332.         <div class="staff">
  1333.             <div class="staffimg"><img src="https://64.media.tumblr.com/5d8450d570c858cef34bd1b231b0dab6/b6c29d4ce381faa2-3e/s500x750/1d2aabc544126cbb23fa5e3f103e7bff38eb9a15.pnj">
  1334.             </div>
  1335.             <div class="staffname">
  1336.                 <div class="name">staff name</div>
  1337.                 <div class="dropdown"><a title="more info" href="#" class="cthrough"><i class="ph-info"></i></a>
  1338.                     <div class="sub">
  1339.                         <div id="subtitle">@name</div>
  1340.                         <div id="text">this is a description, put whatever  you want here!</div>
  1341.                         <div id="sublinks">
  1342.                         <a title="link" href="/"><i class="ph-user-fill"></i></a>
  1343.                         <a title="link" href="/"><i class="ph-heart-fill"></i></a>
  1344.                         </div><!-- #sublinks -->
  1345.                     </div><!-- .sub -->
  1346.                 </div><!-- .dropdown -->
  1347.             </div><!-- .staffname -->
  1348.         </div><!-- .staff -->
  1349.        
  1350.     </div><!-- .staff-wrap / all staff above this line -->
  1351. </article>
  1352.  
  1353. <!--- MEMBERS --->
  1354. <article>
  1355. <div class="heading"><span>members</span><i class="ph-butterfly"></i></div>
  1356.     <div class="members"><!-- all members below this line -->
  1357.        
  1358.         <!-- member -->
  1359.         <div class="member">
  1360.             <div class="memberimg"><img src="https://64.media.tumblr.com/fd79bcc407ead8cd05b870f3cb86f628/b6c29d4ce381faa2-19/s540x810/82fdb294279db72d9307856de60114518f59b37e.pnj">
  1361.             </div>
  1362.             <a class="membername" href="/">
  1363.                 <div class="name">name</div>
  1364.                 <div class="namesub">subtitle</div>
  1365.             </a><!-- .membername -->
  1366.         </div><!-- .member -->
  1367.        
  1368.         <!-- member -->
  1369.         <div class="member">
  1370.             <div class="memberimg"><img src="https://64.media.tumblr.com/fd79bcc407ead8cd05b870f3cb86f628/b6c29d4ce381faa2-19/s540x810/82fdb294279db72d9307856de60114518f59b37e.pnj">
  1371.             </div>
  1372.             <a class="membername" href="/">
  1373.                 <div class="name">name</div>
  1374.                 <div class="namesub">subtitle</div>
  1375.             </a><!-- .membername -->
  1376.         </div><!-- .member -->
  1377.        
  1378.         <!-- member -->
  1379.         <div class="member">
  1380.             <div class="memberimg"><img src="https://64.media.tumblr.com/44677deed9744534bfaf4b447264b301/121993c594cd7392-22/s1280x1920/2f8933ce7898eb0f9806955d6cea65de225a6eed.pnj">
  1381.             </div>
  1382.             <a class="membername" href="/">
  1383.                 <div class="name">name</div>
  1384.                 <div class="namesub">subtitle</div>
  1385.             </a><!-- .membername -->
  1386.         </div><!-- .member -->
  1387.        
  1388.         <!-- member -->
  1389.         <div class="member">
  1390.             <div class="memberimg"><img src="https://64.media.tumblr.com/44677deed9744534bfaf4b447264b301/121993c594cd7392-22/s1280x1920/2f8933ce7898eb0f9806955d6cea65de225a6eed.pnj">
  1391.             </div>
  1392.             <a class="membername" href="/">
  1393.                 <div class="name">name</div>
  1394.                 <div class="namesub">subtitle</div>
  1395.             </a><!-- .membername -->
  1396.         </div><!-- .member -->
  1397.        
  1398.         <!-- member -->
  1399.         <div class="member">
  1400.             <div class="memberimg"><img src="https://64.media.tumblr.com/e00355939540c8e6c695dd588db6df2e/b6c29d4ce381faa2-b6/s540x810/f051c522dc13ae5651c3379dca0a8b9a573eecb8.pnj">
  1401.             </div>
  1402.             <a class="membername" href="/">
  1403.                 <div class="name">name</div>
  1404.                 <div class="namesub">subtitle</div>
  1405.             </a><!-- .membername -->
  1406.         </div><!-- .member -->
  1407.        
  1408.         <!-- member -->
  1409.         <div class="member">
  1410.             <div class="memberimg"><img src="https://64.media.tumblr.com/e00355939540c8e6c695dd588db6df2e/b6c29d4ce381faa2-b6/s540x810/f051c522dc13ae5651c3379dca0a8b9a573eecb8.pnj">
  1411.             </div>
  1412.             <a class="membername" href="/">
  1413.                 <div class="name">name</div>
  1414.                 <div class="namesub">subtitle</div>
  1415.             </a><!-- .membername -->
  1416.         </div><!-- .member -->
  1417.        
  1418.         <!-- member -->
  1419.         <div class="member">
  1420.             <div class="memberimg"><img src="https://64.media.tumblr.com/ce56d9fe47d58065a7e441d9f665e8ae/b6c29d4ce381faa2-16/s1280x1920/dfb702894be1371ba1176af6cf37d5a48ad8470e.pnj">
  1421.             </div>
  1422.             <a class="membername" href="/">
  1423.                 <div class="name">name</div>
  1424.                 <div class="namesub">subtitle</div>
  1425.             </a><!-- .membername -->
  1426.         </div><!-- .member -->
  1427.        
  1428.         <!-- member -->
  1429.         <div class="member">
  1430.             <div class="memberimg"><img src="https://64.media.tumblr.com/ce56d9fe47d58065a7e441d9f665e8ae/b6c29d4ce381faa2-16/s1280x1920/dfb702894be1371ba1176af6cf37d5a48ad8470e.pnj">
  1431.             </div>
  1432.             <a class="membername" href="/">
  1433.                 <div class="name">name</div>
  1434.                 <div class="namesub">subtitle</div>
  1435.             </a><!-- .membername -->
  1436.         </div><!-- .member -->
  1437.        
  1438.     </div><!-- .members / all members above this line -->
  1439. </article>
  1440.  
  1441. </section><!-- section ends -->
  1442.  
  1443. </main><!-- end of main container -->
  1444.  
  1445. <script>
  1446.  
  1447. // tooltips
  1448. tippy('[title]', {
  1449.     theme: 'custom',
  1450.     arrow: false,
  1451.     followCursor: true,
  1452.     delay: 100,
  1453.     placement: 'bottom',
  1454.     offset: "40, 10",
  1455.     zIndex: 9999999999,
  1456.     maxWidth: 400,
  1457.  
  1458.     content(reference) {
  1459.       const title = reference.getAttribute('title');
  1460.       reference.removeAttribute('title');
  1461.       return title;
  1462.     },
  1463.  });
  1464.  
  1465. //scroll to top
  1466. $(document).ready(function(){
  1467.     $('#totop a').click(function(){
  1468.         $('html, body').animate({scrollTop : 0},400);
  1469.         return false;
  1470.     });
  1471. });
  1472.  
  1473. //drop downs
  1474. $(document).ready(function() {
  1475. $(".sub").hide();
  1476.     $(".cthrough").click(function(event){
  1477.         $(this).next(".sub").slideToggle(500);
  1478.         event.preventDefault();
  1479.         $(this).toggleClass('upside', 500);
  1480.     });
  1481. });
  1482.  
  1483. </script>
  1484.  
  1485. </body>
  1486. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!