Add styles for articles and media queries

nursh · Jan 22, 2025 · 3356f3e · 3356f3e
1 parent 5bb9260
commit 3356f3e
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -9,8 +9,10 @@
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
   <link rel="stylesheet" href="style.css">
   <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
 
   <title>Frontend Mentor | Four card feature section</title>
 
@@ -19,6 +21,7 @@
     .attribution {
       font-size: 11px;
       text-align: center;
+      margin: 0 auto;
     }
 
     .attribution a {
@@ -30,7 +33,6 @@
 <body>
 
   <main>
-
     <h1>
       Reliable, efficient delivery<br />
       <span>Powered by Technology</span>
@@ -41,31 +43,33 @@ <h1>
       to ensure that your project is successful
     </p>
 
-    <article class="supervisor">
-      <h2>Supervisor</h2>
-      <p>Monitors activity to identify project roadblocks</p>
-      <img src="./images/icon-supervisor.svg" alt="Supervisor Avatar">
-    </article>
-
-
-    <article class="team-builder">
-      <h2>Team Builder</h2>
-      <p>Scans our talent network to create the optimal team for your project</p>
-      <img src="./images/icon-team-builder.svg" alt="Team Builder Avatar">
-    </article>
-
-    <article class="karma">
-      <h2>Karma</h2>
-      <p>Regularly evaluates our talent to ensure quality</p>
-      <img src="./images/icon-karma.svg" alt="Karma Avatar">
-    </article>
-
-
-    <article class="calculator">
-      <h2>Calculator</h2>
-      <p>Uses data from past projects to provide better delivery estimates</p>
-      <img src="./images/icon-calculator.svg" alt="Calculator Avatar">
-    </article>
+    <div class="articles">
+      <article class="supervisor">
+        <h2>Supervisor</h2>
+        <p>Monitors activity to identify project roadblocks</p>
+        <img src="./images/icon-supervisor.svg" alt="Supervisor Avatar">
+      </article>
+
+
+      <article class="team-builder">
+        <h2>Team Builder</h2>
+        <p>Scans our talent network to create the optimal team for your project</p>
+        <img src="./images/icon-team-builder.svg" alt="Team Builder Avatar">
+      </article>
+
+      <article class="karma">
+        <h2>Karma</h2>
+        <p>Regularly evaluates our talent to ensure quality</p>
+        <img src="./images/icon-karma.svg" alt="Karma Avatar">
+      </article>
+
+
+      <article class="calculator">
+        <h2>Calculator</h2>
+        <p>Uses data from past projects to provide better delivery estimates</p>
+        <img src="./images/icon-calculator.svg" alt="Calculator Avatar">
+      </article>
+    </div>
 
   </main>
 

diff --git a/style.css b/style.css
@@ -20,6 +20,9 @@ body {
   min-height: 100svh;
   background-color: #FAFAFA;
   padding: 1.5rem;
+}
+
+main {
   display: grid;
   align-content: center;
   justify-items: center;
@@ -49,6 +52,10 @@ p {
   font-weight: 300;
   font-size: var(--text-3);
   text-align: center;
+  color: var(--clr-gray);
+  line-height: 1.6;
+  opacity: 0.5;
+  max-width: 33.75rem;
 }
 
 article {
@@ -57,7 +64,14 @@ article {
   padding: 1.75em;
   border-radius: 0.5em;
   max-width: 22rem;
-  justify-self: center;
+
+  display: grid;
+}
+
+article h2 {
+  color: var(--clr-gray);
+  font-weight: 600;
+  font-size: var(--text-2);
 }
 
 article:not(:last-child) {
@@ -67,10 +81,16 @@ article:not(:last-child) {
 article p {
   text-align: left;
   margin-bottom: 2em;
+  color: var(--clr-gray);
+  font-size: var(--text-4);
 }
 
-.supervisor {
+.articles {
   margin-top: 4.75em;
+  margin-bottom: 3em;
+}
+
+.supervisor {
   border-top: 3px solid var(--clr-green);
 }
 
@@ -87,6 +107,50 @@ article p {
 }
 
 article img {
-  display: block;
-  margin-left: auto;
+  justify-self: end;
+  align-self: end;
+}
+
+@media (min-width: 90em) {
+
+  body {
+    padding: 5em 10.3em;
+  }
+
+  h1 {
+    font-size: var(--dsk-text-1);
+    margin-bottom: 0.8125rem;
+  }
+
+  .articles {
+    display: grid;
+    grid-template-columns: repeat(3, 350px);
+    grid-template-rows: 140px 106px 30px 140px 106px;
+    column-gap: 30px;
+    margin-top: 4em;
+  }
+
+  article {
+    padding: 2em;
+  }
+
+  article:not(:last-child) {
+    margin: 0;
+  }
+
+  .supervisor {
+    grid-area: 2 / 1 / 5 / span 1;
+  }
+
+  .team-builder {
+    grid-area: 1 / 2 / 3;
+  }
+
+  .karma {
+    grid-area: 4 / 2 / -1;
+  }
+
+  .calculator {
+    grid-area: 2 / 3 / 5;
+  }
 }