API tools faq
paste
annasthms

page 02 - an introduction (all-in-one)

annasthms
Jan 8th, 2018
1,548
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. credits:
  7.  
  8. - an introduction (all-in-one) page by annasthms
  9.  
  10. -->
  11.  
  12. <head>
  13.   <title>{Title}</title>
  14.   <meta name="viewport" content="width=device-width, initial-scale=1">
  15.   <link href="http://static.tumblr.com/0podkko/1C9otjxkc/jquery-ui.structure.css" rel="stylesheet">
  16.   <style>
  17.   body {
  18.     font-family: Garamond, serif;
  19.     font-size: 16px; /* change this to change the font size */
  20.     color: #000; /* change this to change the font color */
  21.   }
  22.   a {
  23.     color: #8d919b;
  24.     text-decoration: none;
  25.   }
  26.   a:hover {
  27.     color: #7f90c4;
  28.   }
  29.   b {
  30.     color: #8d919b;
  31.   }
  32.   u, s {
  33.     -webkit-text-decoration-color: #8d919b;
  34.             text-decoration-color: #8d919b;
  35.   }
  36.   i {
  37.     color: #7f90c4;
  38.   }
  39.   hr {
  40.     width: 25%;
  41.     height: 1px;
  42.     border: none;
  43.     background: #7f90c4;
  44.   }
  45.   blockquote {
  46.     border-left: 1px solid #7f90c4;
  47.     margin: 0 0 0 1.5%;
  48.     padding: 0 0 0 2%;
  49.   }
  50.   ul {
  51.     padding: 0 0 0 4%;
  52.   }
  53.   p:first-child {
  54.     margin-top: 0;
  55.   }
  56.   p:last-child {
  57.     margin-bottom: 0;
  58.   }
  59.  
  60.   div#container {
  61.     position: absolute;
  62.     width: calc(500px + 2em + 0.5em);
  63.     top: 50%;
  64.     left: 50%;
  65.     -webkit-transform: translate(-50%, -50%);
  66.             transform: translate(-50%, -50%);
  67.   }
  68.  
  69.   div#blog-links {
  70.     position: absolute;
  71.     -webkit-transform: translateY(-50%);
  72.             transform: translateY(-50%);
  73.     z-index: 10;
  74.     text-align: center;
  75.     width: 100%;
  76.   }
  77.   span.title {
  78.     display: block;
  79.   }
  80.   div#blog-links a {
  81.     margin: 0 0.25em 0 0;
  82.   }
  83.  
  84.   .brief {
  85.     position: relative;
  86.     width: 250px;
  87.     height: 250px;
  88.     margin: 0.5em;
  89.     display: inline-block;
  90.     background: #ffffff;
  91.     vertical-align: middle;
  92.   }
  93.   .name {
  94.     position: relative;
  95.     font-size: 1.75em;
  96.     font-style: italic;
  97.     text-align: center;
  98.     top: 50%;
  99.     -webkit-transform: translateY(-50%);
  100.             transform: translateY(-50%);
  101.   }
  102.   .info, .click {
  103.     position: absolute;
  104.     left: 50%;
  105.     -webkit-transform: translateX(-50%);
  106.             transform: translateX(-50%);
  107.     text-align: center;
  108.   }
  109.   .info {
  110.     bottom: 2.75em;
  111.     width: 100%;
  112.   }
  113.   .click {
  114.     bottom: 1.25em;
  115.     cursor: help;
  116.   }
  117.  
  118.   .popup {
  119.     position: absolute;
  120.     top: 0;
  121.     left: 0;
  122.     height: 100%;
  123.     width: 100%;
  124.     display: none;
  125.     z-index: 101;
  126.   }
  127.   .popup .back {
  128.     position: absolute;
  129.     top: 0;
  130.     left: 0;
  131.     height: 100%;
  132.     width: 100%;
  133.     background: rgba(0, 0, 0, 0.25);
  134.   }
  135.   .popup .wrap {
  136.     position: relative;
  137.     max-width: 75%;
  138.     overflow: auto;
  139.     top: 50%;
  140.     left: 50%;
  141.     -webkit-transform: translate(-50%, -50%);
  142.             transform: translate(-50%, -50%);
  143.     background: #fff;
  144.     border: 2em solid #fff;
  145.     z-index: 10;
  146.     -webkit-box-sizing: border-box;
  147.             box-sizing: border-box;
  148.   }
  149.   .popup:not(.about) .wrap {
  150.     max-height: 75%;
  151.   }
  152.   ::-webkit-scrollbar {
  153.     width: 0px;
  154.     border-left: 5px solid transparent;
  155.   }
  156.  
  157.   @media screen and (min-width: 900px) {
  158.     .popup .wrap {
  159.       max-width: 41.25em;
  160.     }
  161.   }
  162.  
  163.   .basic-info {
  164.     margin-bottom: 1em;
  165.   }
  166.   .basic-info .avatar {
  167.     width: 5em;
  168.     height: 5em;
  169.     display: block;
  170.     border-radius: 100%;
  171.     margin: 0.5em auto;
  172.   }
  173.   .basic-info table {
  174.     margin: auto;
  175.     width: 200px;
  176.   }
  177.   .basic-info table td:nth-child(odd) {
  178.     text-transform: lowercase;
  179.     font-variant: small-caps;
  180.     color: #7f90c4;
  181.   }
  182.   .basic-info table td:nth-child(even) {
  183.     text-align: right;
  184.     color: #8d919b;
  185.   }
  186.   .text {
  187.     overflow: auto;
  188.   }
  189.   .text a, .qna a {
  190.     position: relative;
  191.   }
  192.   .text a::before, .qna a::before {
  193.     content: "";
  194.     position: absolute;
  195.     width: 100%;
  196.     height: 0;
  197.     border-bottom: 0.5px solid;
  198.     bottom: -0.05em;
  199.   }
  200.   .more table {
  201.     width: 100%;
  202.     margin-top: 1em;
  203.   }
  204.   .more table td {
  205.     width: 33%;
  206.     border-collapse: collapse;
  207.     border: none;
  208.     vertical-align: top;
  209.     padding: 0 0.5em 0 0;
  210.   }
  211.   .more table td:last-child {
  212.     padding-right: 0;
  213.   }
  214.   span.more-name {
  215.     display: block;
  216.     color: #7f90c4;
  217.     margin-bottom: 0.25em;
  218.   }
  219.   .links a {
  220.     color: #8d919b;
  221.     border: 1.5px solid #8d919b;
  222.     display: inline-block;
  223.     margin: 0.5em 0.25em 0 0;
  224.     padding: 0.15em 0.35em;
  225.     font-size: 0.9em;
  226.     border-radius: 7px;
  227.     opacity: 0.65;
  228.     -webkit-transition: 0.25s all ease-in-out;
  229.     transition: 0.25s all ease-in-out;
  230.   }
  231.   .links a:hover {
  232.     opacity: 1;
  233.   }
  234.   .friends a, .networks a {
  235.     display: inline-block;
  236.     margin: 0.25em 0.25em 0 0;
  237.   }
  238.   .more img {
  239.     height: 2em;
  240.     width: auto;
  241.     border-radius: 7px;
  242.     -webkit-filter: grayscale(75%);
  243.             filter: grayscale(75%);
  244.     -webkit-transition: 0.35s all ease-in-out;
  245.     transition: 0.35s all ease-in-out;
  246.   }
  247.   .more img:hover {
  248.     -webkit-filter: grayscale(0);
  249.             filter: grayscale(0);
  250.   }
  251.  
  252.   .qna {
  253.     margin-bottom: 1em;
  254.   }
  255.   .qna:last-child {
  256.     margin-bottom: 0;
  257.   }
  258.   .question {
  259.     color: #7f90c4;
  260.   }
  261.   .question.hide {
  262.     position: relative;
  263.     padding-right: 2em;
  264.     cursor: help;
  265.   }
  266.   .question.hide:after {
  267.     content: "";
  268.     position: absolute;
  269.     height: 0.5em;
  270.     width: 0.5em;
  271.     border-right: 1px solid;
  272.     border-bottom: 1px solid;
  273.     right: 0.5em;
  274.     top: calc(50% - 0.25em);
  275.     -webkit-transform: rotate(45deg) translateY(-50%);
  276.             transform: rotate(45deg) translateY(-50%);
  277.     -webkit-transform-origin: right;
  278.             transform-origin: right;
  279.   }
  280.   .question.hide.turn:after {
  281.     -webkit-transform: rotate(-135deg) translateY(-50%);
  282.             transform: rotate(-135deg) translateY(-50%);
  283.     top: calc(50% - 0.75em);
  284.   }
  285.   .answer {
  286.     margin-top: 0.5em;
  287.   }
  288.   .hide + .answer {
  289.     display: none;
  290.   }
  291.   div#askbox {
  292.     margin: 2em auto 0;
  293.     max-width: 500px;
  294.   }
  295.  
  296.   .tag-list {
  297.     margin-bottom: 0.75em;
  298.   }
  299.   .tag-list:last-child {
  300.     margin-bottom: 0;
  301.   }
  302.   span.tag-name {
  303.     color: #7f90c4;
  304.     display: block;
  305.     margin-right: 0.5em;
  306.   }
  307.   .tag-list a {
  308.     color: #8d919b;
  309.     border: 1.5px solid #8d919b;
  310.     display: inline-block;
  311.     margin: 0.5em 0.25em 0 0;
  312.     padding: 0.1em 0.35em 0.2em;
  313.     font-size: 0.85em;
  314.     border-radius: 7px;
  315.     opacity: 0.65;
  316.     -webkit-transition: 0.25s all ease-in-out;
  317.     transition: 0.25s all ease-in-out;
  318.     text-transform: lowercase;
  319.   }
  320.   .tag-list a:hover {
  321.     opacity: 1;
  322.   }
  323.  
  324.   .blogroll.popup .wrap {
  325.     border-right-width: 1.75em;
  326.   }
  327.   .following {
  328.     text-align: center;
  329.   }
  330.   .following a {
  331.     display: inline-block;
  332.     margin: 0.25em 0.25em 0 0;
  333.   }
  334.   .following img {
  335.     height: 2em;
  336.     width: auto;
  337.     border-radius: 7px;
  338.     -webkit-filter: grayscale(75%);
  339.             filter: grayscale(75%);
  340.     -webkit-transition: 0.35s all ease-in-out;
  341.     transition: 0.35s all ease-in-out;
  342.   }
  343.   .following img:hover {
  344.     -webkit-filter: grayscale(0);
  345.             filter: grayscale(0);
  346.   }
  347.  
  348.   iframe.tmblr-iframe {
  349.     top: calc(50% - 250px - 0.5em);
  350.     left: 50% !important;
  351.     -webkit-transform: translateX(-50%) scale(0.7);
  352.             transform: translateX(-50%) scale(0.7);
  353.     -webkit-transform-origin: center;
  354.             transform-origin: center;
  355.     margin-left: -12px;
  356.     -webkit-filter: invert(1);
  357.             filter: invert(1); /* delete this line for light tumblr controls */
  358.   }
  359.  
  360.   .ui-tooltip {
  361.     padding: 3px 5px 2px;
  362.     margin: 24px 14px 7px 12px;
  363.     position: absolute;
  364.     font-size: 0.8em;
  365.     z-index: 9999;
  366.     max-width: 300px;
  367.     border-radius: 3px;
  368.     background: #ffffff; /* fallback if rgba not supported */
  369.     background: rgba(255,255,255,0.85);
  370.   }
  371.   </style>
  372. </head>
  373. <body>
  374.   <div id="container">
  375.     <div id="blog-links">
  376.       <span href="/" class="title">username</span>
  377.       <a href="/">home</a>
  378.       <a href="/ask">ask</a>
  379.       <a href="/url">link 1</a>
  380.       <a href="/url">link 2</a>
  381.       <a href="/url">link 3</a>
  382.     </div>
  383.  
  384.     <div class="about brief">
  385.       <div class="name">about</div>
  386.       <div class="info">
  387.         brief about <br /> keep it to one or two lines
  388.       </div>
  389.       <div class="about click">
  390.         more? <!-- about popup open link -->
  391.       </div>
  392.     </div>
  393.     <div class="faq brief">
  394.       <div class="name">faq</div>
  395.       <div class="info">
  396.         frequently asked questions
  397.       </div>
  398.       <div class="faq click">
  399.         questions? <!-- faq popup open link -->
  400.       </div>
  401.     </div>
  402.     <div class="nav brief">
  403.       <div class="name">navigate</div>
  404.       <div class="info">
  405.         tags
  406.       </div>
  407.       <div class="nav click">
  408.         explore? <!-- nav/tags popup open link -->
  409.       </div>
  410.     </div>
  411.     <div class="blogroll brief">
  412.       <div class="name">blogroll</div>
  413.       <div class="info">
  414.         blogs i follow
  415.       </div>
  416.       <div class="blogroll click">
  417.         view? <!-- blogroll popup open link -->
  418.       </div>
  419.     </div>
  420.   </div>
  421.  
  422.   <div class="about popup">
  423.     <div class="back"></div>
  424.     <div class="wrap">
  425.       <div class="basic-info">
  426.         <img src="icon url" class="avatar" />
  427.         <table>
  428.           <!-- row begin -->
  429.           <tr>
  430.             <td>name</td>
  431.             <td>(name)</td>
  432.           </tr>
  433.           <!-- row end -->
  434.  
  435.           <!-- row begin -->
  436.           <tr>
  437.             <td>age</td>
  438.             <td>(age)</td>
  439.           </tr>
  440.           <!-- row end -->
  441.  
  442.           <!-- row begin -->
  443.           <tr>
  444.             <td>pronouns</td>
  445.             <td>(pronouns)</td>
  446.           </tr>
  447.           <!-- row end -->
  448.  
  449.           <!--
  450.  
  451.          to add more rows copy/paste:
  452.  
  453.          <tr>
  454.            <td>label</td>
  455.            <td>info</td>
  456.          </tr>
  457.  
  458.          -->
  459.         </table>
  460.       </div>
  461.       <div class="text">
  462.         <!-- add your description here -->
  463.       </div>
  464.       <div class="more">
  465.         <table>
  466.           <tr>
  467.             <td class="links">
  468.               <span class="more-name">links</span>
  469.               <!-- to add more links, add <a href="url">link name</a> -->
  470.               <a href="https://twitter.com/username">twitter</a>
  471.               <a href="https://www.instagram.com/username">instagram</a>
  472.               <a href="https://www.pinterest.com/username">pinterest</a>
  473.               <a href="https://open.spotify.com/user/username">spotify</a>
  474.             </td>
  475.             <td class="friends">
  476.               <span class="more-name">friends</span>
  477.               <!-- to add more friends, add <a href="friend url" title="friend name"><img src="friend icon" /></a> -->
  478.               <a href="friend url" title="friend name"><img src="friend icon" /></a>
  479.               <a href="friend url" title="friend name"><img src="friend icon" /></a>
  480.               <a href="friend url" title="friend name"><img src="friend icon" /></a>
  481.               <a href="friend url" title="friend name"><img src="friend icon" /></a>
  482.               <a href="friend url" title="friend name"><img src="friend icon" /></a>
  483.             </td>
  484.             <td class="networks">
  485.               <span class="more-name">networks</span>
  486.               <!-- to add more networks, add <a href="network url" title="network name"><img src="network icon" /></a> -->
  487.               <a href="network url" title="network name"><img src="network icon" /></a>
  488.               <a href="network url" title="network name"><img src="network icon" /></a>
  489.               <a href="network url" title="network name"><img src="network icon" /></a>
  490.               <a href="network url" title="network name"><img src="network icon" /></a>
  491.               <a href="network url" title="network name"><img src="network icon" /></a>
  492.             </td>
  493.           </tr>
  494.         </table>
  495.       </div>
  496.     </div>
  497.   </div>
  498.   <div class="faq popup">
  499.     <div class="back"></div>
  500.     <div class="wrap">
  501.       <!-- question block begin -->
  502.       <div class="qna">
  503.         <div class="question">
  504.           question?
  505.         </div>
  506.         <div class="answer">
  507.           answer.
  508.         </div>
  509.       </div>
  510.       <!-- question block end -->
  511.  
  512.       <!-- question block begin -->
  513.       <div class="qna">
  514.         <div class="question">
  515.           question?
  516.         </div>
  517.         <div class="answer">
  518.           answer.
  519.         </div>
  520.       </div>
  521.       <!-- question block end -->
  522.  
  523.       <!--
  524.  
  525.      to add a question with a shown answer, copy/paste:
  526.  
  527.      <div class="qna">
  528.        <div class="question">
  529.          question?
  530.        </div>
  531.        <div class="answer">
  532.          answer.
  533.        </div>
  534.      </div>
  535.  
  536.      ***
  537.  
  538.      to add a question with a hidden answer, copy/paste:
  539.  
  540.      <div class="qna hide">
  541.        <div class="question">
  542.          question?
  543.        </div>
  544.        <div class="answer">
  545.          answer.
  546.        </div>
  547.  
  548.      </div>
  549.  
  550.      -->
  551.  
  552.       <div id="askbox">
  553.         <!-- no need to touch this -->
  554.         <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color: transparent; overflow: hidden; height: 190px;" id="ask_form"></iframe>
  555.       </div>
  556.     </div>
  557.   </div>
  558.   <div class="nav popup">
  559.     <div class="back"></div>
  560.     <div class="wrap">
  561.       <!-- tag block begin -->
  562.       <div class="tag-list">
  563.         <span class="tag-name">category</span>
  564.         <a href="/tagged/tag">tag</a>
  565.         <a href="/tagged/tag">tag</a>
  566.         <a href="/tagged/tag">tag</a>
  567.         <a href="/tagged/tag">tag</a>
  568.         <a href="/tagged/tag">tag</a>
  569.       </div>
  570.       <!-- tag block end -->
  571.  
  572.       <!-- tag block begin -->
  573.       <div class="tag-list">
  574.         <span class="tag-name">category</span>
  575.         <a href="/tagged/tag">tag</a>
  576.         <a href="/tagged/tag">tag</a>
  577.         <a href="/tagged/tag">tag</a>
  578.         <a href="/tagged/tag">tag</a>
  579.         <a href="/tagged/tag">tag</a>
  580.       </div>
  581.       <!-- tag block end -->
  582.  
  583.       <!-- tag block begin -->
  584.       <div class="tag-list">
  585.         <span class="tag-name">category</span>
  586.         <a href="/tagged/tag">tag</a>
  587.         <a href="/tagged/tag">tag</a>
  588.         <a href="/tagged/tag">tag</a>
  589.         <a href="/tagged/tag">tag</a>
  590.         <a href="/tagged/tag">tag</a>
  591.       </div>
  592.       <!-- tag block end -->
  593.  
  594.       <!--
  595.  
  596.      to add more tag categories, copy/paste:
  597.  
  598.      <div class="tag-list">
  599.        <span class="tag-name">category</span>
  600.        <a href="/tagged/tag">tag</a>
  601.        <a href="/tagged/tag">tag</a>
  602.        <a href="/tagged/tag">tag</a>
  603.      </div>
  604.  
  605.      -->
  606.  
  607.     </div>
  608.   </div>
  609.   <div class="blogroll popup">
  610.     <div class="back"></div>
  611.     <div class="wrap">
  612.       <!-- do not touch -->
  613.       {block:Following}<div class="following">
  614.         {block:Followed}
  615.         <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-40}" /></a>
  616.         {/block:Followed}
  617.       </div>{/block:Following}
  618.     </div>
  619.   </div>
  620.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  621.   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  622.   <script>
  623.   $(document).ready(function() {
  624.     var i = 0;
  625.     $('.click').click(function() {
  626.       var type = $(this).attr('class').split(' ')[0];
  627.       $(this).parents('#container').siblings('.' +  type).fadeIn();
  628.       if ( type == 'about' ) {
  629.         i++;
  630.         if (i == 1) {
  631.           var basicInfo = $('.basic-info').outerHeight() + 'px',
  632.               more = $('.more').outerHeight() + 'px';
  633.           $('head').append('<style>.text{max-height:calc(75vh - 4em - ' + basicInfo + ' - ' + more + ')}</style>');
  634.         }
  635.       }
  636.     });
  637.     $('.back').click(function() {
  638.       $(this).parents('.popup').fadeOut();
  639.     });
  640.     $('.hide').click(function() {
  641.       $(this).siblings('.answer').slideToggle();
  642.       $(this).toggleClass('turn');
  643.     });
  644.     $('[title]').tooltip({
  645.       track: true,
  646.       position: {
  647.         my: 'left+12 top+24'
  648.       }
  649.     });
  650.  
  651.     $('div#blog-links').append('<a href="https://annasthms.tumblr.com">credit</a>');
  652.   });
  653.   </script>
  654. </body>
  655. </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!