API tools faq
paste
penvmbral

page 03.1 - gyre (portfolio)

penvmbral
Feb 5th, 2019
167
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.87 KB | None | 0 0
raw download clone embed print report
  1. <!doctype HTML>
  2. <html>
  3.  
  4. <!-- page 03.1: gyre (portfolio) by penvmbral @ tumblr -->
  5.  
  6. <head>
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10. <!--Fonts-->
  11. <link href="https://fonts.googleapis.com/css?family=Lato|Noto+Serif+SC" rel="stylesheet">
  12. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  13.  
  14. <style type="text/css">
  15.     /* Scrollbar and Selection Styling */
  16.     /* Custom scrollbars are not visible in Firefox. */
  17.    
  18.     ::-webkit-scrollbar-thumb:vertical {
  19.         background-color: #B9DBD1;
  20.         height:5px;
  21.         border: #fff 1px solid;
  22.     }
  23.    
  24.     ::-webkit-scrollbar-thumb:horizontal {
  25.         background-color: #B9DBD1;
  26.         height:5px!important;
  27.         border: #fff 1px solid;
  28.     }
  29.  
  30.     ::-webkit-scrollbar {
  31.         background-color: #ddd;
  32.         border: #fff 2px solid;
  33.         height:3px;
  34.         width:5px;
  35.     }
  36.  
  37.     ::-moz-selection {
  38.        background-color: #B9DBD1;
  39.        color: #477075;
  40.     }
  41.  
  42.     ::selection {
  43.        background-color: #B9DBD1;
  44.        color: #477075;
  45.     }
  46.    
  47.     /* Tumblr Controls Styling */
  48.    
  49.     .tmblr-iframe {
  50.         white-space: nowrap;
  51.         -webkit-filter: invert(100%);
  52.         -moz-filter: invert(100%);
  53.         -o-filter: invert(100%);
  54.         -ms-filter: invert(100%);
  55.         filter: invert(100%);
  56.         opacity: .2;
  57.         transition: .4s;
  58.         -webkit-transition: .4s;
  59.         -moz-transition: .4s;
  60.         position: fixed!important;
  61.         right: -20px!important;
  62.         transform:scale(0.5,0.5);
  63.     }
  64.    
  65.     .tmblr-iframe:hover { opacity:1; }
  66.    
  67.     /* Content Styling */
  68.    
  69.     a {
  70.         text-decoration: none;
  71.         color: #7f7f7f;
  72.         border-bottom: #ddd 1px solid;
  73.         -webkit-transition-duration: 0.5s;
  74.     }
  75.    
  76.     a:hover {
  77.         color: #000;
  78.         border-bottom: 1px #80C7C2 solid;
  79.     }
  80.    
  81.     b, strong, i, em {
  82.         color: #000;
  83.     }
  84.    
  85.     u, underline {
  86.         text-decoration: none;
  87.         border-bottom: 1px #000 solid;
  88.     }
  89.    
  90.     /* Page Styling */
  91.    
  92.     html, body { width: 100%; margin: 0; padding: 0; }
  93.    
  94.     body {
  95.         background: #fff;
  96.         font-family: 'Lato', sans-serif;
  97.         font-size: 12px;
  98.         color: #555;
  99.         line-height: 150%;
  100.     }
  101.    
  102.     #contain {
  103.         max-width: 1150px;
  104.         max-height: 92vh;
  105.         padding: 20px;
  106.         margin: auto;
  107.         margin-top: 1%;
  108.         padding-bottom: 10px;
  109.         overflow-y: scroll;
  110.     }
  111.    
  112.         .item {
  113.             width: 270px;
  114.             height: 270px;
  115.             background: #B9DBD1;
  116.             margin: 6px;
  117.         }
  118.        
  119.         .work {
  120.             display: flex;
  121.             align-items: flex-end;         
  122.             align-content: flex-end;
  123.         }
  124.        
  125.         .featured {
  126.             height: 500px;
  127.             /* The above line defines the height of a FEATURED work block. It's set bigger to make it stand out!
  128.             MASONRY COLUMNS ADJUST VERTICALLY, BUT NOT HORIZONTALLY. DO NOT GIVE THIS CLASS A WIDTH.*/
  129.         }
  130.        
  131.             .hover {
  132.                 width: 220px;
  133.                 height: 100px;
  134.                 margin: auto;
  135.                 background: #fff;
  136.                 text-align: center;
  137.                 opacity: 0;
  138.                 -webkit-transition-duration: 0.5s;
  139.                 padding: 5px;
  140.                 overflow-y: scroll;
  141.             }
  142.        
  143.         .item:hover .hover {
  144.             opacity: 1;
  145.         }
  146.        
  147.             .hover h1, h2, h3, h4, h5, h6, h7, h8 {
  148.                 display: block;
  149.                 width: 50%;
  150.                 margin: auto;
  151.                 font-size: 14px;
  152.                 font-family: 'Noto Serif SC', serif;
  153.                 text-transform: lowercase;
  154.                 border-bottom: 1px #ddd solid;
  155.                 padding-bottom: 2px;
  156.             }
  157.        
  158.         .info {
  159.             background: #fff;
  160.             height: 280px;
  161.             width: 250px;
  162.             padding: 10px;
  163.         }
  164.  
  165.             .head {
  166.                 height: 30px;
  167.                 font-family: 'Noto Serif SC', serif;
  168.                 font-size: 24px;
  169.                 text-transform: lowercase;
  170.                 color: #101010;
  171.                 font-style: italic;
  172.             }
  173.    
  174.             .desc {
  175.                 height: 200px;
  176.                 overflow-y: scroll;
  177.                 margin-top: 5px;
  178.                 clear: both;
  179.             }
  180.            
  181.             .nav {
  182.                 position: relative;
  183.                 width: 70%;
  184.                 float: right;
  185.                 height: 25px;
  186.                 margin: 5px;
  187.                 vertical-align: middle;
  188.                 text-align: right;
  189.             }
  190.    
  191.             .nav a {
  192.                 display: inline-block;
  193.                 padding: 2px;
  194.                 border: 1px transparent solid;
  195.                 vertical-align: middle;
  196.             }
  197.        
  198.             .nav a:hover {
  199.                 color: #000;
  200.                 border-bottom: #80C7C2 1px solid;
  201.                 border-top: #80C7C2 1px solid;
  202.             }
  203.                
  204.     .c {position: absolute; bottom: 10px; right: 10px; width: 19px; height: 10px; padding-top: 1px; padding-bottom: 10px; padding-right: 3px; text-align: center; font-style: italic; border: 1px #ddd solid; font-family: 'Noto Serif SC', serif; opacity: 0.7; -webkit-transition-duration: 0.5s;}
  205.     .c:hover { opacity: 1; border: #B9DBD1 1px solid; }
  206.     .c a { border: none; }
  207.     .c a:hover { color: #B9DBD1; }
  208.    
  209. </style>
  210.  
  211. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  212.  
  213. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  214.  
  215. <script>
  216. $(function(){
  217.     var $container = $('#contain');
  218.         $container.imagesLoaded(function(){
  219.         $container.masonry({
  220.         itemSelector: '.item',
  221.         fitWidth: true,
  222.         });
  223.     });
  224. });
  225.  
  226.  
  227. </script>
  228.  
  229. </head>
  230. <body>
  231.  
  232.     <div id="contain">
  233.  
  234.         <div class="item info">
  235.             <div class="head">
  236.                 works by yourname.
  237.             </div>
  238.            
  239.             <div class="nav">
  240.                 <a href="/">home</a>
  241.                 <a href="/ask">message</a>
  242.                 <a href="/">extra</a>
  243.                 <a href="/">extra</a>
  244.             </div>
  245.            
  246.             <div class="desc">
  247.                 <p>write like a paragraph about your stuff here. or more if you really want. the box will scroll. <b>bold</b> <i>italic</i> <u>underline</u> <a href="#">link</a></p>
  248.                 <p>in order to showcase your work you need an image associated with it. you're gonna want to scale the image down to have a width of 270px, but if you use <i>style="height: (height of image)px"</i> then you can adjust the height. you do NOT want to adjust the width; masonry will get kind of fucky of you so.</p>
  249.                 <p>this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. this is more text to show off that the box scrolls. </p>
  250.             </div>
  251.     </div>
  252.        
  253.         <div class="item featured work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  254.             <div class="hover">
  255.                 <h2>work title.</h2>
  256.                 <p>work description. scrolls if you go over.</p>
  257.             </div>
  258.         </div>
  259.        
  260.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  261.             <div class="hover">
  262.                 <h2>work title.</h2>
  263.                 <p>work description. scrolls if you go over.</p>
  264.             </div>
  265.         </div>
  266.        
  267.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  268.             <div class="hover">
  269.                 <h2>work title.</h2>
  270.                 <p>work description. scrolls if you go over.</p>
  271.             </div>
  272.         </div>
  273.        
  274.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  275.             <div class="hover">
  276.                 <h2>work title.</h2>
  277.                 <p>work description. scrolls if you go over.</p>
  278.             </div>
  279.         </div>
  280.        
  281.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  282.             <div class="hover">
  283.                 <h2>work title.</h2>
  284.                 <p>work description. scrolls if you go over.</p>
  285.             </div>
  286.         </div>
  287.        
  288.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  289.             <div class="hover">
  290.                 <h2>work title.</h2>
  291.                 <p>work description. scrolls if you go over.</p>
  292.             </div>
  293.         </div>
  294.        
  295.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  296.             <div class="hover">
  297.                 <h2>work title.</h2>
  298.                 <p>work description. scrolls if you go over.</p>
  299.             </div>
  300.         </div>
  301.        
  302.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  303.             <div class="hover">
  304.                 <h2>work title.</h2>
  305.                 <p>work description. scrolls if you go over.</p>
  306.             </div>
  307.         </div>
  308.        
  309.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  310.             <div class="hover">
  311.                 <h2>work title.</h2>
  312.                 <p>work description. scrolls if you go over.</p>
  313.             </div>
  314.         </div>
  315.        
  316.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  317.             <div class="hover">
  318.                 <h2>work title.</h2>
  319.                 <p>work description. scrolls if you go over.</p>
  320.             </div>
  321.         </div>
  322.        
  323.         <div class="item work" style="background-image: url('YOUR IMAGE'); background-size: cover;">
  324.             <div class="hover">
  325.                 <h2>work title.</h2>
  326.                 <p>work description. scrolls if you go over.</p>
  327.             </div>
  328.         </div>
  329.        
  330.         <!--CREDIT DO NOT ERASE-->
  331.     <div class="c"><a href="https://penvmbral.tumblr.com">v</a></div>
  332. </body>
  333. </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!