update aula 2 - tags

index.html

@@ -40,7 +40,8 @@
         <div class="library-content">
           <button class="library-btn">
             <span class="fa fas fa-book"></span>
-            <span>Sua biblioteca</span>
+            <span title="Ocultar Sua Biblioteca">Sua biblioteca</span
+            ><!--Alteração minha-->
           </button>
           <span class="fa fa-plus"></span>
         </div>
@@ -59,6 +60,15 @@
           <a href="#">Cookies 🍪</a>
         </div>
 
+        <!--Acrescimo sob minha criatividade-->
+        <div class="tags">
+          <a href="#" class="tag">JBL</a>
+          <a href="#" class="tag" id="year"></a>
+          <a href="#" class="tag">Açaí</a>
+          <a href="#" class="tag">Alura</a>
+          <a href="#" class="tag">Lá ele</a>
+        </div>
+
         <div class="languages">
           <button class="languages-btn">
             <span class="fa fa-globe"></span>

script.js

@@ -0,0 +1,5 @@
+var year = document.getElementById("year")
+var data = new Date()
+var ano = data.getFullYear()
+
+year.innerHTML = ano

style.css

@@ -41,6 +41,8 @@ body {
 
 .sidebar nav ul li a {
   color: #b3b3b3;
+  display: flex; /*Acrescimo meu*/
+  gap: 8px; /*Acrescimo meu*/
   text-decoration: none;
   font-weight: 600;
   font-size: 14px;
@@ -66,6 +68,7 @@ body {
 
 .library .library-btn {
   display: flex;
+  align-items: center; /*Acrescimo meu*/
   margin-right: 10px;
   color: #b3b3b3;
   background-color: transparent;
@@ -89,6 +92,12 @@ body {
   margin: 24px 10px;
 }
 
+.library-content .fa-plus:hover {
+  /*Acrescimo meu*/
+  color: #fff;
+  cursor: pointer;
+}
+
 .section-playlist {
   display: flex;
   align-items: flex-start;
@@ -157,6 +166,32 @@ body {
   color: #fff;
 }
 
+/*Acrescimo meu*/
+.sidebar .tags {
+  display: grid;
+  padding: 16px 0;
+  grid-template-columns: repeat(3, 1fr);
+  justify-content: space-between;
+  gap: 4px;
+}
+.tags .tag {
+  font-weight: 400;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 0.5px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  text-align: center;
+  text-decoration: none;
+  color: #878787;
+  padding: 4px 8px;
+  transition: 0.4s;
+}
+
+.tags .tag:hover {
+  background: transparent;
+  color: #878787;
+}
+/*Fim das Tags*/
+
 .languages .languages-btn {
   align-items: center;
   background-color: transparent;