API tools faq
paste
NecromancerCoding

Yellow Brick Road Página HTML

NecromancerCoding
Jan 8th, 2021 (edited)
524
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><head>
  2.     <title>yellow brick road</title>
  3.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  4.     <meta http-equiv="content-script-type" content="text/javascript"/>
  5.     <meta http-equiv="content-style-type" content="text/css"/>
  6.     <link rel="shortcut icon" type="image/x-icon" href="https://illiweb.com/fa/favicon/discussion.ico">
  7.     <meta name="language" content="es"/>
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  9.     <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"/>
  10.     <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"/>
  11.     <script src="https://static.tumblr.com/zd7jnbb/TDPpnlgj3/jquery.style-my-tooltips.js"></script>
  12.     <link href="https://static.tumblr.com/zd7jnbb/nzwpnlgii/style-my-tooltips.css"/>
  13.     <script>
  14.         (function($){$(document).ready(function(){$("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0 });});})(jQuery);
  15.     </script>
  16.     <script>
  17.       $(function() {
  18.     var header = $('header');
  19.     var navebar = $('nav');
  20.     $(window).scroll(function() {    
  21.         var scroll = $(window).scrollTop();
  22.         var wheight = $(window).height();
  23.       var wh2 = wheight * 0.2;
  24.    
  25.         if (scroll >= wh2) {
  26.             navebar.removeClass('biggie').addClass('smalls');
  27.             header.removeClass('biggie').addClass('smalls');
  28.         } else {
  29.             navebar.removeClass('smalls').addClass('biggie');
  30.             header.removeClass('smalls').addClass('biggie');
  31.         }
  32.     });
  33. });
  34.       $(document).ready(function() {
  35. $('.caj h3').click(function() {
  36. $(this).parent().toggleClass('active');
  37. });
  38. });
  39.     </script>
  40.       <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  41.     <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Montserrat:400,400i,900,900i&display=swap&subset=latin-ext" rel="stylesheet"/>
  42.     <link href="https://dl.dropbox.com/s/os0a1dj258ojw2p/MADE%20SAONARA.css" rel="stylesheet" />
  43.     <style>
  44.         :root {
  45.              --border1: 1px solid #e4e4e4;
  46.              --bckg0: #eee;
  47.              --bckg1: #f0f0f0;
  48.              --bckg2: #f2f2f2;
  49.              --bckg3: #f4f4f4;
  50.              --accent1: #F8D948;
  51.              --accent2: #939597;
  52.              --accent3: #ffe777;
  53.         }
  54.          body {
  55.              background-color:var(--bckg0);
  56.              color:#888;
  57.              font:12px 'Roboto';
  58.              padding:0;
  59.             margin:0;
  60.         }
  61.          a, a:hover {
  62.              text-decoration:none!important;
  63.         }
  64.          a {
  65.              color:var(--accent1);
  66.         }
  67.          a:hover {
  68.              color:var(--accent3);
  69.         }
  70.          *::selection{
  71.              background:var(--accent1);
  72.              color:white;
  73.         }
  74.          ::-webkit-scrollbar {
  75.              width: 6px;
  76.              height: 6px;
  77.         }
  78.          ::-webkit-scrollbar-button {
  79.              width: 0px;
  80.              height: 0px;
  81.         }
  82.          ::-webkit-scrollbar-thumb {
  83.              background: #bbb;
  84.              border-radius:20px;
  85.              border:1px solid var(--bckg3);
  86.         }
  87.          ::-webkit-scrollbar-track {
  88.              background:var(--bckg3);
  89.         }
  90.          ::-webkit-scrollbar-corner {
  91.              background: transparent;
  92.         }
  93.         body::-webkit-scrollbar {
  94.              width: 10px;
  95.              height: 10px;
  96.         }
  97.          body::-webkit-scrollbar-track {
  98.              background:var(--bckg0);
  99.         }
  100.          body::-webkit-scrollbar-thumb {
  101.              background: #bbb;
  102.              border-radius:20px;
  103.              border:1px solid var(--bckg0);
  104.         }
  105.         /*Tooltip*/
  106.          #s-m-t-tooltip{
  107.              display:block;
  108.              position:absolute;
  109.             /* basic */
  110.              max-width:300px;
  111.              z-index: 999;
  112.              margin:14px 14px 7px 12px;
  113.             /* style and design */
  114.              padding:8px;
  115.              background:var(--bckg1);
  116.              border:var(--border1);
  117.             /* font */
  118.              font-family:Roboto,sans-serif;
  119.              font-size:10px;
  120.              font-weight:bold;
  121.              text-transform:uppercase;
  122.              line-height:16px;
  123.              color:#888;
  124.         }
  125.       header {
  126.     height: 100vh;
  127.     width: calc(100vw - 10px);
  128.     display: flex;
  129.     justify-content: center;
  130.     align-items: flex-start;
  131.       overflow:hidden;
  132.       box-sizing:border-box;
  133.       transition:ease 1s;
  134. }
  135.     header > * {
  136.       transition:ease 1s;
  137.     }
  138.     header.biggie > .headerdeco {
  139.       top:0;
  140.     }
  141.     header.smalls > .headerdeco {
  142.       top:-100vh;
  143.     }
  144.  
  145. .headerdeco {
  146.     width: 400px;
  147.     height: 65vh;
  148.     background: var(--accent1);
  149.     border-radius: 0 0 200px 200px;
  150.     display: flex;
  151.     justify-content: center;
  152.     align-items: flex-end;
  153.     position: relative;
  154.     box-sizing: border-box;
  155.     padding: 50px;
  156.     z-index:1;
  157. }
  158.  
  159. nav {
  160.     position: fixed;
  161.     display: flex;
  162.     justify-content: space-between;
  163.     align-items: center;
  164.     width:100%;
  165.     font:12px 'Montserrat';
  166.     font-weight:900;
  167.     text-transform:uppercase;
  168.     padding:20px;
  169.     box-sizing:border-box;
  170.     z-index:9;
  171.     transition:ease 1s;
  172. }
  173.  
  174. nav.biggie {
  175.     background:transparent;
  176.     border:1px solid transparent;
  177. }
  178.  
  179. nav.smalls {
  180.     background:var(--bckg0);
  181.     border-bottom:var(--border1);
  182. }
  183.  
  184. nav a {
  185.       color:var(--accent2);
  186. }
  187.  
  188. nav a:hover { color:var(--accent1); }
  189.  
  190. .headerimg {
  191.     width: 300px;
  192.     height: 300px;
  193.     border-radius: 100%;
  194.     position: relative;
  195.     z-index: 1;
  196.     background-size:cover;
  197.     background-position:center;
  198. }
  199.  
  200. h1 {
  201.     position: absolute;
  202.     font: 120px 'MADE SAONARA 2';
  203.     text-transform: uppercase;
  204.     width: calc(100vw - 10px);
  205.     text-align: center;
  206.     line-height: 120px;
  207.     bottom: -28px;
  208.     z-index: 2;
  209.     color: var(--accent3);
  210. }
  211. div.headertextbg {
  212.     position: absolute;
  213.     width: calc(100vw - 10px);
  214.     text-align: center;
  215.     height: 100vh;
  216.     z-index:0;
  217.     opacity:.2;
  218. }
  219. svg.headertextbg {
  220.     width: 100%;
  221.     height: 100vh;
  222. }
  223.  
  224. text.headertext {
  225.     text-align: center;
  226.     font: 120px 'MADE SAONARA 2';
  227.     text-transform: uppercase;
  228. }
  229. .body { min-height:100vh;width:calc(100vw - 10px);background:var(--bckg1);border-top:5px solid var(--accent1);padding:20px; box-sizing:border-box; }
  230. header.smalls {
  231.       padding-bottom:100vh;
  232. }
  233. .caj {
  234.     padding: 10px;
  235.     background: var(--bckg2);
  236.     border-radius: 10px;
  237.     border: var(--border1);
  238.     position: relative;
  239.     overflow: hidden;
  240.     flex-basis:calc(20% - 20px);
  241.     box-sizing:border-box;
  242. }
  243.      
  244. .grid-item { width:calc(20% - 20px);margin:10px; }
  245.  
  246. .benv {
  247.     width:100%!important;
  248. }
  249.  
  250. .caj img {
  251.     object-position: center;
  252.     width: 100%;
  253.     border-radius: 5px;
  254.     transition: ease 1s;
  255.     position:relative;
  256.     top:0;
  257.     display:block;
  258. }
  259.  
  260. .caj h2 {
  261.     font: 16px 'Montserrat';
  262.     text-transform: uppercase;
  263.     color: var(--accent2);
  264.     letter-spacing: -1px;
  265.     font-weight: 700;
  266. }
  267.  
  268. .caj h3 {
  269.     background: var(--accent1);
  270.     border-radius: 10px 0 0 10px;
  271.     margin-right: -10px;
  272.     height: 30px;
  273.     font: 10px 'Montserrat';
  274.     line-height: 30px;
  275.     font-weight: 700;
  276.     text-transform: lowercase;
  277.     color: #333;
  278.     padding-left: 10px;
  279.     box-sizing: border-box;
  280.     cursor:pointer;
  281. }
  282.  
  283. .cajtext {
  284.     position: absolute;
  285.     top: -100%;
  286.     background: var(--bckg3);
  287.     width: calc(100% - 20px);
  288.     height: calc(100% - 70px);
  289.     border: var(--border1);
  290.     padding:20px 15px 20px 20px;
  291.     box-sizing: border-box;
  292.     border-radius: 10px;
  293.     transition: ease 1s;
  294. }
  295.  
  296. .cajtextbox {
  297.       width:100%;
  298.       height:100%;
  299.       font:12px 'Roboto';
  300.       line-height:16px;
  301.       text-align:justify;
  302.       overflow:auto;
  303.       padding-right:5px;
  304.       box-sizing:border-box;
  305. }
  306.  
  307. .caj.active .cajtext {
  308.     top: 10px;
  309. }
  310.  
  311. .caj.active img {
  312.       top:-50vh;
  313. }
  314.     </style>
  315. </head>
  316.  
  317. <body>
  318.     <nav class="biggie">
  319.         <a href="/">HOME</a>
  320.         <a href="https://necromancercoding.tumblr.com/">CREDIT</a>
  321.     </nav>
  322.     <header class="biggie">
  323.         <div class="headerdeco">
  324.             <div class="headerimg" style="background-image:url(https://data.whicdn.com/images/333473252/original.jpg);"></div>
  325.             <h1>yellow brick road</h1>
  326.         </div>
  327.         <div class="headertextbg"><svg class="headertextbg">
  328.     <defs>
  329.       <pattern id="Text" x="0%" y="0" width="1" height=".082" text-anchor="middle">
  330.         <text x="50%" y="82" class="headertext" text-anchor="middle" fill="var(--accent2)">
  331.           yellow brick road
  332.         </text>
  333.       </pattern>
  334.     </defs>
  335.  
  336.     <rect fill="url(#Text)" width="100%" height="100%"></rect>
  337.   </svg></div>
  338.     </header>
  339.   <div class="body">
  340.     <div class="benv grid" data-masonry='{ "itemSelector": ".grid-item", "fitWidth": "true" }'>
  341.       <div class="caj grid-item">
  342.         <img src="https://i.pinimg.com/564x/e9/59/ac/e959ac9b8d207b882662060dfe38fdec.jpg"/>
  343.         <h2>lorem ipsum</h2>
  344.         <h3>leer más</h3>
  345.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  346.       </div>
  347.       <div class="caj grid-item">
  348.         <img src="https://i.pinimg.com/564x/f4/02/f1/f402f102a88f0c45f3f8e0ec1beb8d62.jpg"/>
  349.         <h2>lorem ipsum</h2>
  350.         <h3>leer más</h3>
  351.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  352.       </div>
  353.       <div class="caj grid-item">
  354.         <img src="https://i.pinimg.com/564x/03/49/be/0349bed22790abc7b0f2bf1979447aec.jpg"/>
  355.         <h2>lorem ipsum</h2>
  356.         <h3>leer más</h3>
  357.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  358.       </div>
  359.       <div class="caj grid-item">
  360.         <img src="https://i.pinimg.com/564x/c4/e1/a5/c4e1a58ce5f7e3f8eeeb2b6637045cc3.jpg"/>
  361.         <h2>lorem ipsum</h2>
  362.         <h3>leer más</h3>
  363.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  364.       </div>
  365.       <div class="caj grid-item">
  366.         <img src="https://i.pinimg.com/564x/97/8f/51/978f51775c78c91e1471b49743568548.jpg"/>
  367.         <h2>lorem ipsum</h2>
  368.         <h3>leer más</h3>
  369.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  370.       </div>
  371.       <div class="caj grid-item">
  372.         <img src="https://i.pinimg.com/564x/1d/6f/4d/1d6f4d55e55355a358d018d690218c41.jpg"/>
  373.         <h2>lorem ipsum</h2>
  374.         <h3>leer más</h3>
  375.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  376.       </div>
  377.       <div class="caj grid-item">
  378.         <img src="https://i.pinimg.com/564x/31/27/03/3127032c44042ad66148d0c571fa1ae3.jpg"/>
  379.         <h2>lorem ipsum</h2>
  380.         <h3>leer más</h3>
  381.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  382.       </div>
  383.       <div class="caj grid-item">
  384.         <img src="https://i.pinimg.com/564x/3c/6e/e8/3c6ee8984b98babd45ff657430694774.jpg"/>
  385.         <h2>lorem ipsum</h2>
  386.         <h3>leer más</h3>
  387.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  388.       </div>
  389.       <div class="caj grid-item">
  390.         <img src="https://i.pinimg.com/564x/cf/74/25/cf74254dbe297b1dc3b3f1a1bb9947a0.jpg"/>
  391.         <h2>lorem ipsum</h2>
  392.         <h3>leer más</h3>
  393.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  394.       </div>
  395.       <div class="caj grid-item">
  396.         <img src="https://i.pinimg.com/564x/2e/ac/c3/2eacc395d644e662ba8435c70dddfeda.jpg"/>
  397.         <h2>lorem ipsum</h2>
  398.         <h3>leer más</h3>
  399.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  400.       </div>
  401.       <div class="caj grid-item">
  402.         <img src="https://i.pinimg.com/564x/b8/f4/4d/b8f44d75b0bbd6d5b2bd8aa1f5062971.jpg"/>
  403.         <h2>lorem ipsum</h2>
  404.         <h3>leer más</h3>
  405.         <div class="cajtext"><div class="cajtextbox">Lorem ipsum.</div></div>
  406.       </div>
  407.     </div>
  408.   </div>
  409. </body></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!