home.liquid 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="robots" content="index, follow">
  7. <meta name="description" content="{{ site.dist.seo_description }}">
  8. <meta name="keywords" content="{{ site.dist.seo_keywords }}">
  9. <meta name="author" content="Mietubl">
  10. <title>{{ site.dist.seo_title }}</title>
  11. {% include '_header_css.liquid' %}
  12. </head>
  13. <body>
  14. <!-- MAIN WRAPPER -->
  15. <div class="body-wrap shop-default shop-cards shop-tech">
  16. <div id="st-container" class="st-container">
  17. <div class="st-pusher">
  18. <div class="st-content">
  19. <div class="st-content-inner">
  20. <!-- HEADER -->
  21. {% include '_header.liquid' %}
  22. <!-- END: HEADER -->
  23. <!-- REVOLUTION SLIDER -->
  24. <div id="rev_slider_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="image-hero39" data-source="gallery">
  25. <!-- START REVOLUTION SLIDER 5.3.0.2 fullwidth mode -->
  26. <div id="rev_slider_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.3.0.2" >
  27. <ul>
  28. <li data-index="rs-1" data-transition="slidevertical" data-slotamount="1" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="1500" data-thumb="../../images/slider/concept-1-100x50.jpg" data-rotate="0" data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" data-title="Intro" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
  29. <!-- MAIN IMAGE -->
  30. <img src="static/picture/iphone-1.jpg" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
  31. <!-- LAYER NR. 2 -->
  32. <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-1-layer-2"
  33. data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
  34. data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
  35. data-fontsize="['16','16','16','16']"
  36. data-lineheight="['16','16','16','16']"
  37. data-width="[300, 300, 300, 300]"
  38. data-height="none"
  39. data-whitespace="nowrap"
  40. data-type="text"
  41. data-responsive_offset="on"
  42. data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
  43. data-textAlign="['left','left','left','left']"
  44. data-paddingtop="[0,0,0,0]"
  45. data-paddingright="[0,0,0,0]"
  46. data-paddingbottom="[0,0,0,0]"
  47. data-paddingleft="[0,0,0,0]"
  48. style="z-index: 11; white-space: nowrap;text-transform:left;">
  49. <span class="text-uppercase strong-400">No more waiting</span>
  50. </div>
  51. <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-1-layer-3"
  52. data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
  53. data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
  54. data-fontsize="['40','40','40','40']"
  55. data-lineheight="['50','40','40','40']"
  56. data-width="[300, 300, 300, 300]"
  57. data-height="none"
  58. data-whitespace="nowrap"
  59. data-type="text"
  60. data-responsive_offset="on"
  61. data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
  62. data-textAlign="['left','left','left','left']"
  63. data-paddingtop="[0,0,0,0]"
  64. data-paddingright="[0,0,0,0]"
  65. data-paddingbottom="[0,0,0,0]"
  66. data-paddingleft="[0,0,0,0]"
  67. style="z-index: 11; white-space: nowrap;text-transform:left;">
  68. <span class="strong-400">
  69. Say hello to
  70. </span>
  71. <br>
  72. <span class="strong-600">
  73. the new Phone X
  74. </span>
  75. </div>
  76. <!-- LAYER NR. 5 -->
  77. <div class="tp-caption" id="slide-1-layer-5"
  78. data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
  79. data-y="['middle','middle','middle','middle']" data-voffset="['180','180','180','180']"
  80. data-fontsize="['40','40','40','40']"
  81. data-lineheight="['50','50','50','50']"
  82. data-width="[300, 300, 300, 300]"
  83. data-height="none"
  84. data-whitespace="nowrap"
  85. data-type="text"
  86. data-responsive_offset="on"
  87. data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
  88. data-textAlign="['left','left','left','left']"
  89. data-paddingtop="[0,0,0,0]"
  90. data-paddingright="[0,0,0,0]"
  91. data-paddingbottom="[0,0,0,0]"
  92. data-paddingleft="[0,0,0,0]"
  93. style="z-index: 11; white-space: nowrap;text-transform:left;">
  94. <a href="#" class="btn btn-base-1 btn-circle">View Details</a>
  95. </div>
  96. </li>
  97. <!-- SLIDE 2 -->
  98. <li data-index="rs-2" data-transition="slidevertical" data-slotamount="1" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="1500" data-thumb="../../images/slider/concept-1-100x50.jpg" data-rotate="0" data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" data-title="Intro" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
  99. <!-- MAIN IMAGE -->
  100. <img src="static/picture/macbook-1.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
  101. <!-- LAYER NR. 2 -->
  102. <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-2-layer-2"
  103. data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
  104. data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
  105. data-fontsize="['16','16','16','16']"
  106. data-lineheight="['16','16','16','16']"
  107. data-width="[300, 300, 300, 300]"
  108. data-height="none"
  109. data-whitespace="nowrap"
  110. data-type="text"
  111. data-responsive_offset="on"
  112. data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
  113. data-textAlign="['left','left','left','left']"
  114. data-paddingtop="[0,0,0,0]"
  115. data-paddingright="[0,0,0,0]"
  116. data-paddingbottom="[0,0,0,0]"
  117. data-paddingleft="[0,0,0,0]"
  118. style="z-index: 11; white-space: nowrap;text-transform:left;">
  119. <span class="text-uppercase strong-400">It's here</span>
  120. </div>
  121. <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-2-layer-3"
  122. data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
  123. data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
  124. data-fontsize="['40','40','40','40']"
  125. data-lineheight="['50','40','40','40']"
  126. data-width="[300, 300, 300, 300]"
  127. data-height="none"
  128. data-whitespace="nowrap"
  129. data-type="text"
  130. data-responsive_offset="on"
  131. data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
  132. data-textAlign="['left','left','left','left']"
  133. data-paddingtop="[0,0,0,0]"
  134. data-paddingright="[0,0,0,0]"
  135. data-paddingbottom="[0,0,0,0]"
  136. data-paddingleft="[0,0,0,0]"
  137. style="z-index: 11; white-space: nowrap;text-transform:left;">
  138. <span class="strong-400">
  139. Introducing
  140. </span>
  141. <br>
  142. <span class="strong-600">
  143. the new Macbook Pro
  144. </span>
  145. </div>
  146. <!-- LAYER NR. 5 -->
  147. <div class="tp-caption" id="slide-2-layer-5"
  148. data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
  149. data-y="['middle','middle','middle','middle']" data-voffset="['180','180','180','180']"
  150. data-fontsize="['40','40','40','40']"
  151. data-lineheight="['50','50','50','50']"
  152. data-width="[300, 300, 300, 300]"
  153. data-height="none"
  154. data-whitespace="nowrap"
  155. data-type="text"
  156. data-responsive_offset="on"
  157. data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
  158. data-textAlign="['left','left','left','left']"
  159. data-paddingtop="[0,0,0,0]"
  160. data-paddingright="[0,0,0,0]"
  161. data-paddingbottom="[0,0,0,0]"
  162. data-paddingleft="[0,0,0,0]"
  163. style="z-index: 11; white-space: nowrap;text-transform:left;">
  164. <a href="#" class="btn btn-base-1 btn-circle">View Details</a>
  165. </div>
  166. </li>
  167. </ul>
  168. <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
  169. </div>
  170. </div><!-- END REVOLUTION SLIDER -->
  171. <section class="slice sct-color-2">
  172. <div class="container">
  173. <div class="section-title section-title--style-1 text-center">
  174. <h3 class="section-title-inner heading-3 strong-600 text-capitalize">
  175. <span>Featured products</span>
  176. </h3>
  177. </div>
  178. {% product mode="list" limit=3 template='__product_list_1.liquid' %}
  179. </div>
  180. </section>
  181. {% comment %}<section class="slice sct-color-2">{% endcomment %}
  182. {% comment %}<div class="container">{% endcomment %}
  183. {% comment %}<div class="row align-items-end pb-100">{% endcomment %}
  184. {% comment %}<div class="col-lg-8 order-lg-2">{% endcomment %}
  185. {% comment %}<div class="block block-image-holder">{% endcomment %}
  186. {% comment %}<div class="block-image">{% endcomment %}
  187. {% comment %}<img src="static/picture/img-promo-wide-2.jpg" class="img-fluid">{% endcomment %}
  188. {% comment %}</div>{% endcomment %}
  189. {% comment %}</div>{% endcomment %}
  190. {% comment %}</div>{% endcomment %}
  191. {% comment %}{% endcomment %}
  192. {% comment %}<div class="col-lg-4 order-lg-1">{% endcomment %}
  193. {% comment %}<div class="feature feature--boxed-border floating-content floating-content--2 float--right mb--100 feature--bg-1 z-depth-2-top">{% endcomment %}
  194. {% comment %}<div class="py-4 px-3">{% endcomment %}
  195. {% comment %}<h2 class="heading heading-3 strong-600">{% endcomment %}
  196. {% comment %}Listening to Music{% endcomment %}
  197. {% comment %}</h2>{% endcomment %}
  198. {% comment %}<span class="clearfix"></span>{% endcomment %}
  199. {% comment %}<p class="mt-4 line-height-1_8">{% endcomment %}
  200. {% comment %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.{% endcomment %}
  201. {% comment %}</p>{% endcomment %}
  202. {% comment %}{% endcomment %}
  203. {% comment %}<div class="btn-container mt-4">{% endcomment %}
  204. {% comment %}<a href="#" class="btn btn-lg btn-gray-dark btn-circle px-4">Explore</a>{% endcomment %}
  205. {% comment %}<a href="#" class="btn btn-lg btn-base-1 btn-circle btn-icon-left px-4">{% endcomment %}
  206. {% comment %}<i class="icon ion-bag"></i> Buy now{% endcomment %}
  207. {% comment %}</a>{% endcomment %}
  208. {% comment %}</div>{% endcomment %}
  209. {% comment %}</div>{% endcomment %}
  210. {% comment %}</div>{% endcomment %}
  211. {% comment %}</div>{% endcomment %}
  212. {% comment %}</div>{% endcomment %}
  213. {% comment %}</div>{% endcomment %}
  214. {% comment %}</section>{% endcomment %}
  215. {% comment %}<section class="slice sct-color-2">{% endcomment %}
  216. {% comment %}<div class="container">{% endcomment %}
  217. {% comment %}<div class="row align-items-start">{% endcomment %}
  218. {% comment %}<div class="col-lg-8">{% endcomment %}
  219. {% comment %}<div class="block block-image-holder">{% endcomment %}
  220. {% comment %}<div class="block-image">{% endcomment %}
  221. {% comment %}<img src="static/picture/img-promo-wide-1.jpg" class="img-fluid">{% endcomment %}
  222. {% comment %}</div>{% endcomment %}
  223. {% comment %}</div>{% endcomment %}
  224. {% comment %}</div>{% endcomment %}
  225. {% comment %}{% endcomment %}
  226. {% comment %}<div class="col-lg-4">{% endcomment %}
  227. {% comment %}<div class="feature feature--boxed-border floating-content floating-content--2 float--left top-0 mt--100 feature--bg-1 z-depth-2-top">{% endcomment %}
  228. {% comment %}<div class="py-4 px-3">{% endcomment %}
  229. {% comment %}<h2 class="heading heading-3 strong-600">{% endcomment %}
  230. {% comment %}Dreaming in Colors{% endcomment %}
  231. {% comment %}</h2>{% endcomment %}
  232. {% comment %}<span class="clearfix"></span>{% endcomment %}
  233. {% comment %}<p class="mt-4 line-height-1_8">{% endcomment %}
  234. {% comment %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.{% endcomment %}
  235. {% comment %}</p>{% endcomment %}
  236. {% comment %}{% endcomment %}
  237. {% comment %}<div class="btn-container mt-4">{% endcomment %}
  238. {% comment %}<a href="#" class="btn btn-lg btn-gray-dark btn-circle px-4">Explore</a>{% endcomment %}
  239. {% comment %}<a href="#" class="btn btn-lg btn-base-1 btn-circle btn-icon-left px-4">{% endcomment %}
  240. {% comment %}<i class="icon ion-bag"></i> Buy now{% endcomment %}
  241. {% comment %}</a>{% endcomment %}
  242. {% comment %}</div>{% endcomment %}
  243. {% comment %}</div>{% endcomment %}
  244. {% comment %}</div>{% endcomment %}
  245. {% comment %}</div>{% endcomment %}
  246. {% comment %}</div>{% endcomment %}
  247. {% comment %}</div>{% endcomment %}
  248. {% comment %}</section>{% endcomment %}
  249. <section class="slice-lg has-bg-cover bg-size-cover" style="background-image: url(static/images/img-slider-1.jpg);">
  250. <div class="mask mask-base-1--style-1"></div>
  251. <div class="container">
  252. <div class="row justify-content-center">
  253. <div class="col-6 text-center">
  254. <h2 class="heading heading-1 strong-600 c-white">
  255. Join the biggest sales of the year
  256. </h2>
  257. <p class="c-white trong-300 mt-4">
  258. Lorem ipsum dolor sit amet adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. There is only that moment, and the incredible certainty that everything under the sun has been written by one hand only.
  259. </p>
  260. <div class="btn-container mt-5">
  261. <a href="/page/sales" class="btn btn-styled btn-white btn-outline btn-circle px-5" target="_blank">Learn more</a>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. </section>
  267. {% comment %}<section class="slice sct-color-1">{% endcomment %}
  268. {% comment %}<div class="container">{% endcomment %}
  269. {% comment %}<div class="row align-items-center">{% endcomment %}
  270. {% comment %}<div class="col-lg-6 ml-lg-auto order-lg-2">{% endcomment %}
  271. {% comment %}<img src="static/picture/img-product-lg-1.jpg" class="img-fluid">{% endcomment %}
  272. {% comment %}</div>{% endcomment %}
  273. {% comment %}{% endcomment %}
  274. {% comment %}<div class="col-lg-5 order-lg-1">{% endcomment %}
  275. {% comment %}<div class="">{% endcomment %}
  276. {% comment %}<h3 class="heading heading-2 strong-600">The most beautiful colors you've ever seen</h3>{% endcomment %}
  277. {% comment %}{% endcomment %}
  278. {% comment %}<p class=" c-gray-light mt-4">{% endcomment %}
  279. {% comment %}There is only that moment, and the incredible certainty that everything under the sun has been written by one hand only.{% endcomment %}
  280. {% comment %}</p>{% endcomment %}
  281. {% comment %}{% endcomment %}
  282. {% comment %}<div class="btn-container mt-5">{% endcomment %}
  283. {% comment %}<a href="#" class="btn btn-base-1 btn-circle btn-icon-left px-4" data-scroll-to="#scrollToSection">{% endcomment %}
  284. {% comment %}<i class="icon ion-android-cart"></i> Add to cart{% endcomment %}
  285. {% comment %}</a>{% endcomment %}
  286. {% comment %}<a href="#" class="btn btn-base-3 btn-circle btn-icon-left px-4" data-scroll-to="#scrollToSection">{% endcomment %}
  287. {% comment %}Learn more{% endcomment %}
  288. {% comment %}</a>{% endcomment %}
  289. {% comment %}</div>{% endcomment %}
  290. {% comment %}</div>{% endcomment %}
  291. {% comment %}</div>{% endcomment %}
  292. {% comment %}</div>{% endcomment %}
  293. {% comment %}</div>{% endcomment %}
  294. {% comment %}</section>{% endcomment %}
  295. {% comment %}<section class="slice-sm bg-base-1">{% endcomment %}
  296. {% comment %}<div class="container sct-inner">{% endcomment %}
  297. {% comment %}<div class="row cols-xs-space cols-sm-space cols-md-space">{% endcomment %}
  298. {% comment %}<div class="col-lg-4 b-lg-right b-inverse">{% endcomment %}
  299. {% comment %}<div class="px-3 py-3 text-lg-center">{% endcomment %}
  300. {% comment %}<h3 class="heading heading-sm c-base-text-1 strong-600 text-uppercase ls-1">Free shipping in 48/72H</h3>{% endcomment %}
  301. {% comment %}<p class="c-white alpha-8 line-height-1_6">{% endcomment %}
  302. {% comment %}Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod{% endcomment %}
  303. {% comment %}</p>{% endcomment %}
  304. {% comment %}</div>{% endcomment %}
  305. {% comment %}</div>{% endcomment %}
  306. {% comment %}{% endcomment %}
  307. {% comment %}<div class="col-lg-4 b-lg-right b-inverse">{% endcomment %}
  308. {% comment %}<div class="px-3 py-3 text-lg-center">{% endcomment %}
  309. {% comment %}<h3 class="heading heading-sm c-base-text-1 strong-600 text-uppercase ls-1">Free returns</h3>{% endcomment %}
  310. {% comment %}<p class="c-white alpha-8 line-height-1_6">{% endcomment %}
  311. {% comment %}Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod{% endcomment %}
  312. {% comment %}</p>{% endcomment %}
  313. {% comment %}</div>{% endcomment %}
  314. {% comment %}</div>{% endcomment %}
  315. {% comment %}{% endcomment %}
  316. {% comment %}<div class="col-lg-4">{% endcomment %}
  317. {% comment %}<div class="px-3 py-3 text-lg-center">{% endcomment %}
  318. {% comment %}<h3 class="heading heading-sm c-base-text-1 strong-600 text-uppercase ls-1">Secure payment</h3>{% endcomment %}
  319. {% comment %}<ul class="inline-links mt-2">{% endcomment %}
  320. {% comment %}<li>{% endcomment %}
  321. {% comment %}<img src="static/picture/visa.png" width="30" class="img-grayscale">{% endcomment %}
  322. {% comment %}</li>{% endcomment %}
  323. {% comment %}<li>{% endcomment %}
  324. {% comment %}<img src="static/picture/mastercard.png" width="30" class="img-grayscale">{% endcomment %}
  325. {% comment %}</li>{% endcomment %}
  326. {% comment %}<li>{% endcomment %}
  327. {% comment %}<img src="static/picture/maestro.png" width="30" class="img-grayscale">{% endcomment %}
  328. {% comment %}</li>{% endcomment %}
  329. {% comment %}<li>{% endcomment %}
  330. {% comment %}<img src="static/picture/paypal.png" width="30" class="img-grayscale">{% endcomment %}
  331. {% comment %}</li>{% endcomment %}
  332. {% comment %}</ul>{% endcomment %}
  333. {% comment %}</div>{% endcomment %}
  334. {% comment %}</div>{% endcomment %}
  335. {% comment %}</div>{% endcomment %}
  336. {% comment %}</div>{% endcomment %}
  337. {% comment %}</section>{% endcomment %}
  338. <!-- FOOTER -->
  339. {% include '_footer.liquid' %}
  340. </div>
  341. </div>
  342. </div><!-- END: st-pusher -->
  343. </div><!-- END: st-container -->
  344. </div><!-- END: body-wrap -->
  345. <a href="#" class="back-to-top btn-back-to-top"></a>
  346. {% include '_footer_js.liquid' %}
  347. </body>
  348. </html>