brooke/singlefiledash
Archived
3
0
Fork 0
Code Activity

Update 'index.html'

Browse source 
Starting from scratch
This commit is contained in:
brooke 2023-07-14 19:49:02 +00:00
parent bfd6ecc50c
commit 44fe155132
1 changed files with 2 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
index.html
View file

@ -20,13 +20,14 @@
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f5f5f5;
background: #354150;
display: flex;
flex-direction: column;
}
.about-me {
padding: 2.5rem;
color: white;
}
.wrapper {
@ -41,117 +42,12 @@
justify-content: center;
gap: 24px;
}
.card {
cursor: pointer;
position: relative;
background: #000;
border-radius: 10px;
overflow: hidden;
width: 100%;
height: 25rem;
box-shadow: rgba(255, 255, 255, 0.3) 0 5vw 6vw -8vw,
rgba(255, 255, 255, 0) 0 4.5vw 5vw -6vw,
rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw,
rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
}
.poster {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.poster::before {
content: '';
position: absolute;
bottom: -45%;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: .3s;
object-fit: cover;
}
.card:hover .poster::before {
bottom: 0;
}
.poster img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: .3s;
}
.card:hover .poster img {
transform: scale(1.1);
}
.details {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
height: auto;
padding: 1.5em 1.5em 2em;
background: #000a;
backdrop-filter: blur(16px) saturate(120%);
transition: .3s;
color: #fff;
z-index: 2;
}
.card:hover .details {
bottom: 0;
padding-bottom: 1.5rem;
padding-top: 1.5rem;
}
.details h1,
.details h2 {
font-weight: 700;
}
.details h1 {
font-size: 1.5em;
margin-bottom: 5px;
}
.details h2 {
font-weight: 400;
font-size: 1em;
opacity: .6;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="card">
<div class="poster"><img src="https://i.postimg.cc/jjBSrfnQ/poster1-img.jpg" alt="Location Unknown"></div>
<div class="details">
<p class="desc">
Description text.
</p>
</div>
</div>
<div class="card">
<div class="poster"><img src="https://i.postimg.cc/jjBSrfnQ/poster1-img.jpg" alt="Location Unknown"></div>
<div class="details">
<p class="desc">
Description text.
</p>
</div>
</div>
</div>
<section class="about-me">