Page du héros de la montagne

3,182 0 Andev.web Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

16 May 2026

GN-Math : Jeux débloqués, recherchez, triez et jouez !

6 August 2025

Modèle HTML de site Web de salle de sport

14 May 2025

Téléchargez la carte de Minecraft et plus

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

…