Update Index.css

Index.css

 * {
   padding: 0;
   margin: 0;
+  box-sizing: border-box;
 }
 
 nav {
-  height: 1.3rem;
-  background-color: black;
+  position: sticky;
+  background-color: rgb(249, 249, 249);
+  height: 3rem;
+  padding: 0.8rem 1rem;
+  width: 100%;
 }
 
 nav img {
-  margin-top: 0.2rem;
-  height: 1rem;
-  background-color: black;
-}
-
-p {
-  font-size: 0.9rem;
-}
-
-h2 {
-  font-size: 1rem;
+  height: 65%;
+  filter: brightness(0);
 }
-
 .card {
   min-height: 50vh;
-  width: 100%;
+  width: 100vw;
   color: white;
+  padding: 7px;
 }
 .logo img {
   max-height: 2rem;
@@ -58,68 +53,101 @@ h2 {
   background: #4ec2e7;
 }
 
-@media (min-width: 320px) {
-  .card {
-    min-height: 50vh;
-  }
-  .Img img {
-    padding: 2rem;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 3rem;
-  }
-  .card.card-6 .Img img {
-    margin-left: -2.5rem;
-    margin-left: 2rem;
-    min-height: 19.12rem;
-    max-width: 12.25rem;
-  }
+.Img img {
+  padding: 2rem;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 3rem;
+}
+.card.card-6 .Img img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  min-height: 19.12rem;
+  max-width: 12.25rem;
+}
 
-  p {
-    font-size: 0.5rem;
-  }
+p {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+}
 
-  h2 {
-    font-size: 0.8rem;
-  }
+h2 {
+  font-size: 1rem;
+  text-transform: uppercase;
+}
+
+hr {
+  margin-top: 2.5px;
+  margin-bottom: 2.5px;
 }
 
 @media (min-width: 768px) {
   .card {
     width: 50%;
     float: left;
-    height: 100vh;
+    height: 28rem;
+    padding: 5px;
+    box-sizing: border-box;
   }
 
-  hr {
-    width: 250px;
+  .card .about {
+    display: inline-block;
+    width: 48%;
+    vertical-align: middle;
+    padding-left: 1rem;
+    box-sizing: border-box;
+  }
+
+  .card .Img {
+    display: inline-block;
+    width: 48%;
+    vertical-align: middle;
+    text-align: right;
+    box-sizing: border-box;
+    max-width: 100%;
   }
 
   .Img img {
-    margin-top: 1rem;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 0;
+    margin-top: 4rem;
+    display: inline-block;
+    padding: 3px;
+    max-width: 100%;
+    max-height: 300px;
   }
-  .card.card-2 .Img img {
-    min-height: 300px;
-    margin-left: 7rem;
+  .card-1 .Img img {
+    margin-top: 5.4rem;
+  }
+
+  .card-2 .Img img {
     margin-top: 3rem;
   }
 
-  .card.card-6 .Img img {
-    margin-left: 5rem;
-    margin-top: 4rem;
+  .card-6 .Img img {
+    margin-top: 13.5rem;
+  }
+
+  hr {
+    width: 150px;
   }
 
   p {
-    font-size: 0.8rem;
+    font-size: 1rem;
   }
 
   h2 {
-    font-size: 1rem;
+    font-size: 1.2rem;
+    font-weight: 400px;
+  }
+  nav {
+    background: transparent;
+    position: fixed;
+    top: 0;
+  }
+
+  nav img {
+    filter: brightness(5);
   }
 }
 
@@ -131,7 +159,7 @@ h2 {
   }
 
   hr {
-    width: 250px;
+    width: 135px;
   }
 
   .card {
@@ -144,79 +172,39 @@ h2 {
     margin-top: 5.5rem;
     display: inline-block;
     vertical-align: middle;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
   }
 
   p {
     font-size: 0.9rem;
+    font-weight: 70;
   }
 
   h2 {
-    font-size: 1.3rem;
+    font-size: 1.1rem;
+    font-weight: 400;
   }
 
   .card.card-6 .Img img {
-    margin-left: 5rem;
-    margin-top: 7rem;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+    margin-top: 14rem;
+    transform: scale(1.2);
   }
   .card.card-2 .Img img {
     margin-top: 5rem;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    nav {
-      height: 35px;
-    }
-    nav img {
-      height: 30px;
-    }
-  }
-}
-@media (min-width: 1440px) {
-  .card {
-    float: left;
-    width: 33.3%;
-    height: 50vh;
-  }
-  .Img img {
-    display: block;
-    margin-top: 5rem;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .card.card-2 .Img img {
-    display: block;
-    margin-top: 5rem;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .card.card-6 .Img img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 3rem;
   }
 }
-@media (min-width: 1440px) {
+@media (min-width: 1280px) {
   .card {
-    float: left;
-    width: 33.3%;
-    height: 100vh;
+    min-height: 50vh;
   }
-
-  .Img img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 5rem;
+  h2 {
+    font-size: 1rem;
+    font-weight: 200px;
+  }
+  p {
+    font-size: 0.6rem;
   }
-
   .card.card-6 .Img img {
-    margin-top: 3rem;
+    margin-top: 6.5rem;
+    transform: scale(1.2);
   }
 }