southcodes

anya | progress page

Jun 20th, 2021 (edited)
333
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.     - page 'anya' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/inbox
  6.    
  7.     - normalize css by https://github.com/necolas
  8.     - fonts by google
  9.     - icons by https://cappuccicons.com/
  10.  
  11.  -->
  12. <!DOCTYPE html>
  13. <html>
  14. <head>
  15.     <title>{title}</title>
  16.  
  17.     <meta charset="UTF-8">
  18.     <meta name="viewport" content="width=device-width">
  19.  
  20.     <link rel="shortcut icon" href="{favicon}">
  21.     <meta name="description" content="{MetaDescription}"/>
  22.  
  23.     <!-- fonts -->
  24.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet">
  25.    
  26.     <!-- normalize -->
  27.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  28.     <link href="https://icons.cappuccicons.com/cpf.css" rel="stylesheet">
  29. <style>
  30. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  31. .tmblr-iframe:hover {opacity:.8;}
  32.  
  33. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid {color:links};}
  34. ::-webkit-scrollbar {width:6px}
  35. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  36.  
  37. pre {font-family:consolas;
  38.     white-space: pre-wrap;       /* css-3 */
  39.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  40.     white-space: -pre-wrap;      /* Opera 4- */
  41.     white-space: -o-pre-wrap;    /* Opera 7 */
  42.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  43.  
  44. body, figure{margin:0;padding:0}
  45. html{font: 14px 'Open Sans', sans-serif;}
  46. body {font-size:13px;color:#333;background:#ffffff;letter-spacing: .04rem;}
  47. a {text-decoration: none;color:#f58fa0;word-break:break-word;}
  48. a:hover {color:#9c3f4f;}
  49. blockquote {margin:0;padding:0;}
  50. img {max-width:100%;height: auto;display: block;margin: .7rem 0}
  51. hr {border:0;border-top:1px solid #aaa;margin:0;}
  52.  
  53. /*  nav  */
  54.  
  55. nav ul,nav li {list-style-type:none;margin:0;padding:0;}
  56.  
  57. /* media navigation */
  58.  
  59. #media-navigation {
  60.     position: fixed;
  61.     left:0;top:0;bottom: 0;
  62.     width: 5rem;
  63.     background:#fcfcfc;
  64.     border-right:1px solid #ebebeb;
  65.     transition-duration: .2s;
  66.     padding:1rem;
  67.     display: flex;
  68.     justify-content: space-around;
  69.     align-content:space-around ;
  70.     flex-flow: column;
  71.     box-sizing: border-box;
  72.     text-align: center;
  73. }
  74.  
  75. #media-navigation .cp {
  76.     color:#f58fa0;
  77.     font-size:1.2rem
  78. }
  79. #media-navigation .cp:hover {
  80.     color:#9c3f4f    
  81. }
  82.  
  83. /* header */
  84.  
  85. header {
  86.     text-align: right;
  87.     position: fixed;
  88.     right:4rem;
  89.     bottom:4rem;
  90.     box-sizing: border-box;
  91.     z-index:2;
  92.     width:33%;
  93. }
  94.  
  95. #blog-title {
  96.     margin-bottom:2rem;
  97. }
  98.  
  99. #blog-title span{
  100.     font-weight:300;
  101.     box-shadow: inset 0px -6px pink;
  102.     padding:0 .5rem;
  103. }
  104.  
  105. #blog-navigation{
  106.     margin-top: 2rem;
  107. }
  108.  
  109. #blog-navigation ul li{
  110.     display: inline-block;
  111.     margin-left:2rem
  112. }
  113.  
  114. /* main */
  115.  
  116. #main {
  117.     width:calc(65% - 13rem);
  118.     margin: 3rem 0  4rem 8rem
  119. }
  120.  
  121. main section {
  122.     padding-top:2rem
  123. }
  124.  
  125. .section-title {
  126.     font-size:1rem;
  127.     text-transform: uppercase;
  128. }
  129. .section-title {
  130.     border-bottom: 2px solid pink;
  131.     padding:0 .3rem .6rem
  132. }
  133.  
  134. .media-box {
  135.     margin:5rem auto;
  136.     box-sizing: border-box;
  137. }
  138. .media-image {
  139.     display:block;
  140.     margin: 0 .3rem 0 0;
  141.     width:5rem;
  142.     padding:.5rem;
  143.     object-fit:cover;
  144.     border-radius:10px
  145. }
  146.  
  147. .media-inside {
  148.     border:1px solid #ebebeb;
  149.     border-bottom:0;
  150.     padding: 1rem;
  151.     background:#fcfcfc;
  152. }
  153.  
  154. .box-title {
  155.     margin:0 0 1rem;
  156.     text-align: right;
  157. }
  158. .rating {
  159.     text-align: right;
  160.     margin-bottom:1rem
  161. }
  162. .rating .cp {
  163.     color:#e4e4e4
  164. }
  165.  
  166. .one-stars .cp:nth-of-type(1),
  167. .two-stars .cp:nth-of-type(-n+2),
  168. .three-stars .cp:nth-of-type(-n+3),
  169. .four-stars .cp:nth-of-type(-n+4),
  170. .five-stars .cp:nth-of-type(-n+5)
  171. {
  172.     color:pink;
  173. }
  174.  
  175. .box-description {
  176.     padding:1rem;
  177. }
  178.  
  179. .progress {
  180.     width:100%;
  181.     height:3px;
  182.     background:#ebebeb;
  183.     position:relative
  184. }
  185. .progress-bar {
  186.     position: absolute;
  187.     left:0;bottom:0;top:0;
  188.     background: pink;
  189. }
  190.  
  191. .status {
  192.     text-align: right;
  193.     font-size: .9rem;
  194.     letter-spacing: .04rem;
  195.     font-weight: 600;
  196.     text-transform: uppercase;
  197.     margin-top:1rem;
  198.     color:#f58fa0
  199. }
  200.  
  201. .ttop {
  202.     display:none;
  203.     position:fixed;
  204.     bottom:2rem;right:2rem;
  205. }
  206.  
  207. /* MEDIA */
  208.  
  209. @media only screen and (min-width:0px) and (max-width:920px) {
  210.  
  211.    
  212.     header {
  213.         text-align: right;
  214.         position: static;
  215.         padding:0;
  216.         margin:4rem 0 2rem 8rem;
  217.         width:calc(100% - 10rem);
  218.     }
  219.  
  220.    
  221.     #main {
  222.         padding:0;    
  223.         width:calc(100% - 10rem);
  224.         margin:0 0 0 8rem;
  225.     }
  226.  
  227. }
  228.  
  229. /* don't touch */
  230. #credit {
  231.     position: fixed;bottom:1.5rem;left:2rem;
  232.     font-size:.8rem
  233.  
  234. }
  235. </style>
  236. </head>
  237. <body>
  238.  
  239.    
  240. <nav id="media-navigation">
  241.    
  242.         <li>
  243.             <a href="#series"><i class="cp cp-tv"></i></a>
  244.         </li>
  245.        
  246.         <li>
  247.             <a href="#movies"><i class="cp cp-movie"></i></a>
  248.         </li>
  249.        
  250.         <li>
  251.             <a href="#books"><i class="cp cp-book-o"></i></a>
  252.         </li>
  253. </nav>
  254.  
  255.     <!-- header -->
  256.    
  257.     <header>
  258.         <h1 id="blog-title"><span>title</span></h1>
  259.  
  260.         <section id="description">
  261.            
  262.             description
  263.  
  264.         </section>
  265.  
  266.         <nav id="blog-navigation"><ul>
  267.             <li><a href="link"><i class="cp cp-home"></i></a></li>
  268.             <li><a href="link"><i class="cp cp-envelope"></i></a></li>
  269.             <li><a href="link"><i class="cp cp-plus"></i></a></li>
  270.             <li><a href="link"><i class="cp cp-cross"></i></a></li>
  271.         </ul></nav>
  272.     </header>
  273.  
  274.  
  275. <main id="main">
  276.  
  277.  
  278. <!-- template:
  279.     note:
  280.     - change the class 'two-stars' to the stars you want to add. ex: three-starts / four-stars etc
  281.  
  282.     - to change the progress % edit the number in this code:
  283.         <div class="progress-bar" style="width: 50%;"></div>
  284. -->
  285.  
  286. <!-- <div class="media-box two-stars">
  287.      
  288.     <img class="media-image" align="left" src="IMG URL" alt="">
  289.  
  290.     <div class="media-inside">
  291.    
  292.         <h2 class="box-title">title</h2>
  293.  
  294.         <div class="rating">
  295.             <i class="cp cp-star"></i>
  296.             <i class="cp cp-star"></i>
  297.             <i class="cp cp-star"></i>
  298.             <i class="cp cp-star"></i>
  299.             <i class="cp cp-star"></i>
  300.         </div>
  301.  
  302.         <div class="box-description">
  303.             box description
  304.         </div>
  305.    
  306.     </div>
  307.  
  308.     <div class="progress">
  309.         <div class="progress-bar" style="width: 50%;"></div>
  310.     </div>
  311.    
  312.     <div class="status">
  313.         current status
  314.     </div>
  315.  
  316. </div> -->
  317.  
  318.  
  319.  
  320. <!-- series section -->
  321.  
  322. <section id="series">
  323.  
  324.     <h2 class="section-title"><span>series</span></h2>
  325.    
  326.     <div class="media-box two-stars">
  327.  
  328.         <img class="media-image" align="left" src="IMG URL" alt="">
  329.    
  330.         <div class="media-inside">
  331.        
  332.             <h2 class="box-title">title</h2>
  333.    
  334.             <div class="rating">
  335.                 <i class="cp cp-star"></i>
  336.                 <i class="cp cp-star"></i>
  337.                 <i class="cp cp-star"></i>
  338.                 <i class="cp cp-star"></i>
  339.                 <i class="cp cp-star"></i>
  340.             </div>
  341.    
  342.             <div class="box-description">
  343.                 box description
  344.             </div>
  345.        
  346.         </div>
  347.    
  348.         <div class="progress">
  349.             <div class="progress-bar" style="width: 50%;"></div>
  350.         </div>
  351.        
  352.         <div class="status">
  353.             current status
  354.         </div>
  355.    
  356.     </div>
  357.  
  358.     <div class="media-box two-stars">
  359.  
  360.         <img class="media-image" align="left" src="IMG URL" alt="">
  361.    
  362.         <div class="media-inside">
  363.        
  364.             <h2 class="box-title">title</h2>
  365.    
  366.             <div class="rating">
  367.                 <i class="cp cp-star"></i>
  368.                 <i class="cp cp-star"></i>
  369.                 <i class="cp cp-star"></i>
  370.                 <i class="cp cp-star"></i>
  371.                 <i class="cp cp-star"></i>
  372.             </div>
  373.    
  374.             <div class="box-description">
  375.                 box description
  376.             </div>
  377.        
  378.         </div>
  379.    
  380.         <div class="progress">
  381.             <div class="progress-bar" style="width: 50%;"></div>
  382.         </div>
  383.        
  384.         <div class="status">
  385.             current status
  386.         </div>
  387.    
  388.     </div>
  389.    
  390.  
  391. </section>
  392.  
  393.  
  394.  
  395.  
  396. <!-- movies section -->
  397.  
  398. <section id="movies">
  399.  
  400.     <h2 class="section-title"><span>movies</span></h2>
  401.    
  402.     <div class="media-box two-stars">
  403.  
  404.         <img class="media-image" align="left" src="IMG URL" alt="">
  405.    
  406.         <div class="media-inside">
  407.        
  408.             <h2 class="box-title">title</h2>
  409.    
  410.             <div class="rating">
  411.                 <i class="cp cp-star"></i>
  412.                 <i class="cp cp-star"></i>
  413.                 <i class="cp cp-star"></i>
  414.                 <i class="cp cp-star"></i>
  415.                 <i class="cp cp-star"></i>
  416.             </div>
  417.    
  418.             <div class="box-description">
  419.                 box description
  420.             </div>
  421.        
  422.         </div>
  423.    
  424.         <div class="progress">
  425.             <div class="progress-bar" style="width: 50%;"></div>
  426.         </div>
  427.        
  428.         <div class="status">
  429.             current status
  430.         </div>
  431.    
  432.     </div>
  433.  
  434.     <div class="media-box two-stars">
  435.  
  436.         <img class="media-image" align="left" src="IMG URL" alt="">
  437.    
  438.         <div class="media-inside">
  439.        
  440.             <h2 class="box-title">title</h2>
  441.    
  442.             <div class="rating">
  443.                 <i class="cp cp-star"></i>
  444.                 <i class="cp cp-star"></i>
  445.                 <i class="cp cp-star"></i>
  446.                 <i class="cp cp-star"></i>
  447.                 <i class="cp cp-star"></i>
  448.             </div>
  449.    
  450.             <div class="box-description">
  451.                 box description
  452.             </div>
  453.        
  454.         </div>
  455.    
  456.         <div class="progress">
  457.             <div class="progress-bar" style="width: 50%;"></div>
  458.         </div>
  459.        
  460.         <div class="status">
  461.             current status
  462.         </div>
  463.    
  464.     </div>
  465.    
  466.  
  467. </section>
  468.  
  469.  
  470.  
  471.  
  472. <!-- books section -->
  473.  
  474. <section id="books">
  475.  
  476.     <h2 class="section-title"><span>books</span></h2>
  477.    
  478.     <div class="media-box two-stars">
  479.  
  480.         <img class="media-image" align="left" src="IMG URL" alt="">
  481.    
  482.         <div class="media-inside">
  483.        
  484.             <h2 class="box-title">title</h2>
  485.    
  486.             <div class="rating">
  487.                 <i class="cp cp-star"></i>
  488.                 <i class="cp cp-star"></i>
  489.                 <i class="cp cp-star"></i>
  490.                 <i class="cp cp-star"></i>
  491.                 <i class="cp cp-star"></i>
  492.             </div>
  493.    
  494.             <div class="box-description">
  495.                 box description
  496.             </div>
  497.        
  498.         </div>
  499.    
  500.         <div class="progress">
  501.             <div class="progress-bar" style="width: 50%;"></div>
  502.         </div>
  503.        
  504.         <div class="status">
  505.             current status
  506.         </div>
  507.    
  508.     </div>
  509.  
  510.     <div class="media-box two-stars">
  511.  
  512.         <img class="media-image" align="left" src="IMG URL" alt="">
  513.    
  514.         <div class="media-inside">
  515.        
  516.             <h2 class="box-title">title</h2>
  517.    
  518.             <div class="rating">
  519.                 <i class="cp cp-star"></i>
  520.                 <i class="cp cp-star"></i>
  521.                 <i class="cp cp-star"></i>
  522.                 <i class="cp cp-star"></i>
  523.                 <i class="cp cp-star"></i>
  524.             </div>
  525.    
  526.             <div class="box-description">
  527.                 box description
  528.             </div>
  529.        
  530.         </div>
  531.    
  532.         <div class="progress">
  533.             <div class="progress-bar" style="width: 50%;"></div>
  534.         </div>
  535.        
  536.         <div class="status">
  537.             current status
  538.         </div>
  539.    
  540.     </div>
  541.    
  542.  
  543. </section>
  544.            
  545. </main>
  546.  
  547. <footer>  
  548.     <a href="#top" class="achl ttop" title="to top"><i class="cp cp-chevron-up"></i></a>
  549.  
  550.     <!-- don't touch -->
  551.    <div id="credit"><a title="southcodes" href="http://southcodes.tumblr.com/">SC</a></div>
  552. </footer>
  553.  
  554.  
  555. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
  556. <script src="https://pull.cappuccicons.com/cpf.js"></script>
  557. <script>
  558.  $(document).scroll(function() {
  559.    var y = $(this).scrollTop();
  560.    if (y > 200) {$('.ttop').fadeIn();}
  561.    else {$('.ttop').fadeOut();}});
  562.  
  563.    $('a').click(function(){
  564.    $('html, body').animate({
  565.    scrollTop: $( $(this).attr('href') ).offset().top
  566.    }, 450); return false;});
  567. </script>
  568. </body>
  569. </html>
RAW Paste Data