GageDodd
Member
- Sep 30, 2014
- 225
- 57
Hello Everyone i hope your having a great day!
Well today i am releasing this so other people can maybe add this to their hosting!
I have randomly added information just so you can get an idea of what it will have when you add what you want it to have!
Thanks For Viewing this and i hope to see this on future hosting if you decide to use it just let me know where itll be at so i can check it out i would love to check it out on how you guys edit it!
-Gage
Well today i am releasing this so other people can maybe add this to their hosting!
You must be registered for see links
HTML:
%section
.pricing.pricing-palden
.pricing-item
.pricing-deco
%svg#Layer_1.pricing-deco-img{"enable-background" => "new 0 0 300 100", :height => "100px", :preserveAspectRatio => "none", :version => "1.1", :viewBox => "0 0 300 100", :width => "300px", :x => "0px", "xml:space" => "preserve", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink", :y => "0px"}
%path.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\n\tc48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z", :fill => "#FFFFFF", :opacity => "0.6"}
%path.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\n\tc48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z", :fill => "#FFFFFF", :opacity => "0.6"}
%path.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\n\tH42.401L43.415,98.342z", :fill => "#FFFFFF", :opacity => "0.7"}
%path.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\n\tc53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z", :fill => "#FFFFFF"}
.pricing-price
%span.pricing-currency> $
29
%span.pricing-period / mo
%h3.pricing-title Freelance
%ul.pricing-feature-list
%li.pricing-feature 1 GB of space
%li.pricing-feature Support at $25/hour
%li.pricing-feature Limited cloud access
%button.pricing-action Choose plan
.pricing-item.pricing__item--featured
.pricing-deco
%svg#Layer_1.pricing-deco-img{"enable-background" => "new 0 0 300 100", :height => "100px", :preserveAspectRatio => "none", :version => "1.1", :viewBox => "0 0 300 100", :width => "300px", :x => "0px", "xml:space" => "preserve", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink", :y => "0px"}
%path.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\n\tc48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z", :fill => "#FFFFFF", :opacity => "0.6"}
%path.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\n\tc48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z", :fill => "#FFFFFF", :opacity => "0.6"}
%path.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\n\tH42.401L43.415,98.342z", :fill => "#FFFFFF", :opacity => "0.7"}
%path.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\n\tc53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z", :fill => "#FFFFFF"}
.pricing-price
%span.pricing-currency> $
59
%span.pricing-period / mo
%h3.pricing-title Business
%ul.pricing-feature-list
%li.pricing-feature 5 GB of space
%li.pricing-feature Support at $5/hour
%li.pricing-feature Full cloud access
%button.pricing-action Choose plan
.pricing-item
.pricing-deco
%svg#Layer_1.pricing-deco-img{"enable-background" => "new 0 0 300 100", :height => "100px", :preserveAspectRatio => "none", :version => "1.1", :viewBox => "0 0 300 100", :width => "300px", :x => "0px", "xml:space" => "preserve", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink", :y => "0px"}
%path.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\n\tc48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z", :fill => "#FFFFFF", :opacity => "0.6"}
%path.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\n\tc48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z", :fill => "#FFFFFF", :opacity => "0.6"}
%path.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\n\tH42.401L43.415,98.342z", :fill => "#FFFFFF", :opacity => "0.7"}
%path.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\n\tc53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z", :fill => "#FFFFFF"}
.pricing-price
%span.pricing-currency> $
99
%span.pricing-period / mo
%h3.pricing-title Enterprise
%ul.pricing-feature-list
%li.pricing-feature 10 GB of space
%li.pricing-feature Support at $5/hour
%li.pricing-feature Full cloud access
%button.pricing-action Choose plan
HTML:
section {
background: #647df9;
color: #7a90ff;
padding: 2em 0 8em;
min-height: 100vh;
position: relative;
}
.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.250em) {
.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;
color: #6A47CF;
}
.pricing-period {
font-size: 0.15em;
padding: 0 0 0 0.5em;
color: #6A47CF;
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: #11031B;
-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;
}Thanks For Viewing this and i hope to see this on future hosting if you decide to use it just let me know where itll be at so i can check it out i would love to check it out on how you guys edit it!
-Gage
