<!DOCTYPE html>
<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);

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.