diff --git a/index.html b/index.html index 01935e1..bf022ae 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,34 @@ - +
+
+ + +
+
+
+ Crie sua primeira playlist + É fácil, vamos te ajudar. + +
+
+
+ Cookies +
+
+ +
+
+ - + \ No newline at end of file diff --git a/style.css b/style.css index fa4fc55..208b406 100644 --- a/style.css +++ b/style.css @@ -44,3 +44,128 @@ body{ font-size: 14px; font-family: "DM Sans", sans-serif; } + +.library{ + background-color:#121212; + border-radius:8px; + display:flex; + justify-content: space-between; + flex-direction: column; + padding:4px 8px; + color:#b3b3b3; + font-weight: 600; + font-size:14px; + margin-top: 10px; +} + +.library .library__content{ + display:flex; + justify-content: space-between; +} + +.library .library__button{ + display:flex; + margin-right: 10px; + color:#b3b3b3; + background-color: transparent; + border:0px; + font-size: 14px; + font-weight: 700; + font-family: "DM Sans", sans-serif; + text-align: center; + text-decoration: none; + text-transform: none; + padding:20px 10px; +} + +.library .library__button .fa{ + font-size:20px; + font-weight: 300; + color:#b3b3b3; + margin-right: 10px; + padding-right:8px; +} + +.library .library__content .fa-plus{ + margin: 24px 10px; +} + +.section-playlist{ + display:flex; + align-items: flex-start; + justify-content: space-between; + gap:20px; + background-color: #242424; + color:#b3b3b3; + font-weight: 600; + font-size: 14px; + margin: 8px 0; + padding:16px 20px; + border-radius:10px; +} + +.section-playlist .section-playlist__content{ + display:flex; + flex-direction: column; +} + +.section-playlist__content .text{ + padding-bottom:14px; + color:#FFF; + font-family: "DM Sans", sans-serif; +} + +.section-playlist__content .title{ + font-weight: 700; +} + +.section-playlist__content .subtitle{ + font-weight: 500; + font-size: 12px; +} + +.section-playlist__content .section-playlist__button{ + display: flex; + justify-content: center; + background-color: #FFF; + color:#000; + border-radius: 20px; + font-size: 12px; + font-weight: 700; + font-family: "DM Sans", sans-serif; + text-decoration:none; + text-transform: none; + padding:10px; + margin-top: 12px; + border:0; + width: 113px; +} + +.sidebar .cookies{ + margin:25px 20px; +} + +.sidebar .cookies a{ + color:#b3b3b3; + font-family: "DM Sans", sans-serif; + font-weight: 500; + font-size:10px; + text-decoration: none; +} + +.sidebar .cookies a:hover{ + text-decoration: underline; +} + +.languages .languages__button{ + align-items: center; + background-color: transparent; + border: 1px solid #878787; + color:#FFF; + font-weight: bold; + cursor:pointer; + width: 170px; + margin:8px; + padding:8px; + border-radius:20px; +}