Cool effect
Post amazing cool effect
Output-tags
Input-tags
<!DOCTYPE >
<html>
<head>
<title></title>
<style type="text/css">
.card {
display: grid;
grid-template-columns: 300px;
grid-template-rows: 210px 210px 80px;
grid-template-areas: "image" "text" "stats";
border-radius: 18px;
background: white;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
font-family: roboto;
text-align: center;
}
.card-image {
grid-area: image;
}
.card-text {
grid-area: text;
}
.card-stats {
grid-area: stats;
}
.card-image {
grid-area: image;
background: url("img1.jpg");
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background-size: cover;
}
.card-text {
grid-area: text;
margin: 25px;
}
.card-text .date {
color: rgb(255, 7, 110);
font-size:13px;
}
.card-text p {
color: grey;
font-size:15px;
font-weight: 300;
}
.card-text h2 {
margin-top:0px;
font-size:28px;
}
.card-stats {
grid-area: stats;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background: rgb(255, 7, 110);
}
.card-stats .stat {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
padding:10px;
</style>
</head>
<body>
<div class="card">
<div class="card-image"></div>
<div class="card-text">
<span class="date">one day ago</span>
<h2>Programming</h2>
<p>Welcome to programming course
In this post amazing cool effect.
</p>
</div>
<div class="card-stats">
<div class="stat">
<div class="value">4<sup>m</sup></div>
<div class="type">read</div>
</div>
<div class="stat border">
<div class="value">°°°°°</div>
<div class="type">views</div>
</div>
<div class="stat">
<div class="value">°°°°°</div>
<div class="type">comments</div>
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment