Copy of test1

  1. Home
  2. Copy of test1
<html lang="en"><head><meta charset="UTF-8" /><title>Colored Stem</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" /> <link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Roboto+Slab|Comfortaa" /><style type="text/css"> html, body { height: 100%; } body { background: #112C30; margin: 0px; padding: 0px; font-family: sans-serif; font-size: 15px; line-height: 26px; color: #B9CFD0; font-family: 'Roboto Slab', serif; overflow-x: hidden; overflow-y: scroll; } a { color: #B9CFD0; text-decoration: none; border-bottom: 1px solid #B9CFD0; } h1, h2, h3, h4, h5, h6 { font-family: 'Comfortaa', cursive; } /*========== Sections ==========*/ .header { text-align: center; position: relative; z-index: 1; background-image: -webkit-gradient(linear, left top, left bottom, from(#6fc7d4), to(#39ACBD)); background-image: linear-gradient(to bottom, #6fc7d4 0%, #39ACBD 100%); } .header .master-head { padding: 7% 30px; } .header .page-title { padding: 0 30px 0 30px; font-size: 60px; line-height: 1em; letter-spacing: 10px; color: #FFF; } .header .page-description { margin: 30px auto; max-width: 600px; font-size: 18px; line-height: 2em; color: #FFF; } .header .scroll-button { color: #FFF; font-size: 20px; padding: 15px 20px 15px 20px; display: inline-block; background: #3093A2; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .header .scroll-button:hover { background: #246f7b; } .header .scroll-button:active { background: #194c53; } .main-content { margin: 0px auto; position: relative; } .main-content .section-inner, .main-content .post-wrapper { *zoom: 1; } .main-content .section-inner:before, .main-content .post-wrapper:before, .main-content .section-inner:after, .main-content .post-wrapper:after { content: ""; display: table; } .main-content .section-inner:after, .main-content .post-wrapper:after { clear: both; } .footer { background: #112C30; padding: 150px 0px 300px 0px; position: relative; z-index: 1; } .footer .good-bye { text-align: center; font-size: 18px; line-height: 36px; } .footer .good-bye p { display: block; margin: 0px auto 30px auto; max-width: 300px; clear: both; } .section .section-inner { margin: 0px auto; width: 1024px; } @media only screen { .section .section-inner { width: auto; max-width: 1024px; } } /*========== Stem ==========*/ .stem-wrapper { position: fixed; top: 0px; bottom: 0px; left: 50%; } .stem-wrapper.color-yellow .stem-background { background: #E9E566; } .stem-wrapper.color-green .stem-background { background: #35C189; } .stem-wrapper.color-white .stem-background { background: #FFF; } .stem-wrapper .stem, .stem-wrapper .stem-background { position: absolute; top: 0px; left: -30px; width: 60px; } .stem-wrapper .stem { background: #1e4f56; height: 100%; } .stem-wrapper .stem-background { background: #39ACBD; height: 50%; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .stem-padding, .single-stem-icon { width: 60px; height: 60px; margin: 0px auto; background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/stem-mask.png) repeat-y top center; } .single-stem-icon.scroll-to-top { cursor: pointer; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/scroll-to-top-icon.png); } /*========== Post wrapper ==========*/ .post-wrapper { *zoom: 1; } .post-wrapper:before, .post-wrapper:after { content: ""; display: table; } .post-wrapper:after { clear: both; } .post-wrapper .post { position: relative; width: 432px; padding: 0px 0px 60px 0px; clear: both; opacity: 1; -webkit-perspective: 1000px; perspective: 1000px; } .post-wrapper .post.hidden .post-content { -webkit-transform: translateY(100px) rotateX(30deg); transform: translateY(100px) rotateX(30deg); opacity: 0; } .post-wrapper .post:hover .post-content, .post-wrapper .post.active .post-content { opacity: 1; } .post-wrapper .post:hover .post-content .meta, .post-wrapper .post.active .post-content .meta { opacity: 1; -webkit-transform: none; transform: none; } .post-wrapper .post:nth-child(even) { float: right; } .post-wrapper .post:nth-child(odd) { float: left; } .post-wrapper .post:nth-child(even) .stem-overlay { left: -110px; } .post-wrapper .post:nth-child(odd) .stem-overlay { right: -110px; } .post-wrapper .post.music-icon .stem-overlay .icon { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/music-icon.png); } .post-wrapper .post.bitbucket-icon .stem-overlay .icon { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/bitbucket-icon.png); } .post-wrapper .post.m-icon .stem-overlay .icon { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/m-icon.png); } .post-wrapper .post.twitter-icon .stem-overlay .icon { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/twitter-icon.png); } .post-wrapper .post .stem-overlay { position: absolute; top: 0px; bottom: 0px; width: 60px; } .post-wrapper .post .stem-overlay .icon { background: transparent no-repeat center center; height: 60px; width: 60px; cursor: pointer; } .post-wrapper .post .stem-overlay .stem-mask { position: absolute; top: 60px; bottom: 0px; left: 0px; right: 0px; background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/stem-mask.png) repeat-y top center; } .post-wrapper .post .post-content { opacity: .3; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transform: none; transform: none; } .post-wrapper .post .post-content .meta { color: rgba(255, 255, 255, 0.3); margin: 0px 0px 15px 0px; letter-spacing: 1px; opacity: 0; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: translateY(-5px); transform: translateY(-5px); } .post-wrapper .post .post-content .post-title { font-size: 32px; line-height: 42px; margin: 0px 0px 15px 0px; } /*========== Media queries ==========*/ @media only screen and (max-width: 1080px) { .main-content, .main-content .section-inner { max-width: none; } .stem-wrapper { left: 80px; } .stem-padding, .single-stem-icon { margin: 0px; float: left; margin-left: 50px; } .post-wrapper .post, .post-wrapper .post:nth-child(even), .post-wrapper .post:nth-child(odd) { width: auto; margin-left: 110px; float: none; } .post-wrapper .post .stem-overlay, .post-wrapper .post:nth-child(even) .stem-overlay, .post-wrapper .post:nth-child(odd) .stem-overlay { left: -60px; right: auto; } .post-wrapper .post .post-content { padding: 0px 50px; } } @media only screen and (max-width: 700px) { .header .page-title { font-size: 40px; } .post-wrapper .post { margin-left: 90px !important; } .post-wrapper .post .post-content { padding: 0 25px; } .stem-wrapper { left: 60px; } .stem-padding, .single-stem-icon { margin-left: 30px; } } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } </style></head><body> <div class="stem-wrapper"> <div class="stem"></div> <div class="stem-background"></div> </div> <header class="section header"> <div class="section-inner"> <div class="master-head"> <h1 class="page-title">Colored Stem</h1> <p class="page-description">Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water.</p> <p class="scroll-button" onclick="$('.post-wrapper .post:first-child .stem-overlay .icon').click();">Ready to go for a ride?</p> </div> </div> <!-- section-inner --></header> <!-- header --> <div class="section main-content"> <div class="section-inner"> <div class="stem-padding"></div> <div class="post-wrapper"> <article class="post bitbucket-icon"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post m-icon" data-stem-color="green"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post music-icon" data-stem-color="yellow"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post twitter-icon" data-stem-color="white"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post bitbucket-icon"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post music-icon" data-stem-color="yellow"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post bitbucket-icon"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post m-icon" data-stem-color="green"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post music-icon" data-stem-color="yellow"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post twitter-icon" data-stem-color="white"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post bitbucket-icon"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> <article class="post music-icon" data-stem-color="yellow"> <div class="stem-overlay"> <div class="icon"></div> <div class="stem-mask"></div> </div> <div class="post-content"> <p class="meta">Written yesterday at 8:56 pm</p> <h2 class="post-title">This is my post title</h2> <div class="entry-content"> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p> </div> </div> </article> </div> <!-- post-wrapper --> <div class="single-stem-icon scroll-to-top trigger-scroll-to-top"></div> </div> <!-- section-inner --></div> <!-- main-content --> <footer class="footer section"> <div class="section-inner"> <div class="good-bye"> <p>That's all, buddy!</p> <p>Psst. You can click the icons to scroll to each post. Click the last one to scroll back up.</p> </div> <!-- section-inner --></div> </footer> <!-- footer --><script src="" data-mce-src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="" data-mce-src="http://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script><script src="js/index.js"></script></body></html>