body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.blog-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
.thumbnail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.thumbnail-item {
position: relative;
cursor: pointer;
}
.thumbnail {
width: 100%;
border-radius: 10px;
transition: transform 0.3s ease;
}
.thumbnail:hover {
transform: scale(1.05);
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: white;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
}
.modal video {
max-width: 80%;
max-height: 80%;
}
.close {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
color: white;
cursor: pointer;
}
lihat asupan
Skip to main content