brooke/singlefiledash
Archived
3
0
Fork 0
Code Activity

Update 'index.html'

Browse source 
Inspiration:
https://codepen.io/pleasedonotdisturb/pen/oNQLVXB
https://codepen.io/simeydotme/pen/abqYGWa
This commit is contained in:
brooke 2023-07-14 01:46:09 +00:00
parent ad13615427
commit bfd6ecc50c
1 changed files with 148 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
index.html
View file

@ -1,23 +1,164 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title> <title>Your Website Title</title>
<style> <style>
body { @import url('https://fonts.googleapis.com/css2?family=OpenSans:wght@400;700&display=swap');
font-family: Arial, sans-serif;
* {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
font-family: OpenSans, sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f5f5f5;
display: flex;
flex-direction: column;
}
.about-me {
padding: 2.5rem;
}
.wrapper {
background-color: #223142;
position: relative;
width: 100%;
min-height: 100vh;
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
align-content: center;
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> </style>
</head> </head>
<body> <body>
<h1>Welcome to Your Website</h1>
<p>This is a single-file website.</p>
<script> <div class="wrapper">
</script> <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">
<h1>About Me</h1>
<p>This is a brief description about me.</p>
</section>
</body> </body>
</html>
</html>