aio landing responsiveness
This commit is contained in:
+40
-38
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user