API tools faq
paste
annasthms

page 03 - fortune (about)

annasthms
Feb 17th, 2018
2,565
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.43 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!----------------------------------------------------
  5.  
  6. - fortune page by annasthms (feb 16, 2018)
  7.  more info @ https://annasthms.tumblr.com/more/page/03
  8.  
  9.  
  10. rules:
  11.  
  12. 1. don't remove the credit
  13. 2. don't steal/claim as yours
  14.  
  15. thank you!! ♡♡♡
  16.  
  17. ----------------------------------------------------->
  18.  
  19. <head>
  20.   <title>about | {Title}</title>
  21.   <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  22.   <style>
  23.   * {
  24.     position: relative;
  25.   }
  26.   body {
  27.     height: 100vh;
  28.     margin: 0;
  29.     font-family: 'Karla', sans-serif; /* font */
  30.     font-size: 14px; /* font size */
  31.   }
  32.   a {
  33.     text-decoration: none;
  34.     color: #f46f6f; /* link color */
  35.   }
  36.   a:hover {
  37.     color: #000000; /* link hover color */
  38.   }
  39.   img {
  40.     max-width: 100%;
  41.     height: auto;
  42.   }
  43.   hr {
  44.     width: 25%;
  45.     height: 1px;
  46.     border: none;
  47.     background: #000000;
  48.   }
  49.   blockquote {
  50.     border-left: 1px solid #000000;
  51.     margin: 0 0 0 1.5%;
  52.     padding: 0 0 0 4%;
  53.   }
  54.   ul {
  55.     padding: 0 0 0 4%;
  56.   }
  57.   p:first-child {
  58.     margin-top: 0;
  59.   }
  60.   p:last-child {
  61.     margin-bottom: 0;
  62.   }
  63.  
  64.   .lantern {
  65.     position: absolute;
  66.     height: 3em;
  67.     width: 4em;
  68.     background: #ff0000; /* lantern background color */
  69.     /* border: 1px solid; */
  70.     border-color: #ffd700; /* lantern border color */
  71.     border-width: calc(1em / 16);
  72.     border-radius: 100%;
  73.   }
  74.   .lantern::before, .lantern::after {
  75.     content: "";
  76.     position: absolute;
  77.     width: 50%;
  78.     height: 0.5em;
  79.     background: #ffda67; /* lantern top/bottom color */
  80.     border-radius: 0.15em;
  81.     z-index: 10;
  82.   }
  83.   .lantern::before {
  84.     top: 0;
  85.     left: 50%;
  86.     -webkit-transform: translate(-50%, -60%);
  87.             transform: translate(-50%, -60%);
  88.     border-top-left-radius: 0.25em;
  89.     border-top-right-radius: 0.25em;
  90.   }
  91.   .lantern::after {
  92.     bottom: 0;
  93.     left: 50%;
  94.     -webkit-transform: translate(-50%, 60%);
  95.             transform: translate(-50%, 60%);
  96.     border-bottom-left-radius: 0.25em;
  97.     border-bottom-right-radius: 0.25em;
  98.   }
  99.   .lantern div:not(.strings) {
  100.     position: absolute;
  101.     left: 50%;
  102.     top: -1px;
  103.     height: calc(100% + 2px);
  104.     border: 1px solid;
  105.     border-color: #ffd700; /* lantern border color */
  106.     border-width: calc(1em / 16);
  107.     border-radius: 100%;
  108.     -webkit-box-sizing: border-box;
  109.             box-sizing: border-box;
  110.     -webkit-transform: translateX(-50%);
  111.             transform: translateX(-50%);
  112.   }
  113.   .lantern div:first-child {
  114.     width: 3em;
  115.   }
  116.   .lantern > div:first-child::before {
  117.     content: "";
  118.     position: absolute;
  119.     width: 1px;
  120.     width: calc(1em / 16);
  121.     height: 50vh;
  122.     background: #ffda67; /* lantern string color */
  123.     left: 50%;
  124.     -webkit-transform: translateX(-50%);
  125.             transform: translateX(-50%);
  126.     z-index: -3;
  127.     bottom: 3em;
  128.   }
  129.   .lantern div:nth-child(2) {
  130.     width: 1.25em;
  131.   }
  132.   .lantern .strings {
  133.     position: absolute;
  134.     width: 50%;
  135.     bottom: 0;
  136.     left: 50%;
  137.     -webkit-transform: translateX(-50%);
  138.             transform: translateX(-50%);
  139.   }
  140.   .lantern .strings div {
  141.     width: 1px;
  142.     width: calc(1em / 16);
  143.     background: #ffda67; /* lantern string color */
  144.   }
  145.  
  146.   main {
  147.     padding: 2em;
  148.     width: 75%;
  149.     max-width: 700px;
  150.     margin: 0 auto;
  151.     top: 50%;
  152.     -webkit-transform: translateY(-50%);
  153.             transform: translateY(-50%);
  154.   }
  155.  
  156.   aside {
  157.     position: absolute;
  158.     width: 25%;
  159.     height: calc(100% - 4em);
  160.     padding-right: 1em;
  161.     text-align: center;
  162.     display: -webkit-box;
  163.     display: -ms-flexbox;
  164.     display: flex;
  165.     -webkit-box-align: center;
  166.         -ms-flex-align: center;
  167.             align-items: center;
  168.     -webkit-box-sizing: border-box;
  169.             box-sizing: border-box;
  170.   }
  171.  
  172.   aside img {
  173.     width: 60%;
  174.     margin-bottom: 1.25em;
  175.     padding: 0.5em;
  176.     border: 0.35em solid rgba(255, 0, 0, 0.25);
  177.   }
  178.   div#links {
  179.     margin-top: 0.5em;
  180.   }
  181.   div#links a {
  182.     display: inline-block;
  183.     margin: 0.15em;
  184.   }
  185.  
  186.   section {
  187.     margin-left: 30%;
  188.   }
  189.  
  190.   article#description {
  191.     overflow: auto;
  192.     padding-right: 0.5em;
  193.   }
  194.   article#progress {
  195.     column-count: 3;
  196.     margin-top: 2em;
  197.   }
  198.   .progress-bar {
  199.     margin-bottom: 1em;
  200.   }
  201.   .progress-bar::before, .progress-bar::after {
  202.     content: "";
  203.     position: absolute;
  204.     height: 3px;
  205.     top: 1.35em;
  206.     left: 0;
  207.   }
  208.   .progress-bar::before {
  209.     background: rgba(255, 0, 0, 0.35); /* progress bar fill color */
  210.   }
  211.   .progress-bar::after {
  212.     width: 100%;
  213.     background: #fafafa;
  214.     background: rgba(0,0,0,0.075); /* progress bar background color */
  215.   }
  216.   .progress-bar span {
  217.     float: right;
  218.     font-size: 0.8em;
  219.     margin-top: 0.25em;
  220.   }
  221.  
  222.   ::-webkit-scrollbar {
  223.     width: 3px;
  224.   }
  225.   ::-webkit-scrollbar-thumb {
  226.     background: #ff0000;
  227.     background: rgba(255, 0, 0, 0.25); /* scroll bar color */
  228.   }
  229.   </style>
  230. </head>
  231. <body>
  232.   <div class="lantern one">
  233.     <div></div>
  234.     <div></div>
  235.     <div class="strings"></div>
  236.   </div>
  237.   <div class="lantern two">
  238.     <div></div>
  239.     <div></div>
  240.     <div class="strings"></div>
  241.   </div>
  242.   <main>
  243.     <aside>
  244.       <div id="aside-container">
  245.         <img src="" /> <!-- paste icon url between the "" -->
  246.         <div id="brief">
  247.           brief about/description
  248.         </div>
  249.         <div id="links">
  250.           <a href="/">home</a>
  251.           <a href="/ask">ask</a>
  252.           <a href="/archive">archive</a>
  253.           <a href="https://www.tumblr.com">dash</a>
  254.           <a href="https://annasthms.tumblr.com/" id="cred" title="made by annasthms">credit</a>
  255.           <a href="url">link</a>
  256.           <a href="url">link</a>
  257.           <a href="url">link</a>
  258.         </div>
  259.       </div>
  260.     </aside>
  261.     <section>
  262.       <article id="description">
  263.         <b>bold</b>, <i>italic</i>, <u>underline</u>, <s>strike</s>, <a href="/">link</a>
  264.         <p>some paragraph text</p>
  265.       </article>
  266.       <article id="progress">
  267.         <!-- i suggest that you have multiples of the column count (default is 3, so 3 6 9 etc. progress bars or else it looks a bit funky) -->
  268.         <div class="progress-bar" percent="10">progress bar name</div>
  269.         <div class="progress-bar" percent="25">progress bar name</div>
  270.         <div class="progress-bar" percent="50">progress bar name</div>
  271.         <div class="progress-bar" percent="42">progress bar name</div>
  272.         <div class="progress-bar" percent="96">progress bar name</div>
  273.         <div class="progress-bar" percent="74">progress bar name</div>
  274.       </article>
  275.     </section>
  276.   </main>
  277.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  278.   <script src="https://static.tumblr.com/0podkko/KH2p4a6kz/annasthms.js"></script>
  279.   <script>
  280.   function lanterns() {
  281.     var $nav = $('aside img'),
  282.         navTop = $nav.offset().top,
  283.         navLeft = $nav.offset().left;
  284.     $('.lantern.one').css({'top': 'calc(' + navTop + 'px - 7em)', 'left': 'calc(' + navLeft + 'px + 0em)'});
  285.     $('.lantern.two').css({'top': 'calc(' + navTop + 'px + 0em)', 'left': 'calc(' + navLeft + 'px - 6em)'});
  286.   }
  287.   $(document).ready(function(){
  288.     var $strings, stringsWidth, length,
  289.         min = 0.75,
  290.         max = 1.25;
  291.     $('.lantern').each(function(){
  292.       $strings = $(this).find('.strings');
  293.       stringsWidth = $strings.width();
  294.       console.log(stringsWidth);
  295.       for (var i = 1; i < (stringsWidth / 3); i++) {
  296.        length = (Math.random() * (max - min + 1)) + min;
  297.        $('<div></div>').appendTo($strings).css({'left':'calc(100% / ' + stringsWidth + '*' + (3 * i - 1) + ')', 'height': length + 'em'});
  298.         console.log('hey');
  299.       }
  300.     });
  301.     var progressHeight = $('article#progress').outerHeight(true);
  302.     $('article#description').css('max-height', 'calc(50vh - ' + progressHeight + 'px)');
  303.     lanterns();
  304.     $(window).resize(function(){
  305.       lanterns();
  306.     });
  307.     var progressBarCount = $('.progress-bar').length,
  308.         progressBar, percent;
  309.     for (var j = 1; j <= progressBarCount; j++) {
  310.      $progressBar = $('.progress-bar').eq(j - 1)
  311.      percent = $progressBar.attr('percent').split('%')[0];
  312.      console.log(percent);
  313.      $progressBar.append('<span>' + percent + '%</span>');
  314.       $('head').append('<style>.progress-bar:nth-child(' + j + ')::before{width:' + percent + '%}</style>');
  315.     }
  316.   });
  317.   </script>
  318. </body>
  319. </html>
Advertisement
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!