<!-- First -->
<div class="vvh-kit"><img src="https://img.youtube.com/vi/8gToIyAlYgg/maxresdefault.jpg" width="224"><span class="title"><div style="font-family: 'Gotham Bold'; margin-top: 3px;">Ami and Yumi crying</div></span>
<font size="1.6" color="gray">9.1K Views • 2 years ago</font>
<br><font size="1.6" color="gray"><i class="material-icons calendar">calendar_today</i> Mar 16, 2019</font>
</div>
<!-- Second -->
<div class="vvh-kit"><img src="https://img.youtube.com/vi/2eXCKFMzg2w/maxresdefault.jpg" width="224"><span class="title"><div style="font-family: 'Gotham Bold'; margin-top: 3px;">How To Make a Big Mac</div></span>
<font size="1.6" color="gray">30M views • 7 years ago</font>
<br><font size="1.6" color="gray"><i class="material-icons calendar">calendar_today</i> Sep 27, 2013</font>
</div>
<br>
<!-- Third -->
<div class="vvh-kit"><img src="https://img.youtube.com/vi/QcBkDYlVbF0/maxresdefault.jpg" width="224"><span class="title"><div style="font-family: 'Gotham Bold'; margin-top: 3px;">(REMAKE) QToons! Intro in Radioup V23.15</div></span>
<font size="1.6" color="gray"> 117 views • 4 months ago</font>
<br><font size="1.6" color="gray"><i class="material-icons calendar">calendar_today</i> May 01, 2021</font>
</div>
View Compiled
@import url(//fonts.cdnfonts.com/css/gotham);
@import url(//fonts.cdnfonts.com/css/gotham-bold);
@import url(//fonts.googleapis.com/icon?family=Material+Icons);
body {
padding: 116px;
text-align: center;
font-family: 'Gotham Light';
background: rgb(18,175,255);
background: linear-gradient(180deg, rgba(18,175,255,1) 0%, rgba(0,74,255,1) 90%);
background-size: 4038px;
}
.vvh-kit {
background: white;
display: inline-block;
text-align: left;
box-shadow: 4.2px 4.2px 7px darkslategray;
padding: 9px;
border-radius: 6px;
max-inline-size: 225px;
filter: brightness(100%);
transition: filter 0.07s ease-in;
}
.vvh-kit:hover {
filter: brightness(80%);
}
.title {
font-size: 17px;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
flex-direction: row;
}
.calendar {
font-size: 7px;
}
View Compiled
/* Nothing here */
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.