TutCode - Learn and code on one page

Tutorial Setting

Enter a link to a youtube video or tutorial article

Enter a video or tutorial article url

/* CSS seed code */
.card {
display: grid;
width: 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;
margin: auto;
margin-top: 20%;
}

.card-image {
grid-area: image;
}
.card-text {
grid-area: text;
}
.card-stats {
grid-area: stats; 
}

.card-image {
grid-area: image;
background: url("https://i.stack.imgur.com/y9DpT.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;
}