DonnaMartinek

Thank you @creedon I had to take a different route to get the product to look decent with the buy now and the subscribe button.

@DolceCotti Thank you! Your code worked for me! Thank you. Does anyone know of a way to center the Subscribe Monthly button? And then my next hurdle, to get both to be aligned side by side on mobile. Thank you also @creedon for your code although I wasn't successful using it due to my theme I'm sure.

YESSSS!!!!! It worked! Well, almost. For some reason the sliding box goes to the top of the page all the way to the bottom of the page and is on top of all of the other sections including the header and footer. But your instructions worked! Thank you @iamdavehart and @jenniferboddam Here is the code: <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 --> </footer> <!-- footer --> <style> /*========== Global ==========*/ /*========== Basics ==========*/ 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: 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; -moz-transition-duration: 0.4s; -o-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; -moz-transition-duration: 0.5s; -o-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; -moz-perspective: 1000px; perspective: 1000px; } .post-wrapper .post.hidden .post-content { -webkit-transform: translateY(100px) rotateX(30deg); -moz-transform: translateY(100px) rotateX(30deg); -ms-transform: translateY(100px) rotateX(30deg); -o-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; -moz-transform: none; -ms-transform: none; -o-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: 0.3; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-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; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-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>

THANK YOU so much for the breakdown and the explanations! I really appreciate it.

Thank you so very much and my apologizes for the delay in responding. I wound up using just a colored background on the website. But here was the code that I was trying to use. #siteWrapper [data-section-id="datasectionidgoeshere"] { .section-background { overflow: visible; &:after { content: ''; width: 100%; height: 100%; bottom: 0; left: 0; background: inherit; -webkit-mask: url(LINK TO SVG HERE) top no-repeat; mask: url(LINK TO SVG HERE) top no-repeat; margin-bottom: 1px; transform: translateY(100%); position: absolute; pointer-events: none; @media screen and (max-width: 800px) { -webkit-mask-size: 300% 50%; mask-size: 300% 50%; }}} }

Looking for the same thing. I trying to find where and what code to put in. Does the Codepen HTML code get pasted into a Code Block on the page? I'm trying to get this Codepen code into a Squarespace page: https://codepen.io/nicklassandell/pen/ztGac I tried copying and pasting the Codepen html code into a code <> block and it is a mess. I know I am missing some important piece of code to get this to work. I remember seeing a video combining the html, css, and js code together in the Squarespace code block and including a bit more code in between each of the pasted code. I am hopeful that someone gives a step by step.

Can you please copy and paste your css code to do this? I am having difficulty doing this in my site. I appreciate it and thank you in advance.