<body>
<div class="background-static">
<div class="image-wrapper">
<div class="small">
<img class="smile" src="https://linxea.github.io/codingclub/images/face.gif">
</div>
</div>
</div>
<div class="scrollable">
<div class="title">
<h1>Coding Club</h1>
<h2>by linxea</h2>
</div>
<div class="background-static">
<div class="image-wrapper">
<div class="small">
<img class="meh" src="https://linxea.github.io/codingclub/images/face.gif">
</div>
</div>
</div>
</div>
</body>
body {
height: 100vh;
margin: 0;
font: 400 10px Lato, sans-serif;
}
.title {
position: relative;
background-color: black;
text-align: center;
padding: 1rem 0;
z-index: 10;
}
h1 {
font-size: 1.8rem;
color: white;
letter-spacing: 0.6rem;
margin-bottom: 0.5rem;
}
h2 {
font-size: 1rem;
color: #fff;
font-weight: 200;
letter-spacing: 0.2rem;
margin-top: 0;
}
.background-static {
position: relative;
display: flex;
justify-content: center;
vertical-align: middle;
align-items: center;
height: 100vh;
}
.image-wrapper {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
img {
height: 1080px;
width: 1080px;
object-fit: none;
object-position: 0 0;
}
.smile {
object-position: 100% 100%;
}
.meh {
object-position: 0 0;
}
.scrollable {
position: relative;
background: white;
margin-top: -25vh;
}
.small {
transform: scale(0.4);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.