Added mobile UI part

CSS/style.css

@@ -4,7 +4,10 @@
     box-sizing: border-box;
 }
 
+html,
 body {
+    width: 100%;
+    height: 100%;
     color: white;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
@@ -101,6 +104,106 @@ body {
     margin-top: 10rem;
 }
 
+.only-mobile {
+    display: none;
+}
+
+
+
+
+/* Styling For Mobile */
+
+.header {
+    margin-top: 0;
+    height: 70px;
+    background-color: #41ca6e;
+}
+
+.logo-mobile img {
+    filter: grayscale(1) invert(1);
+    margin: 20px 0 20px 15px;
+    height: 22px;
+}
+
+.mobile-container {
+    width: 100%;
+    height: 100%;
+    background-color: #41ca6e;
+}
+
+.mobile-image {
+    width: 50%;
+    margin: 2rem 5rem 0 5rem;
+    position: absolute;
+}
+
+.mobile-logo {
+    width: 15%;
+    margin: 2rem 0 1rem 4rem;
+}
+
+.mobile-title {
+    text-transform: uppercase;
+    font-weight: 650;
+    font-size: larger;
+    margin: 0 0 0 4rem;
+}
+
+.mobile-hline {
+    width: 14rem;
+    height: 1.5px;
+    background: white;
+    margin: 10px 0 10px 4rem;
+}
+
+.mobile-offer {
+    text-transform: uppercase;
+    font-weight: 50;
+    font-size: 17px;
+    margin: 0 0 0 4rem;
+}
+
+.arrow {
+    position: absolute;
+    margin: 5rem 0 0 1.5rem;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 15px;
+}
+
+.right {
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+}
+
+.left {
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+}
+
+.right-arrow {
+    margin-left: 17rem;
+}
+
+.dot {
+    height: 10px;
+    width: 10px;
+    background-color: white;
+    border-radius: 50%;
+    position: absolute;
+    margin: 20rem 0 0 10rem;
+}
+
+.circle {
+    position: absolute;
+    width: 10px;
+    padding-bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid white;
+    margin: 20rem 0 0 11rem;
+}
+
 
 
 @media screen and (max-width: 992px) {
@@ -111,8 +214,12 @@ body {
 }
 
 @media screen and (max-width: 600px) {
-
     .row .column {
+        display: none;
+    }
+
+    .only-mobile {
         width: 100%;
+        display: contents;
     }
 }
\ No newline at end of file

desktop.html

@@ -96,6 +96,37 @@
             <img class="image2" src="/Images/image-6.png" alt="image-6">
         </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="right-arrow">
+                <div class="arrow right"></div>
+            </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