Hamada Abdelaal

css/colors.css

@@ -0,0 +1,41 @@
+:root {
+  /****** Font color ******/
+  --primary-font-color: #fff;
+  --secondary-font-color: #6e7176;
+
+  /****** Background-color ******/
+  /* 1- Left menu: */
+  --left-menu-bg-color: #000;
+
+  /* 2- Main content area: */
+  --content-area-primary-bg-color: #080b12;
+
+  /* 3- Albums list: */
+  --albums-area-bg-color: #141922;
+
+  /****** Border ******/
+  --border-color: #adff2f;
+
+  /****** Left side filter icons colors ******/
+  --icon-color: invert(40%) sepia(70%) saturate(24%) hue-rotate(178deg)
+    brightness(95%) contrast(88%);
+  --icon-hover-color: invert(99%) sepia(37%) saturate(2%) hue-rotate(243deg)
+    brightness(113%) contrast(100%);
+  --icon-focus-color: invert(99%) sepia(37%) saturate(2%) hue-rotate(243deg)
+    brightness(113%) contrast(100%);
+
+  /****** Control bar ******/
+  --control-bar-bg-color: #282828;
+  --paly-bar-color: #c1c1c1;
+  --bar-color: #5a5a5a;
+
+  /****** Control bar filter icons colors ******/
+  --icon-main-color: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
+    brightness(103%) contrast(103%);
+
+  --folders-icon-color: invert(56%) sepia(3%) saturate(16%) hue-rotate(333deg)
+    brightness(91%) contrast(86%);
+
+  --ctrl-icon-hover-color: invert(100%) sepia(60%) saturate(2536%)
+    hue-rotate(26deg) brightness(108%) contrast(100%);
+}

css/content-area.css

@@ -0,0 +1,186 @@
+.content-area {
+  grid-column: 3 / 4;
+  grid-row: 1 / 2;
+
+  color: var(--primary-font-color);
+  background-color: var(--albums-area-bg-color);
+}
+
+.content-area header {
+  height: 70px;
+  padding-right: 15px;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  background-color: var(--left-menu-bg-color);
+
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  opacity: 0.9;
+}
+
+.upgrade {
+  padding: 10px 30px;
+
+  color: var(--primary-font-color);
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  text-decoration: none;
+
+  border: 1px solid var(--primary-font-color);
+  border-radius: 25px;
+
+  transition: color 300ms;
+  transition: scale 300ms;
+}
+
+.upgrade:hover {
+  border: 0;
+  background-color: var(--border-color);
+  color: var(--content-area-primary-bg-color);
+  scale: 1.04;
+}
+
+/****** Horizontal nav bar ******/
+.nav-bar {
+  padding-top: 10px;
+  margin: 0 auto;
+  margin-bottom: 50px;
+}
+
+.nav-menu li {
+  display: inline-block;
+  position: relative;
+}
+
+.nav-menu {
+  list-style: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.nav-bar a {
+  padding-bottom: 3px;
+
+  color: var(--secondary-font-color);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+
+  text-transform: uppercase;
+  transition: color 300ms;
+}
+
+.nav-menu a:focus::before {
+  content: "";
+  width: 50%;
+  height: 2px;
+
+  position: absolute;
+  left: 25%;
+  bottom: -4px;
+  z-index: 3;
+
+  background: linear-gradient(
+    to right,
+    var(--border-color) 50%,
+    var(--border-color) 50%
+  );
+}
+
+.nav-bar a:hover,
+.nav-bar a:focus {
+  color: var(--primary-font-color);
+}
+
+/****** Albums area ******/
+hgroup,
+#recently-played {
+  padding-left: 15px;
+  margin-bottom: 20px;
+}
+
+hgroup h2 {
+  margin-bottom: 10px;
+}
+
+hgroup p {
+  color: var(--secondary-font-color);
+  font-size: 15px;
+}
+
+.albums {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+
+  padding: 15px;
+}
+
+.albums:last-child {
+  margin-bottom: 80px;
+}
+
+article {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+cite {
+  font-style: normal;
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.poster-div {
+  margin-bottom: 10px;
+  position: relative;
+  box-shadow: 0px 0px 4px 5px #00000070;
+}
+
+.play-icon-div {
+  border: 3px solid var(--border-color);
+  border-radius: 50%;
+
+  width: 33.3%;
+  height: 33.3%;
+
+  position: absolute;
+  inset: 33.3%;
+
+  display: none;
+}
+
+.poster-div:hover .play-icon-div {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.poster {
+  max-width: 100%;
+  height: auto;
+  transition: opacity 300ms;
+}
+
+.poster-div:hover .poster {
+  opacity: 0.5;
+}
+
+.subtitle {
+  color: var(--secondary-font-color);
+  font-size: 12px;
+  font-weight: 600;
+}

css/control-bar.css

@@ -0,0 +1,124 @@
+.control-bar {
+  grid-column: 1 / 4;
+  grid-row: 2 / 3;
+
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 15px;
+
+  padding: 10px;
+  background-color: var(--control-bar-bg-color);
+}
+
+.control-bar .icon {
+  width: 20px;
+  filter: var(--icon-main-color);
+  transition: color 300ms;
+}
+
+.control-bar .icon:hover {
+  cursor: pointer;
+  scale: 1.2;
+  filter: var(--icon-main-color);
+}
+
+.ctrl-poster {
+  width: 50px;
+}
+
+.media,
+.album,
+.folders,
+.ctrl-icons,
+.ctrl,
+.play-bar,
+.volume,
+.volume-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+}
+
+.album,
+.ctrl,
+.folders,
+.volume,
+.volume-icon {
+  gap: 15px;
+}
+
+.album p:first-child {
+  color: var(--primary-font-color);
+  font-size: 16px;
+}
+
+.album p:last-child {
+  color: var(--secondary-font-color);
+  font-size: 13px;
+}
+
+.folders {
+  flex-wrap: wrap;
+}
+
+.folders .icon {
+  filter: var(--folders-icon-color);
+  transition: color 300ms;
+}
+
+.play-bar {
+  width: 100%;
+}
+
+.play-bar p {
+  color: var(--primary-font-color);
+  font-size: 12px;
+}
+
+.ctrl {
+  flex-direction: column;
+  justify-content: space-between;
+  width: 40%;
+}
+
+.icon.play-icon {
+  width: 40px;
+}
+
+.ctrl .icon:hover {
+  filter: var(--ctrl-icon-hover-color);
+}
+
+/****** play bar ******/
+input {
+  appearance: none;
+  background-color: var(--bar-color);
+  cursor: pointer;
+  width: 100%;
+  height: 3px;
+  position: relative;
+}
+
+input::-webkit-slider-thumb {
+  appearance: none;
+  margin-top: 0px;
+  background-color: var(--paly-bar-color);
+  height: 3px;
+  width: 40%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+
+/******* Volume *******/
+.volume-bar {
+  width: 50%;
+}