JSFiddle - React, Tailwind, and code Playground

by Novruz Rehimov

HTML

<!DOCTYPE html>

<link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet" type="text/css">


<html>
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>The Barca Way</title>
    <link href="style.css" rel="stylesheet" type="text/css" />

  </head>


  <body>
    <div class="full-height">
    <script src="script.js"></script>

    <div class="container">
    <a class="item1" href="https://www.bbc.co.uk/sport/football" style="text-decoration: none;" ><h2> Europe's biggest stadium  </h2></a>

    <a class="item2" href="https://www.fcbarcelona.com/en/" style="text-decoration: none;" ><h2>European Success</h2> </a>

    <a class="item3" href="https://www.fcbarcelona.com/en/football/first-team/news" style="text-decoration: none;" ><h2>Current Squad</h2> </a>
    </div>



    <div id="navbar">

    <ul>
      <li><a href="https://first-website.awais.repl.co/">Home</a></li>
      <li><a href="news.asp">Squad</a></li>
      <li><a href="contact.asp">Contact</a></li>
      <li><a href="about.asp">About</a></li>
      <a2><a>Created by Awais</a></a2>
    </ul>

    </div>
    
    <h1>FC Barcelona</h1>

    
    </div>

    <div class="bottom-height">

      


      

      
    </div>

   
  </body>

</html>

CSS

body {
  background-color: #800020;
}

body, html {
  height: 100%;
  margin: 0;
}



  #box-container {
    display: flex;
    height: 600px;
    width: 75%;

  }


/* https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg  */

/* https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000 */

/* https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg */


.container {
  min-height: 500px;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 2fr;
  grid-template-rows: 50% 2fr;
  overflow: hidden;
  position: static;

}

.item1 { 
  background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
  width: 100%;
  height: 200%;
  background-size:contain;
  transition: all 0.5s ease-in-out; 
  position: relative;
}

.item1:hover {
   background-size: 110% 110%


}


.item2 { 
  background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  height: 400px;
  transition: all 0.5s ease-in-out; 
  position: relative;


}

.item2:hover {
   transform: scale(1.1); 
   z-index: -1;
}

.item3 {
  background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 400px;
  transition: all 0.5s ease-in-out; 
  position: relative;


}

.item3:hover {
   transform: scale(1.1);
   z-index: -1;

}

.item1 h2 {
  font-size: 50px;
  position: absolute;
  font-family: Staatliches;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 500px 70px;
}

.item2 h2 {
  font-size: 50px;
  position: absolute;
  font-family: Staatliches;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 200px 200px;
}

.item3 h2 {
  font-size: 50px;
  position: absolute;
  font-family: Staatliches;
  text-align: center;
 ...

JavaScript

window.onscroll = function() {;
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      document.getElementById("navbar").style.top = "0";
    } else {
      document.getElementById("navbar").style.top = "-20px";
    }
  }