.demo{ background-color: #E8E8E8; } .pricingTable{ background-color: #fff; font-family: 'Montserrat', sans-serif; text-align: center; margin: 0 15px; padding: 20px 0 40px; position: relative; z-index: 1; } .pricingTable:before, .pricingTable:after{ content: ""; background: linear-gradient(to right,#dfed23,#82cc0c); width: 100%; height: 50%; position: absolute; left: 0; bottom: 0; z-index: -1; } .pricingTable:after{ background: #fff; clip-path: polygon(5% 0, 100% 0, 100% 60%, 95% 60%, 95% 94%, 5% 94%); } .pricingTable .pricingTable-header{ color: #fff; background: linear-gradient(to right,#dfed23,#82cc0c); text-transform: uppercase; padding: 15px 10px; margin: 0 -12px 30px; position: relative; } .pricingTable .pricingTable-header:before, .pricingTable .pricingTable-header:after{ content: ""; background: linear-gradient(to top right,transparent 49%,#1f6b08 50%); width: 12px; height: 12px; position: absolute; left: 0; bottom: -12px; } .pricingTable .pricingTable-header:after{ transform: rotateY(180deg); left: auto; right: 0; } .pricingTable .title{ font-size: 30px; font-weight: 700; letter-spacing: 1px; font-style: italic; margin: 0; } .pricingTable .price-value{ color: transparent; background: linear-gradient(to right,#dfed23,#82cc0c); background-clip: text; -webkit-background-clip: text; margin: 0 0 30px; } .pricingTable .price-value .amount{ font-size: 60px; font-weight: 700; line-height: 55px; display: block; } .pricingTable .duration{ font-size: 14px; font-weight: 600; letter-spacing: 1px; line-height: 20px; text-transform: uppercase; display: block; } .pricingTable .pricing-content{ color: #666; font-size: 16px; font-weight: 500; text-align: left; letter-spacing: 1px; padding: 0 0 0 20px; margin: 0 0 45px; list-style: none; display: inline-block; } .pricingTable .pricing-content li{ margin: 0 0 12px; position: relative; } .pricingTable .pricing-content li:last-child{ margin: 0; } .pricingTable .pricing-content li:before{ content: ""; background: #82cc0c; height: 10px; width: 10px; border-radius: 50px; position: absolute; top: 5px; left: -20px; } .pricingTable .pricingTable-signup a{ color: #666; background: linear-gradient(to right,#dfed23,#82cc0c); font-size: 25px; font-weight: 700; text-transform: uppercase; padding: 10px 20px; display: inline-block; position: relative; z-index: 1; transition: all 0.3s; } .pricingTable .pricingTable-signup a:hover{ color: #fff; text-shadow: 0 0 2px #000; border-radius: 20px; } .pricingTable .pricingTable-signup a:before{ content: ""; background: #fff; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; z-index: -1; transition: all 0.3s ease; } .pricingTable .pricingTable-signup a:hover:before{ opacity: 0; transform: scale(0.2); } .pricingTable.blue:before, .pricingTable.blue .pricingTable-header, .pricingTable.blue .pricingTable-signup a{ background: linear-gradient(to right,#0A7693,#66EAF9); } .pricingTable.blue .pricingTable-header:before, .pricingTable.blue .pricingTable-header:after{ background: linear-gradient(to top right,transparent 49%,#06556b 50%); } .pricingTable.blue .price-value{ background: linear-gradient(to right,#0A7693,#66EAF9); background-clip: text; -webkit-background-clip: text; } .pricingTable.blue .pricing-content li:before{ background: #66EAF9; } .pricingTable.purple:before, .pricingTable.purple .pricingTable-header, .pricingTable.purple .pricingTable-signup a{ background: linear-gradient(to right,#6B0398,#E262CC); } .pricingTable.purple .pricingTable-header:before, .pricingTable.purple .pricingTable-header:after{ background: linear-gradient(to top right,transparent 49%,#3f035b 50%); } .pricingTable.purple .price-value{ background: linear-gradient(to right,#6B0398,#E262CC); background-clip: text; -webkit-background-clip: text; } .pricingTable.purple .pricing-content li:before{ background: #E262CC; } @media only screen and (max-width: 990px){ .pricingTable{ margin: 0 15px 40px; } }