API tools faq
paste
Advertisement
southcodes

the rumor | photocards page

southcodes
Oct 29th, 2022 (edited)
2,120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 37.08 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     - page 'the rumor' by skye southcodes.tumblr.com
  4.     - modify as you please but please do not touch the credit
  5.     - any errors? need help? have questions? let me know!
  6.     southcodes.tumblr.com/inbox
  7.    
  8.     - normalize css by https://github.com/necolas
  9.     - fonts by google
  10.     - icon font by http://fontawesome.io/icons/
  11.     - isotope filters https://codepen.io/desandro/pen/beeEKr/e24ee19a0727784a4f3b7d9b9be0d977
  12.     - pop ups http://jsfiddle.net/JKurcik/WGPhG/1124/
  13.  
  14.  -->
  15.  
  16.  <!--
  17.  
  18.     to customize filters please see https://hendrixrph-blog.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a
  19.  
  20.  
  21.     NOTE:    
  22.  
  23.     this page contains both a sidebar and a header image. the sidebar image will only appear in larger screen sizes, while the header image will only appear in smaller screen sizes. please customize both of those!
  24.    
  25.     to customize them please find ':root {' and underneat that change the urls like in the following example:
  26.  
  27.     --sidebar-image: url(SIDEBAR IMAGE LINK);
  28.  
  29.     --header-image: url(HEADER IMAGE LINK);
  30.  
  31.  
  32.   -->
  33.  <!DOCTYPE html>
  34.  <html>
  35.  <head>
  36.    <title>{title}</title>
  37.      
  38.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  39.  
  40.      <link rel="shortcut icon" href="{favicon}">
  41.      <meta name="description" content="{MetaDescription}"/>
  42.  
  43.     <!-- fonts -->
  44.     <link rel="preconnect" href="https://fonts.googleapis.com">
  45.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  46.     <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Passions+Conflict&display=swap" rel="stylesheet">
  47.      
  48.      <!-- normalize -->
  49.      <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  50.  
  51. <style>
  52. :root
  53. {
  54.     --background:#f9f9f9;
  55.     --box-background: #fff;
  56.     --text:#333;
  57.     --links: #8cb3db;
  58.     --links-hover: #36608c;
  59.     --borders:#eee;
  60.     --icons: rgb(223, 160, 137);
  61.     --accents:rgb(223, 160, 137);
  62.  
  63.     /* sidebar image */
  64.     --sidebar-image: url(SIDEBAR IMAGE LINK);
  65.  
  66.     /* header image */
  67.     --header-image: url(HEADER IMAGE LINK);
  68.  
  69.     /* keep this number as a rgba */
  70.     --description-background: rgba(255,255,255,.7)
  71. }
  72.  
  73. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  74. .tmblr-iframe:hover {opacity:.8;}
  75.  
  76. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  77. ::-webkit-scrollbar {width:6px}
  78. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  79.  
  80. * {box-sizing: border-box;}
  81.  
  82. pre {font-family:consolas;
  83.     white-space: pre-wrap;       /* css-3 */
  84.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  85.     white-space: -pre-wrap;      /* Opera 4- */
  86.     white-space: -o-pre-wrap;    /* Opera 7 */
  87.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  88. body, figure{margin:0;padding:0}
  89. html{font: 14px 'Karla', sans-serif;}
  90. body {font-size:14px;color:var(--text);background:var(--background);}
  91. a {text-decoration: none;color:var(--links);word-break:break-word;}
  92. a:hover {color:var(--links-hover);}
  93. blockquote {margin:0;padding:0;}
  94. img {max-width:100%;height: auto;display: block;margin:0}
  95. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  96. ul,ol,li {list-style: none;margin:0;padding:0;}
  97.  
  98. /* filters */
  99.  
  100. .page-filters {
  101.     margin-bottom: 3rem;
  102. }
  103.  
  104. .filters-title {
  105.     font-weight: 800;
  106.     letter-spacing: .04rem;
  107.     text-transform: uppercase;
  108.     vertical-align: middle;
  109.     margin-bottom: 2rem;
  110. }
  111.  
  112. .filters-title:before {
  113.     content: '\f111';
  114.     font-family: 'Font Awesome 5 Free';
  115.     font-weight: 900;
  116.     margin-right: 1rem;
  117.     top:-.2rem;
  118.     position: relative;
  119.     color:var(--icons);
  120.     font-size: .5rem;
  121. }
  122.  
  123. .page-filters li{
  124.     display: inline-block;
  125.     cursor: pointer;
  126.     padding: 0 .3rem .3rem;
  127.     margin:  1rem;
  128.     border-bottom: 2px solid transparent;
  129.     font-weight: 600;
  130. }
  131.  
  132. .page-filters .active {
  133.     border-bottom: 2px solid var(--accents);
  134.     transition-duration: .2s;
  135. }
  136.  
  137. /* wrapper */
  138.  
  139. #wrapper {
  140.     width: 100vw;
  141.     height: 100vh;
  142.     display: flex;
  143.     justify-content: center;
  144.     align-items: center;
  145. }
  146.  
  147. main {
  148.     width: 90vw;
  149.     max-width: 60rem;
  150.     background-color: var(--box-background);
  151.     height: 90vh;
  152.     max-height: 35rem;
  153.     display: flex;
  154.     position: relative;
  155.     border: 1px solid var(--borders);
  156. }
  157.  
  158. #left-column {
  159.     height: 100%;
  160.     max-width: 25rem;
  161.     width: 35%;
  162.     background-position: center center;
  163.     /* sidebar image */
  164.     background-image: var(--sidebar-image);
  165.     background-size: cover;
  166. }
  167.  
  168. #left-column-content {
  169.     position: absolute;
  170.     bottom:0;
  171.     left:0;
  172.     overflow: auto;
  173.     margin:1rem;
  174.     width: calc(35% - 3.5rem);
  175. }
  176.  
  177. #main-nav {
  178.     text-align: right;
  179.     margin-bottom: -1rem;
  180. }
  181.  
  182. #main-nav li {
  183.     display: inline-block;
  184.     margin-right: 1rem;
  185.     background-color: var(--description-background);
  186.     width:3rem;
  187.     height:3rem;
  188.     line-height: 3rem;
  189.     text-align: center;
  190.     border-radius: 100%;
  191.     font-size: 1.2rem;
  192.     border: 1px solid var(--borders);
  193. }
  194.  
  195. #main-nav .nav-icon{
  196.     width: 20px;
  197.     height: 20px;
  198.     color:var(--icons);
  199. }
  200.  
  201. li#popup-button {
  202.     transition-duration: .2s;
  203.     cursor: pointer;
  204. }
  205.  
  206. .click-overflow {
  207.     overflow:hidden;
  208.     height:10rem
  209. }
  210.  
  211. #main-nav li:hover .fa-solid{
  212.     color:var(--description-background)!important;
  213. }
  214. #main-nav li:hover{
  215.     background-color:var(--icons)!important;
  216. }
  217.  
  218. #page-description {
  219.     padding: 1.5rem 1rem 1rem;
  220.     background-color: var(--description-background);  
  221.     max-height: 9rem;
  222.     overflow: auto;
  223.     border-radius: 4px;
  224. }
  225.  
  226. #page-description p:first-of-type{margin-top: 0;}
  227. #page-description p:last-of-type{margin-bottom: 0;}
  228.  
  229. #right-column {
  230.     height: calc(100% - 4rem);
  231.     width: 65%;
  232.     min-width: calc(100% - 25rem);
  233.     background-color: var(--box-background);
  234.     overflow: auto;
  235.     margin:2rem;
  236.     position: relative;
  237. }
  238.  
  239.  
  240. h1 {
  241.     font:400 6rem 'Passions Conflict', cursive;
  242.     margin:0 0 1rem 1rem;
  243.     color: var(--accents)!important;
  244.     word-spacing: -.8rem;
  245.     /* text-shadow: 5px -1px #333; */
  246. }
  247.  
  248. #divider {
  249.     margin-bottom: 3rem;
  250. }
  251.  
  252. #main-content .grid-item{
  253.     width: calc(50% - 2rem);
  254.     margin:3rem 1rem 0;
  255.     cursor: pointer;
  256.     border-radius: 5px;
  257. }
  258.  
  259. #main-content .grid-item:hover .group-hover {opacity:1}
  260.  
  261. .group-hover {
  262.     border-radius: 4px;
  263.     position: absolute;top:0;bottom:0;right:0;left:0;
  264.     width:100%;height:100%;
  265.     background-color: rgba(255,255,255,.7);
  266.     display: flex;
  267.     justify-content: center;
  268.     align-items: center;
  269.     opacity: 0;
  270.     transition-duration: .2s;
  271. }
  272.  
  273. #main-content .grid-item .fa-plus {
  274.     background-color: white;
  275.     font-style: normal;
  276.     font-size: 1.5rem;
  277.     height:3rem;
  278.     width:3rem;
  279.     text-align: center;
  280.     line-height: 3rem;
  281.     border-radius: 100%;
  282.     color: var(--icons);
  283.     border:1px solid var(--borders)
  284. }
  285.  
  286. .group-image {
  287.     border-radius: 4px;
  288. }
  289.    
  290. .group-name {
  291.     text-align: center;
  292.     padding:2rem 1rem 2rem 0;
  293.     text-transform: uppercase;
  294.     font-weight: 700;
  295.     letter-spacing: 0;
  296.     font-size: 1.1rem;
  297. }
  298.  
  299. .group-type {
  300.     display: block;
  301.     font:400 1rem 'Karla', sans-serif;
  302.     text-transform: lowercase;
  303.     margin-top:.7rem;
  304.     font-style: italic;
  305.     letter-spacing: .6px;
  306.     font-size: .9rem;
  307. }
  308.  
  309. .group-name .fa-solid {
  310.     color: var(--icons);
  311.     margin-right: 1rem;
  312. }
  313.  
  314. /* pop ups */
  315.  
  316. /* main popup */
  317.  
  318. #main-popup {
  319.     position: fixed;top:0;bottom:0;left:0;right:0;
  320.     z-index: 1;
  321.     display: none;
  322.     width: 90vw;
  323.     max-width: 60rem;
  324.     margin:auto;
  325.     height: 90vh;
  326.     max-height: 35rem;
  327. }
  328.  
  329. #main-popup .fa-xmark {
  330.     position: absolute;top:1.5rem;right:1.5rem;
  331.     z-index: 9999;
  332.     font-size: 1.5rem;
  333.     cursor: pointer;
  334.     color: var(--icons);
  335.     background-color: var(--box-background);
  336.     width: 2rem;
  337.     height: 2rem;
  338.     line-height: 2rem;
  339.     text-align: center;
  340.     border-radius: 100%;
  341. }
  342.  
  343. #main-popup-inside {
  344.     width: 90vw;
  345.     max-width: 60rem;
  346.     margin:auto;
  347.     height: 100%;
  348.     padding:3rem;
  349.     overflow: auto;
  350.     background-color: var(--box-background);
  351. }
  352.  
  353. figure.main-group-image {
  354.     width:6rem;
  355.     height:6rem;
  356.     display: inline-block;
  357.     vertical-align: middle;
  358. }
  359.  
  360. img.main-group-image {
  361.     width:100%;
  362.     height:100%;
  363.     object-fit: cover;
  364.     border-radius: 100%;
  365. }
  366.  
  367. .main-group-name {
  368.     display: inline-block;
  369.     vertical-align: middle;
  370.     margin-left: 2rem;
  371.     text-transform: uppercase;
  372.     letter-spacing: .03rem  ;
  373. }
  374.  
  375. .main-group-name::first-letter {
  376.     color:var(--accents);
  377.     font-size: 1.6rem;
  378. }
  379.  
  380. .main-popup-stats {
  381.     column-gap: 2rem;
  382.     column-count: 3;
  383.     margin: 5rem 0;
  384. }
  385.  
  386. .main-popup-stats .photocards-stats-box{
  387.     break-inside: avoid;
  388. }
  389.  
  390. .photocards-stats-box {
  391.     background-color: var(--background);
  392.     border:1px solid var(--borders);
  393.     margin-bottom: 2rem;
  394. }
  395.  
  396. .photocards-stats-box ul {
  397.     margin-left: 1rem;
  398.     /* padding: 0 1rem 1rem; */
  399. }
  400.  
  401. .photocards-stats-box li {
  402.     margin:1.5rem 1rem;
  403.     display: flex;
  404.     align-items: center;
  405. }
  406.  
  407. .photocards-stats-box li:before {
  408.     content: '\f111';
  409.     font-family: 'font awesome 5 free';
  410.     font-weight: 900;
  411.     color:var(--icons);
  412.     font-size: .3rem;
  413.     margin-right: .8rem;
  414. }
  415.  
  416. .photocards-stats-box h3 {
  417.     font-size: 1.3rem;
  418.     text-transform: uppercase;
  419.     margin-bottom: 2rem;
  420.     color:var(--accents);
  421.     padding:1rem 2rem 0 1.5rem
  422. }
  423.  
  424. .photocard-stats-version {
  425.     margin-right: 1rem;
  426.     text-transform: uppercase;
  427.     font-weight: 500;
  428. }
  429.  
  430. .photocards-owned {
  431.     color: #aaa;
  432.     font-weight: 900;
  433. }
  434.  
  435. .photocards-total {
  436.     font-size: 1.2rem;
  437.     font-weight: 900;
  438.     color: var(--accents);
  439. }
  440.  
  441. /* photocards popups */
  442.  
  443. .group-popup {
  444.     display: none;
  445.     position: fixed;top:0;bottom:0;left:0;right:0;
  446.     background-color: var(--box-background);
  447.     z-index: 1;
  448.     width: 90vw;
  449.     max-width: 60rem;
  450.     height: 90vh;
  451.     max-height: 35rem;
  452.     margin:auto
  453. }
  454.  
  455. .inside-popup {
  456.     width: 90vw;
  457.     max-width: 60rem;
  458.     height: 90vh;
  459.     max-height: 35rem;
  460.     margin:auto;
  461.     padding:2rem;
  462.     overflow: auto;
  463.     border: 1px solid var(--borders);
  464. }
  465.  
  466. .group-popup .cancel{
  467.     position: absolute;top:1.5rem;right:1.5rem;
  468.     z-index: 9999;
  469.     font-size: 1.5rem;
  470.     cursor: pointer;
  471.     color: var(--icons);
  472.     background-color: var(--box-background);
  473.     width: 2rem;
  474.     height: 2rem;
  475.     line-height: 2rem;
  476.     text-align: center;
  477.     border-radius: 100%;
  478. }
  479.  
  480. .group-popup .grid{
  481.     margin-top: 4rem;
  482. }
  483.  
  484. .group-popup .grid-item {
  485.     width: calc(33% - 6rem);
  486.     margin:2rem 3rem;
  487.     background-color: gray;
  488.     position: relative;
  489.     border: 1px solid var(--borders);
  490.     border-radius: 4px;
  491. }
  492.  
  493. .group-popup .grid-item:hover .photocard-info{
  494.     opacity: 1;
  495.     transition-duration: .2s;
  496. }
  497.  
  498. .photocard-image {
  499.     border-radius: 4px;  
  500. }
  501.  
  502. .photocard-info {
  503.     opacity: 0;
  504.     transition-duration: .2s;
  505.     position: absolute;
  506.     top: 0;bottom:0;right:0;
  507.     left: 0;
  508.     background-color: white;
  509.     width: 100%;
  510.     height: 100%;
  511.     display: flex;
  512.     justify-content: center;
  513.     align-items: center;
  514.     flex-flow: column wrap;
  515. }
  516. .missing {
  517.     height: 17rem;
  518.     position: relative;
  519.     background-color: #aaa;
  520. }
  521.  
  522. .missing:before {
  523.     content:'\f0c0';
  524.     color:#fafafa;
  525.     line-height: 17rem;
  526.     font-size: 7rem;
  527.     font-weight: 900;
  528.     top:0;right:0;
  529.     bottom:0;left:0;
  530.     font-family: 'Font Awesome 5 Free';
  531.     position: absolute;
  532.     text-align: center;
  533.     margin:auto
  534. }
  535.  
  536. .missing .photocard-info {
  537.     opacity: 1;
  538.     background-color: rgba(255,255,255,.6)
  539. }
  540.  
  541. .missing .photocard-info .photocard-year{
  542.     color:#888
  543. }
  544.  
  545. .photocard-era {
  546.     font-weight: 800;
  547.     font-size: 1.1rem;
  548.     text-transform: uppercase;
  549. }
  550.  
  551. .photocard-year {
  552.     font-style: italic;
  553.     color:#aaa;
  554.     margin:.3rem 0 .5rem;
  555.     font-size: .9rem;
  556.     letter-spacing: .05rem;
  557. }
  558.  
  559. .photocard-version {
  560.     font-size: .9rem;
  561.     text-transform: uppercase;
  562.     margin-top: .5rem;
  563.     letter-spacing: .03rem;
  564.     font-weight: 600;
  565. }
  566.  
  567.  
  568. #open-responsive {
  569.     display: none!important;
  570. }
  571.  
  572.  
  573. /* MEDIA */
  574.  
  575. @media only screen and (min-width:0) and (max-width:800px) {
  576.  
  577.     #open-responsive {
  578.         display: block;
  579.     }
  580.  
  581.     #wrapper {
  582.         width: 100%;
  583.         height: 100%!important;
  584.         display: block;
  585.         margin: 4rem auto;
  586.         background-color: var(--background);
  587.     }
  588.  
  589.     main {
  590.         width: 90vw;
  591.         max-width: 60rem;
  592.         background-color: var(--box-background);
  593.         height: 200%;
  594.         max-height: 200%;
  595.         display: block;
  596.         position: relative;
  597.         border: 1px solid var(--borders);
  598.         margin:auto;
  599.     }
  600.  
  601.     #left-column {
  602.         height: 15rem;
  603.         max-width: 100%;
  604.         width: 100%;
  605.         background-size: 100%;
  606.         background-position: center center;
  607.         /* header image */
  608.         background-image: var(--header-image);
  609.         position: relative;
  610.         overflow: hidden;
  611.     }
  612.  
  613.     #left-column-content {
  614.         position: absolute;
  615.         width:calc(100% - 2rem);bottom:1rem;right:1rem;left:1rem;
  616.         z-index: 1;
  617.         margin:0;
  618.     }
  619.  
  620.     #page-description {
  621.         padding: 1rem;
  622.         background-color: var(--description-background);  
  623.         max-height: 7rem;
  624.         overflow: auto;
  625.     }
  626.  
  627.     #right-column {
  628.         height: 10%;
  629.         width: 100%;
  630.         min-width: calc(100% - 25rem);
  631.         background-color: transparent;
  632.         overflow: auto;
  633.         margin:0;
  634.         position: relative;
  635.         padding:1rem 3rem;
  636.     }
  637.  
  638.     #main-content {
  639.         background-color: transparent;
  640.         width: 100%;
  641.         height:20rem;
  642.         overflow: auto;
  643.     }
  644.  
  645.  
  646.     #main-content .grid-item{
  647.         width: calc(50% - 2rem);
  648.         margin:2rem 1rem;
  649.         border:1px solid #eee;
  650.         position: relative;
  651.         cursor: pointer;
  652.         border-radius: 5px;
  653.     }
  654.  
  655.     .group-popup {
  656.         display: none;
  657.         position: fixed;top:0;bottom:0;left:0;right:0;
  658.         background-color: var(--box-background);
  659.         background-color: rgba(255,255,255,.5);
  660.         z-index: 1;
  661.         width: 100%;
  662.         max-width: 100%;
  663.         height: 100%;
  664.         max-height: 100%;
  665.         margin:auto
  666.     }
  667.  
  668.     .inside-popup {
  669.         width: 100%;
  670.         max-width: 100%;
  671.         height: 100vh;
  672.         max-height: 100%;    
  673.         background-color: var(--box-background);
  674.         margin: 0 auto;
  675.         padding:2rem;
  676.         overflow: auto;
  677.     }
  678.  
  679.     #main-popup {
  680.         background-color: var(--box-background);
  681.         width:100vw;
  682.         height:100vh;
  683.         max-width:100vw;
  684.         max-height:100vh;
  685.         overflow: auto;
  686.     }
  687.  
  688.     #main-content {
  689.         background-color: transparent;
  690.         width: 100%;
  691.         height:100%;
  692.         overflow: auto;
  693.     }
  694.  
  695.     .group-popup .grid-item {
  696.         width: calc(50% - 6rem);
  697.         margin:2rem 3rem;
  698.         position: relative;
  699.         border: 1px solid var(--borders);
  700.         border-radius: 4px;
  701.     }
  702.  
  703.  
  704.     .main-popup-stats {
  705.         column-count: 2;
  706.     }
  707.  
  708. }
  709.  
  710.  
  711. @media only screen and (min-width:0) and (max-width:600px) {
  712.    
  713.     #main-content .grid-item{
  714.         width: calc(100%);
  715.         margin:2rem 0;
  716.     }
  717.  
  718.     .main-popup-stats {
  719.         column-count: 1;
  720.     }
  721.    
  722.        
  723.     .group-popup .grid-item {
  724.         width: calc(50% - 2rem);
  725.         margin:2rem 1rem;
  726.         position: relative;
  727.         border: 1px solid var(--borders);
  728.         border-radius: 4px;
  729.     }
  730.  
  731.        
  732.     .group-stats {
  733.         column-count: 2;
  734.     }
  735.  
  736. }
  737. </style>
  738.      
  739. </head>
  740. <body>
  741.  
  742. <div id="wrapper">
  743. <main>
  744.  
  745. <!-- left column start -->
  746. <section id="left-column">
  747.  
  748.   <div id="left-column-content">
  749.  
  750.     <nav id="main-nav"><ul>
  751.  
  752.       <!-- button navigation -->
  753.  
  754.       <!-- home link -->
  755.       <li><a href="/"><i class="nav-icon fa-solid fa-home"></i></a></li>
  756.      
  757.       <!-- inbox link -->
  758.       <li><a href="/ask"><i class="nav-icon fa-solid fa-envelope"></i></a></li>
  759.      
  760.       <!-- open pop up button -->
  761.       <li id="popup-button"><i class="nav-icon fa-solid fa-plus"></i></li>
  762.       <li id="open-responsive"><i class="nav-icon fa-solid fa-plus"></i></li>
  763.     </ul></nav>
  764.  
  765.     <article id="page-description">
  766.       <!-- page description -->
  767.       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, doloribus voluptatibus. Similique doloremque tempora molestias, reprehenderit corrupti provident quaerat sequi explicabo eos maiores aliquam tempore obcaecati, pariatur exercitationem ipsa magnam.</p>
  768.       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, doloribus voluptatibus. Similique doloremque tempora molestias, reprehenderit corrupti provident quaerat sequi explicabo eos maiores aliquam tempore obcaecati, pariatur exercitationem ipsa magnam.</p>
  769.     </article>
  770.   </div>
  771.  
  772. </section>
  773. <!-- left column end -->
  774.  
  775. <!-- main pop up wrapper start -->
  776.   <section id="main-popup"><div id="close-main-popup"><i class="fa-solid fa-xmark"></i></div><div id="main-popup-inside">
  777.  
  778.    
  779.   <!-- page main popup start
  780.    
  781.     this is the main pop up that shows up when you click the plus icon in the sidebar/header
  782.  
  783.     in this popup you can track the number of photocards you own/are missing per group/era/version
  784.  
  785.   -->
  786.  
  787.   <!-- to add more groups copy paste from 'start group' to 'end group' -->
  788.  
  789.    <!-- start group -->
  790.    <article class="main-popup-group">
  791.  
  792.      <figure class="main-group-image">
  793.         <!-- group image -->
  794.         <img class="main-group-image" src="IMAGE URL" alt="">
  795.       </figure>
  796.  
  797.       <!-- group name -->
  798.       <h2 class="main-group-name">
  799.      
  800.         group name
  801.      
  802.       </h2>
  803.  
  804.       <section class="main-popup-stats">    
  805.  
  806.         <!--
  807.          
  808.           each of the boxes below (from group era start to group era end) correspond to each era from the group, and inside it you can add several version of photocards from that era and within it a counter for missing/owned pcs from that version
  809.  
  810.         -->
  811.  
  812.         <!-- group era start -->
  813.         <article class="photocards-stats-box">
  814.  
  815.           <!-- era image. you can delete this if you dont want it -->
  816.           <figure class="photocards-stats-image"><img src="GROUP ERA IMAGE" alt="" class="photocards-stats-image"></figure>
  817.  
  818.           <!-- era name -->
  819.           <h3>era name</h3>
  820.  
  821.           <!-- era and photocards count -->
  822.          
  823.           <!-- version start -->
  824.           <ul>
  825.            
  826.             <li>
  827.               <span class="photocard-stats-version">pc version</span>
  828.               <span class="photocards-owned"> 10/</span>
  829.               <span class="photocards-total">100</span>
  830.             </li>
  831.  
  832.             <li>
  833.               <span class="photocard-stats-version">pc version</span>
  834.               <span class="photocards-owned"> 10/</span>
  835.               <span class="photocards-total">100</span>
  836.             </li>
  837.             <li>
  838.  
  839.               <span class="photocard-stats-version">pc version</span>
  840.               <span class="photocards-owned"> 10/</span>
  841.               <span class="photocards-total">100</span>
  842.             </li>
  843.  
  844.           <!-- version end -->
  845.  
  846.           </ul>
  847.         </article>
  848.         <!-- group era end -->
  849.  
  850.  
  851.  
  852.        
  853.  
  854.         <!-- group era start -->
  855.         <article class="photocards-stats-box">
  856.  
  857.           <!-- era image. you can delete this if you dont want it -->
  858.           <figure class="photocards-stats-image"><img src="GROUP ERA IMAGE" alt="" class="photocards-stats-image"></figure>
  859.  
  860.           <!-- era name -->
  861.           <h3>era name</h3>
  862.  
  863.           <!-- era and photocards count -->
  864.          
  865.           <!-- version start -->
  866.           <ul>
  867.            
  868.             <li>
  869.               <span class="photocard-stats-version">pc version</span>
  870.               <span class="photocards-owned"> 10/</span>
  871.               <span class="photocards-total">100</span>
  872.             </li>
  873.  
  874.             <li>
  875.               <span class="photocard-stats-version">pc version</span>
  876.               <span class="photocards-owned"> 10/</span>
  877.               <span class="photocards-total">100</span>
  878.             </li>
  879.             <li>
  880.  
  881.               <span class="photocard-stats-version">pc version</span>
  882.               <span class="photocards-owned"> 10/</span>
  883.               <span class="photocards-total">100</span>
  884.             </li>
  885.  
  886.           <!-- version end -->
  887.  
  888.           </ul>
  889.         </article>
  890.         <!-- group era end -->
  891.  
  892.  
  893.  
  894.        
  895.  
  896.         <!-- group era start -->
  897.         <article class="photocards-stats-box">
  898.  
  899.           <!-- era image. you can delete this if you dont want it -->
  900.           <figure class="photocards-stats-image"><img src="GROUP ERA IMAGE" alt="" class="photocards-stats-image"></figure>
  901.  
  902.           <!-- era name -->
  903.           <h3>era name</h3>
  904.  
  905.           <!-- era and photocards count -->
  906.          
  907.           <!-- version start -->
  908.           <ul>
  909.            
  910.             <li>
  911.               <span class="photocard-stats-version">pc version</span>
  912.               <span class="photocards-owned"> 10/</span>
  913.               <span class="photocards-total">100</span>
  914.             </li>
  915.  
  916.             <li>
  917.               <span class="photocard-stats-version">pc version</span>
  918.               <span class="photocards-owned"> 10/</span>
  919.               <span class="photocards-total">100</span>
  920.             </li>
  921.             <li>
  922.  
  923.               <span class="photocard-stats-version">pc version</span>
  924.               <span class="photocards-owned"> 10/</span>
  925.               <span class="photocards-total">100</span>
  926.             </li>
  927.  
  928.           <!-- version end -->
  929.  
  930.           </ul>
  931.         </article>
  932.         <!-- group era end -->
  933.  
  934.  
  935.  
  936.        
  937.  
  938.  
  939.       </section>
  940.   </article>
  941.   <!-- end group -->
  942.  
  943.  
  944.  
  945.  
  946.  
  947.    <!-- start group -->
  948.    <article class="main-popup-group">
  949.  
  950.      <figure class="main-group-image">
  951.         <!-- group image -->
  952.         <img class="main-group-image" src="IMAGE URL" alt="">
  953.       </figure>
  954.  
  955.       <!-- group name -->
  956.       <h2 class="main-group-name">
  957.      
  958.         group name
  959.      
  960.       </h2>
  961.  
  962.       <section class="main-popup-stats">    
  963.  
  964.         <!--
  965.          
  966.           each of the boxes below (from group era start to group era end) correspond to each era from the group, and inside it you can add several version of photocards from that era and within it a counter for missing/owned pcs from that version
  967.  
  968.         -->
  969.  
  970.         <!-- group era start -->
  971.         <article class="photocards-stats-box">
  972.  
  973.           <!-- era image -->
  974.           <figure class="photocards-stats-image"><img src="IMAGE URL" alt="" class="photocards-stats-image"></figure>
  975.  
  976.           <!-- era name -->
  977.           <h3>era name</h3>
  978.  
  979.           <!-- era and photocards count -->
  980.          
  981.           <!-- version start -->
  982.           <ul>
  983.            
  984.             <li>
  985.               <span class="photocard-stats-version">pc version</span>
  986.               <span class="photocards-owned"> 10/</span>
  987.               <span class="photocards-total">100</span>
  988.             </li>
  989.  
  990.             <li>
  991.               <span class="photocard-stats-version">pc version</span>
  992.               <span class="photocards-owned"> 10/</span>
  993.               <span class="photocards-total">100</span>
  994.             </li>
  995.             <li>
  996.  
  997.               <span class="photocard-stats-version">pc version</span>
  998.               <span class="photocards-owned"> 10/</span>
  999.               <span class="photocards-total">100</span>
  1000.             </li>
  1001.  
  1002.           <!-- version end -->
  1003.  
  1004.           </ul>
  1005.         </article>
  1006.         <!-- group era end -->
  1007.  
  1008.  
  1009.  
  1010.        
  1011.  
  1012.         <!-- group era start -->
  1013.         <article class="photocards-stats-box">
  1014.  
  1015.           <!-- era image -->
  1016.           <figure class="photocards-stats-image"><img src="IMAGE URL" alt="" class="photocards-stats-image"></figure>
  1017.  
  1018.           <!-- era name -->
  1019.           <h3>era name</h3>
  1020.  
  1021.           <!-- era and photocards count -->
  1022.          
  1023.           <!-- version start -->
  1024.           <ul>
  1025.            
  1026.             <li>
  1027.               <span class="photocard-stats-version">pc version</span>
  1028.               <span class="photocards-owned"> 10/</span>
  1029.               <span class="photocards-total">100</span>
  1030.             </li>
  1031.  
  1032.             <li>
  1033.               <span class="photocard-stats-version">pc version</span>
  1034.               <span class="photocards-owned"> 10/</span>
  1035.               <span class="photocards-total">100</span>
  1036.             </li>
  1037.             <li>
  1038.  
  1039.               <span class="photocard-stats-version">pc version</span>
  1040.               <span class="photocards-owned"> 10/</span>
  1041.               <span class="photocards-total">100</span>
  1042.             </li>
  1043.  
  1044.           <!-- version end -->
  1045.  
  1046.           </ul>
  1047.         </article>
  1048.         <!-- group era end -->
  1049.  
  1050.  
  1051.  
  1052.  
  1053.         <!-- group era start -->
  1054.         <article class="photocards-stats-box">
  1055.  
  1056.           <!-- era image -->
  1057.           <figure class="photocards-stats-image"><img src="IMAGE URL" alt="" class="photocards-stats-image"></figure>
  1058.  
  1059.           <!-- era name -->
  1060.           <h3>era name</h3>
  1061.  
  1062.           <!-- era and photocards count -->
  1063.          
  1064.           <!-- version start -->
  1065.           <ul>
  1066.            
  1067.             <li>
  1068.               <span class="photocard-stats-version">pc version</span>
  1069.               <span class="photocards-owned"> 10/</span>
  1070.               <span class="photocards-total">100</span>
  1071.             </li>
  1072.  
  1073.             <li>
  1074.               <span class="photocard-stats-version">pc version</span>
  1075.               <span class="photocards-owned"> 10/</span>
  1076.               <span class="photocards-total">100</span>
  1077.             </li>
  1078.             <li>
  1079.  
  1080.               <span class="photocard-stats-version">pc version</span>
  1081.               <span class="photocards-owned"> 10/</span>
  1082.               <span class="photocards-total">100</span>
  1083.             </li>
  1084.  
  1085.           <!-- version end -->
  1086.  
  1087.           </ul>
  1088.         </article>
  1089.         <!-- group era end -->
  1090.  
  1091.  
  1092.  
  1093.  
  1094.       </section>
  1095.   </article>
  1096.   <!-- end group -->
  1097.  
  1098.  
  1099.  
  1100.  
  1101.  
  1102.   </div></section>
  1103.   <!-- main pop up wrapper end-->
  1104.  
  1105.  
  1106. <!-- right column star -->
  1107. <section id="right-column">
  1108.  
  1109.   <!-- page title -->
  1110.   <h1>page title</h1>
  1111.  
  1112.   <hr id="divider">
  1113.  
  1114.   <article id="main-content">
  1115.      
  1116.       <div class="page-filters">
  1117.  
  1118.         <h3 class="filters-title">filters title</h3>
  1119.  
  1120.         <!-- to customize filters please see https://hendrixrph-blog.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a -->
  1121.        
  1122.         <ul>
  1123.           <li data-filter="*" class="active">All projects</li>
  1124.           <li data-filter=".ggs">girl groups</li>
  1125.           <li data-filter=".bgs">boy groups</li>
  1126.           <li data-filter=".soloist">soloists</li>
  1127.           </ul>
  1128.       </div>
  1129.  
  1130.       <!-- start of groups -->
  1131.       <div class="grid">
  1132.  
  1133.         <!-- these are the groups that show up in the main page. when clicking on these a popup will show up showing the photocards you have from that group. when you hover on those photocards you will see the era name, year, and version of the photocard
  1134.        
  1135.           to add more groups copy paste from group start to group end
  1136.  
  1137.           IMPORTANT:
  1138.           to get the popups to work the popup id needs to be the same as the '(div1)' from the grid-item element
  1139.  
  1140.           you'll find the grid-item right below this, and to go to the popups search for: group photocards pop ups start
  1141.  
  1142.          for example, if the grid-item says:
  1143.  
  1144.          <div class="grid-item ggs" onClick="openPopup('UNIQUE ID');">
  1145.          
  1146.          the popup you should be:
  1147.          
  1148.          <div id="UNIQUE ID" class="group-popup">
  1149.  
  1150.        -->
  1151.        
  1152.      <!-- group start -->
  1153.        <div class="grid-item ggs" onClick="openPopup('div1');">
  1154.        <div style="position: relative"><div class="group-hover"><i class="fa-solid fa-plus"></i></div>
  1155.  
  1156.          <!-- group image -->
  1157.          <img src="IMAGE URL" alt="kpop group" class="group-image">
  1158.          
  1159.        </div>
  1160.  
  1161.        <div class="group-name">
  1162.          
  1163.          <!-- group name -->
  1164.          <i class="fa-solid fa-users"></i>group name
  1165.  
  1166.          <!-- group type -->
  1167.          <span class="group-type">type of group</span>
  1168.        </div>
  1169.  
  1170.        </div>
  1171.        <!-- group end -->
  1172.        
  1173.        
  1174.      <!-- group start -->
  1175.        <div class="grid-item ggs" onClick="openPopup('div2');">
  1176.        <div style="position: relative"><div class="group-hover"><i class="fa-solid fa-plus"></i></div>
  1177.  
  1178.          <!-- group image -->
  1179.          <img src="IMAGE URL" alt="kpop group" class="group-image">
  1180.          
  1181.        </div>
  1182.  
  1183.        <div class="group-name">
  1184.          
  1185.          <!-- group name -->
  1186.          <i class="fa-solid fa-users"></i>group name
  1187.  
  1188.          <!-- group type -->
  1189.          <span class="group-type">type of group</span>
  1190.        </div>
  1191.  
  1192.        </div>
  1193.        <!-- group end -->
  1194.        
  1195.  
  1196.      </div> <!-- grid end -->
  1197.  
  1198.  </article>
  1199.  
  1200.  
  1201.  
  1202.  <!-- group photocards pop ups start -->
  1203.  
  1204.  
  1205.  <!-- these are the popups that shows up when you click on the group box grid-item from the main page -->
  1206.  
  1207.  
  1208.  <!-- per group showing photocards popup start  -->
  1209.  
  1210.  
  1211.  <div id="div1" class="group-popup"><div class="cancel" onclick="closePopup();"><i class="fa-solid fa-xmark"></i></div>
  1212.  <div class="inside-popup">
  1213.  
  1214.    <!-- filters start -->
  1215.      <div class="page-filters">
  1216.        
  1217.        <!-- filter title -->
  1218.        <h3 class="filters-title">filters title</h3>
  1219.  
  1220.        <!-- filters -->
  1221.        <ul>
  1222.          <li data-filter="*" class="active">All projects</li>
  1223.          <li data-filter=".ggs">girl groups</li>
  1224.          <li data-filter=".bgs">boy groups</li>
  1225.          <li data-filter=".soloist">soloists</li>
  1226.          </ul>
  1227.      </div>
  1228.      <!-- filters end -->
  1229.  
  1230.      
  1231.      <!-- photocards container start -->
  1232.      <div class="grid">
  1233.  
  1234.  
  1235.        <!-- missing photocard start
  1236.  
  1237.          this box is customized especifically to add photocards you're missing. make sure to keep the class 'missing'!
  1238.         -->
  1239.           <div class="grid-item missing">
  1240.             <ul class="photocard-info">
  1241.               <!-- era -->
  1242.               <li class="photocard-era">photocard era</li>
  1243.               <!-- year -->
  1244.               <li class="photocard-year">photocard year</li>
  1245.               <!-- version -->
  1246.               <li class="photocard-version">photocard version</li>
  1247.             </ul>
  1248.           </div>
  1249.           <!-- missing photocard end -->
  1250.  
  1251.  
  1252.         <!-- this is the template for photocards you own -->
  1253.  
  1254.         <!-- photocard start -->
  1255.           <div class="grid-item soloist">
  1256.  
  1257.             <!-- pc image -->
  1258.             <img class="photocard-image" src="PC IMAGE URL" alt="">
  1259.             <ul class="photocard-info">
  1260.               <!-- era -->
  1261.               <li class="photocard-era">era</li>
  1262.               <!-- year -->
  1263.               <li class="photocard-year">year</li>
  1264.               <!-- version -->
  1265.               <li class="photocard-version">version</li>
  1266.             </ul>
  1267.           </div>
  1268.           <!-- photocard end -->
  1269.  
  1270.         <!-- photocard start -->
  1271.           <div class="grid-item soloist">
  1272.  
  1273.             <!-- pc image -->
  1274.             <img class="photocard-image" src="PC IMAGE URL" alt="">
  1275.             <ul class="photocard-info">
  1276.               <!-- era -->
  1277.               <li class="photocard-era">era</li>
  1278.               <!-- year -->
  1279.               <li class="photocard-year">year</li>
  1280.               <!-- version -->
  1281.               <li class="photocard-version">version</li>
  1282.             </ul>
  1283.           </div>
  1284.           <!-- photocard end -->
  1285.  
  1286.       </div>
  1287.       <!-- photocards container  end -->
  1288.  
  1289.   </div></div>
  1290.  
  1291.   <!-- per group showing photocards popup end  -->
  1292.  
  1293.  
  1294.  
  1295.  
  1296.  
  1297.   <!-- per group showing photocards popup start  -->
  1298.  
  1299.  
  1300.   <div id="div2" class="group-popup"><div class="cancel" onclick="closePopup();"><i class="fa-solid fa-xmark"></i></div>
  1301.   <div class="inside-popup">
  1302.  
  1303.     <!-- filters start -->
  1304.       <div class="page-filters">
  1305.        
  1306.         <!-- filter title -->
  1307.         <h3 class="filters-title">filters title</h3>
  1308.  
  1309.         <!-- filters -->
  1310.         <ul>
  1311.           <li data-filter="*" class="active">All projects</li>
  1312.           <li data-filter=".ggs">girl groups</li>
  1313.           <li data-filter=".bgs">boy groups</li>
  1314.           <li data-filter=".soloist">soloists</li>
  1315.           </ul>
  1316.       </div>
  1317.       <!-- filters end -->
  1318.  
  1319.      
  1320.       <!-- photocards container start -->
  1321.       <div class="grid">
  1322.  
  1323.  
  1324.         <!-- missing photocard start
  1325.  
  1326.           this box is customized especifically to add photocards you're missing. make sure to keep the class 'missing'!
  1327.        -->
  1328.          <div class="grid-item missing">
  1329.            <ul class="photocard-info">
  1330.              <!-- era -->
  1331.              <li class="photocard-era">photocard era</li>
  1332.              <!-- year -->
  1333.              <li class="photocard-year">photocard year</li>
  1334.              <!-- version -->
  1335.              <li class="photocard-version">photocard version</li>
  1336.            </ul>
  1337.          </div>
  1338.          <!-- missing photocard end -->
  1339.  
  1340.  
  1341.        <!-- this is the template for photocards you own -->
  1342.  
  1343.        <!-- photocard start -->
  1344.          <div class="grid-item soloist">
  1345.  
  1346.            <!-- pc image -->
  1347.            <img class="photocard-image" src="PC IMAGE URL" alt="">
  1348.            <ul class="photocard-info">
  1349.              <!-- era -->
  1350.              <li class="photocard-era">era</li>
  1351.              <!-- year -->
  1352.              <li class="photocard-year">year</li>
  1353.              <!-- version -->
  1354.              <li class="photocard-version">version</li>
  1355.            </ul>
  1356.          </div>
  1357.          <!-- photocard end -->
  1358.  
  1359.        <!-- photocard start -->
  1360.          <div class="grid-item soloist">
  1361.  
  1362.            <!-- pc image -->
  1363.            <img class="photocard-image" src="PC IMAGE URL" alt="">
  1364.            <ul class="photocard-info">
  1365.              <!-- era -->
  1366.              <li class="photocard-era">era</li>
  1367.              <!-- year -->
  1368.              <li class="photocard-year">year</li>
  1369.              <!-- version -->
  1370.              <li class="photocard-version">version</li>
  1371.            </ul>
  1372.          </div>
  1373.          <!-- photocard end -->
  1374.  
  1375.      </div>
  1376.      <!-- photocards container  end -->
  1377.  
  1378.  </div></div>
  1379.  
  1380.  <!-- per group showing photocards popup end  -->
  1381.  
  1382.  
  1383.  
  1384.  
  1385.  <!-- group photocards pop ups end -->
  1386.  
  1387.  
  1388. </section>
  1389. <!-- right column end -->
  1390.  
  1391. </main>
  1392. </div>
  1393. <!-- do not touch -->
  1394. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  1395.  
  1396. <!-- jquery -->
  1397. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  1398.  
  1399. <!-- isotope -->
  1400. <script src="https://npmcdn.com/imagesloaded@4.1.0/imagesloaded.pkgd.min.js"></script>
  1401. <script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
  1402.  
  1403. <!-- font icon -->
  1404. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  1405.  
  1406. <script>
  1407. $(document).ready(function(){
  1408.  
  1409.    // main pop up open/close
  1410.    $('#popup-button').click(function(){
  1411.      $('#main-popup').fadeToggle(300);
  1412.      return false;
  1413.  });
  1414.  
  1415.      // main pop up open/close
  1416.    $('#open-responsive').click(function(){
  1417.      $('#main-popup').fade(300);
  1418.      return false;
  1419.  });
  1420.  
  1421.    // main pop up open/close
  1422.    $('#close-main-popup').click(function(){
  1423.      $('#main-popup').fadeOut(300);
  1424.      return false;
  1425.  });
  1426.  
  1427.    // main pop up open/close
  1428.    $('#close-main-popup').click(function(){
  1429.      $('#popup-button').removeClass("active-button");
  1430.      return false;
  1431.  });
  1432.  
  1433. });
  1434.  
  1435. // pop ups
  1436. function openPopup(el) {
  1437.    $('.group-popup').hide();
  1438.    $('#' + el).fadeIn(200);  
  1439. }
  1440.  
  1441. function closePopup() {
  1442.    $('.group-popup').fadeOut(300);
  1443. }
  1444.  
  1445.  
  1446. // isotope
  1447. function enableIsotope() {
  1448.  // for each filters
  1449.  $('.page-filters').each( function( i, buttonGroup ) {
  1450.    var $buttonGroup = $( buttonGroup );
  1451.  
  1452.    // init isotope
  1453.    var $grid = $buttonGroup.next('.grid');
  1454.    $grid.imagesLoaded( function() {
  1455.      $grid.isotope({
  1456.        itemSelector: '.grid-item'
  1457.      })
  1458.    });
  1459.    
  1460.    // button click
  1461.    $buttonGroup.on( 'click', 'li', function() {
  1462.      var $this = $( this );
  1463.      // filter isotope
  1464.      var filterValue = $this.attr('data-filter');
  1465.      $grid.isotope({ filter: filterValue });
  1466.      // change selected
  1467.      $buttonGroup.find('.active').removeClass('active');
  1468.      $this.addClass('active');
  1469.    });
  1470.  });
  1471.  
  1472. };
  1473. enableIsotope();
  1474.  
  1475. $('.grid-item').on('click', function() {
  1476.  $('.grid').isotope('layout');
  1477. });
  1478. </script>
  1479. </body>
  1480. </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!