HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<title>Vimeo page</title>
</head>
  
  <header class="navbar-container">
    
    <div>
      <ul class="navbar">
        <li><img src="https://i.imgur.com/IfRkTSU.png"/></li>
        <li><a href="#join"><button class="green-button">Join</button></a></li>
        <li><a href="#login">Log in</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#watch">Watch</a></li>
        <li><a href="#stock">Stock</a></li>
        <li><a href="#new"><button id="small-button">NEW</button></a></li>
      </ul>
    </div>
    
    
    <div class="search-container">
      <form class="example" action="action_page.php">
      <input type="text" placeholder="Search videos, people and more" name="search">
        <button>Upload<i class="fas fa-cloud-upload-alt"></i></button>
      </form>
    </div>
  </header>
  
  <body>
    
    <div class="video-container">
      <div class="video">
      <iframe src="https://player.vimeo.com/video/166807261?color=c9ff23&title=0&byline=0&portrait=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
    </div>
    
    <div class="grid-container">
      
      <div class="grid-content">
        
        
        <div class="vid-info">
          <div>
            <h1>HYPER-REALITY</h1>
          </div>
          <div>
            <span>2 years ago</span>  |  <a href="more">More</a>
          </div>
          <div class="profile-container">
            <img src="https://i.imgur.com/HsMqrgF.png" class="profile-img"/>
            <t>Keiichi Matsuda</t>
            <button id="small-button">PLUS</button>
            <button>+ Follow</button>
          </div>
        </div>
        
        
        <div class="grid-container">
          <div class="grid-content">
            <ul class="stats">
              <li><a href="#plays">3.3M</a></li>
              <li><a href="#likes">20.5K</a></li>
              <li><a href="#collections">1,323</a></li>
              <li><a href="#comments">401</a></li>
            </ul>
          </div>
          <div class="grid-content">
            <button id="grey-button">Download</button>
            <button id="grey-button">Share</button>
          </div>
        </div>
        
        <div class="description">
          <p>Hyper-Reality presents a provocative and kaleidoscopic new vision of the future, where physical and virtual realities have merged, and the city is saturated in media. If you are interested in supporting the project, sponsoring the next work or would like to find out more, please send a hello to info@km.cx</p>
          <p>by Keiichi Matsuda | <a href="km.cx">km.cx</a> <br/>more at <a href="hyper-reality.co">hyper-reality.co</a></p>
        </div>
        
        
        <div class="credits-container">
          <div class="grid-content">
            <h3>2 Credits</h3>
              <div class="credit">
                <img src="https://i.imgur.com/HsMqrgF.png" class="profile-img"/>
                <span><strong>Keiichi Matsuda</strong></span>
              </div>
              <div class="credit">
                <img src="https://i.imgur.com/5ZPiUUM.png" class="profile-img"/>
                <span><strong>Skillboard</strong></span>
              </div>
          </div>
          <div class="grid-content">
            <h3>2 Categories</h3>
            <button id="grey-label">Experimental</button>
            <button id="grey-label">Fresh ideas</button>
          </div>      
        </div>
        
        
        <div>
          <h3>401 Comments</h3>
          <button id="grey-outline-button">+ Load 100 previous comments</button>
        </div>
        
      </div>
      
      
      <div class="grid-content">
        <div class="right-column">
          <h4>More from Keiichi Matsuda</h4>
          
          <div class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
          </div>
          <p1>Autoplay next video</p1>
      
          <div class="next-vid-container">
            <div class="next-vid-content">
              <div>
                <img src="https://i.imgur.com/b52TJF8.png"/>
              </div>
              <div>
                <p><strong>HYPER-REALITY</strong></p>
              </div>
            </div>
            <div class="next-vid-content">
              <div>
                <img src="https://i.imgur.com/b52TJF8.png"/>
              </div>
              <div>
                <p><strong>HYPER-REALITY</strong></p>
              </div>
            </div>
            <div class="next-vid-content">
              <div>
                <img src="https://i.imgur.com/b52TJF8.png"/>
              </div>
              <div>
                <p><strong>HYPER-REALITY</strong></p>
              </div>
            </div>
            <div class="next-vid-content">
              <div>
                <img src="https://i.imgur.com/b52TJF8.png"/>
              </div>
              <div>
                <p><strong>HYPER-REALITY</strong></p>
              </div>
            </div>
            
          
          </div>
            
        
        </div>
      
      </div>
          
        
      
      
      
      
    </div>

</body>
</html>

.lw { font-size: 60px; }

html{
  font-family: Arial, Helvetica, sans-serif;
}

p{
  font-size: 14px;
  max-width: 700px;
}

p1{
  font-size: 11px;
  
}

header{
  background-color: #eef1f2;
}

.navbar-container{
  display: grid;
  grid-template-columns: 85% 15%;
}

.search-container{
  margin-top: 20px;
}

form.example input[type=text] {
  font-size: 13px;
  border: 1px solid lightgrey;
  background: white;
}

navbar {
  list-style-type: none;
  padding: 0px;
  overflow: hidden;
  margin-left: 30px;
  display: inline-block;
}

.navbar li {
  float: left;
}

.navbar li a {
  font-size: 13px;
  font-weight: bold;
  display: block;
  color: #67757f;
  text-align: center;
  margin-left: 20px;
  text-decoration: none;
  line-height: 32px;
}

.navbar img{
  width: 100px;
}

.green-button {
  background-color: #96c32e;
  color: white;
  font-weight: bold;
  width: 50px;
  height: 30px;
  border: none;
  border-radius: 3px;
}

#small-button{
  background-color: #cbe6fd;
  color: #65aeec;
  width: 33px;
  height: 15px;
  margin-top: 8px;
  margin-left: 0px;
  font-size: 8px;
  align-content: center;
  display: inline-block;
  position: relative;
}

button{
  background-color: #489de5;
  color: white;
  font-weight: bold;
  width:90px;
  height: 30px;
  border: none;
  border-radius: 3px;
  margin-left: 10px;
}

/* Video */
.video-container{
  background-color: black;
  width: 100%;
  margin:  0 auto;
}
.video{
  margin:  0 auto;
  max-width: 960px;
}

/* Column */
.grid-container{
  display: grid;
  max-width: 1200px;
  margin: auto;
  grid-template-columns: 70% 30%;
  padding-right: 5px;
}

.grid-content{
  display: inline-block;
}

.vid-info{
  border-bottom: 1px solid lightgrey;
  padding-bottom: 20px;
}
.profile-container{
  display: inline-block;
  line-height: 16px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.profile-container img{
  width: 30px;
  border-raidus: 100%;
  position: relative;
  top: 10px;
}

stats {
  list-style-type: none;
  display: inline-block;
}

.stats li {
  float: left;
}
.stats li a {
  font-size: 15px;
  display: block;
  color: #67757f;
  text-align: left;
  margin-right: 20px;
  text-decoration: none;
  line-height: 32px;
}

#grey-button{
  background-color: lightgrey;
  color: black;
  height:40px;
  font-size: 15px;
  width: 100px;
  margin-top: 10px;
}

.grid-content img{
  width: 30px;
  border-raidus: 100%;
  position: relative;
  top: 10px;
}
.credits-container{
  display: grid;
  grid-template-columns: 50% 50%;
  border-bottom: 1px solid lightgrey;
  padding-bottom: 20px;
}

.credit{
  display: inline-block;
  padding-right: 40px;
  position: relative;
  top: -20px;
}

#grey-label{
  background-color: lightgrey;
  color: black;
  height:30px;
  font-size: 13px;
  width: 100px;
  margin-top: 10px;
  border-radius: 20px;
  margin-left: 0;
  position: relative;
  top: -20px;
}

#grey-outline-button{
  width: 98%;
  color: black;
  background-color: white;
  border: 1px solid lightgrey;
  margin: auto;
}
/* End of Left Column */

/* Toggle Bar */
.switch {
  position: relative;
  margin-bottom: 5px;
  margin-top: -10px;
  width: 30px;
  height: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 1;
  right: 0;
  bottom: 0;
  background-color: #489de5;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 1px;
  bottom: 0px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider.round {
  border-radius: 10px;
  border-color: #489de5;
  border-width: 1px;
}

.slider.round:before {
  border-radius: 100%;
}

/* End of Toggle Bar */

/* Right Column */
.right-column{
  border-left: 1px solid lightgrey;
  padding-left: 15px;
}

.next-vid-container{
  display: grid;
  grid-template-columns: 100%;
}

.next-vid-container img{
  width: 150px;
  display: inline-block;
}

.next-vid-content{
  display: inline-block;
 
}