<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Mali&display=swap" rel="stylesheet">
</head>
<body>
<section>
<p class="text">Hidden Capacity</p>
<img class="bear" src="https://i.postimg.cc/vH5LthT4/iceland-1979445-1920.jpg">
</section>
<header>
<div class="intro-text">
<h1> Peace </h1>
<h3> I don't Know What I Want to do. </h3>
</div>
<img class="Arin1" src="https://i.postimg.cc/Df9PGHvV/Arin1.jpg">
<img class="rose" src="https://i.postimg.cc/BZLCX4Gc/Arin4.jpg">
<img class="Arin2" src="https://i.postimg.cc/vTV7jLvS/Arin2.jpg">
</header>
<script src="script.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
header{
min-height: 100vh;
background-image: linear-gradient(240deg, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
position: relative;
font-family: 'Mali', cursive;
color: #222;
}
.intro-text{
position: absolute;
top:50%;
left: 20%;
transform: translate(-20%,-50%);
}
.intro-text h1 {
font-size: 60px;
margin-bottom: 10px;
}
.intro-text h3 {
font-size: 30px;
}
.bear{
position: absolute;
height: 100vh;
object-fit: cover;
width: 100%;
z-index: -1;
}
.Arin1{
height: 700px;
position: absolute;
top: 90%;
right: 10%;
transform: translate(-10%,-90%);
opacity: 0.7;
border-radius: 10%;
}
.Arin2{
position: absolute;
height: 300px;
opacity: 0.7;
top: 3%;
right: 3%;
transform: translate(-3%,-3%);
border-radius: 20%;
}
.rose{
position: absolute;
height: 300px;
opacity: 1;
top:5%;
left:5%;
transform: translate(-5%,-5%);
border-radius: 50%;
}
section{
position: relative;
display: flex;
color: #f99185;
min-height: 100vh;
justify-content: center;
font-size: 100px;
font-family: 'Mali', cursive;
z-index: -1;
}
section .text{
position: absolute;
top:20%;
transform: translateY(-20%);
justify-content: center;
text-align: center;
}
function parallax(element, distance, speed) {
const item = document.querySelector(element);
item.style.transform = `translateY(${distance*speed}px)`;
}
window.addEventListener('scroll',function(){
parallax('section',window.scrollY,1);
parallax('.text',window.scrollY,0.1);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.