暫無描述
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

zeno-landing.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <link
  8. href="./dist/css/plugins/aos.css"
  9. rel="stylesheet"
  10. media="(min-width: 550px)"
  11. />
  12. <link rel="shortcut icon" type="image/x-icon" href="./dist/assets/imgs/favicon.gif">
  13. <link rel="stylesheet" href="./all.css" />
  14. <title>Anwi</title>
  15. <style>
  16. ol > li {
  17. margin: 20px 0px;
  18. }
  19. @keyframes zoomAnimation {
  20. 0% {
  21. transform: scale(1.5);
  22. /* Inner zoom */
  23. }
  24. 100% {
  25. transform: scale(0.5);
  26. /* Zoom out */
  27. }
  28. }
  29. .visual-excellence-image {
  30. animation: zoomAnimation 10s ease-in-out forwards;
  31. /* Change the duration as needed */
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <!-- navbar -->
  37. <!-- <auth-loader></auth-loader> -->
  38. <div id="navbar-head" class=""></div>
  39. <!-- end-navbar -->
  40. <!-- main-body -->
  41. <main
  42. class="main-body home-main-container loading-main"
  43. id="home-main-container"
  44. >
  45. <section class="">
  46. <div class="container-fluid position-relative d-none">
  47. <div class="product_details d-md-none d-block">
  48. <div>
  49. <input type="hidden" name="" id="skudetailitem" />
  50. <h4 class="productname fw-600 ps-3 pt-5"></h4>
  51. </div>
  52. </div>
  53. <div class="text-center">
  54. <img
  55. src="./dist/assets/imgs/banners/anwi-laptop.png"
  56. class="w-100"
  57. />
  58. </div>
  59. <div class="position-absolute product_details d-md-block d-none">
  60. <div>
  61. <input type="hidden" name="" id="skudetailitem" />
  62. <h4 class="productname"></h4>
  63. </div>
  64. </div>
  65. </div>
  66. </section>
  67. <!-- visual excellence section starts -->
  68. <section
  69. class="border border-5 rounded-5 m-md-5 m-0 p-md-0 p-3 d-flex align-items-center flex-column-reverse flex-md-column"
  70. style="border-bottom-width: 35px !important;"
  71. >
  72. <div class="container mt-5">
  73. <div
  74. class="row justify-content-around"
  75. data-aos="fade-up"
  76. data-aos-duration="3000"
  77. >
  78. <h1 class="col-md-4 font-weight-600">
  79. Visual Excellence Redefined
  80. </h1>
  81. <div class="col-md-3 py-3 rounded text-light bg-dark">
  82. Experience the Clarity of 2.5K on a Vibrant IPS Display. Every
  83. Hue, Uncompromisingly Accurate with 100% sRGB. See More, Do More
  84. with a Spacious 16:10 Aspect Ratio.
  85. </div>
  86. </div>
  87. </div>
  88. <div class="d-flex">
  89. <div class="px-5 text-center">
  90. <img
  91. src="./dist/assets/imgs/zeno/14 inch/4.png"
  92. alt=""
  93. class="img-fluid p-md-5 py-5 pb-0"
  94. style="width: 90%;"
  95. data-aos="fade-in"
  96. />
  97. </div>
  98. </div>
  99. </section>
  100. <!-- type in confort -->
  101. <section class="bg-dark">
  102. <div class="mx-md-5 row align-items-center mx-0">
  103. <img
  104. src="./dist/assets/imgs/zeno/14 inch/5.png"
  105. alt=""
  106. class="img-fluid col-md-8 pe-0"
  107. />
  108. <div class="col-md-4 text-white ps-5 ps-md-0 font-weight-600 pe-0">
  109. <h2 data-aos="fade-left" data-aos-duration="3000">
  110. Type in Comfort,
  111. </h2>
  112. <h2
  113. data-aos="fade-left"
  114. data-aos-duration="3000"
  115. data-aos-delay="300"
  116. >
  117. Day or <span class="text-black fs-1">Night</span>
  118. </h2>
  119. </div>
  120. </div>
  121. </section>
  122. <!-- finger print -->
  123. <section>
  124. <div class="container my-5">
  125. <div class="row align-items-center justify-content-around">
  126. <div class="col-md-4">
  127. <h2
  128. class="font-weight-600 mb-0"
  129. style="color: #3c3d48;"
  130. data-aos="fade-left"
  131. data-aos-duration="3000"
  132. >
  133. Seamless Security
  134. </h2>
  135. <h2
  136. class="font-weight-700"
  137. style="color: #00708f;"
  138. data-aos="fade-right"
  139. data-aos-duration="3000"
  140. >
  141. Meets Convenience
  142. </h2>
  143. <p class="text-black-50 fw-700">
  144. Integrated Fingerprint Scanner on the Power Button for Swift,
  145. One-Touch Access. Power Up and Log In with a Single Press.
  146. </p>
  147. </div>
  148. <img
  149. src="./dist/assets/imgs/zeno/14 inch/fingerprint.webp"
  150. alt=""
  151. class="img-fluid col-md-4"
  152. />
  153. </div>
  154. </div>
  155. </section>
  156. <!-- trackpad -->
  157. <section>
  158. <div class="container my-5">
  159. <div
  160. class="row align-items-center flex-column-reverse flex-md-row justify-content-around"
  161. >
  162. <img
  163. src="./dist/assets/imgs/zeno/14 inch/trackpad.png"
  164. alt=""
  165. class="img-fluid col-md-4 rounded-5"
  166. />
  167. <div class="col-md-4">
  168. <h2
  169. class="font-weight-600 mb-0"
  170. style="color: #3c3d48;"
  171. data-aos="fade-down"
  172. data-aos-duration="3000"
  173. >
  174. Navigate with
  175. </h2>
  176. <h2 class="font-weight-700" style="color: #00708f;">
  177. Precision and Ease
  178. </h2>
  179. <p class="text-black-50 fw-700">
  180. A Large Multi-Touch Glass Trackpad That Transforms Every Swipe
  181. and Scroll into a Fluid, Responsive Experience.
  182. </p>
  183. </div>
  184. </div>
  185. </div>
  186. </section>
  187. <!-- dual fan cooling -->
  188. <section>
  189. <div class="container">
  190. <div
  191. class="rounded-5 p-5"
  192. style="
  193. background: linear-gradient(144deg, #000000, #34302d);
  194. padding-top: 100px !important;
  195. "
  196. >
  197. <div class="row mb-3">
  198. <h3 class="text-info col-md-5 fw-700 text-md-start text-end">
  199. stay <u>cool</u> Under pressure
  200. </h3>
  201. <p class="text-white text-end fw-500 col-md-7">
  202. Advanced Dual Fan Cooling System, Engineered to Keep the
  203. Processor and Internal Components Operating at Peak Efficiency.
  204. </p>
  205. </div>
  206. <img
  207. src="./dist/assets/imgs/zeno/14 inch/Fan2.png"
  208. alt=""
  209. data-aos="fade-up"
  210. data-aos-duration="50000"
  211. class="img-fluid rounded-5"
  212. alt="dual fan cooling"
  213. />
  214. </div>
  215. </div>
  216. </section>
  217. <!-- camera -->
  218. <section>
  219. <div class="text-center">
  220. <div>
  221. <img
  222. src="./dist/assets/imgs/zeno/14 inch/22.png"
  223. alt="privacy"
  224. class="img-fluid ps-5"
  225. data-aos="fade-left"
  226. data-aos-duration="3000"
  227. data-aos-delay="200"
  228. />
  229. </div>
  230. <img
  231. src="./dist/assets/imgs/zeno/14 inch/11.png"
  232. alt=""
  233. class="img-fluid"
  234. data-aos="fade-right"
  235. data-aos-duration="3000"
  236. />
  237. </div>
  238. </section>
  239. <section>
  240. <div>
  241. <div class="text-center">
  242. <h3 class="fw-700">Crystal Clear Conferencing</h3>
  243. <div
  244. class="bg-black py-4 text-uppercase text-white bg-gradient d-flex flex-column flex-md-row justify-content-around"
  245. >
  246. <p
  247. data-aos="fade-right"
  248. data-aos-duration="3000"
  249. data-aos-delay="400"
  250. class="mb-0"
  251. >
  252. Capture Every Detail with the 2MP High-Resolution Camera
  253. </p>
  254. <!-- <p class="px-3" class="mb-0">-</p> -->
  255. <p
  256. data-aos="fade-left"
  257. data-aos-duration="3000"
  258. data-aos-delay="400"
  259. class="mb-0"
  260. >
  261. Designed for Professional-grade Video Calls.
  262. </p>
  263. </div>
  264. </div>
  265. <img
  266. src="./dist/assets/imgs/zeno/14 inch/66.png"
  267. alt="camera"
  268. class="img-fluid w-100"
  269. data-aos="zoom-out"
  270. data-aos-duration="3000"
  271. />
  272. </div>
  273. </section>
  274. <section>
  275. <div
  276. class="position-sticky d-flex flex-column flex-md-row justify-content-around align-items-center position-relative"
  277. >
  278. <div class="position-md-absolute" style="bottom: 24%;">
  279. <div class="d-flex" style="color: #979595;">
  280. <h1
  281. class="fw-700"
  282. data-aos="fade-down"
  283. data-aos-delay="300"
  284. data-aos-duration="3000"
  285. >
  286. Sleek
  287. </h1>
  288. <h1
  289. data-aos="flip-left"
  290. data-aos-delay="500"
  291. data-aos-duration="3000"
  292. class="ps-2"
  293. >
  294. Powerhouse
  295. </h1>
  296. </div>
  297. <p class="mb-0 fw-600">Ultra-Thin, Lightweight, All-Metal Body.</p>
  298. <p class="fw-600">
  299. Where Elegant Design Meets Uncompromising Durability.
  300. </p>
  301. </div>
  302. <img
  303. src="./dist/assets/imgs/zeno/14 inch/10.png"
  304. alt=""
  305. class="img-fluid w-50"
  306. alt="sleek"
  307. />
  308. </div>
  309. </section>
  310. <!-- battery -->
  311. <section>
  312. <div
  313. class="container bg-gradient-graphene text-white p-5 border shadow"
  314. style="border: 5px solid #e5a923 !important;"
  315. >
  316. <h1
  317. class="fw-500 mb-4"
  318. style="color: #e5a923;"
  319. data-aos="fade-left"
  320. data-aos-duration="3000"
  321. >
  322. Future-Ready Performance
  323. </h1>
  324. <div
  325. class="d-flex flex-column flex-md-row justify-content-around align-items-start"
  326. >
  327. <div class="fw-500">
  328. <p class="mb-2">Packed with 24GB DDR5 RAM</p>
  329. <p class="mb-2">512GB NVMe 4.0 Storage.</p>
  330. <p>Swift, Expansive, and Ready to Tackle Any Challenge.</p>
  331. </div>
  332. <div>
  333. <img
  334. src="./dist/assets/imgs/allin_imgs/graphene_img.png"
  335. alt=""
  336. class="img-fluid"
  337. alt="performance"
  338. />
  339. </div>
  340. </div>
  341. </div>
  342. </section>
  343. <section>
  344. <div class="container text-center">
  345. <h1
  346. class="fw-500 text-center mb-2 mt-5 fw-700"
  347. style="color: #003e77;"
  348. data-aos="zoom-out"
  349. data-aos-duration="3000"
  350. >
  351. Unleash Blazing Speeds
  352. </h1>
  353. <p style="color: #00417b;" class="mb-0 fw-700">
  354. Equipped with Powerful Intel 12th and 13th Generation Processors.
  355. Experience Cutting-edge Performance for the Most Demanding Tasks.
  356. </p>
  357. <img
  358. src="./dist/assets/imgs/zeno/14 inch/Intel-13th-Gen-CPU.jpeg"
  359. alt=""
  360. class="img-fluid"
  361. />
  362. </div>
  363. </section>
  364. </main>
  365. <!-- footer -->
  366. <div id="footer-head"></div>
  367. <!-- end-footer -->
  368. <!-- <script src="https://player.vimeo.com/api/player.js"></script> -->
  369. <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
  370. <script src="./dist/js/jquery.min.js"></script>
  371. <script src="./libs/owlcarousel/js/owl.carousel.min.js"></script>
  372. <script src="./libs/axios.min.js"></script>
  373. <script src="./libs/cookies.min.js"></script>
  374. <script src="./dist/toaster/toastr.js"></script>
  375. <script src="./dist/js/fontawesome.all.js"></script>
  376. <script src="./dist/js/fontawesome.min.js"></script>
  377. <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
  378. <script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
  379. <script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
  380. <script src="./dist/js/vendor/bootstrap.min.js"></script>
  381. <script src="./dist/js/plugins/slick.js"></script>
  382. <script src="./dist/js/plugins/wow.js"></script>
  383. <script src="./dist/js/plugins/svg-injector.min.js"></script>
  384. <script src="./dist/js/plugins/jquery.nice-select.min.js"></script>
  385. <!-- Main JS -->
  386. <script src="./dist/js/utils/helpers.js"></script>
  387. <script src="./dist/js/footer.js"></script>
  388. <script src="./dist/js/auth/apiservice.js"></script>
  389. <script src="./dist/js/navbar.js"></script>
  390. <script src="./dist/js/main.js"></script>
  391. <script src="./dist/js/index/index.js"></script>
  392. <script src="./dist/js/plugins/aos.js"></script>
  393. <script>
  394. // if (window.width > 578)
  395. AOS.init();
  396. </script>
  397. </body>
  398. </html>