added project 10

RanitManik · RanitManik · commit 6b3e8f7eb24e · 2024-01-15T00:12:14.000+05:30
diff --git a/FrontendMentor09—3-column-preview-card-component/README.md b/FrontendMentor09—3-column-preview-card-component/README.md
@@ -18,7 +18,6 @@ Frontend Mentor challenges help you improve your coding skills by building reali
 - [Author](#author)
 - [Acknowledgments](#acknowledgments)
 
-
 ## Overview
 
 ### The challenge
@@ -58,10 +57,51 @@ Your users should be able to:
 
 ### What I learned
 
+Today, I explored the practical application of SCSS `mixins`, focusing on their versatility in managing parameters. A
+key
+observation is the capability to modify arguments when utilizing mixins, thereby improving their adaptability in diverse
+scenarios
+
 ### Code Highlights
 
+- utilizing parameter and argument in `mixin`
+
+```scss
+// mixin for card and btn
+@mixin card($card-primary-color) {
+  background-color: $card-primary-color;
+
+  .btn {
+    color: $card-primary-color;
+    background-color: white;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: white;
+      background-color: transparent;
+      outline: 2px solid white;
+    }
+  }
+}
+
+.card:nth-child(1) {
+  @include card(var(--bright-orange));
+}
+
+.card:nth-child(2) {
+  @include card(var(--dark-cyan));
+}
+
+.card:nth-child(3) {
+  @include card(var(--very-dark-cyan));
+}
+```
+
 ### Useful resources
 
+- [SCSS mixin](https://sass-lang.com/documentation/at-rules/mixin/)
+
 ## Author
 
 - Website - [Ranit Manik](https://ranitmanik.github.io/Portfolio-1.0)
diff --git a/index.html b/index.html
@@ -34,6 +34,10 @@
             box-sizing: border-box;
         }
 
+        h1 {
+            text-align: center;
+        }
+
 
         /* --------------------------- main css --------------------------- */
 
@@ -129,18 +133,30 @@
         }
 
         @media screen and (min-width: 1300px) {
+            body {
+                padding-block: 5rem;
+            }
+
             main {
                 grid-template-columns: 1fr 1fr 1fr;
             }
         }
 
         @media screen and (max-width: 1300px) and (min-width: 900px) {
+            body {
+                padding-block: 3rem;
+            }
+
             main {
                 grid-template-columns: 1fr 1fr;
             }
         }
 
         @media screen and (max-width: 900px) {
+            body {
+                padding-block: 2rem;
+            }
+
             main {
                 grid-template-columns: 1fr;
             }
@@ -150,6 +166,7 @@
 </head>
 <body>
 
+<h1>FrontendMentor Challenges</h1>
 <main>
     <div class="card" role="article">
         <img src="FrontendMentor01—Blog-preview-card/design/desktop-design.jpg" alt="">
@@ -433,7 +450,8 @@ <h2>3-column preview card</h2>
             </p>
             <h2>Chat app CSS illustration</h2>
             <p class="card-description">
-                Your challenge is to build out this feature illustration using HTML & CSS and get it looking as close to the design as possible.
+                Your challenge is to build out this feature illustration using HTML & CSS and get it looking as close to
+                the design as possible.
             </p>
             <div class="card-author">
                 <img src="https://avatars.githubusercontent.com/u/138437760?v=4"
