shopk_app.blade.php
13.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
@extends('layouts.base')
@section('nav-active-shop') nav-current @endsection
@section('content')
<style>
.mobile-nav,.mobile-logo{display:none !important;}
.layout_style01,.layout_style02{width:92%;max-width:1200px;margin:0 auto;}
.layout_style01{ max-width: 1470px; }
.layout_style02{ max-width: 1020px;}
.slider_banner .banner_item_img .bg{ min-height: 500px;}
.slider_banner .banner_item_img .layout{ }
.slider_banner .banner_item_img .info{ position: absolute; left: 0; top: 0;width:100%; height: 100%; text-align: left; display: flex;align-items: center;}
.slider_banner .banner_item_img .title{position:relative;color: #f33f06; font-size: 28px; text-transform:uppercase;padding: 17px 0; line-height: 1.1;}
.slider_banner .banner_item_img .title strong{ display: block; font-size: 56px; font-weight: bold;}
.slider_banner .banner_item_img .title:after{ content: ""; width: 360px; height: 2px; background-color: #f33f06; position: absolute;left: 0; bottom: 0;}
.slider_banner .banner_item_img .text{position:relative; margin: 23px 0 5px; display: inline-block; font-family:"Microsoft YaHei UI Light"; font-size: 18px; line-height: 1.3;width: 525px;max-width:100%;}
.slider_banner .banner_item_img ul{position:relative;display:flex;justify-content: flex-start;flex-wrap: wrap;}
.slider_banner .banner_item_img ul li{margin:8px 8px 0 0 ;}
.slider_banner .banner_item_img ul li img{max-width: 170px; width:auto; height: auto; min-height: auto;}
/*shopk_wrap_els*/
.shopk_wrap_els{padding: 27px 0 0;}
.shopk_items_els{ justify-content: center;}
.shopk_item_els{position: relative;display: flex;align-items: center; justify-content: center; width: 313px; padding: 50px 2%; margin:18px 22px; text-align: center;box-shadow:0 0 10px rgba(0,0,0,.1)}
.shopk_item_els .item_img{ margin-bottom: 40px; }
.shopk_item_els .item_img img{max-width: 130px;}
.shopk_item_els:hover .item_img img{-webkit-animation:swing .9s ease;-o-animation:swing .9s ease;animation:swing .9s ease;}
.shopk_item_els p{font-family:"Microsoft YaHei UI Light"; font-size: 18px; line-height: 1.2;}
.shopk_item_els p strong{font-family:Arial, Helvetica, sans-serif;line-height: 1.2;}
/*index_earn_step*/
.index_work_step{}
.work_step_els{padding-top: 11px;}
.work_step_els .layout{display: flex;justify-content: center;flex-wrap: wrap;}
.work_step_els .step_img{margin-right: 1.2%;width:63%}
.work_step_els .step_img img{}
.step_items_els{margin-top: 20px;width:35.8%}
.step_item_els{ position: relative;display: flex;justify-content: center;align-items:flex-end;padding: 18px 0; }
.step_item_els .item_img{margin-right: 16px;}
.step_item_els .item_img img{width: 163px;}
.step_item_els .item_info{ width: 250px;}
.step_item_els .item_info .item_title{ font-size: 20px; font-weight: normal; }
.step_item_els .item_info .item_text{ }
/*index_download*/
.index_download{}
.index_download .bg{ position: relative; width: 100%;}
.index_download .layout_style01{ }
.index_download .info{ position: absolute; right: 0; top: 0;width:100%;text-align: right;padding: 58px 0;}
.index_download .title{position:relative;color: #f33f06; font-size: 46px; text-transform:uppercase;padding: 17px 0;}
.index_download .title:after{ content: ""; width: 360px; height: 2px; background-color: #f33f06; position: absolute;right: 0; bottom: 0;}
.index_download .text{position:relative; margin: 13px 0 30px; display: inline-block; font-family:"Microsoft YaHei UI Light"; font-size: 18px; line-height: 1.3;width: 520px;max-width:100%; text-align: right;}
.index_download ul{position:relative;display:flex;justify-content: flex-end;flex-wrap: wrap;}
.index_download ul li{margin:8px 0 0 8px;}
.index_download ul li img{max-width: 170px;}
@media only screen and (max-width:950px){
.index_download .title{ font-size: 36px;}
.work_step_els .step_img{margin: 0 auto;width:100%;}
.step_items_els{width: 100%;display: flex;flex-wrap: wrap;justify-content: center;}
.step_item_els{ width: 313px;align-items:flex-start;;flex-wrap: wrap; text-align: center;justify-content: center;margin: 0 22px;}
.step_item_els .item_img{ margin: 0 0 15px;}
.step_item_els .item_info .item_text{width: 100%;}
.index_download .bg{opacity:.1;height:500px; width: auto; max-width: none;}
.index_download .info{ text-align: center;}
.index_download .title:after{ display: none;}
.index_download ul{justify-content: center;}
.index_download .text{ width: 100%; text-align: center;}
}
@media only screen and (max-width:640px) {
.index_download .title{ font-size: 28px;;}
.slider_banner .banner_item_img .info{ text-align: center;}
.slider_banner .banner_item_img .title,.slider_banner .banner_item_img .text{width: 100%;}
.slider_banner .banner_item_img .title{ font-size: 22px;}
.slider_banner .banner_item_img .title strong{ font-size: 32px;;}
.slider_banner .banner_item_img .bg{opacity:.1;}
.slider_banner .banner_item_img ul{justify-content: center;}
.slider_banner .banner_item_img ul li img,.index_download ul li img{max-width: 150px;}
.slider_banner .banner_item_img .title:after{ display: none;}
.slider_banner .banner_item_img .title strong{margin-bottom: 10px;}
}
@media only screen and (max-width:480px){
.shopk_item_els{width: 100%; border: none; }
}
</style>
<div class="web_main index_main">
<!-- banner -->
<section class="slider_banner">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="banner_item_img">
<div>
<img class="bg" src="/style/template/img/demo/banner01.jpg" alt="" />
<div class="info">
<div class="layout_style02">
<h2 class="title wow fadeInLeftA" data-wow-delay=".1s" data-wow-duration=".8s">
<strong>SHOPK</strong> TRUSTED ONLINE Dropshipping APP</h2>
<div class="text wow fadeInLeftA" data-wow-delay=".2s" data-wow-duration=".8s">Empowering millions of mothers, students, KOLs and others who just
simply wanna do side hustles at home and become
economically independent. </div>
<ul class="wow fadeInLeftA" data-wow-delay=".3s" data-wow-duration=".8s">
<!-- <li><a href="javascript:"><img src="/style/template/img/demo/ico01.jpg" /></a></li> -->
<li><a href="https://play.google.com/store/apps/details?id=uni.UNIECA288E"><img src="/style/template/img/demo/ico02.jpg" /></a></li>
<li><a href="/shopk.apk"><img src="/style/template/img/demo/ico03.jpg" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="swiper-control index_swiper_control">
<div class="swiper-buttons">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<section class="shopk_wrap_els">
<div class="layout">
<ul class="shopk_items_els flex_row">
<li class="shopk_item_els wow fadeInUpA" data-wow-delay=".1s" data-wow-duration=".8s">
<div class="item_wrap">
<div class="item_img"><img src="/style/template/img/demo/ico06.png"></div>
<p><strong>9 Warehouses </strong></p>
<p>all over the world</p>
</div>
</li>
<li class="shopk_item_els wow fadeInUpA" data-wow-delay=".2s" data-wow-duration=".8s">
<div class="item_wrap">
<div class="item_img"><img src="/style/template/img/demo/ico07.png"></div>
<p>Empowering <strong>1 million+ </strong></p>
<p>KOLs and their friends/fans</p>
</div>
</li>
<li class="shopk_item_els wow fadeInUpA" data-wow-delay=".3s" data-wow-duration=".8s">
<div class="item_wrap">
<div class="item_img"><img src="/style/template/img/demo/ico08.png"></div>
<p>Strict <strong>quality control</strong></p>
<p>+</p>
<p>Excellent <strong>logistics service</strong></p>
</div>
</li>
</ul>
</div>
</section>
<!-- index_work_step -->
<section class="index_work_step index_layer">
<div class="index_title_bar wow fadeInUpA" data-wow-delay=".1s" data-wow-duration=".8s">
<h1 class="title">HOW SHOPK WORKS ?</h1>
</div>
<div class="work_step_els">
<div class="layout ">
<div class="step_img wow fadeInLeftA" data-wow-delay=".1s" data-wow-duration=".8s">
<img src="/style/template/img/demo/pic01_1.png" />
</div>
<ul class="step_items_els">
<li class="step_item_els wow fadeInUpA" data-wow-delay=".1s" data-wow-duration=".8s">
<div class="item_img"><img src="/style/template/img/demo/ico01.png" /></div>
<div class="item_info">
<h2 class="item_title">Sign In</h2>
<div class="item_text">Join the ShopK Dropshipping Program</div>
</div>
</li>
<li class="step_item_els wow fadeInUpA" data-wow-delay=".2s" data-wow-duration=".8s">
<div class="item_img"><img src="/style/template/img/demo/ico02.png" /></div>
<div class="item_info">
<h2 class="item_title">Recommend or Share</h2>
<div class="item_text">Simply share a QR code or a link of product to your friends/fans</div>
</div>
</li>
<li class="step_item_els wow fadeInUpA" data-wow-delay=".3s" data-wow-duration=".8s">
<div class="item_img"><img src="/style/template/img/demo/ico03.png" /></div>
<div class="item_info">
<h2 class="item_title">CHECK</h2>
<div class="item_text">Check your profit margin</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- index_screenshots -->
<section class="index_screenshots index_layer">
<div class="index_title_bar wow fadeInUpA" data-wow-delay=".1s" data-wow-duration=".8s">
<h1 class="title">Screenshots</h1>
</div>
<div class="screenshots wow fadeInUpA" data-wow-delay=".3s" data-wow-duration=".8s">
<img src="/style/template/img/demo/pic02.jpg" />
</div>
</section>
<section class="index_download index_layer">
<img class="bg" src="/style/template/img/demo/pic03_1.png" />
<div class="info">
<div class="layout_style01 wow fadeInUpA" data-wow-delay=".3s" data-wow-duration=".8s">
<h2 class="title">Download SHOPK App Today!</h2>
<!-- <div class="text">Empowering millions of mothers, students, and others who just -->
<!--simply wanna do side hustles at home to earn online and become -->
<!--economically independent. </div> -->
<ul>
<!--
<li><a href="javascript:"><img src="/style/template/img/demo/ico01.jpg" /></a></li>-->
<li><a href="https://play.google.com/store/apps/details?id=uni.UNIECA288E"><img src="/style/template/img/demo/ico02.jpg" /></a></li>
<li><a href="/shopk.apk"><img src="/style/template/img/demo/ico03.jpg" /></a></li>
</ul>
</div>
</div>
</section>
</div>
@endsection
@section('footer')
<script src="https://www.shopk.com/style/template/js/jquery.min.js"></script>
<script src="https://www.shopk.com/style/template/js/common.js"></script>
<script src="https://www.shopk.com/style/template/js/public.js"></script>
@endsection