Updated after review (mobile code removed) - Without Grid & Flex

CSS/style.css

@@ -115,117 +115,64 @@ body {
     display: none;
 }
 
+/* Media Query for Mobile Devices */
+@media (max-width: 480px) {
+    .main-logo {
+        width: 13%;
+        margin: 15px;
+    }
 
-/* Styling For Mobile */
-
-.header {
-    margin-top: 0;
-    height: 70px;
-    background-color: #41ca6e;
-}
-
-.logo-mobile img {
-    filter: grayscale(1) invert(1);
-    margin: 5% 0 5% 5%;
-    height: 22px;
-}
-
-.mobile-container {
-    margin: auto;
-    width: 100%;
-    min-height: 65em;
-    background-color: #41ca6e;
-    position: relative;
-}
-
-.mobile-image {
-    width: 50%;
-    margin: 10% 0 0 25%;
-    position: absolute;
-}
-
-.mobile-logo {
-    width: 15%;
-    margin: 10% 0 5% 15%;
-}
-
-.mobile-title {
-    display: block;
-    text-transform: uppercase;
-    font-weight: 650;
-    font-size: larger;
-    margin: 0 0 0 15%;
-}
-
-.mobile-hline {
-    width: 60%;
-    height: 1.5px;
-    background: white;
-    margin: 3% 0 3% 15%;
-}
-
-.mobile-offer {
-    text-transform: uppercase;
-    font-weight: 50;
-    margin: 0 0 0 15%;
-}
+    .card {
+        width: 100%;
+        min-height: 31em;
+    }
 
-.arrow {
-    position: absolute;
-    margin: 15% 0 0 5%;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 15px;
-}
+    .hline {
+        width: 40%;
+        margin: 2% 0 2% 25%;
+    }
 
-.right {
-    transform: rotate(-45deg);
-    display: inline-block;
-    margin-left: 80%;
-}
+    .desc {
+        width: 100%;
+    }
 
-.left {
-    transform: rotate(135deg);
-}
+    .image-block {
+        width: 100%;
+        float: none;
+        margin-left: 30%;
+    }
 
-.dot {
-    display: inline-block;
-    height: 10px;
-    width: 10px;
-    background-color: white;
-    border-radius: 50%;
-    position: absolute;
-    margin: 80% 0 0 45%;
-}
+    .image-block .images {
+        float: none;
+        width: 26%;
+        margin: 10% 0 0 5%;
+    }
 
-.circle {
-    display: inline-block;
-    width: 5px;
-    padding-bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid white;
-    margin: 80% 0 0 49%;
-}
+    .image-block .image1 {
+        width: 30%;
+        float: none;
+        margin-top: 8%;
+    }
 
-/* Media Query for Mobile Devices */
-@media (max-width: 480px) {
-    .container {
-        display: none;
+    .image-block .image2 {
+        float: none;
+        width: 45%;
+        margin: 10% 30% 0 0;
     }
 
-    .only-mobile {
-        width: 100%;
-        display: contents;
+    .logo {
+        width: 12%;
+        margin: 21% 0 0 25%;
     }
 }
 
 /* Media Query for low resolution  Tablets, Ipads */
 @media (min-width: 480px) and (max-width: 768px) {
-    .main-logo{
+    .main-logo {
         width: 10%;
         margin: 15px;
     }
+
     .card {
         width: 50%;
         min-height: 31em;
@@ -257,7 +204,7 @@ body {
         margin: 30% 30% 0 0;
     }
 
-    .logo{
+    .logo {
         margin: 25% 0 0 25%;
     }
 }

desktop.html

@@ -120,35 +120,6 @@
             </div>
         </div>
     </div>
-
-
-    <!-- Mobile UI -->
-
-    <div class="only-mobile">
-        <div class="logo-mobile">
-            <img src="/Logos/logo-aoc.png" alt="logo-aoc">
-        </div>
-        <div class="mobile-container">
-            <div>
-                <img class="mobile-logo" src="/Logos/logo-f-secure.png" alt="logo-f-secure">
-                <div class="mobile-title">
-                    <p>Astonishing <br>features requires <br>worry-free security</p>
-                </div>
-                <div class="mobile-hline"></div>
-                <div class="mobile-offer">
-                    <p>1 year free mobile security</p>
-                </div>
-            </div>
-
-            <div class="arrow left"></div>
-            <div class="arrow right"></div>
-
-            <img class="mobile-image" src="/Images/image-1.png" alt="image-1">
-
-            <div class="dot"></div>
-            <div class="circle"></div>
-        </div>
-    </div>
 </body>
 
 </html>
\ No newline at end of file