🎨 styles: sidebar

linder3hs · Feb 24, 2024 · b07ceaa · b07ceaa
1 parent 19a2215
commit b07ceaa
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 1 deletion.
diff --git a/semana-4/challenges/spotify/assets/icons/folder.svg b/semana-4/challenges/spotify/assets/icons/folder.svg
diff --git a/semana-4/challenges/spotify/assets/icons/heart.svg b/semana-4/challenges/spotify/assets/icons/heart.svg
diff --git a/semana-4/challenges/spotify/assets/icons/home.svg b/semana-4/challenges/spotify/assets/icons/home.svg
diff --git a/semana-4/challenges/spotify/assets/icons/location.svg b/semana-4/challenges/spotify/assets/icons/location.svg
diff --git a/semana-4/challenges/spotify/assets/icons/microphone.svg b/semana-4/challenges/spotify/assets/icons/microphone.svg
diff --git a/semana-4/challenges/spotify/assets/icons/musicplaylist.svg b/semana-4/challenges/spotify/assets/icons/musicplaylist.svg
diff --git a/semana-4/challenges/spotify/assets/icons/musicsquare.svg b/semana-4/challenges/spotify/assets/icons/musicsquare.svg
diff --git a/semana-4/challenges/spotify/assets/icons/musicsquareadd.svg b/semana-4/challenges/spotify/assets/icons/musicsquareadd.svg
diff --git a/semana-4/challenges/spotify/assets/icons/radio.svg b/semana-4/challenges/spotify/assets/icons/radio.svg
diff --git a/semana-4/challenges/spotify/assets/images/logo.svg b/semana-4/challenges/spotify/assets/images/logo.svg
diff --git a/semana-4/challenges/spotify/css/style.css b/semana-4/challenges/spotify/css/style.css
@@ -1,3 +1,7 @@
+body {
+  font-family: "Inter", sans-serif !important;
+}
+
 main {
   height: 100vh;
   display: grid;

diff --git a/semana-4/challenges/spotify/index.html b/semana-4/challenges/spotify/index.html
@@ -4,12 +4,71 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Spotify</title>
+    <!-- tailwind -->
     <script src="https://cdn.tailwindcss.com/3.4.1"></script>
+    <!-- font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
+    <!-- css -->
     <link rel="stylesheet" href="./css/style.css" />
   </head>
   <body>
     <main class="text-white">
-      <aside class="sidebar bg-[#212121]">sidebar</aside>
+      <aside class="sidebar bg-[#212121]">
+        <div class="p-10">
+          <div>
+            <img src="./assets/images/logo.svg" alt="" />
+          </div>
+        </div>
+        <div class="mt-5">
+          <ul class="flex flex-col gap-5">
+            <li
+              class="py-3 hover:bg-gradient-to-r hover:from-[#2d2d2d] hover:border-r hover:border-r-[#1db954] hover:border-r-[6px]"
+            >
+              <a href="" class="flex gap-5 items-center ps-12">
+                <img src="./assets/icons/home.svg" alt="" />
+                <span>Home</span>
+              </a>
+            </li>
+            <li
+              class="py-3 hover:bg-gradient-to-r hover:from-[#2d2d2d] hover:border-r hover:border-r-[#1db954] hover:border-r-[6px]"
+            >
+              <a href="" class="flex gap-5 items-center ps-12">
+                <img src="./assets/icons/location.svg" alt="" />
+                <span>Discover</span>
+              </a>
+            </li>
+            <li
+              class="py-3 hover:bg-gradient-to-r hover:from-[#2d2d2d] hover:border-r hover:border-r-[#1db954] hover:border-r-[6px]"
+            >
+              <a href="" class="flex gap-5 items-center ps-12">
+                <img src="./assets/icons/radio.svg" alt="" />
+                <span>Radio</span>
+              </a>
+            </li>
+            <li
+              class="py-3 hover:bg-gradient-to-r hover:from-[#2d2d2d] hover:border-r hover:border-r-[#1db954] hover:border-r-[6px]"
+            >
+              <a href="" class="flex gap-5 items-center ps-12">
+                <img src="./assets/icons/musicsquare.svg" alt="" />
+                <span>Albums</span>
+              </a>
+            </li>
+            <li
+              class="py-3 hover:bg-gradient-to-r hover:from-[#2d2d2d] hover:border-r hover:border-r-[#1db954] hover:border-r-[6px]"
+            >
+              <a href="" class="flex gap-5 items-center ps-12">
+                <img src="./assets/icons/microphone.svg" alt="" />
+                <span>Podcast</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </aside>
       <section class="principal bg-[#121212]">content principal</section>
       <section class="extra bg-[#212121]">extra</section>
       <section class="player bg-[#212121]/70">player</section>