initial commit

README.md

@@ -0,0 +1 @@
+# mini-player

css/main.scss

@@ -0,0 +1,84 @@
+body {
+  // background: #e1e7ec;
+  background: #dfe7ef;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}
+
+.wrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: url(../img/bg.png) no-repeat center;
+  background-size: cover;
+}
+
+.player {
+  background: #eef3f7;
+  width: 410px;
+  height: 480px;
+  box-shadow: 0px 55px 75px -10px rgba(76, 70, 124, 0.5);
+  border-radius: 15px;
+  padding: 30px;
+
+  &__top {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &-cover {
+    width: 300px;
+    height: 300px;
+    margin-left: -70px;
+    flex-shrink: 0;
+
+    &__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 15px;
+    }
+  }
+
+  &-controls {
+    flex: 1;
+    padding-left: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__item {
+      display: inline-flex;
+      font-size: 30px;
+      padding: 5px;
+      margin-bottom: 20px;
+      color: #acb8cc;
+      cursor: pointer;
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        color: #532ab9;
+      }
+
+      &.-xl {
+        margin-bottom: 0;
+        font-size: 95px;
+        filter: drop-shadow(0 2px 8px rgba(172, 184, 204, 0.3));
+        color: #fff;
+      }
+    }
+  }
+}