API tools faq
paste
Advertisement
southcodes

prehistoric | wip page

southcodes
Apr 8th, 2022 (edited)
3,577
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 54.54 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.        
  3.     - wip page 'prehistoric' 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 https://fontawesome.com/icons
  11.     - popups by http://jsfiddle.net/WGPhG/1123/
  12.     - isotope filters by https://isotope.metafizzy.co/
  13.  
  14.     - TO CUSTOMIZE FILTERS PLEASE SEE THIS TUTORIAL, SCROLL DOWN TO "FILTER BY MULTIPLE CRITERIA": https://hendrixrph-blog.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a
  15.    
  16. -->
  17.  
  18. <!DOCTYPE html>
  19. <html>
  20. <head>
  21.     <title>{title}</title>
  22.    
  23.     <meta charset="UTF-8">
  24.  
  25.     <meta name="viewport" content="width=device-width">
  26.  
  27.     <link rel="shortcut icon" href="{favicon}">
  28.  
  29.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30.  
  31.     <meta name="description" content="{MetaDescription}"/>
  32.  
  33.     <!-- fonts -->
  34.     <link rel="preconnect" href="https://fonts.googleapis.com">
  35.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  36.     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
  37.  
  38.     <!-- normalize css -->
  39.     <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  40.  
  41. <style>
  42. :root {
  43.     --background:#fafafa;
  44.     --sidebar-background:#ffffff;
  45.     --boxes-background: #ffffff;
  46.     --popup-background: #ffffff;
  47.     --text: #333333;
  48.     --links: #8cbdce;
  49.     --links-hover: #0000ff;
  50.     --borders: #eeeeee;
  51. }
  52.  
  53. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  54. .tmblr-iframe:hover {opacity:.8;}
  55.  
  56. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  57. ::-webkit-scrollbar {width:6px;height:0;}
  58. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  59.  
  60. pre {font-family:consolas;
  61.     white-space: pre-wrap;       /* css-3 */
  62.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  63.     white-space: -pre-wrap;      /* Opera 4- */
  64.     white-space: -o-pre-wrap;    /* Opera 7 */
  65.     word-wrap: break-word;      /* Internet Explorer 5.5+ */
  66.     background:#fafafa;
  67.     border:1px solid var(--borders);
  68.     padding:1rem;
  69. }
  70.  
  71. body, figure{margin:0;padding:0}
  72. html{font: 14px 'Open Sans', sans-serif;}
  73. body {font-size:14px;color:var(--text);background:var(--background);}
  74. a {text-decoration: none;color:var(--links);word-break:break-word;}
  75. a:hover {color:var(--links-hover);}
  76. blockquote {margin:0;padding:0;}
  77. blockquote blockquote {border-left:1px solid var(--borders);padding:.1rem 0 .1rem .7rem;}
  78. img {max-width:100%;height: auto;display: block;margin: 0}
  79. hr {border:0;border-top:1px solid var(--borders);margin:1rem 0;}
  80. video { max-width:100%;}
  81.  
  82. /* containers */
  83.  
  84. main {
  85.     background-color: var(--background);
  86.     width: 100%;
  87.     display: flex;
  88.     flex-flow: row wrap;
  89.     justify-content: space-between;
  90. }
  91.  
  92. /* header */
  93.  
  94. .header-image {
  95.     width:6rem;
  96.     height:6rem;
  97.     border-radius: 100%;
  98.     object-fit: cover;
  99.     text-align: right;
  100.     display: block;
  101.     float:right;
  102. }
  103. figure.header-image {
  104.     padding:.7rem;
  105.     border:1px solid var(--borders)
  106. }
  107.  
  108. #page-title {
  109.     font:600 1.3rem 'Montserrat', sans-serif;
  110.     margin:2rem 0;
  111.     letter-spacing: .06rem;
  112. }
  113.  
  114. #page-title a{
  115.     color:var(--text);
  116. }
  117.  
  118. #description {
  119.     font-size: .85rem;
  120.     letter-spacing: .04rem;
  121.     line-height: 160%;
  122. }
  123.  
  124. /*  nav  */
  125.  
  126. #navigation {
  127.     margin:2rem 0;
  128.     font-family: 'Montserrat', sans-serif;
  129. }
  130.  
  131. #navigation ul,#navigation li {list-style-type:none;margin:0;padding:0;}
  132.  
  133. #navigation li {
  134.     margin:1rem 0;
  135.     font-size: .9rem;
  136. }
  137.  
  138. #sidebar-divider {
  139.     border:0;
  140.     border-top: 1px solid var(--borders);
  141.     width:80%;
  142.     margin:2rem auto
  143. }
  144.  
  145. /* filters */
  146.  
  147. #filters-sidebar {
  148.     width: 20rem;
  149.     text-align: right;
  150.     padding:3rem;
  151.     box-sizing: border-box;
  152.     height: 100vh;
  153.     border-right: 1px solid var(--borders);
  154.     position: sticky;top:0;bottom:0;left:0;
  155.     overflow: auto;
  156.     background-color: var(--sidebar-background);
  157. }
  158.  
  159. #filters-sidebar button {
  160.     background-color: transparent;
  161.     border:0;
  162.     padding: 0;
  163.     margin:1rem 0;
  164.     text-align: right;
  165.     display: block;
  166.     width: 100%;
  167.     cursor: pointer;
  168.     transition-duration: .2s;
  169.     font-size: .9rem;
  170.     font-family: 'Montserrat', sans-serif;
  171.     font-weight: 600!important;
  172.     outline: 0;
  173.     color:var(--links)
  174. }
  175.  
  176. .filters .filter-title{
  177.     font:700 1rem 'Montserrat', sans-serif!important;
  178.     text-transform: uppercase;
  179.     margin:2rem 0;
  180.     letter-spacing: .03rem;
  181. }
  182.  
  183. .filters .filter-title:after{
  184.     content:' O';
  185.     color:var(--links)
  186. }
  187.  
  188. #filter-sidebar button:focus {
  189.     outline: 0;
  190. }
  191.  
  192. .is-checked span{
  193.     color: var(--text)!important;
  194.     box-shadow:inset 0 -5px var(--links)!important;
  195.     padding:0 4px;
  196.     transition-duration: .2s!important;
  197. }
  198.  
  199. .button-group {
  200.     margin-bottom:3rem
  201. }
  202.  
  203. /* wips wrapper */
  204.  
  205. #header-wips-wrapper {
  206.     width:calc(100% - 20rem);
  207.     margin:auto;
  208. }
  209.  
  210. #wips-wrapper {
  211.     width:100%;
  212.     margin-top: 8rem;
  213. }
  214.  
  215. /* wip boxes */
  216.  
  217. .wip-box {
  218.     width: 50%;
  219.     margin:0 auto 10rem;
  220.     box-sizing: border-box;
  221. }
  222.  
  223. .wip-box-inside {
  224.     cursor: pointer;
  225.     max-width:22rem;
  226.     margin:auto;
  227.     box-sizing: border-box;
  228.     background-color: var(--boxes-background);
  229.     border-radius: 10px;
  230. }
  231.  
  232. figure.wip-box-image {
  233.     width: 100%;
  234.     height: 10rem;
  235.     position: relative;
  236.     border-radius: 10px;
  237.     border-bottom-left-radius: 0;
  238.     border-bottom-right-radius: 0;
  239. }
  240.  
  241. img.wip-box-image {
  242.     width: 100%;
  243.     height: 100%;
  244.     object-fit: cover;
  245.     border-radius: 10px;
  246.     border-bottom-left-radius: 0;
  247.     border-bottom-right-radius: 0;
  248. }
  249.  
  250. .wip-title {
  251.     background-color: rgba(255, 255, 255,.5);
  252.     width: 100%;
  253.     margin:0;
  254.     position: absolute;
  255.     padding:1rem;
  256.     box-sizing: border-box;
  257.     text-align: center;
  258.     top: 50%;
  259.     left: 50%;
  260.     transform: translate(-50%, -50%);
  261.     font-size: 1.4rem;
  262.     overflow: auto;
  263.     max-height: 10rem;
  264.     line-height:165%;
  265. }
  266.  
  267. .summary {
  268.     font-size: .9rem;
  269.     letter-spacing: .03rem;
  270.     line-height: 160%;
  271. }
  272.  
  273. .summary,.view-more {
  274.     padding:1.5rem;
  275.     background-color: var(--boxes-background);
  276.     border: 1px solid var(--borders);
  277. }
  278.  
  279. .view-more {
  280.     border-top: 0;
  281.     border-radius: 10px;
  282.     border-top-left-radius: 0;
  283.     border-top-right-radius: 0;
  284.     color:var(--links)
  285. }
  286.  
  287. .view-more,.wip-title {
  288.     font-family: 'Montserrat', sans-serif;
  289.     font-weight: 600;
  290.     text-transform: uppercase;
  291.     text-align: center;
  292. }
  293.  
  294. /* pop ups */
  295.  
  296. .popup {
  297.     position:fixed;
  298.     top:0;
  299.     left:0;
  300.     bottom:0;
  301.     right:0;   
  302.     width:100%;
  303.     height:100%;
  304.     background-color:rgba(255, 255, 255,.5);
  305.     z-index:1000000000000000;
  306.     display: none;
  307. }
  308.    
  309. .close-popup {
  310.     position:fixed;top:3rem;right:3rem;
  311.     cursor:pointer;
  312.     font-size:2rem;
  313.     z-index:100000000000000000;
  314.     color:var(--links)
  315. }
  316.  
  317. .popup-flex {
  318.     width:100vw;
  319.     height:100vh;
  320.     overflow: auto;
  321.     display:flex;
  322.     flex-flow: row wrap;
  323.     justify-content: center;
  324.     align-items: center;
  325. }
  326.  
  327. .popup-inside {
  328.     width:90vw;
  329.     max-width: 60rem;
  330.     background-color: var(--popup-background);
  331.     border:1px solid var(--borders);
  332.     margin:5rem auto;
  333. }
  334.  
  335. /* popup image */
  336.  
  337. .popup-wip-image {
  338.     width: 100%;
  339.     height: 20rem;
  340.     object-fit: cover;
  341. }
  342.  
  343. /* popup title */
  344.  
  345. .wip-popup-title {
  346.     margin: 3rem 1rem 4rem 3rem ;
  347.     font:600 1.5rem 'Montserrat', sans-serif;
  348. }
  349.  
  350. /* summary and details section */
  351.  
  352. #summary-and-details {
  353.     display: flex;
  354.     list-style: none;
  355.     position: relative;
  356.     font-size: .9rem;
  357.     margin:6rem 0;
  358. }
  359.  
  360. #summary-and-details ul{
  361.     list-style: none;
  362.     padding: 0;margin:0
  363. }
  364.  
  365. #summary-details-divider {
  366.     position: absolute;
  367.     height:70%;top:15%;bottom:0rem;left:50%;
  368.     width:1px;
  369.     padding:2rem 0;
  370.     margin:0 ;
  371.     box-sizing: border-box;
  372.     background-color: var(--borders);
  373.     z-index: 0;
  374. }
  375.  
  376. .popup-details,.popup-summary {
  377.     max-height: 20rem;
  378.     overflow: scroll;
  379.     margin: 0;
  380.     padding:0rem 1rem;
  381.     width:50%;
  382.     z-index: 9;
  383.     flex-grow: 1;
  384.     background-color: var(--popup-background);
  385.     margin:0rem 1.5rem
  386. }
  387.  
  388. /* summary */
  389.  
  390. .popup-summary {
  391.     line-height: 160%;
  392.     letter-spacing: .03rem;
  393. }
  394.  
  395. /* details */
  396.  
  397. .popup-details {
  398.     line-height: 160%;
  399. }
  400.  
  401. .popup-details ul{
  402.     list-style: none;
  403. }
  404.  
  405. .popup-details ul li {
  406.     margin:1rem 0
  407. }
  408.  
  409. .popup-details ul li span{
  410.     position: relative;
  411.     padding-left: 1rem;
  412. }
  413.  
  414. .popup-details ul li span:before{
  415.     position: absolute;left:0;
  416.     color:var(--links);
  417.     content: '•';
  418. }
  419.  
  420. /* popup characters */
  421.  
  422. #popup-characters {
  423.     display:flex;
  424.     flex-flow: row wrap;
  425.     justify-content: space-around;
  426.     margin:4rem 0 4rem;
  427. }
  428.  
  429. .character {
  430.     width:8rem;
  431.     margin:1rem 2rem;
  432. }
  433.  
  434. .character-image {
  435.     width:8rem;
  436.     height:8rem;
  437.     object-fit: cover;
  438.     box-sizing: border-box;
  439.     padding:.7rem;
  440.     border:1px solid var(--borders)
  441. }
  442.  
  443. .character-name {
  444.     font-family: 'Montserrat', sans-serif;
  445.     text-transform: uppercase;
  446.     font-size: .9rem;
  447.     text-align: center;
  448.     width:100%;
  449.     margin:2rem 0 0;padding:0
  450. }
  451.  
  452. /* wip chapters */
  453.  
  454. #popup-wip-chapters-wrapper{
  455.     margin: 5rem auto ;
  456.     padding-top: 0;
  457.     border-top: 1px solid var(--borders);
  458.     border-bottom: 1px solid var(--borders);
  459. }
  460.  
  461. .wip-chapter {
  462.     width:90%;
  463.     max-width: 45rem;
  464.     margin:6rem auto ;
  465.     padding:0 0 6rem;
  466.     line-height: 155%;
  467.     border-bottom: 1px solid var(--borders);
  468. }
  469.  
  470. .wip-chapter:last-of-type {
  471.     margin-bottom:0;
  472.     border:0;
  473. }
  474.  
  475.  
  476. .wip-chapter-title {
  477.     margin-bottom:4rem;
  478.     text-align: center;
  479.     font-weight: 600;
  480.     font-family: 'Montserrat', sans-serif;
  481. }
  482.  
  483.  
  484. /* faq */
  485.  
  486. #popup-faq {
  487.     padding:0 ;
  488.     width:90%;
  489.     margin: 6rem auto ;
  490.     line-height: 170%;
  491.     letter-spacing: .03rem;
  492. }
  493.  
  494. #popup-faq .faq-question{
  495.     font-size: 1.2rem;
  496. }
  497.  
  498. #popup-faq .faq-ask {
  499.     list-style: none;
  500.     margin:  4rem 0;
  501.     line-height: 160%;
  502. }
  503.  
  504. #popup-faq .fa {
  505.     color: var(--links);
  506.     font-size: 1.8rem;
  507.     margin-right: 1rem;
  508. }
  509.  
  510. /* progress bars */
  511.  
  512. #progress-bars-wrapper {
  513.     display: flex;
  514.     flex-flow: row wrap;
  515.     justify-content: space-between;
  516.     max-width: 45rem;
  517.     width:90%;
  518.     margin:10rem auto ;
  519. }
  520.  
  521. .bars-wrapper {
  522.     width: 45%;
  523.     margin: 0;
  524.     box-sizing: border-box;
  525. }
  526.  
  527. .progress-title {
  528.     font:600 1rem 'Montserrat', sans-serif;
  529.     margin-bottom: 1rem;
  530.     text-transform: uppercase;
  531. }
  532.  
  533. .progress-bar-container {
  534.     width:100%;
  535.     height:5px;
  536.     background-color: var(--borders);
  537.     position: relative;
  538.     border-radius: 5px;
  539. }
  540.  
  541. .progress-bar-fill {
  542.     position: absolute;left:0;top:0;bottom:0;
  543.     background-color: var(--links);
  544. }
  545.  
  546. /* pop up links */
  547.  
  548. #popup-links {
  549.     display: flex;
  550.     flex-flow: row wrap;
  551.     margin:6rem 0;
  552.     justify-content: space-around;
  553. }
  554.  
  555. #popup-links li{
  556.     list-style: none;
  557.     font-family: 'Montserrat', sans-serif;
  558.     font-weight: 600;
  559.     text-transform: uppercase;
  560.     font-size: 1.1rem;
  561. }
  562.  
  563. #popup-links li a{
  564.     color:var(--text);
  565.     box-shadow: inset 0 -7px var(--links);
  566.     padding:0 .5rem
  567. }
  568.  
  569.  
  570. /* MEDIA */
  571.  
  572. @media only screen and (min-width:1440px) and (max-width:9999999px) {
  573.  
  574.     #header-wips-wrapper{
  575.         width:calc(100vw - 20rem);
  576.         max-width: 100%;
  577.         margin:auto;
  578.     }
  579.  
  580.     .wip-box-inside {
  581.         cursor: pointer;
  582.         max-width:100%;
  583.         width: 100%;
  584.     }
  585.  
  586.     #header-wips-wrapper {
  587.         width:calc(100% - 20rem);
  588.         margin:auto;
  589.     }
  590.    
  591.     .wip-box {
  592.         width: calc(100% / 3);
  593.     }
  594.    
  595. }
  596.  
  597. @media only screen and (min-width:0px) and (max-width:730px) {
  598.  
  599.     #navigation {
  600.         text-align: center;
  601.     }
  602.  
  603.     #navigation li {
  604.         position: relative;
  605.         display: inline-block;
  606.         margin-right:1.5rem;
  607.         padding-right:1.5rem;
  608.     }
  609.    
  610.     #navigation li:before {
  611.         content:'•';
  612.         position: absolute;right:0;
  613.     }
  614.  
  615.     #navigation li:last-of-type{
  616.         margin-right:0;
  617.         padding-right:0;
  618.     }
  619.    
  620.     #navigation li:last-of-type:before{
  621.         content:''
  622.     }
  623.  
  624.     .header-image {
  625.         display: block;
  626.         float:none;
  627.         margin:auto
  628.     }
  629.  
  630.     #filters-sidebar {
  631.         width:100%;
  632.         text-align: center;
  633.         box-sizing: border-box;
  634.         height: 100%;
  635.         border-right: 1px solid var(--borders);
  636.         position: static;top:0;bottom:0;
  637.         overflow: auto;
  638.     }
  639.  
  640.     #filters-sidebar button {
  641.         border-bottom: 1px solid var(--borders);
  642.         margin:1rem;
  643.         display: inline-block;
  644.         width: auto;
  645.     }
  646.  
  647.     main {
  648.         width: 100%;
  649.         display: block;
  650.     }
  651.  
  652.     #summary-and-details {
  653.         display:block
  654.     }
  655.        
  656.     #summary-details-divider {
  657.         display: none;
  658.     }
  659.  
  660.     .popup-details,.popup-summary {
  661.         width: 100%;
  662.         box-sizing: border-box;
  663.         max-height: 100%;
  664.         padding: 0 2rem;
  665.     }
  666.  
  667.     .popup-summary{
  668.         border-bottom: 1px solid var(--borders);
  669.         padding: 0 2rem 5rem;
  670.         margin: 0 0 4rem;
  671.     }
  672.  
  673.     .popup-details {
  674.         padding: 0 2rem;
  675.         margin: 4rem 0 0;
  676.     }
  677.        
  678.     .popup-details ul{
  679.         padding:0
  680.     }
  681.  
  682.     #header-wips-wrapper{
  683.         width:90vw;
  684.         max-width: 30rem;
  685.         margin:auto;
  686.     }
  687.  
  688.     .wip-box-inside {
  689.         cursor: pointer;
  690.         max-width:100%;
  691.     }
  692.    
  693.     .wip-box {
  694.         width: 100%;
  695.     }
  696.  
  697.  
  698. }
  699.  
  700. @media only screen and (min-width:731px) and (max-width:960px) {
  701.    
  702.     .wip-box {
  703.         width: 100%;
  704.     }
  705.  
  706. }
  707.  
  708. </style>
  709.    
  710. </head>
  711. <body>
  712.  
  713. <main>
  714.  
  715.  
  716. <!-- sidebar start -->
  717.  
  718. <section id="filters-sidebar">
  719.  
  720.     <!-- sidebar image -->
  721.  
  722.      <a href="/"><figure class="header-image"><img src="https://images.unsplash.com/photo-1528459458967-d78e2fd34a9e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGxpZ2h0JTIwYmx1ZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="" class="header-image"></figure></a>
  723.     <div style="clear: both;"></div>
  724.  
  725.     <h1 id="page-title"><a href="/">
  726.        
  727.         <!-- title -->
  728.         prehistoric
  729.     </a></h1>
  730.  
  731.     <article id="description">
  732.         <!-- description -->
  733.         page description
  734.     </article>
  735.  
  736.     <nav id="navigation"><ul>
  737.         <!-- links -->
  738.         <li><a href="link url">link 1</a></li>
  739.  
  740.         <li><a href="link url">link 2</a></li>
  741.  
  742.         <li><a href="link url">link 3</a></li>
  743.     </ul></nav>
  744.  
  745.     <hr id="sidebar-divider">
  746.  
  747.     <!-- filters start -->
  748.  
  749.     <div class="filters">
  750.  
  751.         <!-- - TO CUSTOMIZE FILTERS PLEASE SEE THIS TUTORIAL, SCROLL DOWN TO "FILTER BY MULTIPLE CRITERIA": https://hendrixrph-blog.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a -->
  752.    
  753.         <h3 class="filter-title">filter title</h3>
  754.  
  755.         <div class="button-group" data-filter-group="one">
  756.             <button class="button is-checked" data-filter=""><span>all</span></button>
  757.             <button class="button" data-filter=".one"><span>one</span></button>
  758.             <button class="button" data-filter=".two"><span>two</span></button>
  759.         </div>
  760.        
  761.  
  762.  
  763.         <h3 class="filter-title">filter title 2</h3>
  764.  
  765.         <div class="button-group" data-filter-group="two">
  766.             <button class="button is-checked" data-filter=""><span>all</span></button>
  767.             <button class="button" data-filter=".blue"><span>blue</span></button>
  768.             <button class="button" data-filter=".yellow"><span>yellow</span></button>
  769.            
  770.         </div>
  771.     </div>
  772.     <!--filters end-->
  773.  
  774. </section>
  775. <!-- sidebar end -->
  776.  
  777. <!-- wrappers -->
  778. <section id="header-wips-wrapper">
  779. <section id="wips-wrapper">
  780.  
  781.  
  782.  
  783. <!-- to create more wips you have to copy paste from WIP # START to WIP # END -->
  784.  
  785.  
  786.  
  787. <!--          WIP # START          -->
  788.  
  789. <div class="wip-box one blue">
  790.  
  791. <!--          BOX # START          -->
  792.     <div class="wip-box-inside" onClick="openPopup(this);">
  793.  
  794.         <figure class="wip-box-image">
  795.            
  796.             <!-- wip image -->
  797.             <img src="WIP IMAGE" alt="" class="wip-box-image">
  798.            
  799.             <h2 class="wip-title">
  800.                
  801.                 <!-- wip title -->
  802.                 wip title
  803.  
  804.             </h2>
  805.         </figure>
  806.  
  807.         <article class="summary">
  808.  
  809.             <!-- wip summary -->
  810.             <p>wip summary</p>
  811.  
  812.         </article>
  813.  
  814.         <div class="view-more">view more</div>
  815.     </div>
  816.     <!--          BOX # END          -->
  817.  
  818.  
  819.     <!--          WIP POPUP # START          -->
  820.     <div class="popup">
  821.  
  822.         <!-- close button -->
  823.         <div title="close" class="close-popup" onclick="closePopup();"><i class="fa fa-xmark"></i></div>
  824.        
  825.         <!-- wrappers -->
  826.         <div class="popup-flex"><div class="popup-inside">
  827.  
  828.             <figure class="popup-wip-image">
  829.                
  830.                 <!-- popup image -->
  831.                 <img class="popup-wip-image" src="POPUP WIP IMAGE" alt="">
  832.            
  833.             </figure>
  834.  
  835.             <h1 class="wip-popup-title">
  836.                
  837.                 <!-- popup title -->
  838.                
  839.                 popup wip title
  840.  
  841.             </h1>
  842.  
  843.             <!-- summary and details -->
  844.             <section id="summary-and-details">
  845.  
  846.                 <!-- summary -->
  847.                 <article class="popup-summary">
  848.                
  849.                     <!-- summary -->
  850.                
  851.                     <p>pop wip summary</p>
  852.                    
  853.                 </article>
  854.                 <!-- summary end -->
  855.  
  856.                 <div id="summary-details-divider"></div>
  857.  
  858.                 <!-- details -->
  859.                 <article class="popup-details"><ul>
  860.  
  861.                     <!-- detail template
  862.  
  863.                          <li><span><b>title:</b> value</span></li>  
  864.  
  865.                      -->
  866.  
  867.                     <li><span><b>title:</b> value</span></li>                    
  868.  
  869.                     <li><span><b>title:</b> value</span></li>                    
  870.                    
  871.                 </ul></article>
  872.                 <!-- details end -->
  873.  
  874.             </section>
  875.            
  876.             <!-- summary-and-details -->
  877.  
  878.  
  879.             <!-- characters start -->
  880.  
  881.             <section id="popup-characters">
  882.                
  883.  
  884.                 <!-- character 1 start -->
  885.                 <article class="character">
  886.  
  887.                     <!-- character image -->
  888.                     <img src="CHARACTER IMAGE" alt="" class="character-image">
  889.                    
  890.                     <h2 class="character-name">
  891.  
  892.                         <!-- character name -->
  893.  
  894.                         character name
  895.  
  896.                     </h2>
  897.  
  898.                 </article>
  899.                 <!-- character 1 end -->
  900.  
  901.  
  902.  
  903.  
  904.                 <!-- character 2 start -->
  905.                 <article class="character">
  906.  
  907.                     <!-- character image -->
  908.                     <img src="CHARACTER IMAGE" alt="" class="character-image">
  909.                    
  910.                     <h2 class="character-name">
  911.  
  912.                         <!-- character name -->
  913.  
  914.                         character name
  915.  
  916.                     </h2>
  917.  
  918.                 </article>
  919.                 <!-- character 2 end -->
  920.  
  921.  
  922.  
  923.             </section>  <!-- pop up characters end -->
  924.  
  925.  
  926.  
  927.  
  928.             <!-- pop up chapters start -->
  929.  
  930.             <section id="popup-wip-chapters-wrapper">
  931.  
  932.                 <!-- chapter template
  933.  
  934.                         <article class="wip-chapter">
  935.  
  936.                             <h2 class="wip-chapter-title">title</h2>
  937.  
  938.                             <p>content</p>
  939.                        
  940.                         </article>
  941.  
  942.                  -->
  943.  
  944.                 <!-- chapter start -->
  945.                 <article class="wip-chapter">
  946.  
  947.                     <h2 class="wip-chapter-title">
  948.                        
  949.                         <!-- chapter name -->
  950.  
  951.                         chapter 1
  952.                    
  953.                     </h2>
  954.  
  955.                     <!-- chapter text -->
  956.                    
  957.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam accusantium doloremque repellendus laboriosam magni, error totam nihil ea, dignissimos illum dicta tempora quae consequuntur suscipit eveniet sed laudantium. Dolorem, consectetur.</p>
  958.                
  959.                 </article>
  960.                 <!-- chapter end -->
  961.                
  962.  
  963.  
  964.                 <!-- chapter start -->
  965.                 <article class="wip-chapter">
  966.  
  967.                     <h2 class="wip-chapter-title">
  968.                        
  969.                         <!-- chapter name -->
  970.  
  971.                         chapter 1
  972.                    
  973.                     </h2>
  974.  
  975.                     <!-- chapter text -->
  976.                    
  977.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam accusantium doloremque repellendus laboriosam magni, error totam nihil ea, dignissimos illum dicta tempora quae consequuntur suscipit eveniet sed laudantium. Dolorem, consectetur.</p>
  978.                
  979.                 </article>
  980.                 <!-- chapter end -->
  981.                
  982.  
  983.             </section>
  984.            
  985.             <!-- pop up chapters end -->
  986.  
  987.  
  988.  
  989.             <!-- pop up faq start -->
  990.             <section id="popup-faq">
  991.  
  992.                 <!-- faq template
  993.  
  994.                         <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  995.                      
  996.                             question?
  997.  
  998.                         </b>
  999.                            
  1000.                             <p>answer</p>
  1001.  
  1002.                         </li>
  1003.  
  1004.                  -->
  1005.  
  1006.                  <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  1007.                      
  1008.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit?
  1009.  
  1010.                  </b>
  1011.                    
  1012.                     <p>A facere ad autem dolorum similique minima inventore, quaerat, vero itaque labore ullam iusto eligendi dolorem. Accusantium, culpa. Magni iure obcaecati ad</p>
  1013.  
  1014.                 </li>
  1015.  
  1016.  
  1017.                 <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  1018.                      
  1019.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit?
  1020.  
  1021.                  </b>
  1022.                    
  1023.                     <p>A facere ad autem dolorum similique minima inventore, quaerat, vero itaque labore ullam iusto eligendi dolorem. Accusantium, culpa. Magni iure obcaecati ad</p>
  1024.  
  1025.                 </li>
  1026.  
  1027.             </section>
  1028.             <!-- pop up faq end -->
  1029.  
  1030.             <!-- progress bars start -->
  1031.  
  1032.             <section id="progress-bars-wrapper">
  1033.                
  1034.                 <!-- template. change the % number below 'progress-bar-container' to fill the bar
  1035.  
  1036.                  <div class="bars-wrapper">
  1037.                     <div class="progress-title">
  1038.                         progress bar title 25%
  1039.                     </div>
  1040.                    
  1041.                     <div class="progress-bar-container">
  1042.  
  1043.                        
  1044.                         <div class="progress-bar-fill" style="width: 25%;"></div>
  1045.                     </div>
  1046.  
  1047.                 </div>
  1048.  
  1049.                  -->
  1050.  
  1051.                
  1052.                
  1053.                  <div class="bars-wrapper">
  1054.                     <div class="progress-title">
  1055.                         progress bar title 25%
  1056.                     </div>
  1057.                    
  1058.                     <div class="progress-bar-container">
  1059.  
  1060.                        
  1061.                         <div class="progress-bar-fill" style="width: 25%;"></div>
  1062.                     </div>
  1063.  
  1064.                 </div>
  1065.  
  1066.  
  1067.  
  1068.                
  1069.                 <div class="bars-wrapper">
  1070.                     <div class="progress-title">
  1071.                         progress bar title 50%
  1072.                     </div>
  1073.                    
  1074.                     <div class="progress-bar-container">
  1075.  
  1076.                        
  1077.                         <div class="progress-bar-fill" style="width: 50%;"></div>
  1078.                     </div>
  1079.  
  1080.                 </div>
  1081.  
  1082.                
  1083.                
  1084.             </section>
  1085.            
  1086.             <!-- progress bars end -->
  1087.  
  1088.  
  1089.             <!-- popup links start -->
  1090.  
  1091.             <section id="popup-links">
  1092.  
  1093.                 <li><a href="">link 1</a></li>
  1094.                
  1095.                 <li><a href="">link 2</a></li>
  1096.                
  1097.                 <li><a href="">link 3</a></li>
  1098.  
  1099.             </section>
  1100.            
  1101.             <!-- popup links end -->
  1102.  
  1103.    
  1104.         </div></div></div>
  1105.     <!--          WIP POPUP # END          -->
  1106.    
  1107. </div>
  1108. <!--          WIP # END          -->
  1109.  
  1110.  
  1111.  
  1112.  
  1113.  
  1114.  
  1115.  
  1116. <!--          WIP # START          -->
  1117.  
  1118. <div class="wip-box two yellow">
  1119.  
  1120. <!--          BOX # START          -->
  1121.     <div class="wip-box-inside" onClick="openPopup(this);">
  1122.  
  1123.         <figure class="wip-box-image">
  1124.            
  1125.             <!-- wip image -->
  1126.             <img src="WIP IMAGE" alt="" class="wip-box-image">
  1127.            
  1128.             <h2 class="wip-title">
  1129.                
  1130.                 <!-- wip title -->
  1131.                 wip title
  1132.  
  1133.             </h2>
  1134.         </figure>
  1135.  
  1136.         <article class="summary">
  1137.  
  1138.             <!-- wip summary -->
  1139.             <p>wip summary</p>
  1140.  
  1141.         </article>
  1142.  
  1143.         <div class="view-more">view more</div>
  1144.     </div>
  1145.     <!--          BOX # END          -->
  1146.  
  1147.  
  1148.     <!--          WIP POPUP # START          -->
  1149.     <div class="popup">
  1150.  
  1151.         <!-- close button -->
  1152.         <div title="close" class="close-popup" onclick="closePopup();"><i class="fa fa-xmark"></i></div>
  1153.        
  1154.         <!-- wrappers -->
  1155.         <div class="popup-flex"><div class="popup-inside">
  1156.  
  1157.             <figure class="popup-wip-image">
  1158.                
  1159.                 <!-- popup image -->
  1160.                 <img class="popup-wip-image" src="POPUP WIP IMAGE" alt="">
  1161.            
  1162.             </figure>
  1163.  
  1164.             <h1 class="wip-popup-title">
  1165.                
  1166.                 <!-- popup title -->
  1167.                
  1168.                 popup wip title
  1169.  
  1170.             </h1>
  1171.  
  1172.             <!-- summary and details -->
  1173.             <section id="summary-and-details">
  1174.  
  1175.                 <!-- summary -->
  1176.                 <article class="popup-summary">
  1177.                
  1178.                     <!-- summary -->
  1179.                
  1180.                     <p>pop wip summary</p>
  1181.                    
  1182.                 </article>
  1183.                 <!-- summary end -->
  1184.  
  1185.                 <div id="summary-details-divider"></div>
  1186.  
  1187.                 <!-- details -->
  1188.                 <article class="popup-details"><ul>
  1189.  
  1190.                     <!-- detail template
  1191.  
  1192.                          <li><span><b>title:</b> value</span></li>  
  1193.  
  1194.                      -->
  1195.  
  1196.                     <li><span><b>title:</b> value</span></li>                    
  1197.  
  1198.                     <li><span><b>title:</b> value</span></li>                    
  1199.                    
  1200.                 </ul></article>
  1201.                 <!-- details end -->
  1202.  
  1203.             </section>
  1204.            
  1205.             <!-- summary-and-details -->
  1206.  
  1207.  
  1208.             <!-- characters start -->
  1209.  
  1210.             <section id="popup-characters">
  1211.                
  1212.  
  1213.                 <!-- character 1 start -->
  1214.                 <article class="character">
  1215.  
  1216.                     <!-- character image -->
  1217.                     <img src="CHARACTER IMAGE" alt="" class="character-image">
  1218.                    
  1219.                     <h2 class="character-name">
  1220.  
  1221.                         <!-- character name -->
  1222.  
  1223.                         character name
  1224.  
  1225.                     </h2>
  1226.  
  1227.                 </article>
  1228.                 <!-- character 1 end -->
  1229.  
  1230.  
  1231.  
  1232.  
  1233.                 <!-- character 2 start -->
  1234.                 <article class="character">
  1235.  
  1236.                     <!-- character image -->
  1237.                     <img src="CHARACTER IMAGE" alt="" class="character-image">
  1238.                    
  1239.                     <h2 class="character-name">
  1240.  
  1241.                         <!-- character name -->
  1242.  
  1243.                         character name
  1244.  
  1245.                     </h2>
  1246.  
  1247.                 </article>
  1248.                 <!-- character 2 end -->
  1249.  
  1250.  
  1251.  
  1252.             </section>  <!-- pop up characters end -->
  1253.  
  1254.  
  1255.  
  1256.  
  1257.             <!-- pop up chapters start -->
  1258.  
  1259.             <section id="popup-wip-chapters-wrapper">
  1260.  
  1261.                 <!-- chapter template
  1262.  
  1263.                         <article class="wip-chapter">
  1264.  
  1265.                             <h2 class="wip-chapter-title">title</h2>
  1266.  
  1267.                             <p>content</p>
  1268.                        
  1269.                         </article>
  1270.  
  1271.                  -->
  1272.  
  1273.                 <!-- chapter start -->
  1274.                 <article class="wip-chapter">
  1275.  
  1276.                     <h2 class="wip-chapter-title">
  1277.                        
  1278.                         <!-- chapter name -->
  1279.  
  1280.                         chapter 1
  1281.                    
  1282.                     </h2>
  1283.  
  1284.                     <!-- chapter text -->
  1285.                    
  1286.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam accusantium doloremque repellendus laboriosam magni, error totam nihil ea, dignissimos illum dicta tempora quae consequuntur suscipit eveniet sed laudantium. Dolorem, consectetur.</p>
  1287.                
  1288.                 </article>
  1289.                 <!-- chapter end -->
  1290.                
  1291.  
  1292.  
  1293.                 <!-- chapter start -->
  1294.                 <article class="wip-chapter">
  1295.  
  1296.                     <h2 class="wip-chapter-title">
  1297.                        
  1298.                         <!-- chapter name -->
  1299.  
  1300.                         chapter 1
  1301.                    
  1302.                     </h2>
  1303.  
  1304.                     <!-- chapter text -->
  1305.                    
  1306.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam accusantium doloremque repellendus laboriosam magni, error totam nihil ea, dignissimos illum dicta tempora quae consequuntur suscipit eveniet sed laudantium. Dolorem, consectetur.</p>
  1307.                
  1308.                 </article>
  1309.                 <!-- chapter end -->
  1310.                
  1311.  
  1312.             </section>
  1313.            
  1314.             <!-- pop up chapters end -->
  1315.  
  1316.  
  1317.  
  1318.             <!-- pop up faq start -->
  1319.             <section id="popup-faq">
  1320.  
  1321.                 <!-- faq template
  1322.  
  1323.                         <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  1324.                      
  1325.                             question?
  1326.  
  1327.                         </b>
  1328.                            
  1329.                             <p>answer</p>
  1330.  
  1331.                         </li>
  1332.  
  1333.                  -->
  1334.  
  1335.                  <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  1336.                      
  1337.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit?
  1338.  
  1339.                  </b>
  1340.                    
  1341.                     <p>A facere ad autem dolorum similique minima inventore, quaerat, vero itaque labore ullam iusto eligendi dolorem. Accusantium, culpa. Magni iure obcaecati ad</p>
  1342.  
  1343.                 </li>
  1344.  
  1345.  
  1346.                 <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  1347.                      
  1348.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit?
  1349.  
  1350.                  </b>
  1351.                    
  1352.                     <p>A facere ad autem dolorum similique minima inventore, quaerat, vero itaque labore ullam iusto eligendi dolorem. Accusantium, culpa. Magni iure obcaecati ad</p>
  1353.  
  1354.                 </li>
  1355.  
  1356.             </section>
  1357.             <!-- pop up faq end -->
  1358.  
  1359.             <!-- progress bars start -->
  1360.  
  1361.             <section id="progress-bars-wrapper">
  1362.                
  1363.                 <!-- template. change the % number below 'progress-bar-container' to fill the bar
  1364.  
  1365.                  <div class="bars-wrapper">
  1366.                     <div class="progress-title">
  1367.                         progress bar title 25%
  1368.                     </div>
  1369.                    
  1370.                     <div class="progress-bar-container">
  1371.  
  1372.                        
  1373.                         <div class="progress-bar-fill" style="width: 25%;"></div>
  1374.                     </div>
  1375.  
  1376.                 </div>
  1377.  
  1378.                  -->
  1379.  
  1380.                
  1381.                
  1382.                  <div class="bars-wrapper">
  1383.                     <div class="progress-title">
  1384.                         progress bar title 25%
  1385.                     </div>
  1386.                    
  1387.                     <div class="progress-bar-container">
  1388.  
  1389.                        
  1390.                         <div class="progress-bar-fill" style="width: 25%;"></div>
  1391.                     </div>
  1392.  
  1393.                 </div>
  1394.  
  1395.  
  1396.  
  1397.                
  1398.                 <div class="bars-wrapper">
  1399.                     <div class="progress-title">
  1400.                         progress bar title 50%
  1401.                     </div>
  1402.                    
  1403.                     <div class="progress-bar-container">
  1404.  
  1405.                        
  1406.                         <div class="progress-bar-fill" style="width: 50%;"></div>
  1407.                     </div>
  1408.  
  1409.                 </div>
  1410.  
  1411.                
  1412.                
  1413.             </section>
  1414.            
  1415.             <!-- progress bars end -->
  1416.  
  1417.  
  1418.             <!-- popup links start -->
  1419.  
  1420.             <section id="popup-links">
  1421.  
  1422.                 <li><a href="">link 1</a></li>
  1423.                
  1424.                 <li><a href="">link 2</a></li>
  1425.                
  1426.                 <li><a href="">link 3</a></li>
  1427.  
  1428.             </section>
  1429.            
  1430.             <!-- popup links end -->
  1431.  
  1432.    
  1433.         </div></div></div>
  1434.     <!--          WIP POPUP # END          -->
  1435.    
  1436. </div>
  1437. <!--          WIP # END          -->
  1438.  
  1439.  
  1440.  
  1441.  
  1442.  
  1443.  
  1444.  
  1445.  
  1446.  
  1447.  
  1448.  
  1449. <!--          WIP # START          -->
  1450.  
  1451. <div class="wip-box two yellow">
  1452.  
  1453. <!--          BOX # START          -->
  1454.     <div class="wip-box-inside" onClick="openPopup(this);">
  1455.  
  1456.         <figure class="wip-box-image">
  1457.            
  1458.             <!-- wip image -->
  1459.             <img src="WIP IMAGE" alt="" class="wip-box-image">
  1460.            
  1461.             <h2 class="wip-title">
  1462.                
  1463.                 <!-- wip title -->
  1464.                 wip title
  1465.  
  1466.             </h2>
  1467.         </figure>
  1468.  
  1469.         <article class="summary">
  1470.  
  1471.             <!-- wip summary -->
  1472.             <p>wip summary</p>
  1473.  
  1474.         </article>
  1475.  
  1476.         <div class="view-more">view more</div>
  1477.     </div>
  1478.     <!--          BOX # END          -->
  1479.  
  1480.  
  1481.     <!--          WIP POPUP # START          -->
  1482.     <div class="popup">
  1483.  
  1484.         <!-- close button -->
  1485.         <div title="close" class="close-popup" onclick="closePopup();"><i class="fa fa-xmark"></i></div>
  1486.        
  1487.         <!-- wrappers -->
  1488.         <div class="popup-flex"><div class="popup-inside">
  1489.  
  1490.             <figure class="popup-wip-image">
  1491.                
  1492.                 <!-- popup image -->
  1493.                 <img class="popup-wip-image" src="POPUP WIP IMAGE" alt="">
  1494.            
  1495.             </figure>
  1496.  
  1497.             <h1 class="wip-popup-title">
  1498.                
  1499.                 <!-- popup title -->
  1500.                
  1501.                 popup wip title
  1502.  
  1503.             </h1>
  1504.  
  1505.             <!-- summary and details -->
  1506.             <section id="summary-and-details">
  1507.  
  1508.                 <!-- summary -->
  1509.                 <article class="popup-summary">
  1510.                
  1511.                     <!-- summary -->
  1512.                
  1513.                     <p>pop wip summary</p>
  1514.                    
  1515.                 </article>
  1516.                 <!-- summary end -->
  1517.  
  1518.                 <div id="summary-details-divider"></div>
  1519.  
  1520.                 <!-- details -->
  1521.                 <article class="popup-details"><ul>
  1522.  
  1523.                     <!-- detail template
  1524.  
  1525.                          <li><span><b>title:</b> value</span></li>  
  1526.  
  1527.                      -->
  1528.  
  1529.                     <li><span><b>title:</b> value</span></li>                    
  1530.  
  1531.                     <li><span><b>title:</b> value</span></li>                    
  1532.                    
  1533.                 </ul></article>
  1534.                 <!-- details end -->
  1535.  
  1536.             </section>
  1537.            
  1538.             <!-- summary-and-details -->
  1539.  
  1540.  
  1541.             <!-- characters start -->
  1542.  
  1543.             <section id="popup-characters">
  1544.                
  1545.  
  1546.                 <!-- character 1 start -->
  1547.                 <article class="character">
  1548.  
  1549.                     <!-- character image -->
  1550.                     <img src="CHARACTER IMAGE" alt="" class="character-image">
  1551.                    
  1552.                     <h2 class="character-name">
  1553.  
  1554.                         <!-- character name -->
  1555.  
  1556.                         character name
  1557.  
  1558.                     </h2>
  1559.  
  1560.                 </article>
  1561.                 <!-- character 1 end -->
  1562.  
  1563.  
  1564.  
  1565.  
  1566.                 <!-- character 2 start -->
  1567.                 <article class="character">
  1568.  
  1569.                     <!-- character image -->
  1570.                     <img src="CHARACTER IMAGE" alt="" class="character-image">
  1571.                    
  1572.                     <h2 class="character-name">
  1573.  
  1574.                         <!-- character name -->
  1575.  
  1576.                         character name
  1577.  
  1578.                     </h2>
  1579.  
  1580.                 </article>
  1581.                 <!-- character 2 end -->
  1582.  
  1583.  
  1584.  
  1585.             </section>  <!-- pop up characters end -->
  1586.  
  1587.  
  1588.  
  1589.  
  1590.             <!-- pop up chapters start -->
  1591.  
  1592.             <section id="popup-wip-chapters-wrapper">
  1593.  
  1594.                 <!-- chapter template
  1595.  
  1596.                         <article class="wip-chapter">
  1597.  
  1598.                             <h2 class="wip-chapter-title">title</h2>
  1599.  
  1600.                             <p>content</p>
  1601.                        
  1602.                         </article>
  1603.  
  1604.                  -->
  1605.  
  1606.                 <!-- chapter start -->
  1607.                 <article class="wip-chapter">
  1608.  
  1609.                     <h2 class="wip-chapter-title">
  1610.                        
  1611.                         <!-- chapter name -->
  1612.  
  1613.                         chapter 1
  1614.                    
  1615.                     </h2>
  1616.  
  1617.                     <!-- chapter text -->
  1618.                    
  1619.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam accusantium doloremque repellendus laboriosam magni, error totam nihil ea, dignissimos illum dicta tempora quae consequuntur suscipit eveniet sed laudantium. Dolorem, consectetur.</p>
  1620.                
  1621.                 </article>
  1622.                 <!-- chapter end -->
  1623.                
  1624.  
  1625.  
  1626.                 <!-- chapter start -->
  1627.                 <article class="wip-chapter">
  1628.  
  1629.                     <h2 class="wip-chapter-title">
  1630.                        
  1631.                         <!-- chapter name -->
  1632.  
  1633.                         chapter 1
  1634.                    
  1635.                     </h2>
  1636.  
  1637.                     <!-- chapter text -->
  1638.                    
  1639.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam accusantium doloremque repellendus laboriosam magni, error totam nihil ea, dignissimos illum dicta tempora quae consequuntur suscipit eveniet sed laudantium. Dolorem, consectetur.</p>
  1640.                
  1641.                 </article>
  1642.                 <!-- chapter end -->
  1643.                
  1644.  
  1645.             </section>
  1646.            
  1647.             <!-- pop up chapters end -->
  1648.  
  1649.  
  1650.  
  1651.             <!-- pop up faq start -->
  1652.             <section id="popup-faq">
  1653.  
  1654.                 <!-- faq template
  1655.  
  1656.                         <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  1657.                      
  1658.                             question?
  1659.  
  1660.                         </b>
  1661.                            
  1662.                             <p>answer</p>
  1663.  
  1664.                         </li>
  1665.  
  1666.                  -->
  1667.  
  1668.                  <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  1669.                      
  1670.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit?
  1671.  
  1672.                  </b>
  1673.                    
  1674.                     <p>A facere ad autem dolorum similique minima inventore, quaerat, vero itaque labore ullam iusto eligendi dolorem. Accusantium, culpa. Magni iure obcaecati ad</p>
  1675.  
  1676.                 </li>
  1677.  
  1678.  
  1679.                 <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  1680.                      
  1681.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit?
  1682.  
  1683.                  </b>
  1684.                    
  1685.                     <p>A facere ad autem dolorum similique minima inventore, quaerat, vero itaque labore ullam iusto eligendi dolorem. Accusantium, culpa. Magni iure obcaecati ad</p>
  1686.  
  1687.                 </li>
  1688.  
  1689.             </section>
  1690.             <!-- pop up faq end -->
  1691.  
  1692.             <!-- progress bars start -->
  1693.  
  1694.             <section id="progress-bars-wrapper">
  1695.                
  1696.                 <!-- template. change the % number below 'progress-bar-container' to fill the bar
  1697.  
  1698.                  <div class="bars-wrapper">
  1699.                     <div class="progress-title">
  1700.                         progress bar title 25%
  1701.                     </div>
  1702.                    
  1703.                     <div class="progress-bar-container">
  1704.  
  1705.                        
  1706.                         <div class="progress-bar-fill" style="width: 25%;"></div>
  1707.                     </div>
  1708.  
  1709.                 </div>
  1710.  
  1711.                  -->
  1712.  
  1713.                
  1714.                
  1715.                  <div class="bars-wrapper">
  1716.                     <div class="progress-title">
  1717.                         progress bar title 25%
  1718.                     </div>
  1719.                    
  1720.                     <div class="progress-bar-container">
  1721.  
  1722.                        
  1723.                         <div class="progress-bar-fill" style="width: 25%;"></div>
  1724.                     </div>
  1725.  
  1726.                 </div>
  1727.  
  1728.  
  1729.  
  1730.                
  1731.                 <div class="bars-wrapper">
  1732.                     <div class="progress-title">
  1733.                         progress bar title 50%
  1734.                     </div>
  1735.                    
  1736.                     <div class="progress-bar-container">
  1737.  
  1738.                        
  1739.                         <div class="progress-bar-fill" style="width: 50%;"></div>
  1740.                     </div>
  1741.  
  1742.                 </div>
  1743.  
  1744.                
  1745.                
  1746.             </section>
  1747.            
  1748.             <!-- progress bars end -->
  1749.  
  1750.  
  1751.             <!-- popup links start -->
  1752.  
  1753.             <section id="popup-links">
  1754.  
  1755.                 <li><a href="">link 1</a></li>
  1756.                
  1757.                 <li><a href="">link 2</a></li>
  1758.                
  1759.                 <li><a href="">link 3</a></li>
  1760.  
  1761.             </section>
  1762.            
  1763.             <!-- popup links end -->
  1764.  
  1765.    
  1766.         </div></div></div>
  1767.     <!--          WIP POPUP # END          -->
  1768.    
  1769. </div>
  1770. <!--          WIP # END          -->
  1771.  
  1772.  
  1773.  
  1774.  
  1775.  
  1776.  
  1777.  
  1778.  
  1779.  
  1780.  
  1781. <!--          WIP # START          -->
  1782.  
  1783. <div class="wip-box two yellow">
  1784.  
  1785. <!--          BOX # START          -->
  1786.     <div class="wip-box-inside" onClick="openPopup(this);">
  1787.  
  1788.         <figure class="wip-box-image">
  1789.            
  1790.             <!-- wip image -->
  1791.             <img src="WIP IMAGE" alt="" class="wip-box-image">
  1792.            
  1793.             <h2 class="wip-title">
  1794.                
  1795.                 <!-- wip title -->
  1796.                 wip title
  1797.  
  1798.             </h2>
  1799.         </figure>
  1800.  
  1801.         <article class="summary">
  1802.  
  1803.             <!-- wip summary -->
  1804.             <p>wip summary</p>
  1805.  
  1806.         </article>
  1807.  
  1808.         <div class="view-more">view more</div>
  1809.     </div>
  1810.     <!--          BOX # END          -->
  1811.  
  1812.  
  1813.     <!--          WIP POPUP # START          -->
  1814.     <div class="popup">
  1815.  
  1816.         <!-- close button -->
  1817.         <div title="close" class="close-popup" onclick="closePopup();"><i class="fa fa-xmark"></i></div>
  1818.        
  1819.         <!-- wrappers -->
  1820.         <div class="popup-flex"><div class="popup-inside">
  1821.  
  1822.             <figure class="popup-wip-image">
  1823.                
  1824.                 <!-- popup image -->
  1825.                 <img class="popup-wip-image" src="POPUP WIP IMAGE" alt="">
  1826.            
  1827.             </figure>
  1828.  
  1829.             <h1 class="wip-popup-title">
  1830.                
  1831.                 <!-- popup title -->
  1832.                
  1833.                 popup wip title
  1834.  
  1835.             </h1>
  1836.  
  1837.             <!-- summary and details -->
  1838.             <section id="summary-and-details">
  1839.  
  1840.                 <!-- summary -->
  1841.                 <article class="popup-summary">
  1842.                
  1843.                     <!-- summary -->
  1844.                
  1845.                     <p>pop wip summary</p>
  1846.                    
  1847.                 </article>
  1848.                 <!-- summary end -->
  1849.  
  1850.                 <div id="summary-details-divider"></div>
  1851.  
  1852.                 <!-- details -->
  1853.                 <article class="popup-details"><ul>
  1854.  
  1855.                     <!-- detail template
  1856.  
  1857.                          <li><span><b>title:</b> value</span></li>  
  1858.  
  1859.                      -->
  1860.  
  1861.                     <li><span><b>title:</b> value</span></li>                    
  1862.  
  1863.                     <li><span><b>title:</b> value</span></li>                    
  1864.                    
  1865.                 </ul></article>
  1866.                 <!-- details end -->
  1867.  
  1868.             </section>
  1869.            
  1870.             <!-- summary-and-details -->
  1871.  
  1872.  
  1873.             <!-- characters start -->
  1874.  
  1875.             <section id="popup-characters">
  1876.                
  1877.  
  1878.                 <!-- character 1 start -->
  1879.                 <article class="character">
  1880.  
  1881.                     <!-- character image -->
  1882.                     <img src="CHARACTER IMAGE" alt="" class="character-image">
  1883.                    
  1884.                     <h2 class="character-name">
  1885.  
  1886.                         <!-- character name -->
  1887.  
  1888.                         character name
  1889.  
  1890.                     </h2>
  1891.  
  1892.                 </article>
  1893.                 <!-- character 1 end -->
  1894.  
  1895.  
  1896.  
  1897.  
  1898.                 <!-- character 2 start -->
  1899.                 <article class="character">
  1900.  
  1901.                     <!-- character image -->
  1902.                     <img src="CHARACTER IMAGE" alt="" class="character-image">
  1903.                    
  1904.                     <h2 class="character-name">
  1905.  
  1906.                         <!-- character name -->
  1907.  
  1908.                         character name
  1909.  
  1910.                     </h2>
  1911.  
  1912.                 </article>
  1913.                 <!-- character 2 end -->
  1914.  
  1915.  
  1916.  
  1917.             </section>  <!-- pop up characters end -->
  1918.  
  1919.  
  1920.  
  1921.  
  1922.             <!-- pop up chapters start -->
  1923.  
  1924.             <section id="popup-wip-chapters-wrapper">
  1925.  
  1926.                 <!-- chapter template
  1927.  
  1928.                         <article class="wip-chapter">
  1929.  
  1930.                             <h2 class="wip-chapter-title">title</h2>
  1931.  
  1932.                             <p>content</p>
  1933.                        
  1934.                         </article>
  1935.  
  1936.                  -->
  1937.  
  1938.                 <!-- chapter start -->
  1939.                 <article class="wip-chapter">
  1940.  
  1941.                     <h2 class="wip-chapter-title">
  1942.                        
  1943.                         <!-- chapter name -->
  1944.  
  1945.                         chapter 1
  1946.                    
  1947.                     </h2>
  1948.  
  1949.                     <!-- chapter text -->
  1950.                    
  1951.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam accusantium doloremque repellendus laboriosam magni, error totam nihil ea, dignissimos illum dicta tempora quae consequuntur suscipit eveniet sed laudantium. Dolorem, consectetur.</p>
  1952.                
  1953.                 </article>
  1954.                 <!-- chapter end -->
  1955.                
  1956.  
  1957.  
  1958.                 <!-- chapter start -->
  1959.                 <article class="wip-chapter">
  1960.  
  1961.                     <h2 class="wip-chapter-title">
  1962.                        
  1963.                         <!-- chapter name -->
  1964.  
  1965.                         chapter 1
  1966.                    
  1967.                     </h2>
  1968.  
  1969.                     <!-- chapter text -->
  1970.                    
  1971.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam accusantium doloremque repellendus laboriosam magni, error totam nihil ea, dignissimos illum dicta tempora quae consequuntur suscipit eveniet sed laudantium. Dolorem, consectetur.</p>
  1972.                
  1973.                 </article>
  1974.                 <!-- chapter end -->
  1975.                
  1976.  
  1977.             </section>
  1978.            
  1979.             <!-- pop up chapters end -->
  1980.  
  1981.  
  1982.  
  1983.             <!-- pop up faq start -->
  1984.             <section id="popup-faq">
  1985.  
  1986.                 <!-- faq template
  1987.  
  1988.                         <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  1989.                      
  1990.                             question?
  1991.  
  1992.                         </b>
  1993.                            
  1994.                             <p>answer</p>
  1995.  
  1996.                         </li>
  1997.  
  1998.                  -->
  1999.  
  2000.                  <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  2001.                      
  2002.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit?
  2003.  
  2004.                  </b>
  2005.                    
  2006.                     <p>A facere ad autem dolorum similique minima inventore, quaerat, vero itaque labore ullam iusto eligendi dolorem. Accusantium, culpa. Magni iure obcaecati ad</p>
  2007.  
  2008.                 </li>
  2009.  
  2010.  
  2011.                 <li class="faq-ask"><i class="fa fa-question"></i><b class="faq-question">
  2012.                      
  2013.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit?
  2014.  
  2015.                  </b>
  2016.                    
  2017.                     <p>A facere ad autem dolorum similique minima inventore, quaerat, vero itaque labore ullam iusto eligendi dolorem. Accusantium, culpa. Magni iure obcaecati ad</p>
  2018.  
  2019.                 </li>
  2020.  
  2021.             </section>
  2022.             <!-- pop up faq end -->
  2023.  
  2024.             <!-- progress bars start -->
  2025.  
  2026.             <section id="progress-bars-wrapper">
  2027.                
  2028.                 <!-- template. change the % number below 'progress-bar-container' to fill the bar
  2029.  
  2030.                  <div class="bars-wrapper">
  2031.                     <div class="progress-title">
  2032.                         progress bar title 25%
  2033.                     </div>
  2034.                    
  2035.                     <div class="progress-bar-container">
  2036.  
  2037.                        
  2038.                         <div class="progress-bar-fill" style="width: 25%;"></div>
  2039.                     </div>
  2040.  
  2041.                 </div>
  2042.  
  2043.                  -->
  2044.  
  2045.                
  2046.                
  2047.                  <div class="bars-wrapper">
  2048.                     <div class="progress-title">
  2049.                         progress bar title 25%
  2050.                     </div>
  2051.                    
  2052.                     <div class="progress-bar-container">
  2053.  
  2054.                        
  2055.                         <div class="progress-bar-fill" style="width: 25%;"></div>
  2056.                     </div>
  2057.  
  2058.                 </div>
  2059.  
  2060.  
  2061.  
  2062.                
  2063.                 <div class="bars-wrapper">
  2064.                     <div class="progress-title">
  2065.                         progress bar title 50%
  2066.                     </div>
  2067.                    
  2068.                     <div class="progress-bar-container">
  2069.  
  2070.                        
  2071.                         <div class="progress-bar-fill" style="width: 50%;"></div>
  2072.                     </div>
  2073.  
  2074.                 </div>
  2075.  
  2076.                
  2077.                
  2078.             </section>
  2079.            
  2080.             <!-- progress bars end -->
  2081.  
  2082.  
  2083.             <!-- popup links start -->
  2084.  
  2085.             <section id="popup-links">
  2086.  
  2087.                 <li><a href="">link 1</a></li>
  2088.                
  2089.                 <li><a href="">link 2</a></li>
  2090.                
  2091.                 <li><a href="">link 3</a></li>
  2092.  
  2093.             </section>
  2094.            
  2095.             <!-- popup links end -->
  2096.  
  2097.    
  2098.         </div></div></div>
  2099.     <!--          WIP POPUP # END          -->
  2100.    
  2101. </div>
  2102. <!--          WIP # END          -->
  2103.  
  2104.  
  2105.  
  2106.  
  2107.  
  2108.  
  2109.  
  2110. </section> <!-- wips wrapper -->
  2111. </section> <!-- header-wips-wrapper -->
  2112.  
  2113. <!-- dont touch -->
  2114. <div style="position: fixed;bottom: 2rem;right: 2rem;background:white;border-radius:5px;width:25px;height:25px;text-align: center;line-height: 25px;z-index:9999999999999!important"><a target="_blank" style="color:#333" href="https://southcodes.tumblr.com/">sc</a></div>
  2115.  
  2116. <!-- icons font -->
  2117. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  2118.  
  2119. <!-- jquery -->
  2120. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  2121.  
  2122. <!-- isotope -->
  2123. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  2124.  
  2125. <script type="text/javascript">
  2126. $(document).ready( function() {
  2127.  
  2128.     $('.wip-box-inside').click(function(){
  2129.         $('body').css('overflow','hidden');
  2130.         return false;
  2131.     });
  2132.    
  2133.     $('.close-popup').click(function(){
  2134.         $('body').css('overflow','auto');
  2135.         return false;
  2136.     });
  2137.  
  2138.      // init Isotope
  2139.      var $grid = $('#wips-wrapper').isotope({
  2140.        itemSelector: '.wip-box'
  2141.      });
  2142.      // store filter for each group
  2143.      var filters = {};
  2144.      
  2145.      $('.filters').on( 'click', '.button', function() {
  2146.        var $this = $(this);
  2147.        // get group key
  2148.        var $buttonGroup = $this.parents('.button-group');
  2149.        var filterGroup = $buttonGroup.attr('data-filter-group');
  2150.        // set filter for group
  2151.        filters[ filterGroup ] = $this.attr('data-filter');
  2152.        // combine filters
  2153.        var filterValue = concatValues( filters );
  2154.        // set filter for Isotope
  2155.        $grid.isotope({ filter: filterValue });
  2156.      });
  2157.      
  2158.      // change is-checked class on buttons
  2159.      $('.button-group').each( function( i, buttonGroup ) {
  2160.        var $buttonGroup = $( buttonGroup );
  2161.        $buttonGroup.on( 'click', 'button', function() {
  2162.          $buttonGroup.find('.is-checked').removeClass('is-checked');
  2163.          $( this ).addClass('is-checked');
  2164.        });
  2165.      });
  2166.      
  2167. });
  2168.     // flatten object by concatting values
  2169.     function concatValues( obj ) {
  2170.      var value = '';
  2171.      for ( var prop in obj ) {
  2172.        value += obj[ prop ];
  2173.      }
  2174.      return value;
  2175.     }
  2176.  
  2177. // POP UPS
  2178.  
  2179. function openPopup(elem) {
  2180.     $(elem).next().fadeIn(200);
  2181.     $(elem).next().siblings(".popup").hide();
  2182. }
  2183.  
  2184. function closePopup() {
  2185.     $('.popup').fadeOut(300);
  2186. }
  2187.  
  2188. </script>
  2189. </body>
  2190. </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!