Spoyify Clone HTML/CSS

PHOTO EMBED

Tue Dec 12 2023 19:39:14 GMT+0000 (Coordinated Universal Time)

Saved by @Disdark10 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="learn.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <title>Document</title>
</head>
<body>

  <div class="container">
    
    <div class="box1">
      <div class="navigation"></div>
    </div>  

    <div class="box2">
      <div class="main"></div>
    </div>  

    <div class="box3">
      <div class="player"></div>
    </div>

  </div>

  <div class="box4">
    <div class="music"></div>
  </div>
  
  <div class="music-player"></div>
 
</body>
</html>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin: 15px 2px 0px 2px;
}
body{
  background-color: rgba(0, 0, 9, 0.987);
  height: 100vh;
  overflow: hidden;
}
.container{
  display: flex;
  width: 100%;
  height: 100vh;
}
.box1{
  width: 4%;
}
.navigation{
  height: 10rem;
  width: 100%;
  background-color: rgb(15, 15, 15);
  border-radius: 7px;
}
.box2{
  width: 75%;
}
.main{
  height: 50rem;
  width: 100%;
  background-color: rgb(15, 15, 15);
  border-radius: 7px;
}
.box3{
  width: 20%;
}
.player{
  height: 50rem;
  width: 100%;
  background-color: rgb(15, 15, 15);
  border-radius: 7px;
}
.box4{
  width: 4%;
}
.music{
  height: 39.6rem;
  width: 99%;
  margin-left: 4px;
  background-color: rgb(15, 15, 15);
  border-radius: 7px;
  margin-top: -790px;
}
.music-player{
  width:99.6%;
  height: 5.7rem;
  background-color: rgb(15, 15, 15);
  margin: 10px 4px 0 4px;
  border-radius: 7px;
}
content_copyCOPY