Card Testimonial
Hello friends welcome to my Blog
This project is HTML and CSS linked, in this we will create Testimonials Card.
First of all you have to create a folder and name it Testimonials.
Right click.
1.Go inside the folder create a file give the name of the file card.html and copy this code and paste it your file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<!-- Latest compiled and minified CSS -->
<title></title>
</head>
<body>
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2></h2>
<img src="D:\New folder\adaptive_billing.jpg">
<h3>Subscription Billing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium dolor qui voluptate quas deleniti ab, </p>
<a href="#">Read more</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2></h2>
<img src="D:\New folder\fast_provision.jpg">
<h3>Provisioning Automation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium dolor qui voluptate quas deleniti ab, </p>
<a href="#">Read more</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2></h2>
<img src="D:\New folder\your_market.jpg">
<h3>Cloud MarketPlace</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium dolor qui voluptate quas deleniti ab, </p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>
2. He has to create a folder a file named style.css and copy this code and paste it your file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
font-family: segoe ui;
font-size: 100%;
height: 100%;
}
.container{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container .card{
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05),
inset -5px -5px 5px rgba(255,255,255,0.5),
5px 5px 5px rgba(0,0,0,0.05),
-5px -5px 5px rgba(225,225,225,0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box{
position: absolute;
top: 20px;
left:20px;
right:20px;
bottom: 20px;
background: #a4d1f0;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box{
transform: translateY(-50px );
box-shadow: 0 10px 40px rgba(0,0,0,0.02);
background: linear-gradient(45deg,#b95ce4,#4f29cd );
}
.container .card .box .content{
padding:20px ;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right:30px;
font-size: 8em;
color: rgba(0,0,0,0.05);
transition: 0.5s;
pointer-events: none;
}
.container .card .box .content h2 {
color:rgba(0,0,0,0.05) ;
}
.container .card .box .content h3{
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p{
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content h3,
.container .card .box .content p
{
color: #fff;
}
.container .card .box .content a{
position: relative;
display: inline-block;
padding: 8px 20px;
background: #b95ce4;
margin-top: 15px;
border-radius: 3px;
color: white;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0,0,0,0.02);
}
.container .card .box .content a:hover{
background: #a4d1f0;
}
.space{
width: 100%;
height:200px ;
}
@media(min-width:479px){
container{
height: 200px;
}
}