desktopview3

public/index.html

@@ -14,65 +14,91 @@
     <header>
       <img src="logo-aoc.png" alt="aoc">
     </header>
+
     <div class='container'>
+      
       <div>
-        <img src="logo-f-secure.png" alt="fsecure" class="subimage">
-        <div class="desc">
-          <h4>Astonishing features requires worry-free security</h4>
-          <hr>
-          <p>1 Year Free Mobile Security</p>
+        <div class="part1">
+          <img src="logo-f-secure.png" alt="fsecure" class="subimage">
+          <div class="desc">
+            <h4>Astonishing features requires worry-free security</h4>
+            <hr>
+            <p>1 Year Free Mobile Security</p>
+          </div>
+        </div>
+        <div class="part2">
+          <img src="image-1.png" alt="image1" class="mainimage">
         </div>
-        <img src="image-1.png" alt="image1" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-digitainment.png" alt="digit" class="subimage">
-        <div class="desc">
-          <h4>Be hooked!</h4>
-          <hr>
-          <p>2000+ Movies from Bollywood</p>
+        <div class="part1">
+          <img src="logo-digitainment.png" alt="digit" class="subimage">
+          <div class="desc">
+            <h4>Be hooked!</h4>
+            <hr>
+            <p>2000+ Movies from Bollywood</p>
+          </div>
+        </div>
+        <div class="part2">
+          <img src="image-2.png" alt="image2" class="mainimage">
         </div>
-        <img src="image-2.png" alt="image2" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-adaptxt.png" id="img2" alt="adaptxt" class="subimage">
-        <div class="desc">
-          <h4>The best things in life are free</h4>
-          <hr>
-          <p>Free Mobile Pouch</p>
+        <div class="part1">
+          <img src="logo-adaptxt.png" id="img2" alt="adaptxt" class="subimage">
+          <div class="desc">
+            <h4>The best things in life are free</h4>
+            <hr>
+            <p>Free Mobile Pouch</p>
+          </div>
+        </div>
+        <div class="part2">
+          <img src="image-3.png" alt="image3" class="mainimage">
         </div>
-        <img src="image-3.png" alt="image3" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-hungama.png" alt="hungama" class="subimage">
-        <div class="desc">
-          <h4>The thump never ends here</h4>
-          <hr>
-          <p>1000’s of songs </p>
+        <div class="part1">
+          <img src="logo-hungama.png" alt="hungama" class="subimage">
+          <div class="desc">
+            <h4>The thump never ends here</h4>
+            <hr>
+            <p>1000’s of songs </p>
+          </div>
+        </div>
+        <div class="part2">
+          <img src="image-4.png" alt="image4" class="mainimage">
         </div>
-        <img src="image-4.png" alt="image4" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-adaptxt.png" alt="adapt" class="subimage">
-        <div class="desc">
-          <h4>Being globally you</h4>
-          <hr>
-          <p>21 Indian & Foreign Languages</p>
+        <div class="part1">
+          <img src="logo-adaptxt.png" alt="adapt" class="subimage">
+          <div class="desc">
+            <h4>Being globally you</h4>
+            <hr>
+            <p>21 Indian & Foreign Languages</p>
+          </div>
+        </div>
+        <div class="part2">
+          <img src="image-5.png" alt="image5" class="mainimage">
         </div>
-        <img src="image-5.png" alt="image5" class="mainimage">
       </div>
 
       <div>
-        <img src="logo-read-where.png" alt="read" class="subimage">
-        <div class="desc">
-          <h4>For the wise</h4>
-          <hr>
-          <p>1000 pts Discount on Subscription</p>
+        <div class="part1">
+          <img src="logo-read-where.png" alt="read" class="subimage">
+          <div class="desc">
+            <h4>For the wise</h4>
+            <hr>
+            <p>1000 pts Discount on Subscription</p>
+          </div>
+        </div>
+        <div class="part2">
+          <img src="image-6.png" alt="image6" class="mainimage">
         </div>
-        <img src="image-6.png" alt="image6" class="mainimage">
       </div>
     </div>
   </div>

src/App.css

@@ -88,8 +88,6 @@ hr {
     padding-top: 70px;
   }
 
-
-
   header {
     position: fixed;
     background-color: initial;
@@ -100,58 +98,54 @@ hr {
 @media screen and (min-width: 780px) {
   .container>div {
     width: 33.3%;
-    padding: 50px;
-  }  
+    height: 50vh;
+  }
 }
+
 @media screen and (min-width: 992px) {
   .container>div {
     width: 33.3%;
-    min-height: 50vh; 
-    padding: 65px; 
-  }
-
-  .mainimage {
-    float: right;
-    margin-top: -160px;
-    max-width: 130px;
-    min-height: 190px;
-  } 
-
-  .container h4 {
-    max-width: 20%;
-    text-transform: initial;
-    font-size: 12px;
+    min-height: 50vh;
+    padding: 5% 3%;
   }
 
-  .container p {
-    font-size: 11px;
+  .part1{
+    width: 50%;
     float: left;
-    text-transform: uppercase;
+    margin-top: 25px;
   }
 
-  hr {
+  .part2{
     width: 50%;
-    float: left;
-    margin-right: 170px;
+    float: right;
   }
 
-}
+  .subimage{
+    height: 50px;
+  }
 
-@media screen and (min-width: 1540px) {
   .mainimage {
-    float: right;
-    margin-top: -160px;
-    max-width: 185px;
-    min-height: 310px;
-  } 
+    margin-right:0;    
+    max-height: 250px;
+  }
 
   .container h4 {
-    max-width: 50%;
-    font-size: 17px;
+    text-transform: initial;
+    font-size: 18px;
+    font-weight: normal;
   }
 
-  .container p{
-    font-size: 13px;
+  .container p {
+    font-size: 15px;
+    text-transform: uppercase;
+    opacity: initial;
+    font-weight: normal;
   }
 
+  .desc{
+    margin: 0px;
+}
+}
+@media screen and (min-width: 1540px) {
+  
 }
\ No newline at end of file