Webleb - Snippets de Código

HTML CSS JS

<div class="intro">
  <section id="home" class="sec pull-center">
    <div class="grid-container">
      <div class="grid-item">
        <h2>Zara Larsson</h2>
        <h3>Zara Maria Larsson, née le 16 décembre 1997 dans le comté de Stockholm, est une auteure-compositrice-interprète suédoise, principalement connue internationalement grâce à son single, Uncover en 2013. Quelques années plus tard, elle se fait davantage connaître grâce aux morceaux, Never Forget You avec MNEK (2015), Lush Life (2015), This One's for You avec David Guetta (2016), Symphony avec Clean Bandit (2017) ou encore Wow (2020).

</section>
</div>

<div class="story">
  <section id="Story" class="sec pull-center">
    <div class="grid-container">
      <div class="grid-item">
         
        <h2>Carrière</h2>
        <p>2008-2011 : Ses débuts
Zara Larsson en 2008.

En 2008, à l'âge de dix ans, Zara remporte la nouvelle saison de Talang, la version suédoise de La France a un incroyable talent. Elle y chante la célèbre chanson de Céline Dion, My Heart Will Go On, qui devient son premier single officiel ; le single reste à la septième position dans les charts suédois pendant une semaine.
</p>
      </div>
    </div>
  </section>
</div>

<div class="actors">
  <section id="Actors" class="sec pull-center">
    <div class="grid-container">
      <div class="grid-item">
        
        <p>En 2012, à l'âge de quatorze ans, elle signe un contrat avec la maison de disques suédoise, TEN Music Group. Elle enregistre un EP, intitulé Introducing - sorti le 9 décembre 2012. Le premier single, intitulé Uncover, la propulse sur le devant de la scène, et lui permet de se faire connaître principalement en Europe. La chanson est même certifiée disque de platine en Suède, puis son EP est certifié triple disque de platine en juillet 2013. </p>
        <p> by L.Rivers </P>
     
       </div>
    </div>
  </section>
</div>

<div class="actors">
  <section id="Actors" class="sec pull-center">
    <div class="grid-container">
      <div class="grid-item">
        
        </center>
 <h3><a href="https://fr.wikipedia.org/wiki/Zara_Larsson" target="_blank" id="tribute-link"> cliquez ici pour plus d'informations </a>
        
        
      </div>
    </div>
  </section>
</div>

</footer>
<style type="text/css">
  
  
html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: font-family: 'Zen Antique', serif;
  font-size: small;
}

.grid-container {
  display: grid;
  max-width: 1400px;
  margin: 0 auto;
}

.grid-item {
  text-align: center;
  margin-top: 15%;
  padding: 200px 0;
}

.intro {
  background: url(https://gaffa.blob.core.windows.net/gaffa-media/media/2e77366b-5f9d-4c9f-8596-d9d93aaad960/DetBlirEnFestivalsommarMedZaraLarsson-default.webp)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

.story {
  background: url(https://i.pinimg.com/originals/d6/05/8f/d6058fcec16e38bc350599fc16319f0f.jpg)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

.actors {
  background: url(https://lastfm.freetls.fastly.net/i/u/770x0/f28115e5364af6a909d1e484354f8f5a.jpg)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

.trailer {
  background: url(https://upload.wikimedia.org/wikipedia/it/thumb/3/37/Wow_Remix_%28Zara_Larsson_feat._Sabrina_Carpenter%29.png/640px-Wow_Remix_%28Zara_Larsson_feat._Sabrina_Carpenter%29.png
  )
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  padding: 50px 10px 0 10px;
}

.trailer .grid-item {
  padding: 50px 0 0 0;
}

.video {
  text-align: center;
}

h1 {
  color: #fff;
  text-align: center;
  padding: 5px;
  margin: 5px;
}

/* hello Andrew! */
h2 {
  font-size: 100px;
  font-weight: normal;
  color: #fff;
  text-align: centre;
  padding: 0;
  margin: 0;
font-family: 'Zen Antique', serif;
}

h3 {
  font-size: 25px;
  letter-spacing: 2px;
  font-weight: normal;
  font-style: normal;
  color: #00000;
  text-align: center;
  padding: 0;
  margin: 0;
 
  background-color: rgba(255, 255, 255, 0.5);
}

p {
  padding: 10px;
 
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 180%;
  line-height: 1.5;
  margin: 20px auto;
  width: 100%;
}

#footer p {
  background: none;
}

a,
a:visited {
  color: #91aa9d;
  font-weight: bold;
  text-decoration: none;
  outline: none;
}

a:hover {
  color: #d1dbbd;
}

/* Graphics */
a img {
  border: none;
  text-decoration: none;
}

section {
  height: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 90%;
}

@media only screen and (max-width: 480px) {
  .grid-item {
    padding: 20px 0;
  }
  h2 {
    font-size: 64px;
  }
}
@media (min-width: 481px) and (max-width: 812px) {
  .grid-item {
    padding: 20px 0;
    margin-top: 5%;
  }
  h2 {
    font-size: 72px;
  }
}
body,
  main::before {
    background:grey;

Preview

Open Advanced Editor