Design calculator page

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -136,6 +136,9 @@ h6 {
     padding: 10px 15px;
     cursor: pointer;
 }
+.navbar-right {
+    margin-right: 0px;
+}
 .intro-header {
     height: 100vh;
     text-align: center;
@@ -222,6 +225,33 @@ h6 {
     font-weight: 300;
     font-family: 'Montserrat-Light';
 }
+
+.intro-pricing{
+    text-align: center;
+    color: #fff;
+    background: url(../img/pattern.jpg) no-repeat center center;
+    background-size: cover;
+    height: 70vh;
+    max-height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+.intro-pricing::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(90, 116, 175, 0.7);
+}
+.intro-pricing .intro-message .section-heading{
+    font-size: 45px;
+    width: 80%;
+    margin: 0 auto;
+}
 .split-section {
     padding: 70px 0;
 }
@@ -477,6 +507,88 @@ h6 {
     right: 0;
 }
 
+/*Pricing page*/
+
+.price-calc-section{
+    padding: 80px 40px !important;
+    background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat;
+    background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat;
+    display: flex;
+}
+.price-calc-section .text{
+   width: 50%;
+}
+.price-calc-section .text .section-heading{
+    font-family: 'Montserrat-Bold';
+    font-size: 50px;
+    line-height: 50px;
+    padding-bottom: 25px;
+    color: #3a3a3a;
+    letter-spacing: 1px;
+    position: relative;
+    text-align: right;
+}
+.price-calc-section .text .section-heading::before{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    background: #29427A;
+    height: 7px;
+    width: 70px;
+    right: 0;
+}
+.price-calc-section .card{
+    width: 50%;
+    margin: 0 auto;
+    background: #fff;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    padding-bottom: 40px;
+    border-radius: 7px;
+    text-align: center;
+    /* margin-right: auto; */
+    max-width: 400px;
+}
+.price-calc-section .card .title{
+    padding: 15px 40px;
+    font-family: 'Montserrat-Medium';
+}
+.price-calc-section .card .title h3{
+    font-family: 'Montserrat-Medium';
+}
+.price-calc-section .card .price{
+    background: #5A74AF;
+    padding: 22px;
+    color: #fff;
+    font-size: 32px;
+}
+.price-calc-section .card .description{
+    padding: 12px;
+    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+    position: relative;
+}
+.price-calc-section .card .description span{
+    font-size: 20px;
+}
+.price-calc-section .card .description i{
+    color: #29427A;
+    cursor: pointer;
+    font-size: 24px;
+}
+.price-calc-section .card .description .left{
+   margin-right: 7px;
+}
+.price-calc-section .card .description .right{
+   margin-left: 7px;
+}
+.price-calc-section .card .descriptions{
+    padding: 10px 30px;
+}
+.price-calc-section .card .description p{
+    margin: 0;
+}
+.price-calc-section .card .btn{
+    margin-top: 20px;
+}
 
 @media(max-width:990px) {
     .pricing-section .text {