Page du héros de la montagne

1394 Andev.web

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

24 July 2025

Extrait d'animation de chargement CSS

25 March 2025

Un code par andrej.social.network

29 August 2024

Diorama/Lait

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

Recommandé

Extrait d'animation de chargement CSS

Un code par andrej.social.network

Diorama/Lait

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS