Music Player added new styles.

devchallenges/main-project/src/assets/styles/global.css

@@ -0,0 +1,41 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=block");
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+  height: 100%;
+}
+
+html, body, #app, .page {
+  width: 100%;
+}
+
+body, #app, .page {
+  min-height: 100vh;
+}
+
+#app {
+  padding: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+  margin: 0;
+  padding: 0;
+  font-weight: 600;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+ *    Fonts
+ */

frontendmentor/main-project/README.md

@@ -1,4 +1,4 @@
-# Collection of Componentes and Pages 
+# Collection of Components and Pages 
 This project contains different components and pages developed as solutions to the coding challenges from [Frontend Mentor](https://www.frontendmentor.io/).
 
 <br>

frontendmentor/main-project/src/assets/styles/global.css

@@ -0,0 +1,41 @@
+@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;700&display=block");
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+  height: 100%;
+}
+
+html, body, #app, .page {
+  width: 100%;
+}
+
+body, #app, .page {
+  min-height: 100vh;
+}
+
+#app {
+  padding: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+  margin: 0;
+  padding: 0;
+  font-weight: 600;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+ *    Job Listings with filters
+ */

icodethis/main-project/src/assets/styles/global.css

@@ -0,0 +1,41 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500..700;1,500..700&display=block");
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+  height: 100%;
+}
+
+html, body, #app, .page {
+  width: 100%;
+}
+
+body, #app, .page {
+  min-height: 100vh;
+}
+
+#app {
+  padding: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+  margin: 0;
+  padding: 0;
+  font-weight: 600;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+ *    Fonts
+ */

index.html

@@ -14,7 +14,9 @@
     <div class="projects">
         <h1>Coding Challenges</h1>
 
-        <h2>devChallenges</h2>
+        <a href="https://devchallenges.io/" target="_blank">
+            <h2>devChallenges</h2>
+        </a>
 
         <div class="projects__list">
 
@@ -28,7 +30,9 @@ <h4>Simple Coffee Listing</h4>
 
         <hr>
 
-        <h2>Frontend Mentor</h2>
+        <a href="https://www.frontendmentor.io/" target="_blank">
+            <h2>Frontend Mentor</h2>
+        </a>
 
         <div class="projects__list">
 
@@ -49,7 +53,9 @@ <h4>Job Listings with Filtering</h4>
 
         <hr>
 
-        <h2>iCodeThis</h2>
+        <a href="https://icodethis.com/" target="_blank">
+            <h2>iCodeThis</h2>
+        </a>
 
         <div class="projects__list">
 

main/styles.css

@@ -19,7 +19,10 @@ body .projects {
 body .projects h1 {
   text-align: center;
 }
-body .projects h2 {
+body .projects a {
+  color: rgb(177, 14, 122);
+}
+body .projects a h2 {
   margin-top: 4rem;
   text-decoration: underline;
 }

main/styles.scss

@@ -19,9 +19,13 @@ body {
 
         h1 { text-align: center; }
 
-        h2 {
-            margin-top: 4rem;
-            text-decoration: underline;
+        a {
+            color: rgb(177, 14, 122);
+
+            h2 {
+                margin-top: 4rem;
+                text-decoration: underline;
+            }
         }
 
         hr { margin-top: 4rem; }