CARROSEL

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel</title>
<style>
@import url("https://fonts.googleapis.com/css2?
family=Inter:wght@400;500&display=swap");
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Inter, sans-serif;
height: 100vh;
color: white;
background-color: #e9e9f0;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 100%;
height: 100%;
display: block;
}
.container {
width: 100%;
width: 820px;
height: 340px;
display: flex;
gap: 10px;
margin-inline: 50px;
}
.card {
min-width: 70px;
height: 100%;
border-radius: 30px;
overflow: hidden;
display: flex;
align-items: flex-end;
flex-grow: 1;
cursor: pointer;
position: relative;
transition: flex-grow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
--transition-timing: 0.35s;
}
/* .card.active {
flex-grow: 100;
} */
.card:hover {
flex-grow: 7;
}
.card > .background {

position: absolute;
inset: 0;
object-fit: cover;
object-position: center;
filter: brightness(0.4);
z-index: -1;
transition: var(--transition-timing) ease;
}
.card:hover > .background {
filter: brightness(1);
}
.card > .card-content {

display: flex;
position: absolute;
left: 10px;
right: 10px;
bottom: 20px;
overflow: hidden;
transition: var(--transition-timing);
z-index: 10;
}
.card:hover > .card-content {
inset: 20px;
top: auto;
}
.card-content > * {
transition: var(--transition-timing);
}
.card-content > .profile-image {

min-width: 50px;
max-width: 50px;
height: 50px;
border: 1px solid white;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden;
}
.card:hover .profile-image {
border: 1px solid rgb(110, 252, 205);
}
.profile-image > svg {
stroke: #fefefe;
}
.card:hover .profile-image > svg {
stroke: rgb(110, 252, 205);
}
.card-content > .title {

white-space: pre;
margin-left: 10px;
translate: 0 100%;
opacity: 0;
}
.card:hover .title {
opacity: 1;
translate: 0 0;
}
.card > .backdrop {

position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100px;
z-index: 0;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mg</title>
<link rel="stylesheet" href="./styles.css">
<script src="./script.js" defer></script>
</head>
<header>
</header>
<div class="container">
<div class="card">
<img class="background"
src="https://www.adrenaline.com.br/wp-content/uploads/2024/03/Desenvolvimento-de-
GTA-6-esta-atrasado-e-jogo-pode-ser-adiado-912x569.jpg" alt="">
<div class="card-content">
<div class="profile-image">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round" class="lucide lucide-gamepad-2">
<line x1="6" x2="10" y1="11" y2="11" />
<line x1="8" x2="8" y1="9" y2="13" />
<line x1="15" x2="15.01" y1="12" y2="12" />
<line x1="18" x2="18.01" y1="10" y2="10" />
<path d="M17.32 5H6.68a4 4 0 0 0-3.978
3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5
2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3
0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32
5z" />
</svg>
</div>
<h3 class="title">GTA 6</h3>

</div>
<div class="backdrop"></div>
</div>
<div class="card">
<line x1="6" x2="10" y1="11" y2="11" />
<line x1="8" x2="8" y1="9" y2="13" />
<line x1="15" x2="15.01" y1="12" y2="12" />
<line x1="18" x2="18.01" y1="10" y2="10" />
<path d="M17.32 5H6.68a4 4 0 0 0-3.978
3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5
2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3
0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32
5z" />
</svg>
</div>
<h3 class="title">Spider-Man PS5</h3>

</div>
</div>
<div class="card">
<line x1="6" x2="10" y1="11" y2="11" />
<line x1="8" x2="8" y1="9" y2="13" />
<line x1="15" x2="15.01" y1="12" y2="12" />
<line x1="18" x2="18.01" y1="10" y2="10" />
<path d="M17.32 5H6.68a4 4 0 0 0-3.978
3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5
2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3
0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32
5z" />
</svg>
</div>
<h3 class="title">God Of War</h3>

</div>
</div>
<div class="card">
<line x1="6" x2="10" y1="11" y2="11" />
<line x1="8" x2="8" y1="9" y2="13" />
<line x1="15" x2="15.01" y1="12" y2="12" />
<line x1="18" x2="18.01" y1="10" y2="10" />
<path d="M17.32 5H6.68a4 4 0 0 0-3.978
3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5
2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3
0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32
5z" />
</svg>
</div>
<h3 class="title">The Last of Us</h3>

</div>
</div>
<div class="card">
<line x1="6" x2="10" y1="11" y2="11" />
<line x1="8" x2="8" y1="9" y2="13" />
<line x1="15" x2="15.01" y1="12" y2="12" />
<line x1="18" x2="18.01" y1="10" y2="10" />
<path d="M17.32 5H6.68a4 4 0 0 0-3.978
3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5
2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3
0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32
5z" />
</svg>
</div>
<h3 class="title">Elden Ring</h3>

</div>
</div>
</div>

CARROSEL

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CARROSEL

Uploaded by

Copyright:

Available Formats

<!

.card > .background {

.card > .card-content {

.card-content > .profile-image {

.card-content > .title {

.card > .backdrop {

<h3 class="title">GTA 6</h3>

<h3 class="title">Spider-Man PS5</h3>

<h3 class="title">God Of War</h3>

<h3 class="title">The Last of Us</h3>

<h3 class="title">Elden Ring</h3>

You might also like