aio landing responsiveness

dist/css/style.css

@@ -89,7 +89,7 @@ button {
   line-height: inherit;
   text-decoration: none;
   cursor: pointer;
-  color: #333333;
+  color: #333333 !important;
 }
 
 a,

zeno-aio-landing.html

@@ -25,11 +25,13 @@
         <section>
             <div class="container">
                 <img src="./dist/assets/imgs/zeno/aio/banner-1-DT.jpg" alt="">
-                <h2 class="text-7xl text-center font-semibold">Anwi Zeno AIO</h2>
-                <h4 class="text-5xl text-center my-3">Sleek Elegance,<span class="font-semibold"> Powerful
+                <h2 class="md:text-7xl text-4xl text-center font-semibold">Anwi Zeno AIO</h2>
+                <h4 class="md:text-5xl text-2xl text-center my-3">Sleek Elegance,<span class="font-semibold"> Powerful
                         Performance</span>
                 </h4>
-                <p class="text-center max-w-5xl text-2xl m-auto my-5"><strong>We don’t just build machines;</strong> we
+                <p class="text-center max-w-5xl md:text-2xl m-auto md:my-5 my-2"><strong>We don’t just build
+                        machines;</strong>
+                    we
                     create tools that
                     make
                     your
@@ -39,17 +41,13 @@
         </section>
         <!-- stand section  -->
         <section>
-            <div class="container bg-black py-24">
+            <div class="container bg-black md:py-24 py-12">
                 <div class="md:grid grid-cols-5 max-w-7xl my-5 mx-auto">
                     <div class="text-white col-span-2 flex flex-col justify-center">
-                        <h2 class="text-3xl font-semibold">Adapts to you</h2>
-                        <p class="text-xl mt-3">Versatile stands give you the freedom to use your display at the angle
-                            with
-                            tilt, height, and
-                            swivel functionality that can adapt to a range of working styles--whether sitting at a desk,
-                            or standing to serve customers, you´ll always have the best view.</p>
+                        <h2 class="text-3xl font-semibold">View Flexibly</h2>
+                        <p class="text-xl mt-3">Rotate Zeno's Screen 180°, Horizontal to Landscape.</p>
                     </div>
-                    <div class="col-span-3 flex justify-center">
+                    <div class="col-span-3 flex justify-center max-sm:mt-24">
                         <img src="./dist/assets/imgs/zeno/aio/stand.png" alt="" class="w-4/6">
                     </div>
                 </div>
@@ -58,12 +56,13 @@
         <!-- display section  -->
         <section>
             <div class="container">
-                <div class=" max-w-7xl m-auto text-center my-5 relative">
+                <div class=" max-w-7xl m-auto md:text-center my-5 relative">
                     <h2 class="text-2xl uppercase "><span
                             class="text-cyan-700 tracking-widest border-t-2 border-cyan-700 pt-2">Display</span>
                     </h2>
-                    <h3 class="text-5xl font-semibold my-4"><span>Display of brilliance</span></h3>
-                    <div class="mx-44 text-xl font-medium">The space-saving ANWI M3402WFA is remarkably slim and light,
+                    <h3 class="md:text-5xl text-3xl font-semibold my-4"><span>Display of brilliance</span></h3>
+                    <div class="md:mx-44 md:text-xl font-medium">The space-saving ANWI M3402WFA is remarkably slim and
+                        light,
                         and
                         its NanoEdge
                         display<sup class="footnote-num"><a href="#footnote-3" aria-label="Footnote 3">3</a></sup>
@@ -77,19 +76,19 @@
                         comfort and low blue-light emissions — so your eyes stay fresh during long viewing sessions.
                     </div>
 
-                    <div class="grid grid-cols-5 my-12">
+                    <div class="grid md:grid-cols-5 grid-cols-2 my-12">
                         <div class="" data-gaid="" data-index="1">
-                            <div class="text-5xl font-medium text-cyan-700">24”</div>
+                            <div class="md:text-5xl text-3xl font-medium text-cyan-700">24”</div>
                             <div class=""><span>FHD NanoEdge display</span>
                             </div>
                         </div>
                         <div class="" data-gaid="" data-index="2">
-                            <div class="text-5xl font-medium text-cyan-700">88%</div>
+                            <div class="md:text-5xl text-3xl font-medium text-cyan-700">88%</div>
                             <div class=""><span>screen-to-body ratio</span>
                             </div>
                         </div>
                         <div class="" data-gaid="" data-index="3">
-                            <div class="text-5xl font-medium text-cyan-700">100%</div>
+                            <div class="md:text-5xl text-3xl font-medium text-cyan-700">100%</div>
                             <div class=""><span>sRGB color gamut</span>
                             </div>
                         </div>
@@ -111,7 +110,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="mt-[-300px]">
+                <div class="md:mt-[-300px] mt-[-100px]">
                     <img src="./dist/assets/imgs/zeno/aio/Banner-2-DT.jpg" alt="">
                 </div>
             </div>
@@ -122,14 +121,16 @@
                 <div>
                     <img src="./dist/assets/imgs/zeno/aio/audio.jpg" alt="">
                 </div>
-                <div class="absolute left-2/3 bottom-1/3">
+                <div class="md:absolute left-2/3 bottom-1/3">
                     <h2 class="uppercase tracking-widest"><span
                             class="text-cyan-700 border-t-2 border-cyan-700 text-2xl">Audio</span>
                     </h2>
-                    <h3 class="text-5xl font-semibold leading-snug my-4"><span>High-fidelity SonicMaster sound, expertly
+                    <h3 class="md:text-5xl text-3xl font-semibold leading-snug my-4"><span>High-fidelity SonicMaster
+                            sound, expertly
                             optimized</span>
                     </h3>
-                    <div class="font-medium text-xl">ANWI SonicMaster, developed by the ANWI Golden Ear team, empowers
+                    <div class="font-medium md:text-xl">ANWI SonicMaster, developed by the ANWI Golden Ear team,
+                        empowers
                         ANWI
                         M3402WFA with
                         quality audio that delivers wider frequency range for clearer vocals and rich, deep bass.
@@ -140,17 +141,17 @@
         </section>
         <!-- beginners section  -->
         <section>
-            <div class="container">
-                <div class="grid grid-cols-2 gap-5 mx-3">
+            <div class="container my-5">
+                <div class="grid md:grid-cols-2 gap-5 mx-3">
                     <div class=""><img
                             src="https://in-files.apjonlinecdn.com/landingpages/content-pages/hp-aio-desktop/images/w100_everyday_img2_v2.jpg"
                             alt="Desktops For Beginners" data-src="" class="img_width_100">
                         <div class=" show-in-mobile"></div>
                     </div>
                     <div class="md:me-44">
-                        <h3 class="text-blue-800 text-xl">Desktops For Beginners</h3>
-                        <h5 class="text-2xl font-medium">Comfortable viewing experience for the little ones.
-                        </h5>
+                        <h3 class="text-blue-800 text-xl">Engage More</h3>
+                        <h5 class="text-2xl font-medium">Optional Touchscreen Perfect for Interactive
+                            Displays, Kiosks.</h5>
                         <ul class="space-y-3 divide-y-2 divide-black">
                             <li>Designed for eye comfort</li>
                             <li>Big, anti-glare screen</li>
@@ -173,14 +174,14 @@
         <!-- ports section  -->
         <section>
             <div class="container">
-                <div class="mt-5 pt-5">
-                    <h2 class="uppercase tracking-widest text-center"><span
+                <div class="md:mt-5 pt-5 md:text-center">
+                    <h2 class="uppercase tracking-widest"><span
                             class="text-cyan-700 border-t-2 border-cyan-700 text-2xl">Connectivity</span>
                     </h2>
-                    <h3 class="text-4xl font-semibold text-center my-3">
+                    <h3 class="md:text-5xl text-3xl font-semibold my-3">
                         <span>Fast, reliable connectivity</span>
                     </h3>
-                    <div class="max-w-4xl m-auto text-xl font-medium text-center">
+                    <div class="max-w-4xl m-auto md:text-xl font-medium">
                         ANWI M3402WFA is loaded with the latest connectivity, including an HDMI-in port that lets you
                         hook up video and audio from an external source — enabling amazing big-screen experiences for
                         your laptop, mobile device, game console or even a set-top TV box. There are also three USB 3.2
@@ -190,7 +191,8 @@
                         integrated security, with a built-in Kensington lock slot for simple and effective physical
                         protection.</div>
 
-                    <div class="grid grid-cols-4 max-w-3xl mx-auto text-center my-24 font-medium">
+                    <div
+                        class="grid md:grid-cols-4 grid-cols-2 gap-8 text-center max-w-3xl mx-auto md:my-24 my-8 font-medium">
                         <div class="">
                             <div class="text-5xl font-medium text-cyan-700"><img class="m-auto"
                                     src="./dist/assets/imgs/zeno/aio/icon_typea.png"
@@ -227,17 +229,17 @@
         </section>
         <!-- secure section  -->
         <section>
-            <div class="container">
+            <div class="container max-sm:my-12">
                 <div class="relative">
                     <img src="./dist/assets/imgs/zeno/aio/security.jpg" alt="" class="">
-                    <div class="absolute top-16 max-w-xl right-16">
+                    <div class="md:absolute top-16 max-w-xl right-16">
                         <h2 class="uppercase tracking-widest"><span
-                                class="text-cyan-700 border-t-2 border-cyan-700 text-2xl">Security</span>
+                                class="text-cyan-700 border-t-2 border-cyan-700 text-2xl">Secure Your Data</span>
                         </h2>
-                        <h3 class="my-6 text-5xl font-semibold">
-                            <span>Secure your crucial data</span>
+                        <h3 class="my-6 md:text-5xl text-3xl font-semibold">
+                            <span>Optional Fingerprint Scanner for Peace of Mind.</span>
                         </h3>
-                        <div class="text-xl font-medium">Remote working is
+                        <div class="md:text-xl font-medium">Remote working is
                             accelerating, and with it the need to keep your crucial data safe. That’s why ANWI M3402WFA
                             is equipped with first-class security. The camera’s shutter slides across in a moment for
                             instant privacy, whenever you need it. There’s also the all-new Microsoft Pluton chip that