%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
View Compiled
body{
  -webkit-font-smoothing: antialiased;
}
section {
    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.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;
	
}
.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;
}

















//inspired  by Mackenzie Child in Daily Design

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.