浏览代码

code added

sachinganesh 2 年前
父节点
当前提交
6a27d0502f
共有 7 个文件被更改,包括 1233 次插入57 次删除
  1. 306
    16
      dist/html/pages/laptopmulti.html
  2. 5
    5
      styles/base/_base.scss
  3. 70
    3
      styles/base/_utilities.scss
  4. 285
    13
      styles/pages/_productOverview.scss
  5. 555
    0
      styles/style.css
  6. 1
    0
      styles/style.css.map
  7. 11
    20
      styles/style.scss

+ 306
- 16
dist/html/pages/laptopmulti.html 查看文件

7
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8
 
8
 
9
     <link rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />
9
     <link rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />
10
-    <link rel="stylesheet" href="./../../css/main.css" />
10
+    <!-- <link rel="stylesheet" href="./../../css/main.css" /> -->
11
     <link rel="stylesheet" href="../../../styles/style.css">
11
     <link rel="stylesheet" href="../../../styles/style.css">
12
     <title>project</title>
12
     <title>project</title>
13
 </head>
13
 </head>
36
             </div>
36
             </div>
37
 
37
 
38
         </div>
38
         </div>
39
-        <div class="price_footer py-4 w-100 ">
39
+        <div class="price_footer  py-4 w-100 ">
40
             <div class="d-flex align-items-center container justify-content-between">
40
             <div class="d-flex align-items-center container justify-content-between">
41
                 <div class="d-flex">
41
                 <div class="d-flex">
42
                     <div class="boxImgContainer">
42
                     <div class="boxImgContainer">
44
                     </div>
44
                     </div>
45
                     <div class="ps-3 ">
45
                     <div class="ps-3 ">
46
                         <div class="satoshi_font fw-700">Delivery</div>
46
                         <div class="satoshi_font fw-700">Delivery</div>
47
-                        <div  class="satoshi_font">See estimated delivery times by</div>
48
-                        <div  class="satoshi_font ">entering your PIN code</div>
47
+                        <div class="satoshi_font">See estimated delivery times by</div>
48
+                        <div class="satoshi_font ">entering your PIN code</div>
49
                     </div>
49
                     </div>
50
                 </div>
50
                 </div>
51
-                <div class="d-flex align-items-center">
51
+                <div class="d-flex align-items-center ">
52
                     <div class="pe-5">
52
                     <div class="pe-5">
53
-                        <div class="font-1_5 fw-bold">$69,999.00</div>
54
-                        <div class="d-flex align-items-center justify-content-end gap-1 priceCut_multi">
55
-                            <span class="text-decoration-line-through  pe-3">$ 89,999</span><span> Save $ 19,999</span>
53
+                        <div class="font-1_5  fw-700 satoshi_font">$69,999.00</div>
54
+                        <div class="d-flex align-items-center pt-1 justify-content-end gap-1 priceCut_multi">
55
+                            <span class="text-decoration-line-through  pe-3 satoshi_font">$ 89,999</span><span
56
+                                class="satoshi_font text-green-Awni"> Save $ 19,999</span>
56
                         </div>
57
                         </div>
57
                     </div>
58
                     </div>
58
                     <div>
59
                     <div>
59
                         <div>
60
                         <div>
60
-                            <button>Add to Cart</button>
61
+                            <a class="btn btn-dark button_dark" href="#">Add to cart</a>
61
                         </div>
62
                         </div>
62
-                        <div>No Cost EMI Available <span>Learn more</span></div>
63
+                        <div class="satoshi_font PO_learnMore mt-2">No Cost EMI Available <span>Learn more</span></div>
63
                     </div>
64
                     </div>
64
                 </div>
65
                 </div>
65
             </div>
66
             </div>
71
             <div class="font-1_7 overviewProductHeading fw-600">Overview</div>
72
             <div class="font-1_7 overviewProductHeading fw-600">Overview</div>
72
             <div class="font-2_2 text-center fw-bold overviewProductFullTitle">The Laptop of tomorrow with
73
             <div class="font-2_2 text-center fw-bold overviewProductFullTitle">The Laptop of tomorrow with
73
                 4K OLED Dual Screen for Creative Multitasking</div>
74
                 4K OLED Dual Screen for Creative Multitasking</div>
74
-            <div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
75
+            <div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
76
+                eirmod tempor
75
                 invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
77
                 invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
76
                 amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
78
                 amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
77
         </div>
79
         </div>
78
     </section>
80
     </section>
79
 
81
 
80
     <!-- photos display -->
82
     <!-- photos display -->
81
-    <div class="container PO_galleryContainer">
83
+    <section class="container  PO_galleryContainer">
82
         <div class="p-6 pt-0">
84
         <div class="p-6 pt-0">
83
             <div class="PO_gallery_display">
85
             <div class="PO_gallery_display">
84
-               <img class="PO_gallery_display_img" src="./../../assets/imgs/laptop_display.png" />
86
+                <img class="PO_gallery_display_img" src="./../../assets/imgs/laptop_display.png" />
85
             </div>
87
             </div>
86
             <div class="d-flex h-200p pt-5 justify-content-between align-items-center">
88
             <div class="d-flex h-200p pt-5 justify-content-between align-items-center">
87
                 <span class="PO_gallery_box h-100">
89
                 <span class="PO_gallery_box h-100">
116
                 </span>
118
                 </span>
117
             </div>
119
             </div>
118
         </div>
120
         </div>
119
-    </div>
121
+    </section>
120
     <!-- photos display end -->
122
     <!-- photos display end -->
121
 
123
 
122
 
124
 
123
     <!-- specs  -->
125
     <!-- specs  -->
124
-        
126
+    <section class="container p-6">
127
+        <div class="productoverBox row w-100 h-700p">
128
+            <div class="col-sm-5">
129
+                <div class="PO_box">
130
+                    <div class="h-40 ">
131
+                        <div class="box_inner bgBox_Content  br-1">
132
+                            <div class="row h-100">
133
+                                <div class="svg_container col-6 d-flex justify-content-center align-items-center">
134
+                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
135
+                                        width="120" height="120" viewBox="0 0 169 169">
136
+                                        <defs>
137
+                                            <clipPath id="clip-path">
138
+                                                <rect id="Rectangle_619" data-name="Rectangle 619" width="169"
139
+                                                    height="169" transform="translate(0.5 0.5)" />
140
+                                            </clipPath>
141
+                                        </defs>
142
+                                        <g id="Group_929" data-name="Group 929" transform="translate(-0.5 -0.5)">
143
+                                            <g id="Group_928" data-name="Group 928" clip-path="url(#clip-path)">
144
+                                                <path id="Path_654" data-name="Path 654"
145
+                                                    d="M169,30.983V25.35H154.917V22.533a8.45,8.45,0,0,0-8.45-8.45H143.65V0h-5.633V14.083h-5.633V0H126.75V14.083h-5.633V0h-5.633V14.083H109.85V0h-5.633V14.083H98.583V0H92.95V14.083H87.317V0H81.683V14.083H76.05V0H70.417V14.083H64.783V0H59.15V14.083H53.517V0H47.883V14.083H42.25V0H36.617V14.083H30.983V0H25.35V14.083H22.533a8.45,8.45,0,0,0-8.45,8.45V25.35H0v5.633H14.083v5.633H0V42.25H14.083v5.633H0v5.633H14.083V59.15H0v5.633H14.083v5.633H0V76.05H14.083v5.633H0v5.633H14.083V92.95H0v5.633H14.083v5.633H0v5.633H14.083v5.633H0v5.633H14.083v5.633H0v5.633H14.083v5.633H0v5.633H14.083v2.817a8.45,8.45,0,0,0,8.45,8.45H25.35V169h5.633V154.917h5.633V169H42.25V154.917h5.633V169h5.633V154.917H59.15V169h5.633V154.917h5.633V169H76.05V154.917h5.633V169h5.633V154.917H92.95V169h5.633V154.917h5.633V169h5.633V154.917h5.633V169h5.633V154.917h5.633V169h5.633V154.917h5.633V169h5.633V154.917h2.817a8.45,8.45,0,0,0,8.45-8.45V143.65H169v-5.633H154.917v-5.633H169V126.75H154.917v-5.633H169v-5.633H154.917V109.85H169v-5.633H154.917V98.583H169V92.95H154.917V87.317H169V81.683H154.917V76.05H169V70.417H154.917V64.783H169V59.15H154.917V53.517H169V47.883H154.917V42.25H169V36.617H154.917V30.983ZM149.283,146.467a2.817,2.817,0,0,1-2.817,2.817H22.533a2.817,2.817,0,0,1-2.817-2.817V22.533a2.817,2.817,0,0,1,2.817-2.817H146.467a2.817,2.817,0,0,1,2.817,2.817Z" />
146
+                                                <path id="Path_655" data-name="Path 655"
147
+                                                    d="M187.483,72H74.817A2.817,2.817,0,0,0,72,74.817V187.483a2.817,2.817,0,0,0,2.817,2.817H187.483a2.817,2.817,0,0,0,2.817-2.817V74.817A2.817,2.817,0,0,0,187.483,72m-2.817,112.667H77.633V77.633H184.667Z"
148
+                                                    transform="translate(-46.65 -46.65)" />
149
+                                            </g>
150
+                                        </g>
151
+                                    </svg>
152
+
153
+                                </div>
154
+                                <div class="col-6 d-flex justify-content-center align-items-center">
155
+                                    <span> Latest 11th Gen Intel Core i5/i7 H35 </span>
156
+                                </div>
157
+                            </div>
158
+                        </div>
159
+
160
+                    </div>
161
+                    <div class="h-40 ">
162
+                        <div class="box_inner bgBox_Content br-1">
163
+                            2
164
+                        </div>
165
+
166
+                    </div>
167
+                    <div class="d-flex h-20 w-100">
168
+                        <div class="box_inner  box_inner_left w-50">
169
+                            <div style="background-color: yellow;" class="br-1 h-100 bgBox_Content">4</div>
170
+
171
+                        </div>
172
+                        <div class="box_inner box_inner_right w-50">
173
+                            <div style="background-color: yellow;" class="br-1 h-100 bgBox_Content">5</div>
174
+                        </div>
175
+
176
+                    </div>
177
+                </div>
178
+
179
+            </div>
180
+            <div class="col-sm-4">
181
+                <div class="PO_box">
182
+                    <div class="h-30 ">
183
+                        <div class="box_inner bgBox_Content br-1">
184
+                            1
185
+                        </div>
186
+
187
+                    </div>
188
+                    <div class="h-20 ">
189
+                        <div class="box_inner bgBox_Content br-1">
190
+                            2
191
+                        </div>
192
+
193
+                    </div>
194
+                    <div class="h-40 ">
195
+                        <div class="box_inner bgBox_Content br-1">
196
+                            2
197
+                        </div>
198
+
199
+                    </div>
200
+                    <div class="h-10">
201
+                        <div class="box_inner bgBox_Content br-1">
202
+                            2
203
+                        </div>
204
+                    </div>
205
+                </div>
206
+
207
+            </div>
208
+            <div class="col-sm-3">
209
+                <div class="PO_box">
210
+                    <div class="h-35">
211
+                        <div class="box_inner bgBox_Content br-1  ">
212
+                            2
213
+                        </div>
214
+                    </div>
215
+                    <div class="h-20">
216
+                        <div class="box_inner bgBox_Content br-1  ">
217
+                            2
218
+                        </div>
219
+                    </div>
220
+                    <div class="h-30">
221
+                        <div class="box_inner bgBox_Content br-1  ">
222
+                            2
223
+                        </div>
224
+                    </div>
225
+                    <div class="h-15">
226
+                        <div class="box_inner bgBox_Content br-1  ">
227
+                            2
228
+                        </div>
229
+                    </div>
230
+                </div>
231
+
232
+            </div>
233
+        </div>
234
+
235
+    </section>
125
     <!-- specs end -->
236
     <!-- specs end -->
126
 
237
 
238
+    <!-- TWO SCREENS ZERO BOUNDARIES  -->
239
+    <section class="displayscreenpad">
240
+        <div class="">
241
+            <div class=" d-flex flex-column align-items-center justify-content-center">
242
+                <div class="satoshi_font font-1_7 fw-600">
243
+                    Display / Screenpad
244
+                </div>
245
+                <div class="displayscreenpadContainer">
246
+                    <h1 class="displayscreenpadHeading orbitron_font">TWO SCREENS.</h1>
247
+                    <h1 class="displayscreenpadHeading orbitron_font">ZERO BOUNDARIES</h1>
248
+                </div>
249
+                <!-- <div class="w-100 d-flex">
250
+                <div class="displayscreenpadleft w-50  position-relative">
251
+                    <img class="h-100 position-absolute w-100" src="./../../assets/imgs/productoverview/twoscreenleft.png" alt="leftlaptop">
252
+                </div>
253
+                <div class="displayscreenpadright w-50  position-relative">
254
+                    <img class="h-100  position-absolute w-100" src="./../../assets/imgs/productoverview/twoscreenright.png" alt="rightlaptop">
255
+                </div>
256
+               </div> -->
257
+                <div class="container-fluid w-100 d-flex  position-relative displayscreenpadMain">
258
+                    <div class="displayscreenpadleft w-50">
259
+                        <img class="h-100 position-relative w-100"
260
+                            src="./../../assets/imgs/productoverview/twoscreenleft.png" alt="leftlaptop">
261
+                    </div>
262
+                    <div class="displayscreenpadright w-50">
263
+                        <img class="h-100 position-relative w-100"
264
+                            src="./../../assets/imgs/productoverview/twoscreenright.png" alt="rightlaptop">
265
+                    </div>
266
+                </div>
267
+            </div>
268
+        </div>
269
+    </section>
270
+    <section>
271
+
272
+    </section>
273
+    
274
+
275
+    <section class="dualLaptop">
276
+        <div class="zeroBMain_des">
277
+            <div>
278
+                <h1 class="dual_des_heading orbitron_font">Experience Ultimate</h1>
279
+                <h1 class="dual_des_heading orbitron_font">productivity</h1>
280
+            </div>
281
+            <div class="satoshi_font zeroBMain_desP">
282
+                Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
283
+                availability Experience
284
+                ultimate productivityExperience ultimate productivity
285
+                Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
286
+                availability Experience
287
+                ultimate productivityExperience ultimate productivity
288
+            </div>
289
+        </div>
290
+        <div class="w-100 h-100 dualImgs dualImgsOne">
291
+            <div class="dualImgsInner">
292
+                <img src="./../../assets/imgs/productoverview/boudone.png" alt="" class="w-100 h-100">
293
+            </div>
294
+        </div>
295
+        <div class="w-100 h-100 dualImgs dualImgsTwo">
296
+            <div class="dualImgsInner">  
297
+                <img src="./../../assets/imgs/productoverview/boudtwo.png" alt="" class="w-100 h-100">
298
+            </div>
299
+        </div>
300
+    </section>
301
+    <section  class="tableLaptop d-flex justify-content-center align-items-center">
302
+        <div class="justTableLaptop">
303
+            <img src="./../../assets/imgs/productoverview/justtablelaptop.png" alt="" class="w-100 h-100">
304
+        </div>
305
+        <div class="circleTableLaptop">
306
+            <div class="circleTableLaptop_Heading text-center">
307
+                <h1 class="dual_des_heading orbitron_font fw-700">Two Screens.</h1>
308
+                <h1 class="dual_des_heading orbitron_font fw-700"> Zero BOUNDARIES.</h1>
309
+            </div>
310
+            <div class="circleTableLaptopTop">
311
+                <img src="./../../assets/imgs/productoverview/laptoptable.png" alt="" class="w-100 h-100">
312
+            </div>
313
+            <div class="circleTableLaptop_text font_p_Dual">
314
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
315
+                diam nonumy eirmod tempor invidunt ut labore et dolore
316
+                magna aliquyam erat, sed diam voluptua. Lorem ipsum
317
+                dolor sit amet, consetetur sadipscing elitr, sed diam
318
+                nonumy eirmodorem ipsum dolor sit amet, consetetur
319
+                sadipscing elitr, sed
320
+            </div>
321
+        </div>
322
+    </section>
323
+
324
+    <section class="trueLifeDisplay">
325
+        <div class="trueLifeDisplay_headingHD text-center pb-5">
326
+            <h1 class="orbitron_font headingLife fw-700">2.5k QHD +</h1>
327
+            <h1 class="orbitron_font  fw-700">Anwi Truelife Display</h1>
328
+        </div>
329
+        <div class="trueLifeDisplay_des">
330
+            <p class="satoshi_font font_p_Dual">Witness never before like visuals on the "2.5K (QHD+) Mi TrueLife Display that has twice as many pixels as a Full-HD display. Higher contrast ratio combined with up to 300 Nits of brightness ensures vivid colours
331
+                and excellent viewing angles.</p>
332
+        </div>
333
+        <div>
334
+            <img src="../../assets/imgs/productoverview/plantlaptop.png" alt="" class="w-100 h-100">
335
+        </div>
336
+    </section>
337
+
338
+    <section class="controlPanel container">
339
+       <div class="p-5">
340
+           
341
+        <div class="bgControlpanel ">
342
+            <div class="controlPanel_des">
343
+                <h1 class="orbitron_font font_4 fw-700">Customize</h1>
344
+                <h1 class="orbitron_font font_4 fw-700">your workflow</h1>
345
+                <h1 class="orbitron_font font_4 fw-700">with Control Panel</h1>
346
+            </div>
347
+            <div class="bgControlpaneltabs w-100 px-5">
348
+                <ul class="nav nav-tabs d-flex justify-content-between" id="myTab" role="tablist">
349
+                    <li class="nav-item" role="presentation">
350
+                      <button class="nav-link active" id="PhotoTab-tab" data-bs-toggle="tab" data-bs-target="#PhotoTab" type="button" role="tab" aria-controls="PhotoTab" aria-selected="true">Photo</button>
351
+                    </li>
352
+                    <li class="nav-item" role="presentation">
353
+                      <button class="nav-link" id="ProgrammerTab-tab" data-bs-toggle="tab" data-bs-target="#ProgrammerTab" type="button" role="tab" aria-controls="ProgrammerTab" aria-selected="false">ProgrammerTab</button>
354
+                    </li>
355
+                    <li class="nav-item" role="presentation">
356
+                      <button class="nav-link" id="VideoEdtior-tab" data-bs-toggle="tab" data-bs-target="#VideoEdtior" type="button" role="tab" aria-controls="VideoEdtior" aria-selected="false">VideoEdtior</button>
357
+                    </li>
358
+                  
359
+                    <li class="nav-item" role="presentation">
360
+                      <button class="nav-link" id="Music_Artist-tab" data-bs-toggle="tab" data-bs-target="#Music_Artist" type="button" role="tab" aria-controls="Music_Artist" aria-selected="false">Music Artist</button>
361
+                    </li>
362
+                    <li class="nav-item" role="presentation">
363
+                      <button class="nav-link" id="3D_ARTIST-tab" data-bs-toggle="tab" data-bs-target="#    " type="button" role="tab" aria-controls="3D_ARTIST" aria-selected="false">3D_ARTIST</button>
364
+                    </li>
365
+                    <li class="nav-item" role="presentation">
366
+                        <button class="nav-link " id="gamerTab-tab" data-bs-toggle="tab" data-bs-target="#gamerTab" type="button" role="tab" aria-controls="gamerTab" aria-selected="false">Game</button>
367
+                      </li>
368
+                  </ul>
369
+                  <div class="tab-content" id="tabLaptopContent">
370
+    
371
+                    <div class="tab-pane fade show active" id="PhotoTab" role="tabpanel" aria-labelledby="PhotoTab-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, deleniti!</div>
372
+    
373
+                    <div class="tab-pane fade" id="ProgrammerTab" role="tabpanel" aria-labelledby="ProgrammerTab-tab">ProgrammerTab</div>
374
+    
375
+                    <div class="tab-pane fade" id="VideoEdtior" role="tabpanel" aria-labelledby="VideoEdtior-tab">
376
+                        <img src="./../../assets/imgs/productoverview/tablaptop.png" class="w-100 h-100" alt="">
377
+                    </div>
378
+    
379
+                    <div class="tab-pane fade" id="Music_Artist" role="tabpanel" aria-labelledby="Music_Artist-tab">Music_Artist</div>
380
+    
381
+                    <div class="tab-pane fade" id="3D_ARTIST" role="tabpanel" aria-labelledby="3D_ARTIST-tab">3d</div>
382
+    
383
+                    <div class="tab-pane fade" id="gamerTab" role="tabpanel" aria-labelledby="gamerTab-tab">game</div>
384
+                  </div>
385
+            </div>
386
+        </div>
387
+    </div>
388
+    </section>
389
+    <section class="designedProLaptop">
390
+        <div class="px-5 designedProLaptop_title">
391
+            <h1 class="designedProLaptop_title_text orbitron_font">Designed for
392
+               </h1>
393
+               <h1 class="designedProLaptop_title_text orbitron_font"> a Pro</h1>
394
+        </div>
395
+       <div class="designedProLaptop_img">
396
+        <img src="./../../assets/imgs/productoverview/designedPro.png" alt="" class="img-fluid">
397
+       </div>
398
+       <ul class="">
399
+        <li>
400
+            <span>17.3</span> mm Thin   
401
+           
402
+        </li> 
403
+        <li>
404
+            <span>1.46</span> kg Light
405
+           
406
+        </li>
407
+        <li>
408
+            <span>0.3</span> mm Depeth
409
+          
410
+        </li>
411
+        <li>  <span></span> Superior quality 
412
+            hinge tested for up 
413
+            to <span> 30,000 operations</span></li>
414
+       </ul>
415
+    </section>
416
+
127
     <!-- footer -->
417
     <!-- footer -->
128
-    <div id="footer-head"></div>
418
+    <!-- <section id="footer-head"></section> -->
129
     <!-- end-footer -->
419
     <!-- end-footer -->
130
 
420
 
131
     <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
421
     <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>

+ 5
- 5
styles/base/_base.scss 查看文件

6
     box-sizing: inherit;
6
     box-sizing: inherit;
7
 }
7
 }
8
 
8
 
9
-html {
10
-   font-size: 100%;
11
-}
9
+// html {  
10
+//     font-size: 62.5%;
11
+// }
12
 
12
 
13
 body {
13
 body {
14
     box-sizing: border-box;
14
     box-sizing: border-box;
15
-  
16
-
15
+    // font-size: 62.5%;
16
+    overflow-x: hidden;
17
     @include respond(tab-port) {
17
     @include respond(tab-port) {
18
         padding: 0;
18
         padding: 0;
19
     }
19
     }

+ 70
- 3
styles/base/_utilities.scss 查看文件

4
   background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
4
   background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
5
 }
5
 }
6
 
6
 
7
+.text-green-Awni{
8
+  color: #0A886A;
9
+}
10
+
11
+.orbitron_font{
12
+  font-family: 'Orbitron', sans-serif;
13
+}
14
+
7
 // font size
15
 // font size
8
 .font-3 {
16
 .font-3 {
9
   font-size: 3rem;
17
   font-size: 3rem;
24
   font-size: 2.2rem;
32
   font-size: 2.2rem;
25
 }
33
 }
26
 
34
 
35
+.font-2_7{
36
+  font-size: 2.7rem;
37
+}
38
+
39
+
40
+.font_4{
41
+  font-size: 4rem;
42
+}
27
 
43
 
28
 
44
 
29
 .subtitle_1 {
45
 .subtitle_1 {
30
   font-size: 1.5rem;
46
   font-size: 1.5rem;
31
 }
47
 }
32
 
48
 
33
-.gap-1 {
34
-  gap: 0.7rem;
35
-}
49
+
36
 
50
 
37
 .banner_heading_4 {
51
 .banner_heading_4 {
38
   font-size: 3rem;
52
   font-size: 3rem;
55
 
69
 
56
 // heights
70
 // heights
57
 
71
 
72
+.h-10{
73
+  height: 10%;
74
+}
75
+
76
+.h-15{
77
+  height: 15%;
78
+}
79
+
80
+.h-20{
81
+  height: 20%;
82
+}
83
+
84
+.h-30{
85
+  height: 30%;
86
+}
87
+
88
+.h-33{
89
+  height: 33%;
90
+}
91
+.h-34{
92
+  height: 34%;
93
+}
94
+.h-35{
95
+  height: 35%;
96
+}
97
+
98
+.h-40{
99
+  height: 40%;
100
+}
101
+
58
 .vh_60{
102
 .vh_60{
59
   height: 60vh;
103
   height: 60vh;
60
 }
104
 }
61
 
105
 
106
+.vh-70{
107
+  height: 70vh;
108
+}
109
+
62
 .vh-77{
110
 .vh-77{
63
   height: 77vh;
111
   height: 77vh;
64
 }
112
 }
71
   height: 15vh;
119
   height: 15vh;
72
 }
120
 }
73
 
121
 
122
+.h-700p{
123
+  height: 700px;
124
+}
125
+
74
 
126
 
75
 // font weight
127
 // font weight
76
 
128
 
89
 
141
 
90
 
142
 
91
 
143
 
144
+// gap
145
+
146
+.gap-1 {
147
+  gap: 0.7rem;
148
+}
149
+
150
+.gap-2{
151
+  gap:2rem
152
+}
153
+
154
+// border-radius
155
+
156
+.br-1{
157
+  border-radius: 1rem;
158
+}

+ 285
- 13
styles/pages/_productOverview.scss 查看文件

1
-.productoverviewmain{
1
+.productoverviewmain {
2
   background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
2
   background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
3
-  background-color: #C9DBB5;
4
-  background-size:     cover;                    
5
-  background-repeat:   no-repeat;
6
-  background-position: center; 
3
+  background-color: white;
4
+  background-size: cover;
5
+  background-repeat: no-repeat;
6
+  background-position: center;
7
 
7
 
8
   position: relative;
8
   position: relative;
9
-}  
9
+}
10
+
11
+$PO_footerText: 0.7rem;
10
 
12
 
11
 .photo_dual {
13
 .photo_dual {
12
   width: 40rem;
14
   width: 40rem;
13
 }
15
 }
14
 
16
 
15
 .price_footer {
17
 .price_footer {
16
-  background: rgba( 255, 255, 255, 0.25 );
17
-/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
18
-backdrop-filter: blur( 4px );
19
--webkit-backdrop-filter: blur( 4px );
18
+  background: rgba(255, 255, 255, 0.25);
19
+  /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
20
+  backdrop-filter: blur(4px);
21
+  -webkit-backdrop-filter: blur(4px);
20
 
22
 
21
-border: 1px solid rgba( 255, 255, 255, 0.18 );
23
+  border: 1px solid rgba(255, 255, 255, 0.18);
22
   border: 2px solid;
24
   border: 2px solid;
23
 
25
 
24
   position: absolute;
26
   position: absolute;
27
+  z-index: 999;
25
   bottom: 0;
28
   bottom: 0;
26
   left: 0;
29
   left: 0;
27
 }
30
 }
31
 }
34
 }
32
 
35
 
33
 .priceCut_multi {
36
 .priceCut_multi {
34
-  font-size: 0.7rem;
37
+  font-size: $PO_footerText;
38
+}
39
+
40
+.PO_learnMore {
41
+  font-size: $PO_footerText;
35
 }
42
 }
36
 
43
 
37
 .productOverview .overviewProductHeading {
44
 .productOverview .overviewProductHeading {
38
   font-size: 2.1rem;
45
   font-size: 2.1rem;
46
+  font-family: "satoshi", sans-serif;
47
+  font-weight: 500;
39
 }
48
 }
40
 
49
 
41
 .productOverview .overviewProductFullTitle {
50
 .productOverview .overviewProductFullTitle {
42
-  padding: 2rem 13rem;
51
+  padding: 2rem 11rem;
43
   font-size: 3rem;
52
   font-size: 3rem;
53
+  font-family: "orbitron", sans-serif;
44
 }
54
 }
45
 
55
 
46
 .productOverview .overviewProductDes {
56
 .productOverview .overviewProductDes {
47
   padding: 0 2rem;
57
   padding: 0 2rem;
48
   font-size: 1.5rem;
58
   font-size: 1.5rem;
59
+  font-family: "satoshi", sans-serif;
49
 }
60
 }
50
 
61
 
51
 .PO_galleryContainer .PO_gallery_display {
62
 .PO_galleryContainer .PO_gallery_display {
66
   padding: 2rem;
77
   padding: 2rem;
67
   background-color: #eeeeee;
78
   background-color: #eeeeee;
68
 }
79
 }
80
+
81
+.productoverBox {
82
+  .PO_box {
83
+    // background-color: red;
84
+    height: 100%;
85
+    > div {
86
+      padding: 1rem 0rem;
87
+    }
88
+    .box_inner {
89
+      height: 100%;
90
+    }
91
+
92
+    .bgBox_Content {
93
+      background: rgb(236, 236, 236);
94
+      background: linear-gradient(
95
+        90deg,
96
+        rgba(236, 236, 236, 1) 4%,
97
+        rgba(118, 118, 118, 1) 100%
98
+      );
99
+    }
100
+    .box_inner_right {
101
+      padding-left: 1rem;
102
+    }
103
+    .box_inner_left {
104
+      padding-right: 1rem;
105
+    }
106
+  }
107
+}
108
+
109
+.displayscreenpad {
110
+  .displayscreenpadContainer {
111
+    text-align: center;
112
+  }
113
+  .displayscreenpadHeading {
114
+    font-size: 8rem;
115
+  }
116
+
117
+  .displayscreenpadMain {
118
+    top: -108px;
119
+  }
120
+  .displayscreenpadleft {
121
+    > img {
122
+      left: -8%;
123
+    }
124
+  }
125
+
126
+  .displayscreenpadright {
127
+    > img {
128
+      right: -10%;
129
+    }
130
+  }
131
+}
132
+
133
+.dual_des_heading{
134
+  font-size: 3rem;
135
+}
136
+
137
+
138
+.dualLaptop{
139
+  width: 100vw;
140
+  height: 1000px;
141
+  top:-100px;
142
+  margin-bottom: -100px;
143
+  position: relative;
144
+
145
+
146
+  .zeroBMain_desP{
147
+    font-size: 1.2rem;
148
+  }
149
+  .zeroBMain_des{
150
+    position: absolute;
151
+    top: 0;
152
+    right: 0;
153
+    max-width: 700px;
154
+    padding-right: 9rem;
155
+  }
156
+
157
+  .dualImgs{
158
+    position: absolute;
159
+
160
+
161
+    .dualImgsInner{
162
+      width: 63%;
163
+    }
164
+  }
165
+
166
+  
167
+  
168
+  .dualImgsOne{
169
+    top:0;
170
+    left: -10%;
171
+    transform: rotate(343deg);
172
+    width: 68%;
173
+  }
174
+  
175
+  .dualImgsTwo{
176
+    // top:0;
177
+    // right: -80%;
178
+    // transform: rotate(330deg);
179
+
180
+    top: 31%;
181
+    right: -68%;
182
+    transform: rotate(339deg);
183
+    .dualImgsInner{
184
+      width: 82%;
185
+    }
186
+  }
187
+}
188
+
189
+.tableLaptop{
190
+  margin-top: 300px;
191
+
192
+  // border: 1px solid;
193
+  height: 90vh;
194
+  width: 100vw;
195
+  position: relative;
196
+  .circleTableLaptop_Heading{
197
+    position: absolute;
198
+    top: 50%;
199
+    left: 50%;
200
+    transform: translate(-50%, -311%);
201
+  }
202
+  .justTableLaptop{
203
+    position: absolute;
204
+    width: 86%;
205
+    top: -10px;
206
+    right: 128px;
207
+    z-index: 1;
208
+  }
209
+
210
+  .circleTableLaptop{
211
+    background-color: #ECECEC;
212
+    height: 70rem;
213
+    width: 70rem;
214
+    border-radius: 50%;
215
+    position: relative;
216
+    overflow: hidden;
217
+
218
+   
219
+    .circleTableLaptopTop{
220
+      
221
+    bottom: -3%;
222
+    width: 80%;
223
+    position: absolute;
224
+    top: 50%;
225
+    left: 50%;
226
+    transform: translate(-50%, 2%);
227
+
228
+    }
229
+  }
230
+
231
+  .circleTableLaptop_text{
232
+    position: absolute;
233
+    top: 50%;
234
+    left: 50%;
235
+    transform: translate(-50%, 168%);
236
+
237
+  }
238
+
239
+  margin-bottom: 300px;
240
+}
241
+
242
+.trueLifeDisplay{
243
+ .trueLifeDisplay_headingHD{
244
+  >.headingLife{
245
+    font-size: 6rem; 
246
+  }
247
+ }
248
+
249
+ .trueLifeDisplay_des{
250
+  padding: 0 10rem;
251
+
252
+ }
253
+}
254
+
255
+.font_p_Dual{
256
+  font-size: 1.2rem;
257
+}
258
+
259
+.controlPanel{
260
+  
261
+  margin-top: 10rem;
262
+  padding-bottom: 550px;
263
+  .controlPanel_des{
264
+    position: absolute;
265
+    top: -170px;
266
+    left: 80px;
267
+
268
+  }
269
+  .bgControlpanel{
270
+    min-height: 100vh;
271
+    background-color: #ECECEC;
272
+    border-radius: 157px;
273
+    position: relative;
274
+
275
+    .bgControlpaneltabs{
276
+      
277
+      position: absolute;
278
+      top: 100px;
279
+      right: 0;
280
+
281
+      .nav-tabs{
282
+        border-bottom: 1px solid;
283
+        margin-bottom: 2rem;
284
+      }
285
+      .nav-item{
286
+        position: relative;
287
+        border: none;
288
+      }
289
+     
290
+    
291
+      .nav-tabs .nav-link {
292
+       position: relative;
293
+       color: black;
294
+       font-weight: 500;
295
+      }
296
+    
297
+      .nav-tabs .nav-link.active{
298
+        border: none;
299
+        background-color: transparent;
300
+      }
301
+    
302
+      .nav-tabs .nav-link.active::before {
303
+        display: block;
304
+      }
305
+    
306
+      .nav-item .nav-link::before{
307
+        content: '';
308
+        position: absolute;
309
+        width: 100%;
310
+        height: 5px;
311
+        bottom: -2px;
312
+        right: 0;
313
+        display: none;
314
+        background-color: black;
315
+      }
316
+    }
317
+  }
318
+ 
319
+
320
+}
321
+
322
+.designedProLaptop{
323
+  position: relative;
324
+  .designedProLaptop_title{
325
+    position: absolute;
326
+    top: -200px;
327
+    left: 0;
328
+    z-index: 1;
329
+
330
+    
331
+  }
332
+  .designedProLaptop_title_text{
333
+    font-size: 10rem;
334
+  }
335
+  .designedProLaptop_img{
336
+    position: absolute;
337
+    top: 0;
338
+    right: 700px;
339
+  }
340
+}

+ 555
- 0
styles/style.css 查看文件

1
+/*
2
+0 - 600px:      Phone
3
+600 - 900px:    Tablet portrait
4
+900 - 1200px:   Tablet landscape
5
+[1200 - 1800] is where our normal styles apply
6
+1800px + :      Big desktop
7
+
8
+$breakpoint arguement choices:
9
+- phone
10
+- tab-port
11
+- tab-land
12
+- big-desktop
13
+
14
+ORDER: Base + typography > general layout + grid > page layout > components
15
+
16
+1em = 16px
17
+*/
18
+*,
19
+*::after,
20
+*::before {
21
+  margin: 0;
22
+  padding: 0;
23
+  box-sizing: inherit;
24
+}
25
+
26
+body {
27
+  box-sizing: border-box;
28
+  overflow-x: hidden;
29
+}
30
+@media only screen and (max-width: 56.25em) {
31
+  body {
32
+    padding: 0;
33
+  }
34
+}
35
+
36
+.bg-green {
37
+  background-color: #3bb78f;
38
+  background: linear-gradient(90deg, #3bb78f 0%, rgb(11, 171, 100) 35%, rgb(59, 183, 143) 100%);
39
+}
40
+
41
+.text-green-Awni {
42
+  color: #0A886A;
43
+}
44
+
45
+.orbitron_font {
46
+  font-family: "Orbitron", sans-serif;
47
+}
48
+
49
+.font-3 {
50
+  font-size: 3rem;
51
+}
52
+
53
+.font-1_5 {
54
+  font-size: 2rem;
55
+}
56
+
57
+.font-1_7 {
58
+  font-size: 1.7rem;
59
+}
60
+
61
+.font-2 {
62
+  font-size: 2.2rem;
63
+}
64
+
65
+.font-2_2 {
66
+  font-size: 2.2rem;
67
+}
68
+
69
+.font-2_7 {
70
+  font-size: 2.7rem;
71
+}
72
+
73
+.font_4 {
74
+  font-size: 4rem;
75
+}
76
+
77
+.subtitle_1 {
78
+  font-size: 1.5rem;
79
+}
80
+
81
+.banner_heading_4 {
82
+  font-size: 3rem;
83
+}
84
+
85
+.padding_top_14 {
86
+  padding-top: 14rem;
87
+}
88
+
89
+.p-6 {
90
+  padding: 5rem;
91
+}
92
+
93
+.padding_top_10 {
94
+  padding-top: 10rem;
95
+}
96
+
97
+.h-10 {
98
+  height: 10%;
99
+}
100
+
101
+.h-15 {
102
+  height: 15%;
103
+}
104
+
105
+.h-20 {
106
+  height: 20%;
107
+}
108
+
109
+.h-30 {
110
+  height: 30%;
111
+}
112
+
113
+.h-33 {
114
+  height: 33%;
115
+}
116
+
117
+.h-34 {
118
+  height: 34%;
119
+}
120
+
121
+.h-35 {
122
+  height: 35%;
123
+}
124
+
125
+.h-40 {
126
+  height: 40%;
127
+}
128
+
129
+.vh_60 {
130
+  height: 60vh;
131
+}
132
+
133
+.vh-70 {
134
+  height: 70vh;
135
+}
136
+
137
+.vh-77 {
138
+  height: 77vh;
139
+}
140
+
141
+.vh-85 {
142
+  height: 85vh;
143
+}
144
+
145
+.vh-15 {
146
+  height: 15vh;
147
+}
148
+
149
+.h-700p {
150
+  height: 700px;
151
+}
152
+
153
+.fw-600 {
154
+  font-weight: 600;
155
+}
156
+
157
+.fw-700 {
158
+  font-weight: 700;
159
+}
160
+
161
+.h-200p {
162
+  height: 200px;
163
+}
164
+
165
+.gap-1 {
166
+  gap: 0.7rem;
167
+}
168
+
169
+.gap-2 {
170
+  gap: 2rem;
171
+}
172
+
173
+.br-1 {
174
+  border-radius: 1rem;
175
+}
176
+
177
+.button_dark {
178
+  -webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
179
+          clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
180
+  padding-right: 1.7rem;
181
+  padding-bottom: 0.6rem;
182
+  padding-top: 0.6rem;
183
+  border-radius: 10px;
184
+}
185
+
186
+.productoverviewmain {
187
+  background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
188
+  background-color: white;
189
+  background-size: cover;
190
+  background-repeat: no-repeat;
191
+  background-position: center;
192
+  position: relative;
193
+}
194
+
195
+.photo_dual {
196
+  width: 40rem;
197
+}
198
+
199
+.price_footer {
200
+  background: rgba(255, 255, 255, 0.25);
201
+  /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
202
+  backdrop-filter: blur(4px);
203
+  -webkit-backdrop-filter: blur(4px);
204
+  border: 1px solid rgba(255, 255, 255, 0.18);
205
+  border: 2px solid;
206
+  position: absolute;
207
+  z-index: 999;
208
+  bottom: 0;
209
+  left: 0;
210
+}
211
+
212
+.boxImgContainer {
213
+  width: 4rem;
214
+}
215
+
216
+.priceCut_multi {
217
+  font-size: 0.7rem;
218
+}
219
+
220
+.PO_learnMore {
221
+  font-size: 0.7rem;
222
+}
223
+
224
+.productOverview .overviewProductHeading {
225
+  font-size: 2.1rem;
226
+  font-family: "satoshi", sans-serif;
227
+  font-weight: 500;
228
+}
229
+
230
+.productOverview .overviewProductFullTitle {
231
+  padding: 2rem 11rem;
232
+  font-size: 3rem;
233
+  font-family: "orbitron", sans-serif;
234
+}
235
+
236
+.productOverview .overviewProductDes {
237
+  padding: 0 2rem;
238
+  font-size: 1.5rem;
239
+  font-family: "satoshi", sans-serif;
240
+}
241
+
242
+.PO_galleryContainer .PO_gallery_display {
243
+  min-height: 500px;
244
+  width: 100%;
245
+  background: white;
246
+  background: linear-gradient(180deg, white 7%, rgba(255, 142, 158, 0.3019607843) 52%, rgba(235, 134, 148, 0.4705882353) 100%);
247
+  position: relative;
248
+}
249
+
250
+.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
251
+  position: absolute;
252
+  top: 50%;
253
+  left: 50%;
254
+  transform: translate(-50%, -50%);
255
+}
256
+
257
+.PO_galleryContainer .PO_gallery_box_inner {
258
+  padding: 2rem;
259
+  background-color: #eeeeee;
260
+}
261
+
262
+.productoverBox .PO_box {
263
+  height: 100%;
264
+}
265
+.productoverBox .PO_box > div {
266
+  padding: 1rem 0rem;
267
+}
268
+.productoverBox .PO_box .box_inner {
269
+  height: 100%;
270
+}
271
+.productoverBox .PO_box .bgBox_Content {
272
+  background: rgb(236, 236, 236);
273
+  background: linear-gradient(90deg, rgb(236, 236, 236) 4%, rgb(118, 118, 118) 100%);
274
+}
275
+.productoverBox .PO_box .box_inner_right {
276
+  padding-left: 1rem;
277
+}
278
+.productoverBox .PO_box .box_inner_left {
279
+  padding-right: 1rem;
280
+}
281
+
282
+.displayscreenpad .displayscreenpadContainer {
283
+  text-align: center;
284
+}
285
+.displayscreenpad .displayscreenpadHeading {
286
+  font-size: 8rem;
287
+}
288
+.displayscreenpad .displayscreenpadMain {
289
+  top: -108px;
290
+}
291
+.displayscreenpad .displayscreenpadleft > img {
292
+  left: -8%;
293
+}
294
+.displayscreenpad .displayscreenpadright > img {
295
+  right: -10%;
296
+}
297
+
298
+.dual_des_heading {
299
+  font-size: 3rem;
300
+}
301
+
302
+.dualLaptop {
303
+  width: 100vw;
304
+  height: 1000px;
305
+  top: -100px;
306
+  margin-bottom: -100px;
307
+  position: relative;
308
+}
309
+.dualLaptop .zeroBMain_desP {
310
+  font-size: 1.2rem;
311
+}
312
+.dualLaptop .zeroBMain_des {
313
+  position: absolute;
314
+  top: 0;
315
+  right: 0;
316
+  max-width: 700px;
317
+  padding-right: 9rem;
318
+}
319
+.dualLaptop .dualImgs {
320
+  position: absolute;
321
+}
322
+.dualLaptop .dualImgs .dualImgsInner {
323
+  width: 63%;
324
+}
325
+.dualLaptop .dualImgsOne {
326
+  top: 0;
327
+  left: -10%;
328
+  transform: rotate(343deg);
329
+  width: 68%;
330
+}
331
+.dualLaptop .dualImgsTwo {
332
+  top: 31%;
333
+  right: -68%;
334
+  transform: rotate(339deg);
335
+}
336
+.dualLaptop .dualImgsTwo .dualImgsInner {
337
+  width: 82%;
338
+}
339
+
340
+.tableLaptop {
341
+  margin-top: 300px;
342
+  height: 90vh;
343
+  width: 100vw;
344
+  position: relative;
345
+  margin-bottom: 300px;
346
+}
347
+.tableLaptop .circleTableLaptop_Heading {
348
+  position: absolute;
349
+  top: 50%;
350
+  left: 50%;
351
+  transform: translate(-50%, -311%);
352
+}
353
+.tableLaptop .justTableLaptop {
354
+  position: absolute;
355
+  width: 86%;
356
+  top: -10px;
357
+  right: 128px;
358
+  z-index: 1;
359
+}
360
+.tableLaptop .circleTableLaptop {
361
+  background-color: #ECECEC;
362
+  height: 70rem;
363
+  width: 70rem;
364
+  border-radius: 50%;
365
+  position: relative;
366
+  overflow: hidden;
367
+}
368
+.tableLaptop .circleTableLaptop .circleTableLaptopTop {
369
+  bottom: -3%;
370
+  width: 80%;
371
+  position: absolute;
372
+  top: 50%;
373
+  left: 50%;
374
+  transform: translate(-50%, 2%);
375
+}
376
+.tableLaptop .circleTableLaptop_text {
377
+  position: absolute;
378
+  top: 50%;
379
+  left: 50%;
380
+  transform: translate(-50%, 168%);
381
+}
382
+
383
+.trueLifeDisplay .trueLifeDisplay_headingHD > .headingLife {
384
+  font-size: 6rem;
385
+}
386
+.trueLifeDisplay .trueLifeDisplay_des {
387
+  padding: 0 10rem;
388
+}
389
+
390
+.font_p_Dual {
391
+  font-size: 1.2rem;
392
+}
393
+
394
+.controlPanel {
395
+  margin-top: 10rem;
396
+  padding-bottom: 550px;
397
+}
398
+.controlPanel .controlPanel_des {
399
+  position: absolute;
400
+  top: -170px;
401
+  left: 80px;
402
+}
403
+.controlPanel .bgControlpanel {
404
+  min-height: 100vh;
405
+  background-color: #ECECEC;
406
+  border-radius: 157px;
407
+  position: relative;
408
+}
409
+.controlPanel .bgControlpanel .bgControlpaneltabs {
410
+  position: absolute;
411
+  top: 100px;
412
+  right: 0;
413
+}
414
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs {
415
+  border-bottom: 1px solid;
416
+  margin-bottom: 2rem;
417
+}
418
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-item {
419
+  position: relative;
420
+  border: none;
421
+}
422
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link {
423
+  position: relative;
424
+  color: black;
425
+  font-weight: 500;
426
+}
427
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active {
428
+  border: none;
429
+  background-color: transparent;
430
+}
431
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active::before {
432
+  display: block;
433
+}
434
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-item .nav-link::before {
435
+  content: "";
436
+  position: absolute;
437
+  width: 100%;
438
+  height: 5px;
439
+  bottom: -2px;
440
+  right: 0;
441
+  display: none;
442
+  background-color: black;
443
+}
444
+
445
+.designedProLaptop {
446
+  position: relative;
447
+}
448
+.designedProLaptop .designedProLaptop_title {
449
+  position: absolute;
450
+  top: -200px;
451
+  left: 0;
452
+  z-index: 1;
453
+}
454
+.designedProLaptop .designedProLaptop_title_text {
455
+  font-size: 10rem;
456
+}
457
+.designedProLaptop .designedProLaptop_img {
458
+  position: absolute;
459
+  top: 0;
460
+  right: 700px;
461
+}
462
+
463
+/*
464
+0 - 600px:      Phone
465
+600 - 900px:    Tablet portrait
466
+900 - 1200px:   Tablet landscape
467
+[1200 - 1800] is where our normal styles apply
468
+1800px + :      Big desktop
469
+
470
+$breakpoint arguement choices:
471
+- phone
472
+- tab-port
473
+- tab-land
474
+- big-desktop
475
+
476
+ORDER: Base + typography > general layout + grid > page layout > components
477
+
478
+1em = 16px
479
+*/
480
+/* Orbitron */
481
+@font-face {
482
+  font-family: "Orbitron";
483
+  src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
484
+  font-weight: 400;
485
+  font-style: normal;
486
+}
487
+@font-face {
488
+  font-family: "Orbitron";
489
+  src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
490
+  font-weight: 500;
491
+  font-style: normal;
492
+}
493
+@font-face {
494
+  font-family: "Orbitron";
495
+  src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
496
+  font-weight: 600;
497
+  font-style: normal;
498
+}
499
+@font-face {
500
+  font-family: "Orbitron";
501
+  src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
502
+  font-weight: 700;
503
+  font-style: normal;
504
+}
505
+/* Orbitron end */
506
+/* Satoshi */
507
+@font-face {
508
+  font-family: "Satoshi";
509
+  src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
510
+  font-weight: 400;
511
+  font-style: normal;
512
+}
513
+@font-face {
514
+  font-family: "Satoshi";
515
+  src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
516
+  font-weight: 500;
517
+  font-style: normal;
518
+}
519
+@font-face {
520
+  font-family: "Satoshi";
521
+  src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
522
+  font-weight: 700;
523
+  font-style: normal;
524
+}
525
+/* Satoshi end */
526
+.satoshi_font {
527
+  font-family: "Satoshi", sans-serif;
528
+}
529
+
530
+.bg-green {
531
+  background-color: #3bb78f;
532
+  background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
533
+}
534
+
535
+/* button */
536
+.button_dark {
537
+  -webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
538
+          clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
539
+  padding-right: 1.7rem;
540
+  padding-bottom: 0.6rem;
541
+  padding-top: 0.6rem;
542
+  border-radius: 10px;
543
+}
544
+
545
+/* footer */
546
+.footer-wrapper {
547
+  background-color: rgb(0, 0, 0);
548
+  border-radius: 0 275px 0 0;
549
+  -webkit-clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
550
+          clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
551
+}
552
+
553
+.footer-wrapper li {
554
+  line-height: 2rem;
555
+}/*# sourceMappingURL=style.css.map */

+ 1
- 0
styles/style.css.map 查看文件

1
+{"version":3,"sources":["abstracts/_mixins.scss","base/_base.scss","style.css","base/_utilities.scss","components/_button.scss","pages/_productOverview.scss","style.scss"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;CAAA;ACVA;;;EAGI,SAAA;EACA,UAAA;EACA,mBAAA;ACkBJ;;ADXA;EACI,sBAAA;EAEA,kBAAA;ACaJ;AFIQ;ECpBR;IAKQ,UAAA;ECeN;AACF;;AChCA;EACE,yBAAA;EACA,6FAAA;ADmCF;;AChCA;EACE,cAAA;ADmCF;;AChCA;EACE,mCAAA;ADmCF;;AC/BA;EACE,eAAA;ADkCF;;AChCA;EACE,eAAA;ADmCF;;AChCA;EACE,iBAAA;ADmCF;;AChCA;EACE,iBAAA;ADmCF;;AChCA;EACE,iBAAA;ADmCF;;AChCA;EACE,iBAAA;ADmCF;;AC/BA;EACE,eAAA;ADkCF;;AC9BA;EACE,iBAAA;ADiCF;;AC5BA;EACE,eAAA;AD+BF;;ACzBA;EACE,kBAAA;AD4BF;;ACzBA;EACE,aAAA;AD4BF;;ACzBA;EACE,kBAAA;AD4BF;;ACvBA;EACE,WAAA;AD0BF;;ACvBA;EACE,WAAA;AD0BF;;ACvBA;EACE,WAAA;AD0BF;;ACvBA;EACE,WAAA;AD0BF;;ACvBA;EACE,WAAA;AD0BF;;ACxBA;EACE,WAAA;AD2BF;;ACzBA;EACE,WAAA;AD4BF;;ACzBA;EACE,WAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,aAAA;AD4BF;;ACtBA;EACE,gBAAA;ADyBF;;ACrBE;EACE,gBAAA;ADwBJ;;ACrBA;EACE,aAAA;ADwBF;;ACjBA;EACE,WAAA;ADoBF;;ACjBA;EACE,SAAA;ADoBF;;ACfA;EACE,mBAAA;ADkBF;;AE7KA;EACI,kFAAA;UAAA,0EAAA;EACA,qBAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;AFgLJ;;AGtLA;EACE,6EAAA;EACA,uBAAA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;EAEA,kBAAA;AHwLF;;AGnLA;EACE,YAAA;AHsLF;;AGnLA;EACE,qCAAA;EACA,wDAAA;EACA,0BAAA;EACA,kCAAA;EAEA,2CAAA;EACA,iBAAA;EAEA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,OAAA;AHoLF;;AGjLA;EACE,WAAA;AHoLF;;AGjLA;EACE,iBA1Bc;AH8MhB;;AGjLA;EACE,iBA9Bc;AHkNhB;;AGjLA;EACE,iBAAA;EACA,kCAAA;EACA,gBAAA;AHoLF;;AGjLA;EACE,mBAAA;EACA,eAAA;EACA,mCAAA;AHoLF;;AGjLA;EACE,eAAA;EACA,iBAAA;EACA,kCAAA;AHoLF;;AGjLA;EACE,iBAAA;EACA,WAAA;EACA,iBAAA;EACA,4HAAA;EACA,kBAAA;AHoLF;;AGlLA;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AHqLF;;AGlLA;EACE,aAAA;EACA,yBAAA;AHqLF;;AGjLE;EAEE,YAAA;AHmLJ;AGlLI;EACE,kBAAA;AHoLN;AGlLI;EACE,YAAA;AHoLN;AGjLI;EACE,8BAAA;EACA,kFAAA;AHmLN;AG7KI;EACE,kBAAA;AH+KN;AG7KI;EACE,mBAAA;AH+KN;;AGzKE;EACE,kBAAA;AH4KJ;AG1KE;EACE,eAAA;AH4KJ;AGzKE;EACE,WAAA;AH2KJ;AGxKI;EACE,SAAA;AH0KN;AGrKI;EACE,WAAA;AHuKN;;AGlKA;EACE,eAAA;AHqKF;;AGjKA;EACE,YAAA;EACA,cAAA;EACA,WAAA;EACA,qBAAA;EACA,kBAAA;AHoKF;AGjKE;EACE,iBAAA;AHmKJ;AGjKE;EACE,kBAAA;EACA,MAAA;EACA,QAAA;EACA,gBAAA;EACA,mBAAA;AHmKJ;AGhKE;EACE,kBAAA;AHkKJ;AG/JI;EACE,UAAA;AHiKN;AG3JE;EACE,MAAA;EACA,UAAA;EACA,yBAAA;EACA,UAAA;AH6JJ;AG1JE;EAKE,QAAA;EACA,WAAA;EACA,yBAAA;AHwJJ;AGvJI;EACE,UAAA;AHyJN;;AGpJA;EACE,iBAAA;EAGA,YAAA;EACA,YAAA;EACA,kBAAA;EA4CA,oBAAA;AH0GF;AGrJE;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,iCAAA;AHuJJ;AGrJE;EACE,kBAAA;EACA,UAAA;EACA,UAAA;EACA,YAAA;EACA,UAAA;AHuJJ;AGpJE;EACE,yBAAA;EACA,aAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,gBAAA;AHsJJ;AGnJI;EAEA,WAAA;EACA,UAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,8BAAA;AHoJJ;AG/IE;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AHiJJ;;AGxIE;EACE,eAAA;AH2IJ;AGvIC;EACC,gBAAA;AHyIF;;AGpIA;EACE,iBAAA;AHuIF;;AGpIA;EAEE,iBAAA;EACA,qBAAA;AHsIF;AGrIE;EACE,kBAAA;EACA,WAAA;EACA,UAAA;AHuIJ;AGpIE;EACE,iBAAA;EACA,yBAAA;EACA,oBAAA;EACA,kBAAA;AHsIJ;AGpII;EAEE,kBAAA;EACA,UAAA;EACA,QAAA;AHqIN;AGnIM;EACE,wBAAA;EACA,mBAAA;AHqIR;AGnIM;EACE,kBAAA;EACA,YAAA;AHqIR;AGjIM;EACC,kBAAA;EACA,YAAA;EACA,gBAAA;AHmIP;AGhIM;EACE,YAAA;EACA,6BAAA;AHkIR;AG/HM;EACE,cAAA;AHiIR;AG9HM;EACE,WAAA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,QAAA;EACA,aAAA;EACA,uBAAA;AHgIR;;AGxHA;EACE,kBAAA;AH2HF;AG1HE;EACE,kBAAA;EACA,WAAA;EACA,OAAA;EACA,UAAA;AH4HJ;AGxHE;EACE,gBAAA;AH0HJ;AGxHE;EACE,kBAAA;EACA,MAAA;EACA,YAAA;AH0HJ;;AI5bA;;;;;;;;;;;;;;;;CAAA;AAkBA,aAAA;AACA;EACI,uBAAA;EACA,2EAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,uBAAA;EACA,0EAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,uBAAA;EACA,4EAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,uBAAA;EACA,wEAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE,iBAAA;AACA,YAAA;AACA;EACE,sBAAA;EACA,yEAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,sBAAA;EACA,wEAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,sBAAA;EACA,sEAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI3bE,gBAAA;AAEA;EACE,kCAAA;AJ4bJ;;AI7aE;EACE,yBAAA;EACA,yEAAA;AJgbJ;;AI7aE,WAAA;AACA;EACE,kFAAA;UAAA,0EAAA;EACA,qBAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;AJgbJ;;AI/aE,WAAA;AACA;EACE,8BAAA;EACA,0BAAA;EACA,gGAAA;UAAA,wFAAA;AJkbJ;;AIhbE;EACE,iBAAA;AJmbJ","file":"style.css"}

+ 11
- 20
styles/style.scss 查看文件

78
   }
78
   }
79
   
79
   
80
   /* Satoshi end */
80
   /* Satoshi end */
81
-  *,
82
-  *::after,
83
-  *::before {
84
-    margin: 0;
85
-    padding: 0;
86
-    box-sizing: inherit; 
87
-  
88
-    font-family: "Orbitron" ,sans-serif;
89
-  }
90
-  
81
+
91
   .satoshi_font{
82
   .satoshi_font{
92
     font-family: "Satoshi", sans-serif;
83
     font-family: "Satoshi", sans-serif;
93
   }
84
   }
94
   
85
   
95
-  html {
96
-    font-size: 100%; }
86
+  // html {
87
+  //   font-size: 100%; }
97
   
88
   
98
-  body {
99
-    box-sizing: border-box; 
100
-    overflow-x: hidden;
101
-  }
102
-    @media only screen and (max-width: 56.25em) {
103
-      body {
104
-        padding: 0; } 
105
-    }
89
+  // body {
90
+  //   box-sizing: border-box; 
91
+  //   overflow-x: hidden;
92
+  // }
93
+  //   @media only screen and (max-width: 56.25em) {
94
+  //     body {
95
+  //       padding: 0; } 
96
+  //   }
106
   
97
   
107
   .bg-green {
98
   .bg-green {
108
     background-color: #3bb78f;
99
     background-color: #3bb78f;

正在加载...
取消
保存