تفضل
كود css
.section-2{
overflow: hidden;
background-color: #222020;
}
.parag-wrapper{
margin: 50px auto;
max-width: 310px;
height: auto;
color: #fff;
position: relative;
}
.parag-wrapper i{
font-size: 20px;
}
.parag-wrapper .fa-quote-right{
position: absolute;
right: 0;
}
.parag-wrapper p{
margin: 10px auto;
font-size: 18px;
text-align: justify;
font-family: 'Oswald', sans-serif;
}
.parag-wrapper p::after{
content: "";
position: absolute;
width: 90%;
height: 2px;
background-color: #fff;
top: 5%;
right: 0;
}
.parag-wrapper p::before{
content: "";
position: absolute;
width: 90%;
height: 2px;
background-color: #fff;
bottom: -9%;
left: 0;
}
/* end of section-2 */
/* section 3 ==> Pricing */
/* #222020 */
.section-3{
background-color: #03070e;
margin-top:0;
}
.pricing-cards-wrapper{
display: flex;
flex-direction: column;
align-items: center;
}
كود html
<section class="section-2">
<h1 class="section-heading">About Us</h1>
<div class="parag-wrapper">
<i class="fa-solid fa-quote-left"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tempora totam nam quasi officia, voluptatum deleniti provident
natus temporibus molestiae quae ratione fugit placeat voluptatibus,
deserunt repellat dicta, optio quo quisquam libero tempore veritatis?
Veritatis nam magnam omnis nobis iusto recusandae minus odit eligendi
maxime dolorem, eos id! Fugiat, adipisci perspiciatis!</p>
<i class="fa-solid fa-quote-right"></i>
</div>
</section>
<!-- end of section-2 -->
<!-- section 3 ==> Pricing -->
<section class="section-3">
<h1 class="section-heading">Pricing</h1>
<div class="pricing-cards-wrapper">
<div class="pricing-card">
<div class="pricing-card-front">
<h2 class="pricing-card-heading">Free</h2>
<h3 class="pricing-card-price">$0</h3>
<ul class="pricing-card-list free-list">
<li>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-xmark"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-xmark"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-xmark"></i>
<span>Lorem ipsum dolor</span>
</li>
</ul>
<button class="pricing-card-btn btn-free" type="button">
CHOOSE PLAN
</button>
</div>
<div class="back-free pricing-card-back">
<a href="#">Order Now</a>
</div>
</div>
<div class="pricing-card">
<div class="pricing-card-front">
<h2 class="pricing-card-heading">Basic</h2>
<h3 class="pricing-card-price">$299</h3>
<ul class="pricing-card-list basic-list">
<li>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-xmark"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-xmark"></i>
<span>Lorem ipsum dolor</span>
</li>
</ul>
<button class="pricing-card-btn btn-basic" type="button">
CHOOSE PLAN
</button>
</div>
<div class="back-basic pricing-card-back">
<a href="#">Order Now</a>
</div>
</div>
<div class="pricing-card">
<div class="pricing-card-front">
<h2 class="pricing-card-heading">Standard</h2>
<h3 class="pricing-card-price">$699</h3>
<ul class="pricing-card-list standard-list">
<li>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-xmark"></i>
<span>Lorem ipsum dolor</span>
</li>
</ul>
<button class="pricing-card-btn btn-standard" type="button">
CHOOSE PLAN
</button>
</div>
<div class="back-standard pricing-card-back">
<a href="#">Order Now</a>
</div>
</div>
<div class="pricing-card">
<div class="pricing-card-front">
<h2 class="pricing-card-heading">Premium</h2>
<h3 class="pricing-card-price">$999</h3>
<ul class="pricing-card-list premium-list">
<li>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
<i class="fa-solid fa-check"></i>
<span>Lorem ipsum dolor</span>
</li>
</ul>
<button class="pricing-card-btn btn-premium" type="button">
CHOOSE PLAN
</button>
</div>
<div class="back-premium pricing-card-back">
<a href="#">Order Now</a>
</div>
</div>
</div>
</section>
<!-- end of section 3 -->