desktopview

public/index.html

@@ -19,6 +19,7 @@
         <div class="desc">
           <h4>ASTONISHING FEATURES REQUIRES WORRY-FREE SECURITY</h4>
           <hr>
+          <br/>
           <p>1 YEAR FREE MOBILE SECURITY</p>
         </div>
         <img src="image-1.png" alt="image1" class="mainimage">
@@ -29,6 +30,7 @@
         <div class="desc">
           <h4>BE HOOKED !</h4>
           <hr>
+          <br/>
           <p>2000+ MOVIES FROM BOLLYWOOD</p>
         </div>
         <img src="image-2.png" alt="image2" class="mainimage">
@@ -38,7 +40,7 @@
         <img src="logo-adaptxt.png" id="img2" alt="adaptxt" class="subimage">
         <div class="desc">
           <h4>THE BEST THINGS IN LIFE ARE FREE</h4>
-          <hr>
+          <hr><br/>
           <p>FREE MOBILE POUCH</p>
         </div>
         <img src="image-3.png" alt="image3" class="mainimage">
@@ -48,8 +50,8 @@
         <img src="logo-hungama.png" alt="hungama" class="subimage">
         <div class="desc">
           <h4>THE THUMP NEVER ENDS HERE</h4>
-          <hr>
-          <p>1000s OF SONGS</p>
+          <hr><br/>
+          <p>1000'S OF SONGS </p>
         </div>
         <img src="image-4.png" alt="image4" class="mainimage">
       </div>
@@ -58,7 +60,7 @@
         <img src="logo-adaptxt.png" alt="adapt" class="subimage">
         <div class="desc">
           <h4>BEING GLOBALLY YOU</h4>
-          <hr>
+          <hr><br/>
           <p>21 INDIAN & FOREIGN LANGUAGES</p>
         </div>
         <img src="image-5.png" alt="image5" class="mainimage">
@@ -68,7 +70,7 @@
         <img src="logo-read-where.png" alt="read" class="subimage">
         <div class="desc">
           <h4>FOR THE WISE</h4>
-          <hr>
+          <hr><br/>
           <p>1000 PTS DISCOUNT ON SUBSCRIPTION</p>
         </div>
         <img src="image-6.png" alt="image6" class="mainimage">

src/App.css

 header {
-  padding: 15px;  
+  padding: 15px;
   position: sticky;
   top: 0;
   background-color: #fcf8f8;
 }
 
-header > img {
+header>img {
   filter: invert(1);
   height: 20px;
 }
@@ -15,23 +15,23 @@ header > img {
   font-size: 24px;
   cursor: default;
   margin: 0;
-  
+
 }
 
 .container p {
   color: #f4f9fd;
   opacity: 0.5;
-  font-weight:lighter;
+  font-weight: lighter;
   cursor: default;
   font-size: 18px;
   margin: 0;
 }
 
 hr {
-  border: 1px solid #faf8f8;    
-}
+  border: 1px solid #faf8f8;
+  }
 
-.container > div {  
+.container>div {
   padding: 40px;
   min-height: calc(100% - 50px);
   box-sizing: border-box;
@@ -39,25 +39,30 @@ hr {
 }
 
 .container> :nth-child(1) {
-  background-color: #62c662;  
+  background-color: #62c662;
 }
-.container> :nth-child(2) {  
-  background-color: #f7b528;  
+
+.container> :nth-child(2) {
+  background-color: #f7b528;
 }
-.container> :nth-child(3) {  
-  background-color: #8760f4;  
+
+.container> :nth-child(3) {
+  background-color: #8760f4;
 }
-.container> :nth-child(4) {  
-  background-color: #f18451;  
+
+.container> :nth-child(4) {
+  background-color: #f18451;
 }
-.container> :nth-child(5) {  
-  background-color: #dd5465;  
+
+.container> :nth-child(5) {
+  background-color: #dd5465;
 }
-.container> :nth-child(6) {  
-  background-color: #4dc1e9;  
+
+.container> :nth-child(6) {
+  background-color: #4dc1e9;
 }
 
-.mainimage {  
+.mainimage {
   display: block;
   margin: auto;
   max-width: 100%;
@@ -74,25 +79,62 @@ hr {
 }
 
 @media screen and (min-width: 540px) {
-  .container > div {
+  .container>div {
     float: left;
     width: 50%;
     min-height: 100%;
   }
-  .mainimage{
-    max-height: 400px;
-    padding-top: 50px;  
+
+  .mainimage {    
+    max-height: 200px;
   }
 
-  .subimage{
-   margin-top: 18px;
+  .subimage {
+    margin-top: 18px;
   }
 
   header {
-    position:fixed;
+    position: fixed;
     background-color: initial;
-    filter: invert(1);   
+    filter: invert(1);
   }
- 
+
 }
 
+@media screen and (min-width: 780px) {
+  .container > div {
+    width: 33.3%;
+    min-height: 50%;   
+  }
+
+  .mainimage {
+    /* display: none; */
+    float:right;
+    /* margin: -80px 220px; */
+    margin-top:-120px;
+    max-width: 160px;
+   
+
+  }
+
+  .desc{
+    max-height: 0px;
+  }
+
+  .container h4{
+    font-size: small;
+    max-width: 30%;
+  }
+
+  .container p{
+  font-size: smaller;
+  float: left;
+  }
+  
+  hr{
+    width: 50%;
+    float: left;
+    text-indent: 100px;  
+  }
+ 
+}
\ No newline at end of file