iudexmedia Posted February 1, 2021 Share Posted February 1, 2021 Site URL: https://codepen.io/xhepigerta/pen/oxxQaw Im trying to create this price list in squarespace. I would like to know how I can successfully inject the code on the website, from there i can change pricing text. @tuanphan TIA Link to comment
tuanphan Posted February 3, 2021 Share Posted February 3, 2021 Add a Code Block > paste this code <section class="tuan"> <div class='pricing pricing-palden'> <div class='pricing-item'> <div class='pricing-deco'> <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'> <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
 H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path> <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path> </svg> <div class='pricing-price'><span class='pricing-currency'>$</span>29 <span class='pricing-period'>/ mo</span> </div> <h3 class='pricing-title'>Freelance</h3> </div> <ul class='pricing-feature-list'> <li class='pricing-feature'>1 GB of space</li> <li class='pricing-feature'>Support at $25/hour</li> <li class='pricing-feature'>Limited cloud access</li> </ul> <button class='pricing-action'>Choose plan</button> </div> <div class='pricing-item pricing__item--featured'> <div class='pricing-deco'> <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'> <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
 H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path> <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path> </svg> <div class='pricing-price'><span class='pricing-currency'>$</span>59 <span class='pricing-period'>/ mo</span> </div> <h3 class='pricing-title'>Business</h3> </div> <ul class='pricing-feature-list'> <li class='pricing-feature'>5 GB of space</li> <li class='pricing-feature'>Support at $5/hour</li> <li class='pricing-feature'>Full cloud access</li> </ul> <button class='pricing-action'>Choose plan</button> </div> <div class='pricing-item'> <div class='pricing-deco'> <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'> <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
 H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path> <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path> </svg> <div class='pricing-price'><span class='pricing-currency'>$</span>99 <span class='pricing-period'>/ mo</span> </div> <h3 class='pricing-title'>Enterprise</h3> </div> <ul class='pricing-feature-list'> <li class='pricing-feature'>10 GB of space</li> <li class='pricing-feature'>Support at $5/hour</li> <li class='pricing-feature'>Full cloud access</li> </ul> <button class='pricing-action'>Choose plan</button> </div> </div> </section> Add this to Design > Custom CSS section.tuan { background: #647df9; color: #7a90ff; padding: 2em 0 8em; min-height: 100vh; position: relative; -webkit-font-smoothing: antialiased; } .pricing { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; width: 100%; margin: 0 auto 3em; &-item { position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; text-align: center; -webkit-flex: 0 1 330px; flex: 0 1 330px; } &-action { color: inherit; border: none; background: none; &:focus { outline: none; } } } .pricing-feature-list { text-align: left; } .pricing-palden .pricing-item { font-family: "Open Sans", sans-serif; cursor: default; color: #84697c; background: #fff; box-shadow: 0 0 10px rgba(46, 59, 125, 0.23); border-radius: 20px 20px 10px 10px; margin: 1em; } @media screen and (min-width: 66.25em) { .pricing-palden .pricing-item { margin: 1em -0.5em; } .pricing-palden .pricing__item--featured { margin: 0; z-index: 10; box-shadow: 0 0 20px rgba(46, 59, 125, 0.23); } } .pricing-palden { .pricing-deco { border-radius: 10px 10px 0 0; background: rgba(76, 70, 101, 0.99); padding: 4em 0 9em; position: relative; } .pricing-deco-img { position: absolute; bottom: 0; left: 0; width: 100%; height: 160px; } .pricing-title { font-size: 0.75em; margin: 0; text-transform: uppercase; letter-spacing: 5px; color: #fff; } .deco-layer { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .pricing-item { &:hover { .deco-layer--1 { -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } .deco-layer--2 { -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } } } .icon { font-size: 2.5em; } .pricing-price { font-size: 5em; font-weight: bold; padding: 0; color: #fff; margin: 0 0 0.25em 0; line-height: 0.75; } .pricing-currency { font-size: 0.15em; vertical-align: top; } .pricing-period { font-size: 0.15em; padding: 0 0 0 0.5em; font-style: italic; } .pricing__sentence { font-weight: bold; margin: 0 0 1em 0; padding: 0 0 0.5em; } .pricing-feature-list { margin: 0; padding: 0.25em 0 2.5em; list-style: none; text-align: center; } .pricing-feature { padding: 1em 0; } .pricing-action { font-weight: bold; margin: auto 3em 2em 3em; padding: 1em 2em; color: #fff; border-radius: 30px; background: #4d4766; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; &:hover, &:focus { background-color: #100a13; } } } .pricing-palden .pricing-item--featured .pricing-deco { padding: 5em 0 8.885em 0; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest Posted April 13, 2021 Share Posted April 13, 2021 On 2/3/2021 at 9:29 AM, tuanphan said: Add a Code Block > paste this code <section class="tuan"> <div class='pricing pricing-palden'> <div class='pricing-item'> <div class='pricing-deco'> <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'> <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
 H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path> <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path> </svg> <div class='pricing-price'><span class='pricing-currency'>$</span>29 <span class='pricing-period'>/ mo</span> </div> <h3 class='pricing-title'>Freelance</h3> </div> <ul class='pricing-feature-list'> <li class='pricing-feature'>1 GB of space</li> <li class='pricing-feature'>Support at $25/hour</li> <li class='pricing-feature'>Limited cloud access</li> </ul> <button class='pricing-action'>Choose plan</button> </div> <div class='pricing-item pricing__item--featured'> <div class='pricing-deco'> <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'> <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
 H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path> <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path> </svg> <div class='pricing-price'><span class='pricing-currency'>$</span>59 <span class='pricing-period'>/ mo</span> </div> <h3 class='pricing-title'>Business</h3> </div> <ul class='pricing-feature-list'> <li class='pricing-feature'>5 GB of space</li> <li class='pricing-feature'>Support at $5/hour</li> <li class='pricing-feature'>Full cloud access</li> </ul> <button class='pricing-action'>Choose plan</button> </div> <div class='pricing-item'> <div class='pricing-deco'> <svg class='pricing-deco-img' enable-background='new 0 0 300 100' height='100px' id='Layer_1' preserveAspectRatio='none' version='1.1' viewBox='0 0 300 100' width='300px' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'> <path class='deco-layer deco-layer--1' d='M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--2' d='M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z' fill='#FFFFFF' opacity='0.6'></path> <path class='deco-layer deco-layer--3' d='M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
 H42.401L43.415,98.342z' fill='#FFFFFF' opacity='0.7'></path> <path class='deco-layer deco-layer--4' d='M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z' fill='#FFFFFF'></path> </svg> <div class='pricing-price'><span class='pricing-currency'>$</span>99 <span class='pricing-period'>/ mo</span> </div> <h3 class='pricing-title'>Enterprise</h3> </div> <ul class='pricing-feature-list'> <li class='pricing-feature'>10 GB of space</li> <li class='pricing-feature'>Support at $5/hour</li> <li class='pricing-feature'>Full cloud access</li> </ul> <button class='pricing-action'>Choose plan</button> </div> </div> </section> Add this to Design > Custom CSS section.tuan { background: #647df9; color: #7a90ff; padding: 2em 0 8em; min-height: 100vh; position: relative; -webkit-font-smoothing: antialiased; } .pricing { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; width: 100%; margin: 0 auto 3em; &-item { position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; text-align: center; -webkit-flex: 0 1 330px; flex: 0 1 330px; } &-action { color: inherit; border: none; background: none; &:focus { outline: none; } } } .pricing-feature-list { text-align: left; } .pricing-palden .pricing-item { font-family: "Open Sans", sans-serif; cursor: default; color: #84697c; background: #fff; box-shadow: 0 0 10px rgba(46, 59, 125, 0.23); border-radius: 20px 20px 10px 10px; margin: 1em; } @media screen and (min-width: 66.25em) { .pricing-palden .pricing-item { margin: 1em -0.5em; } .pricing-palden .pricing__item--featured { margin: 0; z-index: 10; box-shadow: 0 0 20px rgba(46, 59, 125, 0.23); } } .pricing-palden { .pricing-deco { border-radius: 10px 10px 0 0; background: rgba(76, 70, 101, 0.99); padding: 4em 0 9em; position: relative; } .pricing-deco-img { position: absolute; bottom: 0; left: 0; width: 100%; height: 160px; } .pricing-title { font-size: 0.75em; margin: 0; text-transform: uppercase; letter-spacing: 5px; color: #fff; } .deco-layer { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .pricing-item { &:hover { .deco-layer--1 { -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } .deco-layer--2 { -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } } } .icon { font-size: 2.5em; } .pricing-price { font-size: 5em; font-weight: bold; padding: 0; color: #fff; margin: 0 0 0.25em 0; line-height: 0.75; } .pricing-currency { font-size: 0.15em; vertical-align: top; } .pricing-period { font-size: 0.15em; padding: 0 0 0 0.5em; font-style: italic; } .pricing__sentence { font-weight: bold; margin: 0 0 1em 0; padding: 0 0 0.5em; } .pricing-feature-list { margin: 0; padding: 0.25em 0 2.5em; list-style: none; text-align: center; } .pricing-feature { padding: 1em 0; } .pricing-action { font-weight: bold; margin: auto 3em 2em 3em; padding: 1em 2em; color: #fff; border-radius: 30px; background: #4d4766; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; &:hover, &:focus { background-color: #100a13; } } } .pricing-palden .pricing-item--featured .pricing-deco { padding: 5em 0 8.885em 0; } I have added a pricing plan from Ghost. But wondering how I can make the button to add the product directly to the cart, and not to a product page first? My site: https://hypersphere-gar-b8yj.squarespace.com/online-pt Pw: 123 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.