Página del héroe de la montaña

3,181 0 Andev.web Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

4 December 2024

Concepto de reloj React

17 July 2025

Calculadora científica

16 April 2026

Pokémon Esmeralda: Fusión Definitiva+

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);
}

Comments 0

…