Full Tutorial






Source Code

HTML Code 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Font Awesome Cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

<title>Features Section</title>
</head>
<body>
<center><h1 class="heading">Features</h1></center>
<div class="container">
<div class="box">
<i class="fas fa-headphones-alt"></i>
<h2>Customer Service</h2>
<div class="line l1"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
</div>
<div class="box">
<i class="fas fa-crown"></i>
<h2>Simple Interface</h2>
<div class="line l2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
</div>
<div class="box">
<i class="fas fa-sitemap"></i>
<h2>Business Tools</h2>
<div class="line l3"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
</div>
</div>
</body>
</html>


CSS Code 

               *{
margin: 0;
padding: 0;
font-family: poppins;
}

.heading{
font-size: 1cm;
margin-top: 2cm;
}

.container{
display: flex;
align-items: center;
flex: 1;
justify-content: space-around;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

.container .box{
padding: 1cm;
width: 8cm;
box-shadow: 0 0 10px lightgrey;
border-radius: 1cm;
margin-right: 1cm;
transition: 0.5s;
cursor: pointer;
}

.container .box:hover{
transform: scale(1.03);
}

.container .box i{
padding: 20px;
border-radius: 50%;
font-size: 1cm;
color: white;
}

.fa-headphones-alt{
background-color: #a4508b;
background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%);

}

.line{
padding: 2px;
border-radius: 3px;
width: 3cm;
background-color: #a4508b;
background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%);
margin-bottom: 0.3cm;
}

h2{
margin-top: 0.5cm;
margin-bottom: 0.5cm;
}

.fa-crown{
background-color: #ff4e00;
background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);

}

.fa-sitemap{
background-color: #00b712;
background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
}

.l2{
background-color: #ff4e00;
background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
}

.l3{
background-color: #00b712;
background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
}






Subscribe To Our Channel For More Amazing Coding Content:-  CodeWikis