<!-- CODE = #A085 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NETBYZZ A085</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<section class="paper border shadow shadow-large">
<h1>
<a href="https://netbyzz.com/">Gallery</a>
</h1>
<ul class="card-list">
<li class="paper border shadow shadow-large shadow-hover">
<img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2Ff31810d13e2e27f7f502218b8f4f28e0008e1ed7-3000x3000.png&w=640&q=75" alt="">
<h2>
<a href="#">Image 1</a>
</h2>
</li>
<li class="paper border shadow shadow-large shadow-hover">
<img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2Fadffce6e572b1e67f8301c0cd45ea0019a9e0be8-4167x4167.png&w=640&q=75" alt="">
<h2>
<a href="#">Image 2</a>
</h2>
</li>
<li class="paper border shadow shadow-large shadow-hover">
<img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2Fa4b233016f4737136b37909f3c480361c25eb63c-3000x3000.png&w=640&q=75" alt="">
<h2>
<a href="#">Image 3</a>
</h2>
</li>
<li class="paper border shadow shadow-large shadow-hover">
<img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2F2d2ed3cab93b818475e7a9d45608c0f9767f5a8f-3000x3000.png&w=640&q=75" alt="">
<h2>
<a href="#">Image 4</a>
</h2>
</li>
<li class="paper border shadow shadow-large shadow-hover">
<img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2Fbb266c02a530bc5858ef34ba20680f10ffb8929c-3000x3000.png&w=640&q=75" alt="">
<h2>
<a href="#">Image 5</a>
</h2>
</li>
<li class="paper border shadow shadow-large shadow-hover">
<img src="https://bejamas.io/_next/image/?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Flxs6x7jp%2Fproduction%2F274fc43c57a8ba8d4e20d2709776232cf365c014-3000x3000.png&w=640&q=75" alt="">
<h2>
<a href="#">Image 6</a>
</h2>
</li>
</ul>
</section>
</div>
</body>
</html>
@import url("https://unpkg.com/papercss@1.9.2/dist/paper.css") layer(csspaper);
.card-list:has(li:hover) li:not(:hover) {
filter: blur(4px)
}
/* Demo style */
body {
min-height: 100vh;
background-color: #f6eee3;
background-size: 20px 20px;
background-image: repeating-linear-gradient(0deg, #e5decf, #e5decf 1px, #f6eee3 1px, #f6eee3);
padding: 1rem;
color: var(--text-color);
}
h1 {
font-size: 2.2rem;
color: var(--primary-color);
margin: 0 0 2rem;
}
h2 {
font-size: 1.2rem;
margin: 0;
}
.card-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
margin: 0;
padding: 0;
}
li {
margin: 0;
transition: all 150ms ease-in-out;
}
li::before {
content: "";
}
img {
display: block;
min-width: 0;
width: 100%;
margin-bottom: .6rem;
}
a {
background: none;
}
.paper {
padding: 1.5rem;
}
li a {
padding-inline-start: 1rem;
}