Jump to content

How to add this css to my site.

Recommended Posts

  • Replies 2
  • Views 353
  • Created
  • Last Reply

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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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
  • 2 months later...
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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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&#x000A;	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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.