Brak opisu
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

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