Add files via upload

assets/css/hover-states.css

@@ -0,0 +1,88 @@
+/* Hovers on "Latest Release" & "Artist Images" */
+
+/* These box-shadows were applied to the outer containers so that we could keep these unaffected by the darkening filters that were applied to the images in the inner divs */
+.new-songs-card:hover .new-songs-card-left-img,
+.artists-container > div:hover .artists-container-imgsvg {
+    box-shadow: 5px 5px 15px -6px #ff8080, -9px 5px 15px -6px #ffe488,
+        -7px -5px 15px -6px #8cff85, 12px -5px 15px -6px #80c7ff,
+        12px 10px 15px -6px #e488ff, -10px 10px 15px -6px #ff616b,
+        -10px -7px 27px -6px #8e5cff, 5px 5px 15px -6px rgba(0, 0, 0, 0);
+}
+
+/* Hero Image Scaling on hover */
+#bigger-hero-image:hover {
+    transform: scale(1.2);
+}
+
+/* Filter applied on the innermost elements so that box-shadow and other don't get affected by the filter  */
+.new-songs-card:hover img,
+.artists-container > div:hover img {
+    filter: brightness(0.45);
+}
+
+.new-songs-card:hover .new-songs-card-left svg,
+.sidebar-heading-right:hover .drop-down-menu2,
+.artists-container > div:hover svg {
+    visibility: visible;
+}
+
+.new-songs-card-right:hover .drop-down-menu {
+    height: fit-content;
+    width: fit-content;
+    /* overflow: visible; */
+}
+
+/* Sidebar - Each Card in the Queue */
+.sidebar-container:hover {
+    border-radius: 0.3rem;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Each Image's hover Effects in the Queue*/
+.sidebar-container:hover img {
+    box-shadow: #fff 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px,
+        red 0 -18px 40px, -25px -24px 32px -3px rgba(0, 0, 0, 0);
+}
+
+/* Latest Songs Releases */
+.new-songs-card-left:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: -6px;
+    width: 102%;
+    height: 120%;
+    border-radius: 0.3rem;
+    background-color: rgba(255, 255, 255, 0.1);
+    opacity: 0;
+    z-index: -1;
+}
+
+/* When I hover over .new-songs-card, Apply opacity to this element - ".new-songs-card-left:before" (code right above). Which is made as a child element of .new-songs-card to be able to create the hover effect */
+.new-songs-card:hover .new-songs-card-left:before {
+    opacity: 1;
+}
+
+/* Stations Effect */
+.stations-container .stations-item:hover img {
+    filter: contrast(1) saturate(1);
+}
+
+/* 3 Banners */
+.three-banners-banner:hover img {
+    transform: scale(1.2);
+}
+
+.three-banners-banner:hover #img2 {
+    opacity: 0.24;
+}
+
+/* Latest English + Hindi Songs */
+.song-container .song:hover img {
+    filter: contrast(1.2) brightness(0.5);
+}
+
+.song-container .song:hover .song-imgsvg svg {
+    display: block;
+}

assets/css/index-responsive.css

@@ -0,0 +1,155 @@
+@media screen and (max-width: 1200px) {
+    main .main-left {
+        /* border: 3px solid blue; */
+        position: absolute;
+        top: 18vh;
+        left: 6vw;
+        margin-left: 0px;
+        width: 60%;
+    }
+
+    main .main-right {
+        /* border: 3px solid white; */
+        position: absolute;
+        top: 18vh;
+        right: 6vw;
+        width: 27%;
+        min-width: 150px;
+        max-width: 300px;
+        margin: 0rem 0px 0 0;
+        border-radius: 0.6rem;
+    }
+
+    /* Reducing columns as per viewport width  */
+    .new-songs-container-content {
+        /* border: 3px solid green; */
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 3rem;
+    }
+
+    /* Hiding some elements on responsive layouts */
+    .footer-left-content-top p,
+    .footer-left-content-bottom {
+        display: none;
+    }
+
+    /* Gave a margin in this vw to Heart SVG in the Footer Left to make it look nicer*/
+    .footer-left-content-top-svg {
+        margin-left: 2vw;
+    }
+
+    .extra-bottom-margin {
+        margin-bottom: 18vh;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    main .main-right {
+        /* border: 3px solid white; */
+        position: absolute;
+        top: 18vh;
+        right: 6vw;
+    }
+
+    .footer-right-seekbar {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 876px) {
+    main .main-left {
+        /* border: 3px solid blue; */
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100%;
+        min-width: 10vw;
+        max-width: 84vw;
+    }
+
+    main .main-right {
+        display: none;
+        position: absolute;
+        top: 18vh;
+        right: 0vw;
+        margin: 0rem 0vw 0 0;
+        width: 100%;
+        min-width: 200px;
+        max-width: 330px;
+        color: white;
+        backdrop-filter: blur(10px);
+        background-color: rgba(0, 0, 0, 0.75);
+    }
+
+    /* At this vw we're hiding the sidebar and putting a hover button to make it appear again*/
+    .side-pop-out-menu {
+        display: block;
+    }
+
+    /* This will make the sidebar appear again, when we hove rover the hover button */
+    .hover-and-main-right:hover .main-right {
+        display: block;
+    }
+
+    /* Song info in sidebar "Queue" songs becomes too small even if container is large, if this is not set */
+    .sidebar-song-info {
+        display: grid;
+        width: 140px;
+    }
+
+    /* Some rearrangements to make things look nicer at this VW */
+    .sidebar-heading {
+        padding: 1.5rem 2vw 2.4rem 2vw;
+    }
+
+    .sidebar-container {
+        margin: 0rem 2vw 2rem 2vw;
+    }
+
+    .footer-container .footer-left {
+        margin-left: 4.5vw;
+    }
+
+    .footer-container .footer-right {
+        margin-right: 4.5vw;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    /* Navbar was too close to the Avatar */
+    .navbar-right-search {
+        margin-right: 1rem;
+    }
+
+    /* Made the Favorites and notification icon hidden */
+    .navbar-left-favorites,
+    .navbar-right-notification-icon {
+        display: none;
+    }
+
+    /* Latest Song releases Section made to have just 1 column */
+    .new-songs-container-content {
+        /* border: 3px solid green; */
+        display: grid;
+        grid-template-columns: 1fr;
+        column-gap: 3rem;
+    }
+
+    /* Footer's SVG's next to albumart hidden */
+    .footer-left-content-top-svg {
+        display: none;
+    }
+
+    /* Made Footer's SVG's in the right hidden as well */
+    #footer-right-3,
+    #footer-right-4 {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 550px) {
+    /* Search is also hidden in the navbar */
+    .navbar-right-search {
+        width: 0%;
+    }
+}