JustinSeimits

Circle Member

View Profile See their activity

Posts
135
Joined
June 25, 2016
Last visited
April 9

2 Followers

Personal Information

Website

http://alohacreativedesign.com
Location
United States

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

JustinSeimits's Achievements

Level 5 (5/20)

Rare
Rare
Rare
Rare
Rare

Recent Badges

Reputation

Single Status Update

See all updates by JustinSeimits

JustinSeimits

How to add a pricing list to a squarespace site. (*please note this also has the media breaks for mobile and tablet devices included in the css)

HTML:

<div class="snip1404">
   <div class="plan first-plan">
       <header>
       <h4 class="plan-title plan-short-description">
       START </h4>
       <div class="plan-cost">
           <span class="plan-price">$900</span><span class="plan-type">/month</span></span><span class="plan-type"></span>

       </div>
       </header>
       <ul class="plan-features">
           <li><span class="icon-checkmark">•</span> 15 Micro Videos
</li>
           <li><span class="icon-checkmark">•</span> Captions
</li>
           <li><span class="icon-checkmark">•</span> Thumbnails
</li>
           <li><span class="icon-checkmark">•</span> Titles
</li>
           <li><span class="icon-checkmark">•</span> Time Stamps
</li>
           <li><span class="icon-checkmark">•</span> Custom Branded</li>
       </ul>
       <div class="plan-select">
           <a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%201%20package%22%20 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>

<br><br><p class="plan-description">
*All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
</p>
       </div>
   </div>
   <div class="plan">
       <header>
       <h4 class="plan-title plan-short-description">
       GROW </h4>
       <div class="plan-cost">
           <span class="plan-price">$1,500</span><span class="plan-type">/month</span><span class="plan-type"></span>
       </div>
       </header>
       <ul class="plan-features">
           <li><span class="icon-checkmark">•</span> 30 Micro Videos
</li>
           <li><span class="icon-checkmark">•</span> Captions
</li>
           <li><span class="icon-checkmark">•</span> Thumbnails
</li>
           <li><span class="icon-checkmark">•</span> Titles
</li>
           <li><span class="icon-checkmark">•</span> Time Stamps
</li>
           <li><span class="icon-checkmark">•</span> Custom Branded</li>
       </ul>
       <div class="plan-select">
           <a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%202%20package%22%20 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
<br><br><p class="plan-description">
*All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
</p>
       </div>
   </div>
   <div class="plan three - featured">
       <header>

       <h4 class="plan-title plan-short-description">
       EXPAND</h4>
       <div class="plan-cost">
           <center><h4><mark>Most Popular</mark></h4></center><span class="plan-price">$3,600</span><span class="plan-type">/month</span>
<span class="plan-type"></span>
       </div>
       </header>
       <ul class="plan-features">
           <li><span class="icon-checkmark">•</span> 90 Micro Videos
</li>
           <li><span class="icon-checkmark">•</span> Captions
</li>
           <li><span class="icon-checkmark">•</span> Thumbnails
</li>
           <li><span class="icon-checkmark">•</span> Titles
</li>
           <li><span class="icon-checkmark">•</span> Time Stamps
</li>
           <li><span class="icon-checkmark">•</span> Custom Branded</li>
       </ul>
       <div class="plan-select">
           <a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%203%20package%22 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
<br><br><p class="plan-description">
*All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
</p>

       </div>
   </div>
<div class="plan last-plan">
       <header>
       <h4 class="plan-title plan-short-description">
       SCALE </h4>
       <div class="plan-cost">
           <span class="plan-price">$9,000</span><span class="plan-type">/month</span><span class="plan-type"></span>
       </div>
       </header>
       <ul class="plan-features">
           <li><span class="icon-checkmark">•</span> 300 Micro Videos
</li>
           <li><span class="icon-checkmark">•</span> Captions
</li>
           <li><span class="icon-checkmark">•</span> Thumbnails
</li>
           <li><span class="icon-checkmark">•</span> Titles
</li>
           <li><span class="icon-checkmark">•</span> Time Stamps
</li>
           <li><span class="icon-checkmark">•</span> Custom Branded</li>
       </ul>
       <div class="plan-select">
           <a href="mailto:sam@blnkslatemedia.com?subject=%22Let%27s%20Create%21%20I%27m%20interested%20in%20the%20Tier%204%20package%22 Plan&body=I%27m%20interested%20in%20scaling%20my%20video%20editing%20but%20need%20help%20doing%20so%21">Select Plan</a>
<br><br><p class="plan-description">
*All contracts are month to month with no long term commitments and you can cancel at any time. All tiers are paid in full upon signing up.
</p>
       </div>
   </div>

<div class="clearboth">

</div>
</div>

----------------------------

CSS:

mark {
background-color: #07e8b7;
color: black;
}

.plan-description {
font-size: 12px;
}

.snip1404 {
font-family: 'barlow-bold', Arial, sans-serif;
color: #404040;
text-align: left;
font-size: 16px;
width: 100%;
max-width: 100%;
margin: 50px 0px;
}

.snip1404 .plan-features{
font-family: 'robo', Arial, sans-serif;}


.sqs-block-code .sqs-block-content :last-child {
margin-bottom: 0;
margin: 0px;
}

.custom-tchart.snip1404 .plan.tchart {
width: 45%;
margin: 2.5%;
}

.custom-tchart.snip1404 .plan-features {
padding-top: 20px;
border: 5px solid #07e8b7;

}

.snip1404 .plan-features {
padding: 0 0 20px;
margin: 0;
list-style: outside none none;
font-family: 'robo', Arial, sans-serif;
}

.custom-tchart.snip1404 .plan {

border: 0px;
box-shadow: 0;

}

.custom-tchart.snip1404 .plan-cost {
font-family: 'barlow-bold', Arial, sans-serif;
padding: 20px 20px 10px;
text-align: right;
}

.custom-tchart .plan-cost{
color:#07e8b7;
background-color: white;
border: 5px solid #07e8b7;
border-bottom: 0px solid;


}

.custom-tchart li{
color:black;
background-color: white;

}

.custom-tchart li .icon-checkmark{
color:black

}

.snip1404 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}

.snip1404 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border: 10px solid #fff;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
background-color: #fff;
/* height:700px; */

}
.snip1404 .plan.tchart{width:50%}
.snip1404 .plan:hover i,
.snip1404 .plan.hover i {
-webkit-transform: scale(1.2);
transform: scale(1.2);

}
.snip1404 .first-plan {
border-radius: 8px 0 0 8px;
}
.snip1404 .last-plan {
border-radius: 0 8px 8px 0;
}
.snip1404 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1404 header {
background-color: #07e8b7;
color: #404040;
}
.snip1404 .plan-title {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin: 0;
padding: 20px 20px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.snip1404 .plan-title:after {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 300px 0 0;
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.plan-short-description{
color:#fff;
}
.snip1404 .plan-cost {
padding: 40px 20px 10px;
text-align: right;
}

.snip1404 .plan-price {
font-weight: 600;
font-size: 3em;
}
.snip1404 .plan-type {
opacity: 0.8;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1404 .plan-features {
padding: 0 0 20px;
margin: 0;
margin-top: 20px;
list-style: outside none none;
}
.snip1404 .plan-features li {
padding: 6px 10%;
}
.snip1404 .plan-features i {
margin-right: 8px;

color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1404 .plan-select a {
background-color: #07e8b7;
color: #404040;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: bold;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1404 .plan-select a:hover {
background-color: #05725C;
color:#fff;
}
.snip1404 .featured {
margin-top: -10px;
border-color: #8FE0EB;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
z-index: 1;
border-radius: 8px;
}
.snip1404 .featured .plan-select {
padding: 30px 20px;
}
@media only screen and (max-width: 767px) {
.snip1404 .plan {
width: 50%;
}
.snip1404 .plan-title,
.snip1404 .plan-select a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.snip1404 .plan-select,
.snip1404 .featured .plan-select {
padding: 20px;
}
.snip1404 .featured {
margin-top: 0;
}
}

@media only screen and (max-width: 440px){
.custom-tchart.snip1404 .plan.tchart{
width:100%;
}
}
@media only screen and (max-width: 440px) {
.snip1404 .plan {
width: 100%;
}
}

----------------------------
- June 17, 2020

JustinSeimits

Posts

Joined

Last visited

2 Followers

Personal Information

Recent Profile Visitors

JustinSeimits's Achievements

Level 5 (5/20)

Recent Badges

Reputation

Single Status Update

JustinSeimits

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources