button changes and heading change

demo/portfolio.css

@@ -38,6 +38,26 @@ html {
 .parent .row .card .card-title {
   text-decoration: underline;
 }
+.parent .row .card .btn {
+  background-color: #e6b294;
+  border-color: #e6b294;
+  transition: ease-in-out 0.2s;
+}
+.parent .row .card .btn:hover {
+  transform: scale(1.05);
+  transition: ease-in-out 0.2s;
+  color: black;
+}
+.parent .row .card .img-fluid {
+  width: 38px;
+  border-radius: 0.25rem;
+  border: solid #e6b294 1px;
+  transition: ease-in-out 0.2s;
+}
+.parent .row .card .img-fluid:hover {
+  transform: scale(1.06);
+  transition: ease-in-out 0.2s;
+}
 .parent h1 {
   margin: 0;
   padding-bottom: 1.5vw;
@@ -47,4 +67,7 @@ html {
   .parent {
     display: grid;
   }
+  .parent h1 {
+    text-align: center;
+  }
 }/*# sourceMappingURL=portfolio.css.map */
\ No newline at end of file

demo/portfolio.css.map

-{"version":3,"sources":["portfolio.scss","portfolio.css"],"names":[],"mappings":"AAAQ,wBAAA;AAER;EACI,oCAAA;EACA,4BAAA;EACA,6BAAA;ACAJ;;ADGA;EACI;IACI,UAAA;ECAN;EDEE;IACI,UAAA;ECAN;AACF;ADIA;EACI,wBAAA;EACA,qBAAA;ACFJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;ADEI;EACI,mBAAA;EACA,eAAA;EACA,uBAAA;ACAR;ADCQ;EACI,kBAAA;EACA,gBAAA;EACA,iBAAA;ACCZ;ADAY;EACI,0BAAA;ACEhB;ADEI;EACI,SAAA;EACA,qBAAA;ACAR;;ADQA;EACI;IACI,aAAA;ECLN;AACF","file":"portfolio.css"}
\ No newline at end of file
+{"version":3,"sources":["portfolio.scss","portfolio.css"],"names":[],"mappings":"AAAQ,wBAAA;AAER;EACI,oCAAA;EACA,4BAAA;EACA,6BAAA;ACAJ;;ADGA;EACI;IACI,UAAA;ECAN;EDEE;IACI,UAAA;ECAN;AACF;ADIA;EACI,wBAAA;EACA,qBAAA;ACFJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;ADEI;EACI,mBAAA;EACA,eAAA;EACA,uBAAA;ACAR;ADCQ;EACI,kBAAA;EACA,gBAAA;EACA,iBAAA;ACCZ;ADAY;EACI,0BAAA;ACEhB;ADAY;EACI,yBAAA;EACA,qBAAA;EACA,4BAAA;ACEhB;ADDa;EACG,sBAAA;EACA,4BAAA;EACA,YAAA;ACGhB;ADDY;EACI,WAAA;EACA,sBAAA;EACA,yBAAA;EACA,4BAAA;ACGhB;ADDY;EACI,sBAAA;EACA,4BAAA;ACGhB;ADCI;EACI,SAAA;EACA,qBAAA;ACCR;;ADQA;EACI;IACI,aAAA;ECLN;EDMM;IACI,kBAAA;ECJV;AACF","file":"portfolio.css"}
\ No newline at end of file

demo/portfolio.html

@@ -51,7 +51,7 @@
     <!------------------------------------------------------ PORTFOLIO PAGE -->
     <div class="parent container-fluid">
         <div class="container mt-5">
-        <h1>PORTFOLIO</h1>
+        <h1 class="display-3">PORTFOLIO</h1>
             <div class="row row-cols-4">
                 <div class="card" style="width: 18rem;">
                     <img src="src/port1.png" class="card-img-top" alt="database-project">
@@ -59,6 +59,8 @@
                     <h5 class="card-title">Database project</h5>
                     <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                     <a href="https://github.com/" target="_blank" class="btn btn-primary">Check it out</a>
+                    <img class="img-fluid" src="src/JUPY.svg" alt="Jupyterlab">
+                    <img class="img-fluid" src="src/PYTHON.svg" alt="Python">
                     </div>
                 </div>
 
@@ -68,6 +70,9 @@
                     <h5 class="card-title">Bigthing project</h5>
                     <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                     <a href="https://github.com/" target="_blank" class="btn btn-primary">Check it out</a>
+                    <img class="img-fluid" src="src/ANGULAR.svg" alt="AngularJS">
+                    <img class="img-fluid" src="src/JS.svg" alt="JavaScript">
+                    <img class="img-fluid" src="src/CSS.svg" alt="CSS">
                     </div>
                 </div>
 
@@ -77,6 +82,8 @@
                     <h5 class="card-title">Another project</h5>
                     <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                     <a href="https://github.com/" target="_blank" class="btn btn-primary">Check it out</a>
+                    <img class="img-fluid" src="src/android.svg" alt="AndroidOS">
+                    <img class="img-fluid" src="src/KOTLIN.svg" alt="Kotlin">
                     </div>
                 </div>
 
@@ -86,6 +93,7 @@
                     <h5 class="card-title">Cool project</h5>
                     <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                     <a href="https://github.com/" target="_blank" class="btn btn-primary">Check it out</a>
+                    <img class="img-fluid" src="src/JS.svg" alt="JavaScript">
                     </div>
                 </div>
 
@@ -95,6 +103,7 @@
                     <h5 class="card-title">Database project</h5>
                     <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                     <a href="https://github.com/" target="_blank" class="btn btn-primary">Check it out</a>
+                    <img class="img-fluid" src="src/PYTHON.svg" alt="Python">
                     </div>
                 </div>
 
@@ -104,6 +113,9 @@
                     <h5 class="card-title">Bigthing project</h5>
                     <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                     <a href="https://github.com/" target="_blank" class="btn btn-primary">Check it out</a>
+                    <img class="img-fluid" src="src/REACT.svg" alt="AngularJS">
+                    <img class="img-fluid" src="src/JS.svg" alt="JavaScript">
+                    <img class="img-fluid" src="src/CSS.svg" alt="CSS">
                     </div>
                 </div>
 
@@ -113,6 +125,9 @@
                     <h5 class="card-title">Another project</h5>
                     <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                     <a href="https://github.com/" target="_blank" class="btn btn-primary">Check it out</a>
+                    <img class="img-fluid" src="src/ANGULAR.svg" alt="AngularJS">
+                    <img class="img-fluid" src="src/JS.svg" alt="JavaScript">
+                    <img class="img-fluid" src="src/CSS.svg" alt="CSS">
                     </div>
                 </div>
 
@@ -122,6 +137,9 @@
                     <h5 class="card-title">Cool project</h5>
                     <p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                     <a href="https://github.com/" target="_blank" class="btn btn-primary">Check it out</a>
+                    <img class="img-fluid" src="src/ANGULAR.svg" alt="AngularJS">
+                    <img class="img-fluid" src="src/JS.svg" alt="JavaScript">
+                    <img class="img-fluid" src="src/CSS.svg" alt="CSS">
                     </div>
                 </div>
 

demo/portfolio.scss

@@ -37,11 +37,31 @@ html{
             .card-title{
                 text-decoration: underline;
             }
+            .btn{
+                background-color: #e6b294;
+                border-color: #e6b294;
+                transition: ease-in-out 0.2s;
+            }.btn:hover{
+                transform: scale(1.05);
+                transition: ease-in-out 0.2s;
+                color: black;
+            }
+            .img-fluid{
+                width: 38px;
+                border-radius: .25rem;
+                border: solid #e6b294 1px;
+                transition: ease-in-out 0.2s;
+            }
+            .img-fluid:hover{
+                transform: scale(1.06);
+                transition: ease-in-out 0.2s;
+            }
         }
     }
     h1{
         margin: 0;
         padding-bottom: 1.5vw;
+        
     }
 }
 
@@ -52,5 +72,8 @@ html{
 @media screen and (max-height: 400px) {
     .parent{
         display: grid;
+        h1{
+            text-align: center;
+        }
     }
 }
\ No newline at end of file