grid1

public/index.html

@@ -15,7 +15,7 @@
       <img src="logo-aoc.png" alt="aoc">
     </header>
 
-    <div class='container'>
+    <div class='grid-container'>
       
       <div>
         <div class="part1">
@@ -97,7 +97,7 @@
           </div>
         </div>
         <div class="part2">
-          <!-- <img src="image-6.png" alt="image6" class="mainimage"> -->
+          <img src="image-6.png" alt="image6" class="mainimage"> 
         </div>
       </div>
       

src/App.css

@@ -10,16 +10,19 @@ header>img {
   height: 20px;
 }
 
-.container h4 {
+.grid-container h4 {
   color: #f4f9fd;
   font-size: 24px;
   cursor: default;
   margin: 0;
   text-transform: uppercase;
+}
 
+.part2{
+  display: grid;
 }
 
-.container p {
+.grid-container p {
   color: #f4f9fd;
   opacity: 0.5;
   font-weight: lighter;
@@ -33,41 +36,39 @@ hr {
   border: 1px solid #faf8f8;
 }
 
-.container>div {
+.grid-container>div {
   padding: 40px;
   min-height: calc(100vh - 50px);
   box-sizing: border-box;
 
 }
 
-.container> :nth-child(1) {
+.grid-container> :nth-child(1) {
   background-color: #62c662;
 }
 
-.container> :nth-child(2) {
+.grid-container> :nth-child(2) {
   background-color: #f7b528;
 }
 
-.container> :nth-child(3) {
+.grid-container> :nth-child(3) {
   background-color: #8760f4;
 }
 
-.container> :nth-child(4) {
+.grid-container> :nth-child(4) {
   background-color: #f18451;
 }
 
-.container> :nth-child(5) {
+.grid-container> :nth-child(5) {
   background-color: #dd5465;
 }
 
-.container> :nth-child(6) {
+.grid-container> :nth-child(6) {
   background-color: #4dc1e9;
 }
 
 .mainimage {
-  display: block;
   margin: auto;
-  max-width: 100%;
 }
 
 .desc {
@@ -81,9 +82,14 @@ hr {
 }
 
 @media screen and (min-width: 540px) {
-  .container>div {
-    float: left;
-    width: 50%;
+  .grid-container {
+    display: grid;
+    grid-template-columns: auto auto;
+    
+  }
+
+  .grid-container>div {
+    width: 100%;
     height: 100vh;
     padding-top: 70px;
     overflow: hidden;
@@ -97,19 +103,27 @@ hr {
 }
 
 @media screen and (min-width: 780px) {
-  .container>div {
-    width: 33.3%;
+  .grid-container {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    
+  }
+
+  .grid-container>div {
+    width: 100%;
     height: 50vh;
     overflow: hidden;
   }
 }
 
 @media screen and (min-width: 992px) {
-  .container>div {
-    width: 33.3%;
-    min-height: 50vh;
-    padding: 2%;
+  .grid-container>div {
+    display: flex;
+    min-height: 50px;
+    padding: 5%;
     overflow: hidden;
+    align-items: center;
+    justify-content: space-between;
   }
 
   header {
@@ -120,58 +134,49 @@ hr {
     height: 25px;
   }
 
-  .part1 {
-    width: 50%;
-    float: left;
-    margin-top: 25px;
+  .mainimage {
+     max-width: 100%;  
+     max-height: 300px;  
   }
 
-  .part2 {
-    width: 50%;
-    float: right;
+  .part1 {
+   min-width: 300px;
   }
 
-  .subimage {
-    height: 50px;
+  .part2{
+    max-width: fit-content;
   }
 
-  .mainimage {
-    margin-right: 0;
-    object-fit: contain;
-    max-height: 300px;
-
-  }
-
-  .container h4 {
+  .grid-container h4 {
     text-transform: initial;
     font-size: 18px;
     font-weight: normal;
-    margin: 2px;
   }
 
-  .container p {
+  .grid-container p {
     font-size: 15px;
     text-transform: uppercase;
     opacity: initial;
     font-weight: normal;
-    margin: 2px;
-  }
-
-  .desc {
-    margin: 0px;
   }
 
   @media screen and (min-width: 1570px) {
-    .container h4 {
-      font-size: 25px;
+    .mainimage {
+      min-height: 300px;
     }
+  }
 
-    .container p {
-      font-size: 20px;
+  @media screen and (min-width: 2040px) {
+    .mainimage {
+      min-height:350px ;
     }
+    
+  }
 
-    .mainimage {
-      min-height: 370px;
+  @media screen and (min-width: 2380px) {
+    .grid-container >div {
+        padding-left: 100px;
     }
+    
   }
 }
\ No newline at end of file