Skip to content

Commit

Permalink
Skills part3
Browse files Browse the repository at this point in the history
  • Loading branch information
@idriss112
idriss112 committed Feb 21, 2024
1 parent 6a16cc7 commit d03d0a0
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 1 deletion.
49 changes: 48 additions & 1 deletion CSS/Kasper.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -913,4 +913,51 @@ header nav .form i {
margin-bottom: 20px;
display: block;
}
/*End Quote*/
/*End Quote*/
/*Start Pricing*/
.pricing{
padding-top: var(--section-padding);
padding-bottom: var(--section-padding);
}
.pricing .plans{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
gap: 30px;
}
.pricing .plans .plan{
background-color: #fcfcfc;
text-align: center;
}
.pricing .plans .plan .head{
padding: 40px 20px;
border-top: 1px solid var(--main-color);
border-bottom: 1px solid var(--main-color);
}
.pricing .plans .plan .head h3{
font-weight: normal;
margin-bottom: 20px;
text-transform: uppercase;

}
.pricing .plans .plan .head span{
font-size: 60px;
font-weight: bold;
position: relative;
}
.pricing .plans .plan .head span::before{
content: "$";
font-size: 25px;
position: relative;
top: -40px;
margin-right: 25px;
font-weight: normal;
}
.pricing .plans .plan .head span::after{
content: '/Mo';
font-size: 25px;
position: relative;
right: -15px;


}
/*End Pricing*/
77 changes: 77 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,83 @@ <h4>PHP</h4>
</div>
</div>
<!-- End quote -->
<!-- Start Pricing -->
<div class="pricing">
<div class="container">
<div class="main-heading">
<h2>Pricing</h2>
<p>
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget
tincidunt.
</p>
</div>
<div class="plans">
<div class="plan">
<div class="head">
<h3>Basic</h3>
<span>19</span>
</div>
<ul>
<li>Feature No 1</li>
<li>Extra Feature</li>
<li>Extra Feature No 2</li>
<li>Feature</li>
</ul>
<div class="foot">
<a href="#">Buy Now</a>
</div>
</div>
<div class="plan">
<div class="head">
<h3>Basic</h3>
<span>19</span>
</div>
<ul>
<li>Feature No 1</li>
<li>Extra Feature</li>
<li>Extra Feature No 2</li>
<li>Feature</li>
</ul>
<div class="foot">
<a href="#">Buy Now</a>
</div>
</div>
<div class="plan">
<div class="head">
<h3>Basic</h3>
<span>19</span>
</div>
<ul>
<li>Feature No 1</li>
<li>Extra Feature</li>
<li>Extra Feature No 2</li>
<li>Feature</li>
</ul>
<div class="foot">
<a href="#">Buy Now</a>
</div>
</div>
<div class="plan">
<div class="head">
<h3>Basic</h3>
<span>19</span>
</div>
<ul>
<li>Feature No 1</li>
<li>Extra Feature</li>
<li>Extra Feature No 2</li>
<li>Feature</li>
</ul>
<div class="foot">
<a href="#">Buy Now</a>
</div>
</div>
</div>
<p class="contact-text">Contact us if you have special request</p>
<a href="#" class="contact-link">Contact Us</a>
</div>
</div>
<!-- End Pricing -->
</body>

</html>

0 comments on commit d03d0a0

Please sign in to comment.