Webleb - Snippet di Codice - Pagina dell'eroe della montagna

HTML

<section id="top">
      <img src="https://aryan-tayal.github.io/Mountains-Parallax/bg.jpg" id="bg" />
      <h2 id="text">Mountains</h2>
      <img src="https://aryan-tayal.github.io/Mountains-Parallax/man.png" id="man" />
      <img src="https://aryan-tayal.github.io/Mountains-Parallax/clouds_1.png" id="clouds_1" />
      <img src="https://aryan-tayal.github.io/Mountains-Parallax/clouds_2.png" id="clouds_2" />
      <img src="https://aryan-tayal.github.io/Mountains-Parallax/mountain_left.png" id="mountain_left" />
      <img src="https://aryan-tayal.github.io/Mountains-Parallax/mountain_right.png
" id="mountain_right" />
    </section>
    <section id="sec">
      <h2>Welcome to the Mountains</h2>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. A earum ipsam laboriosam mollitia, architecto esse voluptates eligendi provident soluta et cupiditate sit nisi at dolorum iure dignissimos cumque amet necessitatibus blanditiis? Earum assumenda soluta reiciendis recusandae, incidunt tenetur nihil adipisci corrupti, quibusdam ullam numquam iusto veritatis facilis ab dicta, nobis inventore eius magni eveniet quo? Repellat nobis quos, facilis quam perspiciatis asperiores delectus, aliquid nihil molestias in at modi nulla minima deleniti. Minima aliquid magnam libero reiciendis et, nesciunt repellendus eum vel rerum alias ea enim fugiat eius. Quae dolores, amet nam ab officiis corrupti sequi eligendi quo culpa illum.
      </p>
    </section>
<footer>
  <a href=""><i class="fa-solid fa-house"></i></a>
  <a href=""><i class="fa-solid fa-mountain-sun"></i></a>
  <a href=""><i class="fa-solid fa-person-hiking"></i></a>
  <a href=""><i class="fa-solid fa-people-group"></i></a>
  <a href=""><i class="fa-solid fa-gears"></i></a>
</footer>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', serif;
}
body {
    height: 100vh;
    width: 100vw;
}
#top{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
#top::before{
    content:'';
    position: absolute;
    bottom: 0;
    left: 0;
    height:200px;
    width: 100%;
    background:linear-gradient(to top,#fff,transparent);
    z-index: 1000;
}
#man{
    top: inherit;
    bottom: 0;
}
section img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
#text{
    position: relative;
    color:white;
    font-size: 10rem;
}
#sec{
    padding:100px;
  padding-bottom:20px;
}
#sec h2{
    font-size: 4rem;
    margin-bottom: 30px;
    color:#20496a;
}
#sec p{
    font-size: 1.2rem;
  line-height:2rem;
  font-weight:300;
    color:#20496a;
}
footer{
  margin-top:30px;
  display:flex;
  padding:20px;
  justify-content:space-evenly;
  align-items:center;
  background-color:#B0DFEA;
}
footer a{
  color:#20496a;
}
footer a i{
    transition:0.2s;
}
footer a:nth-of-type(3),footer a:nth-of-type(4), footer a:nth-of-type(5){
font-size:1.3rem;}
footer a i:hover{
  transform:translateY(-10px);
}

Pagina dell'eroe della montagna

Consigliato

Posizione della sorella FNAF

colori ricorsivi della memoria hover

HTML

CSS

JS

Consigliato

Posizione della sorella FNAF

colori ricorsivi della memoria hover

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS