API tools faq
paste
southcodes

anya | progress page

southcodes
Jun 20th, 2021 (edited)
1,047
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.85 KB | None | 0 0
raw download clone embed print report
  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>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!