mvf

src/App.css

@@ -6,7 +6,7 @@
   color:white;
   font-family: 'Open Sans', sans-serif;
 }
-
+/* 
 nav{
   position: fixed;
   height: 50px !important;
@@ -29,7 +29,7 @@ nav img{
   flex-basis:400px;
   min-width: 33.3333%;
   /* width: 400px; */
-  max-height: 50vh;
+  /* max-height: 50vh;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -94,8 +94,7 @@ nav img{
 .card .about{
   margin-left: 9%;
 }
-@media screen and (max-width:800px) {
-  
+@media screen and (min-width:800px) {
   nav{
     position: sticky;
     background-color: black;
@@ -129,4 +128,121 @@ nav img{
  .card img {
   object-fit: contain;
  }
+} */ 
+.card.card-1{
+  background: #41ca6e;
+}
+.card.card-2{
+  background: #fab153;
+  
+}
+.card.card-3{
+  background: #7277d5;
+}
+.card.card-4{
+  background: #f87d51;
+}
+.card.card-5{
+  background: #ed5466;
+}
+.card.card-6{
+  background: #4ec2e7;
+}
+
+nav{
+  background-color: black;
+  width: 100%;
+  padding: .4rem .6rem;
+}
+nav img{
+  width: 20%;
+}
+main{
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.card{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1.7rem;
+  padding: 2rem;
+}
+
+.card .about{
+  width: 90%;
+ line-height: 1.5rem;
+}
+.card .about hr{
+  margin-block: .5rem;
+}
+.card .about h4{
+  font-size: 25px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.card .about > :nth-child(4){
+  font-weight: 100;
+  font-size: 16px;
+}
+.card img{
+  width: 90%;
+  object-fit: contain;
+}
+.card .about hr{
+  border:none;
+  width: 100%;
+  height: 2px;
+  border-radius: 10px;
+  background-color: white;
+}
+.card .about .logo{
+  width: 6rem;
+  height: auto;
+  margin-block:1rem ;
+}
+
+@media (min-width:500px){
+  nav{
+    position: fixed;
+    background-color: transparent;
+    padding:2rem 1.5rem;
+  }
+  nav img{
+    width: 5%;
+  }
+  main{
+    flex-direction: row;
+    flex-wrap: wrap
+  }
+  .card{
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 400px;
+    min-width: 33.3333%;
+    height: 50vh;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .card .about{
+    float: left;
+    flex: 200px;
+    padding-inline: 1rem;
+  }
+  .card .about h4{
+    text-transform: capitalize;
+    font-size: 18px;
+    width: 100%;
+  }
+  .card .about img{
+    object-fit: cover;
+  }
+  .card .about .logo {
+      width: 5rem;
+  }
 }
\ No newline at end of file