YouTube Clone

by maxwizardth

HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <!-- CSS File -->
    <link rel="stylesheet" href="twoColumn.css" />
    <title>Youtube Clone with HTML & CSS</title>
  </head>
  <body>
      <header>

 <div class="logo left">
   <i id="menu" class="material-icons">menu</i>
   <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1641440730932/nXN3YLsqk.png">
 </div>

 <div class="search center">
   <form action="">
     <input type="text" placeholder="Search" />
     <button><i class="material-icons">search</i></button>
   </form>
   <i class="material-icons mic">mic</i>
 </div>

 <div class="icons right">
   <i class="material-icons">videocam</i>
   <i class="material-icons">apps</i>
   <i class="material-icons">notifications</i>
   <i class="material-icons display-this">account_circle</i>
 </div>
</header>


<main>
      <div class="side-bar">
          
          
                <a class="nav-link active">
                <i class="material-icons">home</i>
                <span>Home</span>
                </a>
                <a class="nav-link">
                <i class="material-icons">local_fire_department</i>
                 <span>Trending</span>
                </a>
                <a class="nav-link">
                <i class="material-icons">subscriptions</i>
                <span>Subscriptions</span>
                </a>
          
            <hr>
 
            <a class="nav-link">
            <i class="material-icons">library_add_check</i>
            <span>Library</span>
            </a>
            <a class="nav-link">
            <i class="material-icons">history</i>
            <span>History</span>
            </a>
            <a class="nav-link">
            <i...

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Roboto', sans-serif;
}
/* header section*/
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 15px;
  }

  main {
    height: calc(100vh - 70px);
    display: flex;
    background-color: #f9f9f9;
  }
.left {
  display: flex;
  align-items: center;
}

.left #menu {
  padding: 0 7px;
  cursor: pointer;
}

.search {
  display: flex;
}

.search form {
  display: flex;
  border: 1px solid #ddd;
  height: 45px;
}
.search input {
  width: 600px;
  padding:10px;
  border: 0;
  height: 100%;
  border-radius: 2px 0 0 2px
}

input:focus {
  outline: none;
  border: 1px solid #ddd;
}

.search button {
  height: 100%;
  width: 60px;
  border: none;
}

.mic {
  margin-top: 10px;
}

 .material-icons {
    color: rgb(100, 100, 100);
    padding: 0 7px;
    cursor: pointer;
  }

  @media (max-width: 768px) {
    .side-bar {
      display: none;
    }
      .search {
      display: none;
    }
}
  }
 @media (max-width: 900px) {
    .search input {
      width: 25rem;
    }
  }
.nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .nav-link {
    display: flex;
    align-items: center;
    padding: 12px 25px;
  }

 .nav-link span {
    margin-left: 15px;
  }

 .nav-link:hover {
    background: #e5e5e5;
    cursor: pointer;
  }

.active {
    background: #e5e5e5;
 }
hr {
    height: 1px;
    background-color: #e5e5e5;
    border: none;
  }

  .content {
  background-color: #f9f9f9;
  width: 100%;
  height: 100%;
  padding: 15px 15px;
  border-top: 1px solid #ddd;
  overflow-y: scroll;
}

.videos {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.video {
  width: 270px;
  margin-bottom: 30px;
}

.thumbnail {
  width: 100%;
 ...