<div class="main_link">
  <h1>LEGOOOOO</h1>

</div>
  

<div class="box">
  <h5>パララックス<br>=視差効果</h5>
</div>

<div class="main_link02"><h1>KAWAII</h1></div>




body,html {
    margin: 0 auto;
    letter-spacing:2px;
  font-family:"Noto Sans JP",sans-serif;
}

h1{
  font-size:4rem;
  padding:1rem
}

h3{
  padding:1rem;
}


.main_link {
    background: url(https://maketheworld.xsrv.jp/eguchi_web/img/_MG_0018.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
background-attachment: fixed;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_link02 {
    background: url(https://maketheworld.xsrv.jp/eguchi_web/img/humberto-arellano-N_G2Sqdy9QY-unsplash.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
background-attachment: fixed;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
  height:100vh;
    font-size:60px;
    background: #ba68c8;
  color:#FFF;
  display:flex;
  justify-content:center;
  align-items:center;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.