From 2b66694fe6613a5703a009ada2a8492c482619e6 Mon Sep 17 00:00:00 2001
From: idriss112 <idrisslaaziri@gmail.com>
Date: Wed, 21 Feb 2024 17:43:17 -0500
Subject: [PATCH] Pricing section

---
 CSS/Kasper.css | 249 +++++++++++++++++++++++++++++++++++++------------
 index.html     |  12 +--
 2 files changed, 194 insertions(+), 67 deletions(-)

diff --git a/CSS/Kasper.css b/CSS/Kasper.css
index c15e0e5..0198a76 100644
--- a/CSS/Kasper.css
+++ b/CSS/Kasper.css
@@ -608,18 +608,20 @@ header nav .form i {
     -ms-transition: 0.3s;
     -o-transition: 0.3s;
 }
-.portfolio .more:hover{
-    border:  1px solid transparent;
+
+.portfolio .more:hover {
+    border: 1px solid transparent;
     background-color: var(--main-color);
     color: white;
 }
 
 /*End Portfolio*/
 /*Start Video*/
-.video{
+.video {
     position: relative;
 }
-.video::before{
+
+.video::before {
     content: '';
     position: absolute;
     left: 0;
@@ -628,10 +630,12 @@ header nav .form i {
     height: 100%;
     background-color: rgb(0, 0, 0 / 40%);
 }
-.video video{
+
+.video video {
     width: 100%;
 }
-.video .text{
+
+.video .text {
     width: 100%;
     position: absolute;
     top: 50%;
@@ -645,16 +649,19 @@ header nav .form i {
     color: white;
     text-align: center;
 }
-.video .text h2{
+
+.video .text h2 {
     margin: 0 0 30px;
     text-transform: uppercase;
     font-weight: normal;
 
 }
-.video .text p{
+
+.video .text p {
     margin-bottom: 30px;
 }
-.video .text button{
+
+.video .text button {
     background: black;
     color: white;
     padding: 10px 20px;
@@ -667,34 +674,39 @@ header nav .form i {
     -ms-transition: 0.3s;
     -o-transition: 0.3s;
 }
-.video .text button:hover{
+
+.video .text button:hover {
     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
 }
+
 /*End Video*/
 
 /*Start About*/
 
-.about{
+.about {
     padding-top: var(--section-padding);
     overflow: hidden;
     text-align: center;
 
 }
+
 .about img {
     position: relative;
     bottom: -120px;
     margin-top: -120px;
     max-width: 100%;
 }
-@media(max-width:767px){
+
+@media(max-width:767px) {
     .about img {
         bottom: -60px;
         margin-top: -60px;
     }
 }
+
 /*End About*/
 /*Start Stats*/
-.stats{
+.stats {
     padding-top: var(--section-padding);
     padding-bottom: var(--section-padding);
     text-align: center;
@@ -702,40 +714,47 @@ header nav .form i {
     background-size: cover;
     position: relative;
 }
-.stats::before{
+
+.stats::before {
     content: "";
     position: absolute;
-    left: 0 ;
+    left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgb(0 0 0 / 70%);
 }
+
 .stats .container {
     position: relative;
     display: flex;
     flex-wrap: wrap;
 }
-.stats .container .box{
+
+.stats .container .box {
     color: white;
     padding: 50px;
     background-color: var(--transparent-color);
 }
-@media (max-width: 767px){
+
+@media (max-width: 767px) {
     .stats .container .box {
         flex-basis: 100%;
     }
 }
-@media (min-width: 768px){
+
+@media (min-width: 768px) {
     .stats .container .box {
         flex-basis: 50%;
     }
 }
-@media (min-width: 992px){
+
+@media (min-width: 992px) {
     .stats .container .box {
         flex-basis: 25%;
     }
 }
+
 .stats .container .box i {
     width: 40px;
     height: 40px;
@@ -750,48 +769,57 @@ header nav .form i {
     margin: 0 auto 30px;
     align-items: center;
 }
-.stats .container .box  .number{
+
+.stats .container .box .number {
     font-size: 50px;
     font-weight: bold;
     margin: 0 0 20px;
 }
-.stats .container .box i p{
+
+.stats .container .box i p {
     font-size: 14px;
 }
+
 /*End Stats*/
 /*Start Skills*/
-.our-skills{
+.our-skills {
     padding-top: var(--section-padding);
     padding-bottom: var(--section-padding);
 }
-.our-skills .container{
+
+.our-skills .container {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
 }
-@media (min-width:992px){
-    .our-skills .container >div{
+
+@media (min-width:992px) {
+    .our-skills .container>div {
         flex-basis: 45%;
     }
 }
-.our-skills .container > div >h3{
+
+.our-skills .container>div>h3 {
     margin: 0 0 30px;
     font-weight: normal;
     text-align: center;
     text-transform: capitalize;
 }
-.our-skills .container > div > p{
+
+.our-skills .container>div>p {
     color: #777;
     line-height: 2;
     text-align: center;
     margin-bottom: 60px;
 }
-.our-skills .testimonials .content{
+
+.our-skills .testimonials .content {
     display: flex;
     margin-bottom: 30px;
     align-items: center;
 }
-.our-skills .testimonials .content img{
+
+.our-skills .testimonials .content img {
     width: 100px;
     border-radius: 50%;
     -webkit-border-radius: 50%;
@@ -800,33 +828,39 @@ header nav .form i {
     -o-border-radius: 50%;
     margin-right: 50px;
 }
-@media (max-width: 767px){
-    .our-skills .testimonials .content{
+
+@media (max-width: 767px) {
+    .our-skills .testimonials .content {
         flex-direction: column;
         text-align: center;
-    }   
-    .our-skills .testimonials .content img{
+    }
+
+    .our-skills .testimonials .content img {
         margin: 0 auto 20px;
 
     }
 }
-.our-skills .testimonials .text{
+
+.our-skills .testimonials .text {
     line-height: 1.8;
     border-bottom: solid 1px #ccc;
 }
-.our-skills .testimonials .text p{
+
+.our-skills .testimonials .text p {
     color: #777;
     text-align: right;
     font-size: 14px;
     margin-bottom: 10px;
 }
-.our-skills .testimonials .bullets{
+
+.our-skills .testimonials .bullets {
     display: flex;
     justify-content: center;
     margin-top: 50px;
     margin-bottom: 50px;
 }
-.our-skills .testimonials .bullets li{
+
+.our-skills .testimonials .bullets li {
     width: 14px;
     height: 14px;
     border: 1px solid #aaa;
@@ -837,29 +871,35 @@ header nav .form i {
     -o-border-radius: 50%;
     margin-right: 10px;
 }
-.our-skills .testimonials .bullets li.active{
+
+.our-skills .testimonials .bullets li.active {
     background-color: var(--main-color);
     border-color: var(--main-color);
 }
-.our-skills .skills .prog-holder{
+
+.our-skills .skills .prog-holder {
     margin-bottom: 40px;
 }
-.our-skills .skills .prog-holder h4{
+
+.our-skills .skills .prog-holder h4 {
     margin-bottom: 15px;
     font-weight: normal;
     text-transform: uppercase;
 }
-.our-skills .skills .prog-holder .prog{
+
+.our-skills .skills .prog-holder .prog {
     background-color: #DEDADC;
     height: 30px;
 }
-.our-skills .skills .prog-holder .prog span{
+
+.our-skills .skills .prog-holder .prog span {
     display: block;
     background-color: var(--main-color);
     height: 100%;
     position: relative;
 }
-.our-skills .skills .prog-holder .prog span::before{
+
+.our-skills .skills .prog-holder .prog span::before {
     content: attr(data-progress);
     position: absolute;
     color: white;
@@ -875,7 +915,8 @@ header nav .form i {
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
 }
-.our-skills .skills .prog-holder .prog span::after{
+
+.our-skills .skills .prog-holder .prog span::after {
     content: "";
     position: absolute;
     border-style: solid;
@@ -884,9 +925,10 @@ header nav .form i {
     right: -8px;
     top: -14px;
 }
+
 /*End Skills*/
 /*Start Quote*/
-.quote{
+.quote {
     padding-top: var(--section-padding);
     padding-bottom: var(--section-padding);
     background-image: url("../images/quote.jpg");
@@ -895,7 +937,8 @@ header nav .form i {
     text-align: center;
     color: white;
 }
-.quote::before{
+
+.quote::before {
     content: '';
     position: absolute;
     left: 0;
@@ -904,47 +947,56 @@ header nav .form i {
     height: 100%;
     background-color: rgb(0 0 0 / 75%);
 }
-.quote .container{
+
+.quote .container {
     position: relative;
 
 }
-.quote q{
+
+.quote q {
     font-size: 30px;
     margin-bottom: 20px;
     display: block;
 }
+
 /*End Quote*/
 /*Start Pricing*/
-.pricing{
+.pricing {
     padding-top: var(--section-padding);
     padding-bottom: var(--section-padding);
 }
-.pricing .plans{
+
+.pricing .plans {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 30px;
 }
-.pricing .plans .plan{
+
+.pricing .plans .plan {
     background-color: #fcfcfc;
     text-align: center;
 }
-.pricing .plans .plan .head{
+
+.pricing .plans .plan .head {
     padding: 40px 20px;
-    border-top:  1px solid var(--main-color);
-    border-bottom:  1px solid var(--main-color);
+    border-top: 1px solid var(--main-color);
+    border-bottom: 1px solid var(--main-color);
 }
-.pricing .plans .plan .head h3{
+
+.pricing .plans .plan .head h3 {
     font-weight: normal;
     margin-bottom: 20px;
     text-transform: uppercase;
 
 }
-.pricing .plans .plan .head span{
+
+.pricing .plans .plan .head span {
     font-size: 60px;
     font-weight: bold;
     position: relative;
 }
-.pricing .plans .plan .head span::before{
+
+.pricing .plans .plan .head span::before {
     content: "$";
     font-size: 25px;
     position: relative;
@@ -952,12 +1004,87 @@ header nav .form i {
     margin-right: 25px;
     font-weight: normal;
 }
-.pricing .plans .plan .head span::after{
+
+.pricing .plans .plan .head span::after {
     content: '/Mo';
     font-size: 25px;
     position: relative;
     right: -15px;
-    
-    
+}
+
+.pricing .plans .plan ul {
+    border-bottom: 1px solid var(--main-color);
+}
+
+.pricing .plans .plan ul li {
+    padding: 20px;
+    position: relative;
+}
+
+
+.pricing .plans .plan ul li:not(:last-child)::after {
+    content: "";
+    width: 120px;
+    height: 1px;
+    position: absolute;
+    background-color: var(--main-color);
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    bottom: 0;
+}
+.pricing .plans .plan .foot a{
+    display: block;
+    padding: 20px 20px;
+    text-decoration: none;
+    border: 1px solid var(--main-color);
+    width: fit-content;
+    margin: 30px auto;
+    color: var(--main-color);
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+    transition: 0.3s;
+    -webkit-transition: 0.3s;
+    -moz-transition: 0.3s;
+    -ms-transition: 0.3s;
+    -o-transition: 0.3s;
+}
+.pricing .plans .plan .foot a:hover{
+    background-color: var(--main-color);
+    color: white;
+    scale: 1.1;
+}
+.pricing .contact-text{
+    text-align: center;
+    margin: 50px auto 20px;
+    font-size: 20px;
+}
+.pricing .contact-link{
+    display: block;
+    width: fit-content;
+    margin: 20px auto;
+    background-color: var(--main-color);
+    color: white;
+    padding: 10px 30px;
+    text-decoration: none;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -o-border-radius: 4px;
+    transition: 0.3s;
+    -webkit-transition: 0.3s;
+    -moz-transition: 0.3s;
+    -ms-transition: 0.3s;
+    -o-transition: 0.3s;
+}
+.pricing .contact-link:hover{
+    scale: 1.1;
 }
 /*End Pricing*/
\ No newline at end of file
diff --git a/index.html b/index.html
index 304fe8e..d1250ad 100644
--- a/index.html
+++ b/index.html
@@ -379,8 +379,8 @@ <h3>Basic</h3>
                 </div>
                 <div class="plan">
                     <div class="head">
-                        <h3>Basic</h3>
-                        <span>19</span>
+                        <h3>Premium</h3>
+                        <span>29</span>
                     </div>
                     <ul>
                         <li>Feature No 1</li>
@@ -394,8 +394,8 @@ <h3>Basic</h3>
                 </div>
                 <div class="plan">
                     <div class="head">
-                        <h3>Basic</h3>
-                        <span>19</span>
+                        <h3>Pro</h3>
+                        <span>39</span>
                     </div>
                     <ul>
                         <li>Feature No 1</li>
@@ -409,8 +409,8 @@ <h3>Basic</h3>
                 </div>
                 <div class="plan">
                     <div class="head">
-                        <h3>Basic</h3>
-                        <span>19</span>
+                        <h3>Platinum</h3>
+                        <span>49</span>
                     </div>
                     <ul>
                         <li>Feature No 1</li>