<style>
body{
background-color: black;
}
.card{
display:flex;
align-items: center;
position: relative;
justify-content: center;
}
.card1{
width:300px;
height: 350px;
margin:5px;
transform-style: preserve-3d;
transition: transform .8s ease-in-out;
cursor: pointer;
box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.2),
-5px -5px 10px rgba(255, 255, 255, 0.05);
border-radius:17px;
border: 2px solid white;
}
.card1:hover{
transform: rotateY(180deg);
}
.front-page, .back-page{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.card-info{
position: absolute;
padding-bottom:10px;
width: 100%;
overflow-y: hidden;
color:white;
text-align: center;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.card-info h4{
margin-bottom:5px;
margin-top:10px;
}
.card-btn {
font-size: 14px;
color: black;
background-color: #0fbcf9;
border: 0px solid black;
border-radius: 5px;
box-shadow: none;
width:100px;
height:40px;
cursor:pointer;
transition: all 0.3s ease;
}
.card-btn:hover{
background-color: transparent;
color: #0fbcf9;
border: 1px solid #0fbcf9;
}
.back-page{
background-color: #1e272e;
color: #fff;
display: flex;
justify-content: center;
align-items: start;
transform: rotateY(180deg);
box-shadow: 0 20px, 40px rgba(0, 0, 0, 0.1);
}
.card-content{
text-align: center;
padding: 20px;
max-width:290px;
}
</style>
<body>
<div class="card">
<div class="card1">
<div class="front-page fp1">
<div class="card-info">
<h2>TalkSta</h2>
<span class="small-desc">Gives Solutions...</span>
</div>
</div>
<div class="back-page">
<div class="card-content">
<h2>TalkSta</h2><hr class="upper">
<span class="card-desc">
In TalkSta users ask problem and answering the question, comment the answer, anybody report the commenter, User set our profile other details, & here many features available like: Email verification, Add new category, Following & Followers option.<br><BR>Using Php, Sql, HTML, Css, Js create this site.
</span><br> <br>
<a href="https://talksta.is-best.net">
<button class="card-btn" id="card-btn1">Explore More</button>
</a>
</div>
</div>
</div>
</div>
</body>