Webleb - Extraits de Code - Page du héros de la montagne

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

Page du héros de la montagne

Recommandé

Bouton de survol

Un code de Metehan

demande de rencontre

HTML

CSS

JS

Recommandé

Bouton de survol

Un code de Metehan

demande de rencontre

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS