.pricingTable{ background-color: #fff; font-family: 'Rubik', sans-serif; text-align: center; width: 260px; margin: 0 auto 30px; position: relative; z-index: 1; } .pricingTable:before, .pricingTable:after{ content: ''; background: linear-gradient(to left bottom, #a10903 45%, transparent 50%); height: 40px; width: 15px; position: absolute; top: 50px; left: -15px; z-index: -1; } .pricingTable:after{ transform: rotateY(180deg); left: auto; right: -15px; } .pricingTable .pricingTable-header{ color: #fff; background: #f53c25; padding: 15px 0 25px; margin: 0 -15px; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); } .pricingTable .title{ font-size: 28px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin: 0; } .pricingTable .price-value{ color: #000; font-size: 80px; font-weight: 500; border-bottom: 2px solid #999; display: inline-block; } .pricingTable .pricing-content{ padding: 20px 0; margin: 0 -13px; border-right: 15px solid #f53c25; border-left: 15px solid #f53c25; } .pricingTable .pricing-content ul{ text-align: left; padding: 0 ; margin: 0; list-style: none; display: inline-block; } .pricingTable .pricing-content li{ color: #404040; font-size: 15px; font-weight: 500; letter-spacing: 1px; line-height: 40px; padding-left: 15px; position: relative; } .pricingTable .pricing-content li:before{ content: ""; background: #f53c25; width: 10px; height: 10px; border-radius: 20px; position: absolute; top: 15px; left: 0; } .pricingTable .pricingTable-signup a{ color: #fff; background: #f53c25; font-size: 25px; font-weight: 500; text-transform: uppercase; padding: 10px 24px; display: inline-block; position: relative; bottom: -28px; transition: all 0.3s; } .pricingTable .pricingTable-signup a:hover{ background: #a10903; text-shadow: 0 0 5px #000; } .pricingTable .pricingTable-signup a:before, .pricingTable .pricingTable-signup a:after{ content: ''; background: linear-gradient(to left bottom, #a10903 48%, transparent 50%); height: 50%; width: 25%; position: absolute; left: -25%; bottom: 0; z-index: -1; } .pricingTable .pricingTable-signup a:after{ transform: rotateY(180deg); left: auto; right: -25%; } .pricingTable.pink:before, .pricingTable.pink:after{ background: linear-gradient(to left bottom, #C51162 45%, transparent 50%); } .pricingTable.pink .pricingTable-header{ background: #F50057; } .pricingTable.pink .pricing-content{ border-color: #F50057; } .pricingTable.pink .pricing-content li:before, .pricingTable.pink .pricingTable-signup a{ background: #F50057; } .pricingTable.pink .pricingTable-signup a:before, .pricingTable.pink .pricingTable-signup a:after{ background: linear-gradient(to left bottom, #C51162 48%, transparent 50%); } .pricingTable.pink .pricingTable-signup a:hover{ background: #C51162; } .pricingTable.purple:before, .pricingTable.purple:after{ background: linear-gradient(to left bottom, #512DA8 45%, transparent 50%); } .pricingTable.purple .pricingTable-header{ background: #8e44ad; } .pricingTable.purple .pricing-content{ border-color: #8e44ad; } .pricingTable.purple .pricing-content li:before, .pricingTable.purple .pricingTable-signup a{ background: #8e44ad; } .pricingTable.purple .pricingTable-signup a:before, .pricingTable.purple .pricingTable-signup a:after{ background: linear-gradient(to left bottom, #512DA8 48%, transparent 50%); } .pricingTable.purple .pricingTable-signup a:hover{ background: #512DA8; } @media only screen and (max-width: 990px){ .pricingTable{ margin: 0 auto 60px; } } @media only screen and (max-width: 576px){ .pricingTable{ margin: 0 auto 60px; width: 100%; } }