sachin.ganesh
/
anwi_website
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

code added

sachinganesh 2 年之前
父節點
6c21a9aeab
當前提交
594ad5a4a7
共有 59 個檔案被更改，包括 4218 行新增 和 504 行删除
分割檢視 顯示文件統計
  1. 1
    0
      .gitignore
  2. 24
    0
      dist/Js/allInOne.js
  3. 二進制
      dist/assets/imgs/allinone/allinonebg.png
  4. 二進制
      dist/assets/imgs/allinone/cpus.png
  5. 二進制
      dist/assets/imgs/allinone/info1.png
  6. 二進制
      dist/assets/imgs/allinone/info2.png
  7. 二進制
      dist/assets/imgs/allinone/info3.png
  8. 二進制
      dist/assets/imgs/allinone/info4.png
  9. 二進制
      dist/assets/imgs/allinone/keyboardandmouse.png
  10. 二進制
      dist/assets/imgs/allinone/leftclippath.png
  11. 二進制
      dist/assets/imgs/allinone/ll.png
  12. 二進制
      dist/assets/imgs/allinone/montier.png
  13. 二進制
      dist/assets/imgs/allinone/onesection.png
  14. 二進制
      dist/assets/imgs/allinone/rams.png
  15. 二進制
      dist/assets/imgs/allinone/rightclippath.png
  16. 二進制
      dist/assets/imgs/allinone/rr.png
  17. 二進制
      dist/assets/imgs/allinone/scroll.png
  18. 二進制
      dist/assets/imgs/allinone/sectiontwo.png
  19. 二進制
      dist/assets/imgs/laptop_display.png
  20. 二進制
      dist/assets/imgs/productoverview/boudtwo.png
  21. 二進制
      dist/assets/imgs/productoverview/cpu.png
  22. 二進制
      dist/assets/imgs/productoverview/designedPro.png
  23. 二進制
      dist/assets/imgs/productoverview/dragonbg.png
  24. 二進制
      dist/assets/imgs/productoverview/gridfutureproof.png
  25. 二進制
      dist/assets/imgs/productoverview/gridlap.png
  26. 二進制
      dist/assets/imgs/productoverview/gridtruelifediaplay.png
  27. 二進制
      dist/assets/imgs/productoverview/laptopdual.png
  28. 二進制
      dist/assets/imgs/productoverview/laptoptable.png
  29. 二進制
      dist/assets/imgs/productoverview/leftlap.png
  30. 二進制
      dist/assets/imgs/productoverview/lens.png
  31. 二進制
      dist/assets/imgs/productoverview/osgroup.png
  32. 二進制
      dist/assets/imgs/productoverview/popkey.png
  33. 二進制
      dist/assets/imgs/productoverview/ports.png
  34. 二進制
      dist/assets/imgs/productoverview/productbg.png
  35. 二進制
      dist/assets/imgs/productoverview/progreen.png
  36. 二進制
      dist/assets/imgs/productoverview/promask.png
  37. 二進制
      dist/assets/imgs/productoverview/rightlap.png
  38. 二進制
      dist/assets/imgs/productoverview/stunningSound.png
  39. 二進制
      dist/assets/imgs/productoverview/ufolaptop.png
  40. 二進制
      dist/assets/imgs/productoverview/wifilap.png
  41. 24
    0
      dist/assets/imgs/productoverview/windows.svg
  42. 二進制
      dist/assets/imgs/sectiontest.png
  43. 538
    0
      dist/html/pages/allinone.html
  44. 803
    153
      dist/html/pages/laptopmulti.html
  45. 6
    4
      styles/abstracts/_mixins.scss
  46. 167
    75
      styles/base/_utilities.scss
  47. 382
    0
      styles/pages/_allInOne.scss
  48. 631
    97
      styles/pages/_productOverview.scss
  49. 46
    0
      styles/pages/productOverview/_designedpro.scss
  50. 62
    0
      styles/pages/productOverview/_dragondisplay.scss
  51. 88
    0
      styles/pages/productOverview/_lens.scss
  52. 77
    0
      styles/pages/productOverview/_popupkeyboard.scss
  53. 49
    0
      styles/pages/productOverview/_professinalGrade.scss
  54. 129
    0
      styles/pages/productOverview/_stunningsound.scss
  55. 43
    0
      styles/pages/productOverview/_tablesection.scss
  56. 73
    0
      styles/pages/productOverview/_wifisection.scss
  57. 1050
    170
      styles/style.css
  58. 1
    1
      styles/style.css.map
  59. 24
    4
      styles/style.scss

+ 1
- 0
.gitignore 查看文件 

@@ -0,0 +1 @@
1 
+libs

+ 24
- 0
dist/Js/allInOne.js 查看文件 

@@ -0,0 +1,24 @@
1 
+$('.owl-carousel').owlCarousel({
2 
+    rtl:true,
3 
+    loop:true,
4 
+    margin:200,
5 
+    nav:true,
6 
+    URLhashListener:true,
7 
+        autoplayHoverPause:true,
8 
+        responsiveClass:true,
9 
+        responsive:{
10 
+            0:{
11 
+                items:1,
12 
+                nav:true
13 
+            },
14 
+            600:{
15 
+                items:3,
16 
+                nav:false
17 
+            },
18 
+            1000:{
19 
+                items:5,
20 
+                nav:true,
21 
+                loop:false
22 
+            }
23 
+        }
24 
+})

二進制
dist/assets/imgs/allinone/allinonebg.png 查看文件


二進制
dist/assets/imgs/allinone/cpus.png 查看文件


二進制
dist/assets/imgs/allinone/info1.png 查看文件


二進制
dist/assets/imgs/allinone/info2.png 查看文件


二進制
dist/assets/imgs/allinone/info3.png 查看文件


二進制
dist/assets/imgs/allinone/info4.png 查看文件


二進制
dist/assets/imgs/allinone/keyboardandmouse.png 查看文件


二進制
dist/assets/imgs/allinone/leftclippath.png 查看文件


二進制
dist/assets/imgs/allinone/ll.png 查看文件


二進制
dist/assets/imgs/allinone/montier.png 查看文件


二進制
dist/assets/imgs/allinone/onesection.png 查看文件


二進制
dist/assets/imgs/allinone/rams.png 查看文件


二進制
dist/assets/imgs/allinone/rightclippath.png 查看文件


二進制
dist/assets/imgs/allinone/rr.png 查看文件


二進制
dist/assets/imgs/allinone/scroll.png 查看文件


二進制
dist/assets/imgs/allinone/sectiontwo.png 查看文件


二進制
dist/assets/imgs/laptop_display.png 查看文件


二進制
dist/assets/imgs/productoverview/boudtwo.png 查看文件


二進制
dist/assets/imgs/productoverview/cpu.png 查看文件


二進制
dist/assets/imgs/productoverview/designedPro.png 查看文件


二進制
dist/assets/imgs/productoverview/dragonbg.png 查看文件


二進制
dist/assets/imgs/productoverview/gridfutureproof.png 查看文件


二進制
dist/assets/imgs/productoverview/gridlap.png 查看文件


二進制
dist/assets/imgs/productoverview/gridtruelifediaplay.png 查看文件


二進制
dist/assets/imgs/productoverview/laptopdual.png 查看文件


二進制
dist/assets/imgs/productoverview/laptoptable.png 查看文件


二進制
dist/assets/imgs/productoverview/leftlap.png 查看文件


二進制
dist/assets/imgs/productoverview/lens.png 查看文件


二進制
dist/assets/imgs/productoverview/osgroup.png 查看文件


二進制
dist/assets/imgs/productoverview/popkey.png 查看文件


二進制
dist/assets/imgs/productoverview/ports.png 查看文件


二進制
dist/assets/imgs/productoverview/productbg.png 查看文件


二進制
dist/assets/imgs/productoverview/progreen.png 查看文件


二進制
dist/assets/imgs/productoverview/promask.png 查看文件


二進制
dist/assets/imgs/productoverview/rightlap.png 查看文件


二進制
dist/assets/imgs/productoverview/stunningSound.png 查看文件


二進制
dist/assets/imgs/productoverview/ufolaptop.png 查看文件


二進制
dist/assets/imgs/productoverview/wifilap.png 查看文件


+ 24
- 0
dist/assets/imgs/productoverview/windows.svg 查看文件 

@@ -0,0 +1,24 @@
1 
+<svg xmlns="http://www.w3.org/2000/svg" width="51.211" height="48.01" viewBox="0 0 51.211 48.01">
2 
+  <g id="windows" transform="translate(0 -16)">
3 
+    <g id="Group_921" data-name="Group 921" transform="translate(0 19.601)">
4 
+      <g id="Group_920" data-name="Group 920">
5 
+        <path id="Path_650" data-name="Path 650" d="M0,54.8v16H22.4V52Z" transform="translate(0 -52)"/>
6 
+      </g>
7 
+    </g>
8 
+    <g id="Group_923" data-name="Group 923" transform="translate(25.605 16)">
9 
+      <g id="Group_922" data-name="Group 922">
10 
+        <path id="Path_651" data-name="Path 651" d="M256,19.2V38.4h25.605V16Z" transform="translate(-256 -16)"/>
11 
+      </g>
12 
+    </g>
13 
+    <g id="Group_925" data-name="Group 925" transform="translate(25.605 41.605)">
14 
+      <g id="Group_924" data-name="Group 924">
15 
+        <path id="Path_652" data-name="Path 652" d="M256,272v19.2l25.605,3.2V272Z" transform="translate(-256 -272)"/>
16 
+      </g>
17 
+    </g>
18 
+    <g id="Group_927" data-name="Group 927" transform="translate(0 41.605)">
19 
+      <g id="Group_926" data-name="Group 926">
20 
+        <path id="Path_653" data-name="Path 653" d="M0,272v16l22.4,2.8V272Z" transform="translate(0 -272)"/>
21 
+      </g>
22 
+    </g>
23 
+  </g>
24 
+</svg>

二進制
dist/assets/imgs/sectiontest.png 查看文件


+ 538
- 0
dist/html/pages/allinone.html 查看文件 

@@ -0,0 +1,538 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+
4 
+<head>
5 
+    <meta charset="UTF-8" />
6 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8 
+
9 
+    <link rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />
10 
+    <!-- <link rel="stylesheet" href="./../../css/main.css" /> -->
11 
+    <link rel="stylesheet" href="../../../libs/owlcarousel/dist/assets/owl.carousel.min.css">
12 
+    <link rel="stylesheet" href="../../../libs/owlcarousel/dist/assets/owl.theme.default.min.css">
13 
+    <link rel="stylesheet" href="../../../styles/style.css">
14 
+    <title>project</title>
15 
+</head>
16 
+
17 
+<body>
18 
+
19 
+    <section class="allinoneLanding overflow-hidden">
20 
+        <!-- navbar -->
21 
+        <div id="navbar-head"></div>
22 
+        <!-- end-navbar -->
23 
+
24 
+        <!-- heading -->
25 
+        <div class="headingAllinOne px-6 orbitron_font w-100  text-white">
26 
+            <h1 class="font-5 ">All-in-One</h1>
27 
+            <div class="satoshi_font">AIO24 <span class="px-1 ">-</span>1700N</div>
28 
+        </div>
29 
+        <!-- heading end -->
30 
+    </section>
31 
+
32 
+    <section class="laptopsSection overflow-hidden">
33 
+        <div class="row ">
34 
+            <div class="col-sm-7 d-none d-sm-block clipPathSectionCol">
35 
+                <div class="leftClipPathLaptop">
36 
+                    <img src="./../../assets/imgs/allinone/leftclippath.png" alt="" class="w-100 h-100">
37 
+                </div>
38 
+                <div class="innerClipPathImg">
39 
+                    <img src="./../../assets/imgs/allinone/onesection.png" alt="" class="w-100 h-100">
40 
+                </div>
41 
+            </div>
42 
+            <div class="align-items-center d-none d-sm-block col-sm-5 d-flex">
43 
+                <div class="d-flex flex-column justify-content-center h-100 gap-5">
44 
+                    <div>
45 
+                        <div class="font-1-5 supTitleSection">AIO24 - 1700N</div>
46 
+                        <div>
47 
+                            <h1 class="font-7 orbitron_font headinglaptop">Laptops</h1>
48 
+                        </div>
49 
+                    </div>
50 
+                    <div class="font-2 headinglaptopSub">
51 
+                        <div class="satoshi_font">
52 
+                            Extraordinary Performance
53 
+
54 
+                        </div>
55 
+                        <div class="satoshi_font"> and Unparalleled Flexibility</div>
56 
+                    </div>
57 
+                    <div>
58 
+                        <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
59 
+                    </div>
60 
+                </div>
61 
+            </div>
62 
+
63 
+
64 
+            <!-- mobile -->
65 
+            <div class="innerClipPathImg d-block d-sm-none">
66 
+                <img src="./../../assets/imgs/allinone/onesection.png" alt="" class="img-fluid">
67 
+            </div>
68 
+            <div class="align-items-center d-sm-none d-block col-sm-5 d-flex">
69 
+                <div class="d-flex flex-column laptopSectionDesP gap-5">
70 
+                    <div>
71 
+                        <div class="font-1-5 supTitleSection">AIO24 - 1700N</div>
72 
+                        <div>
73 
+                            <h1 class="font-7 orbitron_font headinglaptop">Laptops</h1>
74 
+                        </div>
75 
+                    </div>
76 
+                    <div class="font-2 headinglaptopSub">
77 
+                        <div class="satoshi_font">
78 
+                            Extraordinary Performance
79 
+
80 
+                        </div>
81 
+                        <div class="satoshi_font"> and Unparalleled Flexibility</div>
82 
+                    </div>
83 
+                    <div>
84 
+                        <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
85 
+                    </div>
86 
+                </div>
87 
+            </div>
88 
+
89 
+            <div class="col-sm-7 d-sm-none d-block clipPathSectionCol">
90 
+                <div class="leftClipPathLaptop ">
91 
+                    <img src="./../../assets/imgs/allinone/leftclippath.png" alt="" class="w-100 h-100 d-none d-sm-block">
92 
+                </div>
93 
+                <div class="innerClipPathImg">
94 
+                    <img src="./../../assets/imgs/allinone/onesection.png" alt="" class="w-100 h-100">
95 
+                </div>
96 
+            </div>
97 
+
98 
+            <!-- mobile end -->
99 
+        </div>
100 
+    </section>
101 
+<!-- section 2 -->
102 
+    <section class="laptopsSection overflow-hidden">
103 
+        <div class="row ">
104 
+
105 
+            <div class="align-items-center d-none d-sm-block col-sm-5 p-6 d-flex">
106 
+                <div class="d-flex flex-column gap-5 laptopSectionDesP">
107 
+                    <div>
108 
+                        <div class="font-1-5">AIO24 - 1700N</div>
109 
+                        <div>
110 
+                            <h1 class="font-7 orbitron_font headinglaptop">Laptops</h1>
111 
+                        </div>
112 
+                    </div>
113 
+                    <div class="font-2 headinglaptopSub">
114 
+                        <div class="satoshi_font">
115 
+                            Extraordinary Performance
116 
+
117 
+                        </div>
118 
+                        <div class="satoshi_font"> and Unparalleled Flexibility</div>
119 
+                    </div>
120 
+                    <div>
121 
+                        <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
122 
+                    </div>
123 
+                </div>
124 
+            </div>
125 
+            <div class="col-sm-7 clipPathSectionCol">
126 
+                <div class="innerClipPathImgSectionTwo  d-none d-sm-block">
127 
+                    <img src="./../../assets/imgs/allinone/sectiontwo.png" alt="" class="w-100 h-100 sectionTwoImgAllInone">
128 
+                </div>
129 
+
130 
+                <div>
131 
+                    <img src="./../../assets/imgs/allinone/sectiontwo.png" alt="" class="img-fluid d-block d-sm-none">
132 
+                </div>
133 
+
134 
+                <div class="align-items-center d-block d-sm-none col-sm-5 p-6 d-flex">
135 
+                    <div class="d-flex flex-column gap-5 laptopSectionDesP">
136 
+                        <div>
137 
+                            <div class="font-1-5">AIO24 - 1700N</div>
138 
+                            <div>
139 
+                                <h1 class="font-7 orbitron_font headinglaptop">Laptops</h1>
140 
+                            </div>
141 
+                        </div>
142 
+                        <div class="font-2 headinglaptopSub">
143 
+                            <div class="satoshi_font">
144 
+                                Extraordinary Performance
145 
+
146 
+                            </div>
147 
+                            <div class="satoshi_font"> and Unparalleled Flexibility</div>
148 
+                        </div>
149 
+                        <div>
150 
+                            <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
151 
+                        </div>
152 
+                    </div>
153 
+                </div>
154 
+
155 
+                <div class="leftClipPathLaptop d-none d-sm-block">
156 
+                    <img src="./../../assets/imgs/allinone/rightclippath.png" alt="" class="w-100 h-100">
157 
+                </div>
158 
+
159 
+            </div>
160 
+
161 
+
162 
+        </div>
163 
+    </section>
164 
+
165 
+<!-- section 2 end -->
166 
+
167 
+<!-- section 3 -->
168 
+
169 
+<section class="allinoneDualMarginTop overflow-hidden">
170 
+    <div class="row">
171 
+        <div class="col-sm-6 pe-5 clipPathSectionCol">
172 
+            <div class="leftClipPathLaptop d-none d-sm-block">
173 
+                <img src="./../../assets/imgs/allinone/ll.png" alt="" class="w-100 h-100">
174 
+            </div>
175 
+            <div class="innerClipPathImgFirstThree  d-none d-sm-block">
176 
+                <img src="./../../assets/imgs/allinone/montier.png" alt="" class="w-100 h-100">
177 
+            </div>
178 
+             <img src="./../../assets/imgs/allinone/montier.png" alt="" class="img-fluid d-block d-sm-none">
179 
+
180 
+            <div class="d-flex d-sm-none allinoneDualMarginTop_pContainer d-block flex-column gap-5">
181 
+                <div>
182 
+                    <h1 class="orbitron_font font-3">Moniters</h1>
183 
+                </div>
184 
+                <div class="font-1-5 allinoneDualMarginTop_p">
185 
+                    <div class="satoshi_font">
186 
+                        Extraordinary Performance
187 
+
188 
+                    </div>
189 
+                    <div class="satoshi_font"> and Unparalleled Flexibility</div>
190 
+                </div>
191 
+                <div>
192 
+                    <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
193 
+                </div>
194 
+               </div>
195 
+        </div>
196 
+        <div class="col-sm-6 ps-5 clipPathSectionCol">
197 
+            <div class="leftClipPathLaptop d-none d-sm-block">
198 
+                <img src="./../../assets/imgs/allinone/rr.png" alt="" class="w-100 h-100">
199 
+            </div>
200 
+            <div class="innerClipPathImgSectionThree d-none d-sm-block">
201 
+                <img src="../../assets/imgs/allinone/keyboardandmouse.png" alt="" class="w-100 h-100 ">
202 
+            </div>
203 
+            <img src="../../assets/imgs/allinone/keyboardandmouse.png" alt="" class="img-fluid d-block d-sm-none">
204 
+
205 
+            <div class="d-flex  d-sm-none d-block allinoneDualMarginTop_pContainer flex-column gap-5">
206 
+                <div>
207 
+                    <h1 class="orbitron_font font-3">Moniters</h1>
208 
+                </div>
209 
+                <div class="font-1-5 allinoneDualMarginTop_p">
210 
+                    <div class="satoshi_font">
211 
+                        Extraordinary Performance
212 
+
213 
+                    </div>
214 
+                    <div class="satoshi_font"> and Unparalleled Flexibility</div>
215 
+                </div>
216 
+                <div>
217 
+                    <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
218 
+                </div>
219 
+               </div>
220 
+        </div>
221 
+    </div>
222 
+    <div class="d-flex justify-content-between allinoneDualMarginTop_desContainer p-7 d-none d-sm-flex">
223 
+       <div class="d-flex flex-column gap-5">
224 
+        <div>
225 
+            <h1 class="orbitron_font font-3">Moniters</h1>
226 
+        </div>
227 
+        <div class="font-1-5 allinoneDualMarginTop_p">
228 
+            <div class="satoshi_font">
229 
+                Extraordinary Performance
230 
+
231 
+            </div>
232 
+            <div class="satoshi_font"> and Unparalleled Flexibility</div>
233 
+        </div>
234 
+        <div>
235 
+            <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
236 
+        </div>
237 
+       </div>
238 
+       <div class="d-flex flex-column gap-5">
239 
+        <div>
240 
+            <h1 class="orbitron_font font-3">Peripherals</h1>
241 
+        </div>
242 
+        <div class="font-1-5 allinoneDualMarginTop_p">
243 
+            <div class="satoshi_font">
244 
+                Extraordinary Performance
245 
+
246 
+            </div>
247 
+            <div class="satoshi_font"> and Unparalleled Flexibility</div>
248 
+        </div>
249 
+        <div>
250 
+            <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
251 
+        </div>
252 
+       </div>
253 
+    </div>
254 
+</section>
255 
+
256 
+<!-- section 3 end -->
257 
+
258 
+<!-- section 4 -->
259 
+
260 
+<section class=" overflow-hidden allinoneDualMarginTop">
261 
+    <div class="row">
262 
+        <div class="col-sm-6 pe-5 clipPathSectionCol">
263 
+            <div class="leftClipPathLaptop ">
264 
+                <img src="./../../assets/imgs/allinone/ll.png" alt="" class="w-100 h-100  d-none d-sm-block">
265 
+            </div>
266 
+            <div class="innerClipPathImgFirstFour">
267 
+                <img src="./../../assets/imgs/allinone/cpus.png" alt="" class="w-100 h-100  d-none d-sm-block">
268 
+            </div>
269 
+            <img src="./../../assets/imgs/allinone/cpus.png" alt="" class="img-fluid d-block d-sm-none">
270 
+
271 
+            <div class="d-flex d-sm-none allinoneDualMarginTop_pContainer d-block flex-column gap-5">
272 
+                <div>
273 
+                    <h1 class="orbitron_font font-3">Moniters</h1>
274 
+                </div>
275 
+                <div class="font-1-5 allinoneDualMarginTop_p">
276 
+                    <div class="satoshi_font">
277 
+                        Extraordinary Performance
278 
+
279 
+                    </div>
280 
+                    <div class="satoshi_font"> and Unparalleled Flexibility</div>
281 
+                </div>
282 
+                <div>
283 
+                    <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
284 
+                </div>
285 
+               </div>
286 
+        </div>
287 
+        <div class="col-sm-6 ps-5 clipPathSectionCol">
288 
+            <div class="leftClipPathLaptop ">
289 
+                <img src="./../../assets/imgs/allinone/rr.png" alt="" class="w-100 h-100  d-none d-sm-block">
290 
+            </div>
291 
+            <div class="innerClipPathImgSectionFour">
292 
+                <img src="../../assets/imgs/allinone/rams.png" alt="" class="w-100 h-100  d-none d-sm-block">
293 
+            </div>
294 
+            <img src="../../assets/imgs/allinone/rams.png" alt="" class="img-fluid d-block d-sm-none">
295 
+            <div class="d-flex d-sm-none allinoneDualMarginTop_pContainer d-block flex-column gap-5">
296 
+                <div>
297 
+                    <h1 class="orbitron_font font-3">Moniters</h1>
298 
+                </div>
299 
+                <div class="font-1-5 allinoneDualMarginTop_p">
300 
+                    <div class="satoshi_font">
301 
+                        Extraordinary Performance
302 
+
303 
+                    </div>
304 
+                    <div class="satoshi_font"> and Unparalleled Flexibility</div>
305 
+                </div>
306 
+                <div>
307 
+                    <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
308 
+                </div>
309 
+               </div>
310 
+        </div>
311 
+    </div>
312 
+    <div class="d-flex justify-content-between allinoneDualMarginTop_desContainer p-7 d-none d-sm-flex">
313 
+        <div class="d-flex flex-column gap-5">
314 
+         <div>
315 
+             <h1 class="orbitron_font font-3">Moniters</h1>
316 
+         </div>
317 
+         <div class="font-1-5 allinoneDualMarginTop_p">
318 
+             <div class="satoshi_font">
319 
+                 Extraordinary Performance
320 
+
321 
+             </div>
322 
+             <div class="satoshi_font"> and Unparalleled Flexibility</div>
323 
+         </div>
324 
+         <div>
325 
+             <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
326 
+         </div>
327 
+        </div>
328 
+        <div class="d-flex flex-column gap-5">
329 
+         <div>
330 
+             <h1 class="orbitron_font font-3">Peripherals</h1>
331 
+         </div>
332 
+         <div class="font-1-5 allinoneDualMarginTop_p">
333 
+             <div class="satoshi_font">
334 
+                 Extraordinary Performance
335 
+
336 
+             </div>
337 
+             <div class="satoshi_font"> and Unparalleled Flexibility</div>
338 
+         </div>
339 
+         <div>
340 
+             <a class="btn btn-dark button_dark font-1-2" href="#">Learn More</a>
341 
+         </div>
342 
+        </div>
343 
+     </div>
344 
+</section>
345 
+
346 
+<!-- section 4 end -->
347 
+
348 
+<!-- section 5 -->
349 
+<section class="sectionfiveAllinOne container  overflow-hidden">
350 
+    <div class="row">
351 
+        <div class="col-sm-12 col-md-6 col-lg-3 infoContainer">
352 
+            <img class="w-100 h-100" src="./../../assets/imgs/allinone/info1.png" alt="">
353 
+            <div class="orbitron_font text-white infoContainerOneText">
354 
+                <h1>Announcements</h1>
355 
+                <h1>and Events</h1>
356 
+            </div>
357 
+        </div>
358 
+        <div class="col-sm-12 col-md-6 col-lg-3 infoContainer">
359 
+            <img class="w-100 h-70" src="./../../assets/imgs/allinone/info2.png" alt="">
360 
+            <!-- <img class="w-100 h-70" src="./../../assets/imgs/allinone/info2.png" alt=""> -->
361 
+            <div class=" infoContainerBlue  p-4 d-flex flex-column justify-content-center ">
362 
+                <h1 class="font-1-5  orbitron_font">Solution Focus</h1>
363 
+                <div class="infoContainer_des satoshi_font">
364 
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invconsetetur sadipscing elitr, sed
365 
+                </div>
366 
+            </div>
367 
+        </div>
368 
+        <div class="col-sm-12 col-md-6 col-lg-3 infoContainer">
369 
+            <img class="w-100 h-70" src="./../../assets/imgs/allinone/info3.png" alt="">
370 
+            <div class=" infoContainerOrange  p-4 d-flex flex-column justify-content-center ">
371 
+                <h1 class="font-1-5  orbitron_font">Restless</h1>
372 
+                <div class="infoContainer_des satoshi_font">
373 
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invconsetetur sadipscing elitr, sed
374 
+                </div>
375 
+            </div>
376 
+        </div>
377 
+        <div class="col-sm-12 col-md-6 col-lg-3 infoContainer">
378 
+            <img class="w-100 h-70" src="./../../assets/imgs/allinone/info4.png" alt="">
379 
+            <div class=" infoContainerBlue  p-4 d-flex flex-column justify-content-center ">
380 
+                <h1 class="font-1-5  orbitron_font">Out of world</h1>
381 
+                <div class="infoContainer_des satoshi_font">
382 
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invconsetetur sadipscing elitr, sed
383 
+                </div>
384 
+            </div>
385 
+        </div>
386 
+    </div>
387 
+</section>
388 
+<!-- section 5 end -->
389 
+
390 
+<!-- section 6 -->
391 
+<section>
392 
+   <div class=" d-flex flex-column justify-content-center align-items-center overflow-hidden">
393 
+    <h1 class="orbitron_font pb-0 p-6 insightsAdvHeading">Insights / Advance</h1>
394 
+    <div class="d-none">
395 
+        <div class="p-6 pt-5 insightsAdv">
396 
+            <ul class="list-inline d-flex gap-5">
397 
+                <li class="cursor-pointer orbitron_font fw-600">Server</li>
398 
+                <li class="cursor-pointer orbitron_font"  data-hash="3"> servers</li>
399 
+                <li class="cursor-pointer orbitron_font"> servers</li>
400 
+                <li class="cursor-pointer orbitron_font"> servers</li>
401 
+                <li class="cursor-pointer orbitron_font"> servers</li>
402 
+            </ul>
403 
+        </div>
404 
+
405 
+    </div>
406 
+    <div class="carouselLanding owl-carousel d-flex p-4">
407 
+        <div class="carouselLandingItem">
408 
+           <div class="mt-5C carouselLandingItemInner">
409 
+            <img src="./../../assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
410 
+            <div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
411 
+
412 
+<svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
413 
+    <path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
414 
+  </svg>
415 
+
416 
+            </div>
417 
+           </div>
418 
+        </div>
419 
+        <div class="carouselLandingItem ">
420 
+            <div class=" carouselLandingItemInner">
421 
+             <img src="./../../assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
422 
+             <div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
423 
+
424 
+ <svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
425 
+     <path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
426 
+   </svg>
427 
+
428 
+             </div>
429 
+            </div>
430 
+         </div>
431 
+
432 
+        <div class="carouselLandingItem " data-hash="3">
433 
+            <div class="mt-5C carouselLandingItemInner">
434 
+             <img src="./../../assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
435 
+             <div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
436 
+
437 
+ <svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
438 
+     <path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
439 
+   </svg>
440 
+
441 
+             </div>
442 
+            </div>
443 
+         </div>
444 
+
445 
+        <div class="carouselLandingItem">
446 
+            <div class=" carouselLandingItemInner">
447 
+             <img src="./../../assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
448 
+             <div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
449 
+
450 
+ <svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
451 
+     <path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
452 
+   </svg>
453 
+
454 
+             </div>
455 
+            </div>
456 
+         </div>
457 
+         <div class="carouselLandingItem ">
458 
+            <div class="mt-5C carouselLandingItemInner">
459 
+             <img src="./../../assets/imgs/allinone/scroll.png" alt="" class="w-100 h-100">
460 
+             <div class="carouselLandingItemInnerOverlay d-flex justify-content-center align-items-center">
461 
+
462 
+ <svg xmlns="http://www.w3.org/2000/svg" width="49.176" height="49.176" viewBox="0 0 49.176 49.176">
463 
+     <path id="Icon_awesome-play-circle" data-name="Icon awesome-play-circle" d="M25.15.563A24.588,24.588,0,1,0,49.738,25.15,24.584,24.584,0,0,0,25.15.563ZM36.621,27.53,19.172,37.543a2.384,2.384,0,0,1-3.539-2.082V14.839a2.385,2.385,0,0,1,3.539-2.082L36.621,23.366A2.387,2.387,0,0,1,36.621,27.53Z" transform="translate(-0.563 -0.563)" fill="#fff"/>
464 
+   </svg>
465 
+
466 
+             </div>
467 
+            </div>
468 
+         </div>
469 
+
470 
+    </div>
471 
+   </div>
472 
+
473 
+</section>
474 
+<!-- section 6 end -->
475 
+
476 
+<!-- section 7 -->
477 
+<section class="p-6 d-flex flex-column justify-content-center overflow-hidden align-items-center ">
478 
+    <h1 class="orbitron_font pb-5">Support / Download</h1>
479 
+    <div class="row supportBoxParent">
480 
+            <div class="supportBox col-sm-4 gap-4 d-flex flex-column justify-content-center align-items-center">
481 
+                <div class="d-flex flex-column justify-content-center align-items-center">
482 
+                    <div class="supportBoxCircle"></div>
483 
+                </div>
484 
+                <div class="d-flex flex-column gap-3">
485 
+                    <div class="text-center font-1-2 orbitron_font fw-600">
486 
+                        Product Registration
487 
+                    </div>
488 
+                    <div class="text-center satoshi_font">
489 
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
490 
+                    </div>
491 
+                </div>
492 
+            </div>
493 
+            <div class="supportBox col-sm-4 gap-4 d-flex flex-column justify-content-center align-items-center">
494 
+                <div class="d-flex flex-column justify-content-center align-items-center">
495 
+                    <div class="supportBoxCircle"></div>
496 
+                </div>
497 
+                <div class="d-flex flex-column gap-3">
498 
+                    <div class="text-center font-1-2 orbitron_font fw-600">
499 
+                        Product Warranty
500 
+                    </div>
501 
+                    <div class="text-center satoshi_font">
502 
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
503 
+                    </div>
504 
+                </div>
505 
+            </div>
506 
+            <div class="supportBox col-sm-4 gap-4 d-flex flex-column justify-content-center align-items-center">
507 
+                <div class="d-flex flex-column justify-content-center align-items-center">
508 
+                    <div class="supportBoxCircle"></div>
509 
+                </div>
510 
+                <div class="d-flex flex-column gap-3">
511 
+                    <div class="text-center font-1-2 orbitron_font fw-600">
512 
+                        Customer /  Support
513 
+                    </div>
514 
+                    <div class="text-center satoshi_font">
515 
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitamet.
516 
+                    </div>
517 
+                </div>
518 
+            </div>
519 
+
520 
+
521 
+    </div>
522 
+</section>
523 
+<!-- section 7 end -->
524 
+    <!-- footer -->
525 
+    <!-- <section id="footer-head"></section> -->
526 
+    <!-- end-footer -->
527 
+
528 
+    <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
529 
+    <script src="../../js/jquery.min.js"></script>
530 
+
531 
+    <script src="./../../../libs/owlcarousel/dist/owl.carousel.min.js"></script>
532 
+    <script src="../../js/navbar.js"></script>
533 
+    <script src="../../js/footer.js"></script>
534 
+    <script src="./../../Js/allInOne.js"></script>
535 
+
536 
+</body>
537 
+
538 
+</html>

+ 803
- 153
dist/html/pages/laptopmulti.html
文件差異過大導致無法顯示
查看文件


+ 6
- 4
styles/abstracts/_mixins.scss 查看文件 

@@ -27,15 +27,17 @@ ORDER: Base + typography > general layout + grid > page layout > components
27 27 
 */
28 28 
 @mixin respond($breakpoint) {
29 29 
     @if $breakpoint == phone {
30 
-        @media only screen and (max-width: 37.5em) { @content };    //600px
30 
+        @media only screen and (max-width: 600px) { @content };    //600px
31 31 
     }
32 32 
     @if $breakpoint == tab-port {
33 
-        @media only screen and (max-width: 56.25em) { @content };     //900px
33 
+        @media only screen and (max-width: 900px) { @content };     //900px
34 34 
     }
35 35 
     @if $breakpoint == tab-land {
36 
-        @media only screen and (max-width: 75em) { @content };    //1200px
36 
+        @media only screen and (max-width: 1200px) { @content };    //1200px
37 37 
     }
38 38 
     @if $breakpoint == big-desktop {
39 
-        @media only screen and (min-width: 112.5em) { @content };    //1800
39 
+        @media only screen and (min-width: 1800) { @content };    //1800
40 40 
     }
41 41 
 }
42 
+
43 
+

+ 167
- 75
styles/base/_utilities.scss 查看文件 

@@ -1,181 +1,273 @@
1 1 
 // colors
2 2 
 .bg-green {
3 
-    background-color: #3bb78f;
4 
-    background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
3 
+  background-color: #3bb78f;
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;
7 
+.text-green-Awni{
8 
+  color: #0A886A;
9 9 
 }
10 10
11 
-.orbitron_font {
12 
-    font-family: 'Orbitron', sans-serif;
11 
+.anwi_grey_bg{
12 
+  background-color: #ECECEC;
13 
+}
14 
+
15 
+.orbitron_font{
16 
+  font-family: 'Orbitron', sans-serif;
17 
+}
18 
+
19 
+.satoshi_font{
20 
+  font-family: "Satoshi", sans-serif;
13 21 
 }
14 22
15 23 
 // font size
24 
+.font-1{
25 
+  font-size: 1rem;
26 
+}
16 27 
 .font-3 {
17 
-    font-size: 3rem;
28 
+  font-size: 3rem;
29 
+}
30 
+
31 
+.font-1-2{
32 
+  font-size: 1.2rem;
18 33 
 }
19 34
35 
+.font-1-5{
36 
+  font-size: 1.5rem;
37 
+}
20 38 
 .font-1_5 {
21 
-    font-size: 2rem;
39 
+  font-size: 2rem;
22 40 
 }
23 41
24 
-.font-1_7 {
25 
-    font-size: 1.7rem;
42 
+.font-1_7{
43 
+  font-size: 1.7rem;
26 44 
 }
27 45
28 
-.font-2 {
29 
-    font-size: 2.2rem;
46 
+
47 
+.font-2{
48 
+  font-size: 2rem;
30 49 
 }
31 50
32 
-.font-2_2 {
33 
-    font-size: 2.2rem;
51 
+.font-2_2{
52 
+  font-size: 2.2rem;
34 53 
 }
35 54
36 
-.font-2_7 {
37 
-    font-size: 2.7rem;
55 
+.font-2_7{
56 
+  font-size: 2.7rem;
38 57 
 }
39 58
40 
-.font_4 {
41 
-    font-size: 4rem;
59 
+
60 
+.font_4{
61 
+  font-size: 4rem;
42 62 
 }
43 63
44 
-.subtitle_1 {
45 
-    font-size: 1.5rem;
64 
+.font-5{
65 
+  font-size: 5rem;
46 66 
 }
47 67
48 
-.gap-1 {
49 
-    gap: 0.7rem;
68 
+.font-6{
69 
+  font-size: 6rem;
70 
+}
71 
+
72 
+.font-7{
73 
+  font-size: 7rem;
74 
+}
75 
+
76 
+.font-10{
77 
+  font-size: 10rem;
50 78 
 }
51 79
80 
+
81 
+.subtitle_1 {
82 
+  font-size: 1.5rem;
83 
+}
84 
+
85 
+
86 
+
52 87 
 .banner_heading_4 {
53 
-    font-size: 3rem;
88 
+  font-size: 3rem;
54 89 
 }
55 90
91 
+
56 92 
 // padding
93 
+
57 94 
 .padding_top_14 {
58 
-    padding-top: 14rem;
95 
+  padding-top: 14rem;
59 96 
 }
60 97
61 
-.p-6 {
62 
-    padding: 5rem;
98 
+.p-6{
99 
+  padding:5rem;
63 100 
 }
64 101
65 
-.padding_top_10 {
66 
-    padding-top: 10rem;
102 
+.ps-7{
103 
+  padding-left: 6rem;
67 104 
 }
68 105
69 
-// heights
70 
-.h-10 {
71 
-    height: 10%;
106 
+.px-6{
107 
+  padding-left: 6rem;
108 
+    padding-right: 6rem;
72 109 
 }
73 110
74 
-.h-15 {
75 
-    height: 15%;
111 
+.p-7{
112 
+  padding: 7rem;
76 113 
 }
77 114
78 
-.h-20 {
79 
-    height: 20%;
115 
+.padding_top_10 {
116 
+  padding-top: 10rem; }
117 
+
118 
+
119 
+// heights
120 
+
121 
+.h-10{
122 
+  height: 10%;
80 123 
 }
81 124
82 
-.h-30 {
83 
-    height: 30%;
125 
+.h-15{
126 
+  height: 15%;
84 127 
 }
85 128
86 
-.h-33 {
87 
-    height: 33%;
129 
+.h-20{
130 
+  height: 20%;
88 131 
 }
89 132
90 
-.h-34 {
91 
-    height: 34%;
133 
+.h-30{
134 
+  height: 30%;
92 135 
 }
93 136
94 
-.h-35 {
95 
-    height: 35%;
137 
+.h-33{
138 
+  height: 33%;
139 
+}
140 
+.h-34{
141 
+  height: 34%;
142 
+}
143 
+.h-35{
144 
+  height: 35%;
96 145 
 }
97 146
98 
-.h-40 {
99 
-    height: 40%;
147 
+.h-40{
148 
+  height: 40%;
100 149 
 }
101 150
102 
-.vh_60 {
103 
-    height: 60vh;
151 
+.vh_60{
152 
+  height: 60vh;
104 153 
 }
105 154
106 
-.vh-70 {
107 
-    height: 70vh;
155 
+.vh-70{
156 
+  height: 70vh;
108 157 
 }
109 158
110 
-.vh-77 {
111 
-    height: 77vh;
159 
+.vh-77{
160 
+  height: 77vh;
112 161 
 }
113 162
114 163 
 .vh-85 {
115 
-    height: 85vh;
164 
+  height: 85vh;
116 165 
 }
117 166
118 167 
 .vh-15 {
119 
-    height: 15vh;
168 
+  height: 15vh;
120 169 
 }
121 170
122 
-.h-700p {
123 
-    height: 700px;
171 
+.h-700p{
172 
+  height: 700px;
124 173 
 }
125 174
126 
-// margin
127 
-.mt-7 {
128 
-    margin-top: 7rem;
175 
+.h-25{
176 
+  height: 25%;
177 
+}
178 
+
179 
+.h-60{
180 
+  height: 60%;
181 
+}
182 
+
183 
+.h-75{
184 
+  height: 75%;
185 
+}
186 
+
187 
+.w-60{
188 
+  width: 60%;
189 
+}
190 
+
191 
+
192 
+.w-20p{
193 
+  width: 20px;
129 194 
 }
130 195
131 196 
 // font weight
132 
-.fw-600 {
133 
-    font-weight: 600;
197 
+
198 
+
199 
+.fw-500{
200 
+  font-weight: 500;
201 
+}
202 
+
203 
+.fw-600{
204 
+  font-weight: 600;
134 205 
 }
135 206
136 
-.fw-700 {
137 
-    font-weight: 700;
207 
+
208 
+  .fw-700 {
209 
+    font-weight: 700; }
210 
+
211 
+
212 
+.h-200p{
213 
+  height: 200px;
138 214 
 }
139 215
140 
-.h-200p {
141 
-    height: 200px;
216 
+// margin
217 
+.mt-7 {
218 
+  margin-top: 7rem;
142 219 
 }
143 220
221 
+
144 222 
 // spacing
145 223 
 .sec-space-1 {
146 
-    margin-top: 80px;
224 
+  margin-top: 80px;
147 225 
 }
148 226
149 227 
 .sec-space-2 {
150 
-    margin-top: 60px;
228 
+  margin-top: 60px;
151 229 
 }
152 230
153 231 
 .sec-space-3 {
154 
-    margin-top: 40px;
232 
+  margin-top: 40px;
155 233 
 }
156 234
157 235 
 .sec-space-4 {
158 
-    margin-top: 20px;
236 
+  margin-top: 20px;
159 237 
 }
160 238
161 239 
 .sec-space-5 {
162 
-    margin-top: 0px;
240 
+  margin-top: 0px;
163 241 
 }
164 242
165 243 
 .h-100p {
166 
-    height: 100px;
244 
+  height: 100px;
167 245 
 }
168 246
247 
+
248 
+
169 249 
 // gap
250 
+
170 251 
 .gap-1 {
171 
-    gap: 0.7rem;
252 
+  gap: 0.7rem;
172 253 
 }
173 254
174 
-.gap-2 {
175 
-    gap: 2rem
255 
+.gap-2{
256 
+  gap:2rem
176 257 
 }
177 258
178 259 
 // border-radius
179 
-.br-1 {
180 
-    border-radius: 1rem;
260 
+
261 
+.br-1{
262 
+  border-radius: 1rem;
263 
+}
264 
+
265 
+.cursor-pointer{
266 
+  cursor: pointer;
267 
+}
268 
+
269 
+
270 
+// margin
271 
+.mt-5C{
272 
+  margin-top: 5rem;
181 273 
 }

+ 382
- 0
styles/pages/_allInOne.scss 查看文件 

@@ -0,0 +1,382 @@
1 
+
2 
+.clipPathSectionCol{
3 
+
4 
+
5 
+    position: relative;
6 
+
7 
+    .innerClipPathImg{
8 
+        position: absolute;
9 
+        top: 12%;
10 
+        left: 9%;
11 
+        width: 81%;
12 
+    }
13 
+
14 
+    .innerClipPathImgFirstThree{
15 
+        position: absolute;
16 
+        top: 12%;
17 
+        left:5%;
18 
+        width: 81%;
19 
+    }
20 
+
21 
+    .innerClipPathImgFirstFour{
22 
+        position: absolute;
23 
+        top: 12%;
24 
+        left:5%;
25 
+        width: 81%;
26 
+        >img{
27 
+            transform: scale(0.7);
28 
+        }
29 
+    }
30 
+
31 
+    .innerClipPathImgSectionTwo{
32 
+        position: absolute;
33 
+
34 
+        top: 50%;
35 
+        left: 28%;
36 
+        transform: translateY(-50%);
37 
+        width: 81%;
38 
+    }
39 
+
40 
+    .innerClipPathImgSectionThree{
41 
+        position: absolute;
42 
+
43 
+        top: 50%;
44 
+        left:17%;
45 
+        transform: translateY(-50%);
46 
+        width: 81%;
47 
+
48 
+    }
49 
+    .innerClipPathImgSectionFour{
50 
+        position: absolute;
51 
+
52 
+        top: 50%;
53 
+        left: 17%;
54 
+        transform: translateY(-50%);
55 
+        width: 81%;
56 
+        // >img{
57 
+        //     transform: scale(0.7);
58 
+        // }
59 
+
60 
+    }
61 
+
62 
+
63 
+}
64 
+.allinoneLanding{
65 
+    background-image: url("./../../dist/assets/imgs/allinone/allinonebg.png");
66 
+    background-color: white;
67 
+    background-size: cover;
68 
+    background-repeat: no-repeat;
69 
+    background-position: center;
70 
+
71 
+    position: relative;
72 
+
73 
+    width: 100vw;
74 
+    height: 100vh;
75 
+    #navbar-head *{
76 
+        color: white;
77 
+    }
78 
+
79 
+    .headingAllinOne{
80 
+        position: absolute;
81 
+        bottom: 10%;
82 
+        left: 0;
83 
+    }
84 
+}
85 
+
86 
+.sectionTwoImgAllInone{
87 
+    transform: scale(1.4);
88 
+}
89 
+
90 
+.allinoneDualMarginTop{
91 
+    margin-top: 200px;
92 
+}
93 
+
94 
+.sectionfiveAllinOne{
95 
+    .infoContainer{
96 
+        position: relative;
97 
+        .infoContainerOneText{
98 
+            position: absolute;
99 
+            top: 20%;
100 
+
101 
+            left: 50%;
102 
+  transform: translateX(-50%);
103 
+            >h1{
104 
+                font-size: 1.7rem;
105 
+            }
106 
+        }
107 
+        // width: 100%;
108 
+        // max-height: 500px;
109 
+    }
110 
+}
111 
+
112 
+.infoContainerYellow{
113 
+    background-color: #FFB518;
114 
+
115 
+}
116 
+.infoContainerOrange{
117 
+    background-color: #E05E00;
118 
+    color: white;
119 
+}
120 
+.infoContainerBlue{
121 
+    background-color: #461DCF;
122 
+    color: white;
123 
+}
124 
+
125 
+.infoContainer_des{
126 
+    font-size: 0.8rem;
127 
+}
128 
+
129 
+.supportBoxCircle{
130 
+    width: 100px;
131 
+    height: 100px;
132 
+    background-color: black;
133 
+    border-radius: 50%;
134 
+}
135 
+
136 
+// carouselLanding
137 
+
138 
+.carouselLanding{
139 
+    overflow-x: auto;
140 
+    display: flex;
141 
+    gap: 50px;
142 
+    margin-bottom:4rem;
143 
+    .carouselLandingItem{
144 
+        width: 300px;
145 
+        >div{
146 
+            border-radius: 25px;
147 
+            overflow: hidden;
148 
+        }
149 
+
150 
+        .carouselLandingItemInner{
151 
+            position: relative;
152 
+            .carouselLandingItemInnerOverlay{
153 
+                position: absolute;
154 
+                top: 0;
155 
+                bottom: 0;
156 
+                left: 0;
157 
+                right: 0;
158 
+                background: rgba(0, 0, 0, 0.453);
159 
+            }
160 
+        }
161 
+    }
162 
+}
163 
+
164 
+@media (max-width:1300px) {
165 
+   .laptopsSection .headinglaptop{
166 
+        font-size: 5rem;
167 
+   }
168 
+
169 
+   .headinglaptopSub{
170 
+    font-size: 1.2rem;
171 
+   }
172 
+}
173 
+
174 
+
175 
+@media (max-width:1000px) {
176 
+    .laptopsSection .headinglaptop{
177 
+         font-size: 3rem;
178 
+    }
179 
+
180 
+    .headinglaptopSub{
181 
+     font-size: 1.2rem;
182 
+    }
183 
+
184 
+    // allinoneDual
185 
+
186 
+    .allinoneDualMarginTop {
187 
+        .allinoneDualMarginTop_desContainer {
188 
+            padding: 2rem;
189 
+            h1{
190 
+                font-size: 2rem;
191 
+            }
192 
+
193 
+            .allinoneDualMarginTop_p{
194 
+                font-size: 1rem;
195 
+            }
196 
+        }
197 
+    }
198 
+
199 
+    .allinoneDualMarginTop{
200 
+        margin-top: 100px;
201 
+    }
202 
+ }
203 
+
204 
+ @media (tab-port) {
205 
+    .laptopsSection .headinglaptop{
206 
+         font-size: 2rem;
207 
+    }
208 
+
209 
+
210 
+
211 
+    .headinglaptopSub{
212 
+     font-size: 1rem;
213 
+    }
214 
+ }
215 
+
216 
+@include respond(phone) {
217 
+    .headingAllinOne > h1{
218 
+        font-size: 2rem;
219 
+    }
220 
+}
221 
+
222 
+@media (max-width:600px) {
223 
+    .supTitleSection{
224 
+        text-align: center;
225 
+        font-size: 1rem;
226 
+    }
227 
+
228 
+    .allinoneDualMarginTop .clipPathSectionCol{
229 
+        padding-right: 0 !important;
230 
+    }
231 
+    .headingAllinOne{
232 
+        padding-left: 2rem !important;
233 
+        padding-right: 2rem !important;
234 
+        > h1{
235 
+            font-size: 2rem;
236 
+
237 
+        }
238 
+    }
239 
+
240 
+    .laptopSectionDesP{
241 
+        padding: 1rem;
242 
+        width: 100%;
243 
+        align-items: center;
244 
+    }
245 
+
246 
+
247 
+
248 
+    .allinoneDualMarginTop {
249 
+        .clipPathSectionCol{
250 
+            padding-left: 0 !important;
251 
+        }
252 
+    }
253 
+
254 
+
255 
+    .clipPathSectionCol{
256 
+        //padding-left: 1rem !important;
257 
+        .allinoneDualMarginTop_pContainer{
258 
+            padding: 2rem;
259 
+            align-items: center;
260 
+        }
261 
+        .innerClipPathImgSectionThree{
262 
+            top: 30%;
263 
+        }
264 
+
265 
+        .innerClipPathImgSectionFour{
266 
+            top: 30%;
267 
+        }
268 
+
269 
+
270 
+
271 
+    }
272 
+
273 
+    .supportBoxParent{
274 
+        padding: 2rem;
275 
+        gap: 1.5rem;
276 
+    }
277 
+
278 
+    .allinoneDualMarginTop_p{
279 
+        text-align: center;
280 
+        font-size: 1rem;
281 
+    }
282 
+
283 
+    .insightsAdvHeading{
284 
+        margin-top: 2rem;
285 
+    }
286 
+    .insightsAdv{
287 
+        width: 100vw;
288 
+        padding: 1rem;
289 
+        >ul{
290 
+            overflow-x: auto;
291 
+        }
292 
+    }
293 
+
294 
+    .carouselLanding{
295 
+        overflow-x: auto;
296 
+        display: block;
297 
+        gap:0;
298 
+        margin-bottom:1rem;
299 
+        .carouselLandingItem{
300 
+            width: 100%;
301 
+            >div{
302 
+                border-radius: 25px;
303 
+                overflow: hidden;
304 
+            }
305 
+
306 
+            .carouselLandingItemInner{
307 
+                position: relative;
308 
+                .carouselLandingItemInnerOverlay{
309 
+                    position: absolute;
310 
+                    top: 0;
311 
+                    bottom: 0;
312 
+                    left: 0;
313 
+                    right: 0;
314 
+                    background: rgba(0, 0, 0, 0.453);
315 
+                }
316 
+            }
317 
+        }
318 
+
319 
+        .mt-5C{
320 
+            margin-top: 0;
321 
+        }
322 
+    }
323 
+
324 
+
325 
+
326 
+
327 
+ }
328 
+
329 
+
330 
+ @media (max-width:320px) {
331 
+
332 
+
333 
+    .laptopsSection {
334 
+        .headinglaptopSub{
335 
+            text-align: center;
336 
+            font-size: 1rem;
337 
+
338 
+        }
339 
+
340 
+        .laptopSectionDesP {
341 
+            gap: 2rem !important;
342 
+        }
343 
+    }
344 
+
345 
+
346 
+    .allinoneDualMarginTop {
347 
+        .allinoneDualMarginTop_p{
348 
+            text-align: center;
349 
+            font-size: 1rem;
350 
+        }
351 
+
352 
+        .allinoneDualMarginTop_pContainer {
353 
+            width: 100%;
354 
+        }
355 
+
356 
+        .clipPathSectionCol{
357 
+            padding-left: 0 !important;
358 
+            padding-right: 0 !important;
359 
+        }
360 
+    }
361 
+
362 
+    .clipPathSectionCol {
363 
+
364 
+        .innerClipPathImgSectionThree{
365 
+            top: 22%;
366 
+        }
367 
+
368 
+        .innerClipPathImgSectionFour{
369 
+            top: 22%;
370 
+        }
371 
+        .innerClipPathImgFirstFour{
372 
+            top: 0;
373 
+        }
374 
+    }
375 
+
376 
+    .allinoneDualMarginTop {
377 
+        margin-top: 100px;
378 
+        .innerClipPathImgFirstThree{
379 
+            top:0;
380 
+        }
381 
+    }
382 
+ }

+ 631
- 97
styles/pages/_productOverview.scss 查看文件 

@@ -65,88 +65,214 @@ $PO_footerText: 0.7rem;
65 65 
   background: white;
66 66 
   background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
67 67 
   position: relative;
68 
+  overflow: hidden;
68 69 
 }
70 
+
69 71 
 .PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
70 72 
   position: absolute;
71 73 
   top: 50%;
72 74 
   left: 50%;
73 
-  transform: translate(-50%, -50%);
75 
+  transform: translate(-50%, -46%);
76 
+}
77 
+
78 
+.PO_gallery_box {
79 
+  padding: 1rem;
74 80 
 }
75 81
76 82 
 .PO_galleryContainer .PO_gallery_box_inner {
77 
-  padding: 2rem;
83 
+  padding: 1rem;
78 84 
   background-color: #eeeeee;
79 85 
 }
80 86
87 
+.mobileAw{
88 
+  display: none;
89 
+}
90 
+
81 91 
 .productoverBox {
92 
+  height: 900px;
93 
+
94 
+  .productoverBox-1 {
95 
+    height: 225px;
96 
+  }
97 
+
98 
+  .productoverBox-2 {
99 
+    height: 225px;
100 
+
101 
+    .futureProof {
102 
+      position: relative;
103 
+    }
104 
+
105 
+    .futureProofImg {
106 
+      position: absolute;
107 
+      top: 0;
108 
+      right: 0;
109 
+      width: 50%;
110 
+    }
111 
+  }
112 
+
113 
+  .productoverBox-3 {
114 
+    height: 225px;
115 
+  }
116 
+
117 
+  .productoverBox-4 {
118 
+    height: 225px;
119 
+  }
120 
+
121 
+  .productoverBox-5 {
122 
+    height: 200px;
123 
+    overflow: hidden;
124 
+
125 
+    .box_innerImg {
126 
+      position: absolute;
127 
+      right: 8%;
128 
+      top: 0;
129 
+
130 
+      height: 100%;
131 
+
132 
+      img {
133 
+        scale: 1.2;
134 
+      }
135 
+    }
136 
+  }
137 
+
138 
+  .productoverBox-6 {
139 
+    height: 150px;
140 
+  }
141 
+
142 
+  .productoverBox-7 {
143 
+    height: 225px;
144 
+    position: relative;
145 
+
146 
+    .gridTruelifeImg {
147 
+      position: absolute;
148 
+      width: 85%;
149 
+      bottom: 0;
150 
+      left: 0;
151 
+    }
152 
+  }
153 
+
154 
+  .productoverBox-8 {
155 
+    height: 60px;
156 
+  }
157 
+
158 
+  .productoverBox-9 {
159 
+    height: 230px;
160 
+  }
161 
+
162 
+  .productoverBox-10 {
163 
+    height: 150px;
164 
+  }
165 
+
166 
+  .productoverBox-11 {
167 
+    height: 180px;
168 
+  }
169 
+
170 
+  .productoverBox-12 {
171 
+    height: 75px;
172 
+  }
173 
+
82 174 
   .PO_box {
83 175 
     // background-color: red;
84 176 
     height: 100%;
85 
-    > div {
177 
+
178 
+    >div {
86 179 
       padding: 1rem 0rem;
87 180 
     }
181 
+
88 182 
     .box_inner {
89 
-      height: 100%;
183 
+      // height: 100%;
184 
+      position: relative;
90 185 
     }
91 186
92 187 
     .bgBox_Content {
93 188 
       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 
-      );
189 
+      background: linear-gradient(90deg,
190 
+          rgba(236, 236, 236, 1) 4%,
191 
+          rgba(118, 118, 118, 1) 100%);
99 192 
     }
193 
+
100 194 
     .box_inner_right {
101 195 
       padding-left: 1rem;
102 196 
     }
197 
+
103 198 
     .box_inner_left {
104 199 
       padding-right: 1rem;
105 200 
     }
106 201 
   }
107 202 
 }
108 203
204 
+// specsgrid
205 
+
206 
+.specsgrid {
207 
+  display: grid;
208 
+  height: 100vh;
209 
+  gap: 20px;
210 
+  grid-template-columns: repeat(8, minmax(5%, 1fr));
211 
+  grid-template-rows: repeat(12, minmax(5%, 1fr));
212 
+
213 
+  .specsItem {
214 
+    background-color: red;
215 
+  }
216 
+
217 
+  .specsItem-1 {
218 
+    grid-column: 1/4;
219 
+    grid-row: 1/4;
220 
+  }
221 
+
222 
+  .specsItem-2 {
223 
+    grid-column: 1/4;
224 
+    grid-row: 1/4;
225 
+  }
226 
+}
227 
+
228 
+// specsgrid end
229 
+
109 230 
 .displayscreenpad {
110 231 
   .displayscreenpadContainer {
111 232 
     text-align: center;
112 233 
   }
234 
+
113 235 
   .displayscreenpadHeading {
114 236 
     font-size: 8rem;
115 237 
   }
116 238
117 239 
   .displayscreenpadMain {
118 
-    top: -108px;
240 
+    // top: -108px;
241 
+    margin-top: -8%;
119 242 
   }
243 
+
120 244 
   .displayscreenpadleft {
121 
-    > img {
245 
+    >img {
122 246 
       left: -8%;
123 247 
     }
124 248 
   }
125 249
126 250 
   .displayscreenpadright {
127 
-    > img {
251 
+    >img {
128 252 
       right: -10%;
129 253 
     }
130 254 
   }
131 255 
 }
132 256
133 
-.dual_des_heading{
257 
+.dual_des_heading {
134 258 
   font-size: 3rem;
135 259 
 }
136 260
261 
+.dualLaptop {
137 262
138 
-.dualLaptop{
139 263 
   width: 100vw;
140 
-  height: 1000px;
141 
-  top:-100px;
264 
+  // height: 1300px;
265 
+  top: -100px;
266 
+  margin-top: 100px;
142 267 
   margin-bottom: -100px;
143 268 
   position: relative;
144 269
145 
-
146 
-  .zeroBMain_desP{
270 
+  //  overflow-x: hidden;
271 
+  .zeroBMain_desP {
147 272 
     font-size: 1.2rem;
148 273 
   }
149 
-  .zeroBMain_des{
274 
+
275 
+  .zeroBMain_des {
150 276 
     position: absolute;
151 277 
     top: 0;
152 278 
     right: 0;
 
@@ -154,52 +280,51 @@ $PO_footerText: 0.7rem;
154 280 
     padding-right: 9rem;
155 281 
   }
156 282
157 
-  .dualImgs{
283 
+  .dualImgs {
158 284 
     position: absolute;
159 285
160 
-
161 
-    .dualImgsInner{
162 
-      width: 63%;
286 
+    .dualImgsInner {
287 
+      width: 50rem;
163 288 
     }
164 289 
   }
165 290
166 
-
167 
-
168 
-  .dualImgsOne{
169 
-    top:0;
170 
-    left: -10%;
291 
+  .dualImgsOne {
292 
+    top: 0;
293 
+    left: -10rem;
171 294 
     transform: rotate(343deg);
172 295 
     width: 68%;
173 296 
   }
174 
-
175 
-  .dualImgsTwo{
297 
+
298 
+  .dualImgsTwo {
176 299 
     // top:0;
177 300 
     // right: -80%;
178 301 
     // transform: rotate(330deg);
179 302
180 
-    top: 31%;
181 
-    right: -68%;
303 
+    top: 14rem;
304 
+    right: -62%;
182 305 
     transform: rotate(339deg);
183 
-    .dualImgsInner{
306 
+    .dualImgsInner {
184 307 
       width: 82%;
185 308 
     }
186 309 
   }
187 310 
 }
188 311
189 
-.tableLaptop{
312 
+.tableLaptop {
190 313 
   margin-top: 300px;
191 314
192 315 
   // border: 1px solid;
193 316 
   height: 90vh;
194 317 
   width: 100vw;
195 318 
   position: relative;
196 
-  .circleTableLaptop_Heading{
319 
+
320 
+  .circleTableLaptop_Heading {
197 321 
     position: absolute;
198 322 
     top: 50%;
199 323 
     left: 50%;
200 324 
     transform: translate(-50%, -311%);
201 325 
   }
202 
-  .justTableLaptop{
326 
+
327 
+  .justTableLaptop {
203 328 
     position: absolute;
204 329 
     width: 86%;
205 330 
     top: -10px;
 
@@ -207,104 +332,108 @@ $PO_footerText: 0.7rem;
207 332 
     z-index: 1;
208 333 
   }
209 334
210 
-  .circleTableLaptop{
211 
-    background-color: #ECECEC;
335 
+  .circleTableLaptop {
336 
+    background-color: #ececec;
212 337 
     height: 70rem;
213 338 
     width: 70rem;
214 339 
     border-radius: 50%;
215 340 
     position: relative;
216 341 
     overflow: hidden;
217 342
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 
-
343 
+    .circleTableLaptopTop {
344 
+      bottom: -3%;
345 
+      width: 80%;
346 
+      position: absolute;
347 
+      top: 50%;
348 
+      left: 50%;
349 
+      transform: translate(-50%, 2%);
228 350 
     }
229 351 
   }
230 352
231 
-  .circleTableLaptop_text{
353 
+  .circleTableLaptop_text {
232 354 
     position: absolute;
233 355 
     top: 50%;
234 356 
     left: 50%;
235 
-    transform: translate(-50%, 168%);
236 
-
357 
+    transform: translate(-50%, 106%);
237 358 
   }
238 359
239 360 
   margin-bottom: 300px;
240 361 
 }
241 362
242 
-.trueLifeDisplay{
243 
- .trueLifeDisplay_headingHD{
244 
-  >.headingLife{
245 
-    font-size: 6rem;
363 
+.trueLifeDisplay {
364 
+  .trueLifeDisplay_headingHD {
365 
+    >.headingLife {
366 
+      font-size: 6rem;
367 
+    }
246 368 
   }
247 
- }
248 
-
249 
- .trueLifeDisplay_des{
250 
-  padding: 0 10rem;
251 369
252 
- }
370 
+  .trueLifeDisplay_des {
371 
+    padding: 0 10rem;
372 
+  }
253 373 
 }
254 374
255 
-.font_p_Dual{
375 
+.font_p_Dual {
256 376 
   font-size: 1.2rem;
257 377 
 }
258 378
259 
-.controlPanel{
260 
-
379 
+.tableLaptopTwo{
380 
+  width: 100vw;
381 
+  height: 100vh;
382 
+  background-image: url("../../dist/assets/imgs/sectiontest.png");
383 
+  background-color: white;
384 
+  background-size: contain;
385 
+  background-repeat: no-repeat;
386 
+  background-position: center;
387 
+}
388 
+
389 
+.controlPanel {
261 390 
   margin-top: 10rem;
262 
-  padding-bottom: 550px;
263 
-  .controlPanel_des{
391 
+  padding-bottom: 300px;
392 
+
393 
+  .controlPanel_des {
264 394 
     position: absolute;
265 395 
     top: -170px;
266 396 
     left: 80px;
267 
-
268 397 
   }
269 
-  .bgControlpanel{
398 
+
399 
+  .bgControlpanel {
270 400 
     min-height: 100vh;
271 
-    background-color: #ECECEC;
401 
+    background-color: #ececec;
272 402 
     border-radius: 157px;
273 403 
     position: relative;
274 404
275 
-    .bgControlpaneltabs{
276 
-
405 
+    .bgControlpaneltabs {
277 406 
       position: absolute;
278 407 
       top: 100px;
279 408 
       right: 0;
280 409
281 
-      .nav-tabs{
410 
+      .nav-tabs {
282 411 
         border-bottom: 1px solid;
283 412 
         margin-bottom: 2rem;
284 413 
       }
285 
-      .nav-item{
414 
+
415 
+      .nav-item {
286 416 
         position: relative;
287 417 
         border: none;
288 418 
       }
289 
-
290 
-
419 
+
291 420 
       .nav-tabs .nav-link {
292 
-       position: relative;
293 
-       color: black;
294 
-       font-weight: 500;
421 
+        position: relative;
422 
+        color: black;
423 
+        font-weight: 500;
295 424 
       }
296 
-
297 
-      .nav-tabs .nav-link.active{
425 
+
426 
+      .nav-tabs .nav-link.active {
298 427 
         border: none;
299 428 
         background-color: transparent;
300 429 
       }
301 
-
430 
+
302 431 
       .nav-tabs .nav-link.active::before {
303 432 
         display: block;
304 433 
       }
305 
-
306 
-      .nav-item .nav-link::before{
307 
-        content: '';
434 
+
435 
+      .nav-item .nav-link::before {
436 
+        content: "";
308 437 
         position: absolute;
309 438 
         width: 100%;
310 439 
         height: 5px;
 
@@ -315,26 +444,431 @@ $PO_footerText: 0.7rem;
315 444 
       }
316 445 
     }
317 446 
   }
318 
-
319 
-
320 447 
 }
321 448
322 
-.designedProLaptop{
449 
+
450 
+
451 
+
452 
+.dragondisplay {
323 453 
   position: relative;
324 
-  .designedProLaptop_title{
454 
+  background: rgb(255, 255, 255);
455 
+  background: linear-gradient(184deg,
456 
+      rgba(255, 255, 255, 1) 4%,
457 
+      rgba(235, 255, 133, 1) 100%);
458 
+  overflow: hidden;
459 
+
460 
+  .dragondisplay_heading {
325 461 
     position: absolute;
326 
-    top: -200px;
327 
-    left: 0;
328 
-    z-index: 1;
462 
+    bottom: -4%;
463 
+    margin: auto;
464 
+    width: 100%;
329 465
330 
-
331 
-  }
332 
-  .designedProLaptop_title_text{
333 
-    font-size: 10rem;
466 
+    >h1 {
467 
+      font-size: 8rem;
468 
+      text-align: center;
469 
+    }
334 470 
   }
335 
-  .designedProLaptop_img{
471 
+
472 
+  .dragondisplay_des {
473 
+    max-width: 600px;
336 474 
     position: absolute;
337 
-    top: 0;
338 
-    right: 700px;
475 
+    right: 0;
476 
+    top: 13%;
477 
+    padding: 4rem;
478 
+  }
479 
+}
480 
+
481 
+
482 
+
483 
+
484 
+
485 
+
486 
+.intelGen {
487 
+  .intelGenUL {
488 
+    max-width: 250px;
489 
+    gap: 8rem;
490 
+
491 
+    .intelGenULHeading {
492 
+      font-size: 1.8rem;
493 
+      font-weight: 700;
494 
+      border-bottom: 2px solid;
495 
+    }
496 
+  }
497 
+
498 
+  .cpuSection {
499 
+    background-image: url("./../../dist/assets/imgs/productoverview/cpu.png");
500 
+    background-color: white;
501 
+    background-size: cover;
502 
+    background-repeat: no-repeat;
503 
+    background-position: center;
504 
+  }
505 
+}
506 
+
507 
+.osPlusSoftware {
508 
+  width: 100vw;
509 
+  height: 140vh;
510 
+  margin-top: 14rem;
511 
+
512 
+  .osContianer {
513 
+    position: relative;
514 
+    width: 100%;
515 
+    height: 100%;
516 
+    border-radius: 30%;
517 
+
518 
+    .osContianer_des_fontParent {
519 
+      position: relative;
520 
+      top: -8%;
521 
+    }
522 
+
523 
+    .osContianer_des_font {
524 
+      font-size: 2rem;
525 
+      font-weight: 600;
526 
+    }
527 
+
528 
+    .osContianerHeading {
529 
+      position: relative;
530 
+      top: -15%;
531 
+    }
532 
+
533 
+    .osContianerImg {
534 
+      position: absolute;
535 
+      bottom: 0;
536 
+    }
339 537 
   }
538 
+}
539 
+
540 
+
541 
+@media (max-width:1200px) {
542 
+
543 
+  // section
544 
+
545 
+  .productOverview {
546 
+    .p-6{
547 
+      padding:0;
548 
+    }
549 
+    .overviewProductFullTitle{
550 
+      padding: 2rem 5rem;
551 
+      font-size: 2rem;
552 
+    }
553 
+  }
554 
+
555 
+  // section
556 
+  .productOverview {
557 
+    >div {
558 
+      padding: 0;
559 
+    }
560 
+  }
561 
+
562 
+  // seciton
563 
+  .dualLaptop .dualImgsTwo .dualImgsInner {
564 
+    transform: rotate(339deg) translateX(57%) translateY(55%);
565 
+}
566 
+  // section
567 
+
568 
+  .productOverview .overviewProductFullTitle {
569 
+    font-size: 1rem;
570 
+    padding: 2rem 0rem;
571 
+  }
572 
+
573 
+  .productOverview .overviewProductDes {
574 
+    font-size: 0.7rem;
575 
+    padding: 0.5rem;
576 
+  }
577 
+
578 
+  .PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
579 
+    width: 100%;
580 
+  }
581 
+
582 
+  .PO_galleryContainer .PO_gallery_display {
583 
+    min-height: 300px;
584 
+  }
585 
+
586 
+  .PO_gallery_box {
587 
+    padding: 0;
588 
+  }
589 
+
590 
+  .PO_galleryContainer .PO_gallery_box_inner {
591 
+    padding: 0;
592 
+  }
593 
+
594 
+  .productoverBox.px-6 {
595 
+    padding: 1rem;
596 
+    margin: 0;
597 
+    height: max-content;
598 
+  }
599 
+
600 
+  // ssection end
601 
+
602 
+  .displayscreenpad {
603 
+    .displayscreenpadHeading {
604 
+      font-size: 4rem;
605 
+    }
606 
+  }
607 
+
608 
+  // section end
609 
+
610 
+  .dualLaptop {
611 
+    .dual_des_heading {
612 
+      font-size: 2rem;
613 
+    }
614 
+
615 
+    .zeroBMain_des {
616 
+      padding-right: 0;
617 
+
618 
+      .zeroBMain_desP {
619 
+        font-size: 0.8rem;
620 
+        max-width: 400px;
621 
+
622 
+      }
623 
+    }
624 
+  }
625 
+  //section
626 
+  .controlPanel {
627 
+
628 
+    .controlPanel_des{
629 
+      top: -110px;
630 
+      >h1 {
631 
+        font-size: 2.5rem;
632 
+      }
633 
+    }
634 
+  }
635 
+
636 
+}
637 
+
638 
+@media (max-width:790px) {
639 
+
640 
+  .productOverview {
641 
+    .p-6{
642 
+      padding:0;
643 
+    }
644 
+    .overviewProductFullTitle{
645 
+      padding: 2rem 0;
646 
+      font-size: 1rem;
647 
+    }
648 
+    .overviewProductDes{
649 
+      font-size: 0.7rem;
650 
+    }
651 
+  }
652 
+
653 
+  // section
654 
+
655 
+
656 
+  // section
657 
+
658 
+  .displayscreenpad {
659 
+    .displayscreenpadHeading {
660 
+      font-size: 2rem;
661 
+    }
662 
+  }
663 
+
664 
+  .dualLaptop {
665 
+    .dual_des_heading {
666 
+      font-size: 1rem;
667 
+    }
668 
+
669 
+    .zeroBMain_des {
670 
+      // padding-right: 3rem;
671 
+
672 
+      .zeroBMain_desP {
673 
+        font-size: 0.7rem;
674 
+        max-width: 400px;
675 
+
676 
+      }
677 
+    }
678 
+  }
679 
+
680 
+  // section
681 
+  .controlPanel{
682 
+    .controlPanel_des{
683 
+
684 
+      >h1 {
685 
+        font-size: 1.9rem;
686 
+      }
687 
+    }
688 
+  }
689 
+
690 
+}
691 
+
692 
+@media (max-width:670px) {
693 
+  .zeroBMain_des{
694 
+    display: none;
695 
+  }
696 
+  .mobileAw{
697 
+    display: block;
698 
+  }
699 
+}
700 
+
701 
+
702 
+
703 
+
704 
+// media quiue
705 
+
706 
+@include respond(phone) {
707 
+  .p-6 {
708 
+    padding: 0;
709 
+  }
710 
+
711 
+  .productoverviewmain .displayscreenpad .displayscreenpadHeading {
712 
+    font-size: 5rem;
713 
+  }
714 
+
715 
+  .banner_heading_4 {
716 
+    font-size: 2rem;
717 
+  }
718 
+
719 
+
720 
+
721 
+  // section 3
722 
+  .displayscreenpad {
723 
+    .displayscreenpadHeading {
724 
+      font-size: 2rem;
725 
+    }
726 
+
727 
+    .displayscreenpadMain {
728 
+      top: -26px;
729 
+    }
730 
+  }
731 
+
732 
+  // section 5
733 
+  .tableLaptop {
734 
+    margin-top: 20%;
735 
+    margin-bottom: 0;
736 
+    height: max-content;
737 
+
738 
+    .dual_des_heading {
739 
+      font-size: 1rem;
740 
+    }
741 
+
742 
+    .circleTableLaptop {
743 
+      height: 300px;
744 
+    }
745 
+
746 
+    .circleTableLaptop .circleTableLaptopTop {
747 
+      bottom: -3%;
748 
+      width: 80%;
749 
+      position: absolute;
750 
+      top: 50%;
751 
+      left: 50%;
752 
+      transform: translate(-50%, 2%);
753 
+    }
754 
+
755 
+    .circleTableLaptop_Heading {
756 
+      position: absolute;
757 
+      top: 4%;
758 
+      left: 50%;
759 
+      transform: translate(-50%, 0);
760 
+    }
761 
+
762 
+    .justTableLaptop {
763 
+      position: absolute;
764 
+      width: 86%;
765 
+      top: 26%;
766 
+      right: 30px;
767 
+      z-index: 1;
768 
+    }
769 
+
770 
+    .circleTableLaptop_text {
771 
+      position: absolute;
772 
+      top: 50%;
773 
+      left: 50%;
774 
+      transform: translate(-50%, 0%);
775 
+    }
776 
+  }
777 
+
778 
+  .trueLifeDisplay {
779 
+    margin-top: 50px;
780 
+
781 
+    .trueLifeDisplay_headingHD {
782 
+
783 
+      >h1,
784 
+      .headingLife {
785 
+        font-size: 2rem;
786 
+      }
787 
+    }
788 
+
789 
+    .trueLifeDisplay_des {
790 
+      padding: 1rem;
791 
+
792 
+      .font_p_Dual {
793 
+        font-size: 0.9rem;
794 
+      }
795 
+    }
796 
+  }
797 
+
798 
+  // section 6
799 
+  .controlPanel {
800 
+    margin-top: 3rem;
801 
+    padding-bottom: 100px;
802 
+
803 
+    //heading h1
804 
+    >.p-5 {
805 
+      padding: 0 !important;
806 
+    }
807 
+
808 
+    .bgControlpanel {
809 
+      min-height: 85vh;
810 
+
811 
+      .bgControlpaneltabs {
812 
+        top: 55%;
813 
+        right: 0;
814 
+        transform: translateY(-50%);
815 
+      }
816 
+    }
817 
+
818 
+    .controlPanel_des {
819 
+      top:0%;
820 
+      width: 100%;
821 
+      left: 50%;
822 
+      text-align: center;
823 
+      transform: translateX(-50%);
824 
+      margin: 1rem 0;
825 
+      margin: 1rem 0;
826 
+
827 
+      >h1 {
828 
+        font-size: 1.2rem;
829 
+      }
830 
+    }
831 
+
832 
+    .bgControlpaneltabs {
833 
+      padding: 0.1rem !important;
834 
+      padding-top: 3rem !important;
835 
+
836 
+      >.nav-tabs {
837 
+        padding: 0;
838 
+      }
839 
+
840 
+      >ul {
841 
+        padding: 1rem;
842 
+      }
843 
+
844 
+      #tabLaptopContent {
845 
+        padding: 1rem;
846 
+      }
847 
+    }
848 
+  }
849 
+
850 
+  // section 7
851 
+  .proSection{
852 
+    .designedProLaptop_title{
853 
+      .designedProLaptop_title_text {
854 
+        font-size: 2rem;
855 
+      }
856 
+    }
857 
+  }
858 
+
859 
+  // // popupKeyboard
860 
+  // .popupKeyboard {
861 
+  //   padding: 1rem;
862 
+
863 
+  //   .popupKeyboard_heading {
864 
+  //     >h1 {
865 
+  //       font-size: 2rem;
866 
+  //     }
867 
+  //   }
868 
+
869 
+  //   .popupKeyboard_hParent .popupKeyboard_des {
870 
+  //     max-width: max-content;
871 
+  //     font-size: 0.9rem;
872 
+  //   }
873 
+  // }
340 874 
 }

+ 46
- 0
styles/pages/productOverview/_designedpro.scss 查看文件 

@@ -0,0 +1,46 @@
1 
+.proSection{
2 
+    .designedProLaptop_title > .designedProLaptop_title_text{
3 
+        font-size: 6rem;
4 
+    }
5 
+
6 
+    .designedProLaptopList{
7 
+        > li{
8 
+            font-size: 2.5rem;
9 
+        }
10 
+    }
11 
+}
12 
+@media (max-width:1200px) {
13 
+    .proSection{
14 
+        .designedProLaptopList{
15 
+            > li{
16 
+                font-size: 1.5rem;
17 
+            }
18 
+        }
19 
+    }
20 
+
21 
+}
22 
+
23 
+
24 
+@media (max-width:768px){
25 
+    .proSection{
26 
+        padding: 1rem;
27 
+        .designedProLaptop_title > .designedProLaptop_title_text{
28 
+            font-size: 4rem;
29 
+        }
30 
+
31 
+        .designedProLaptopList  {
32 
+            width: 100%;
33 
+            padding: 1rem;
34 
+        }
35 
+    }
36 
+}
37 
+
38 
+@media (max-width:576px) {
39 
+    .proSection{
40 
+        .designedProLaptop_title > .designedProLaptop_title_text{
41 
+            font-size: 2.5rem;
42 
+
43 
+        }
44 
+    }
45 
+
46 
+}

+ 62
- 0
styles/pages/productOverview/_dragondisplay.scss 查看文件 

@@ -0,0 +1,62 @@
1 
+.dragondisplay {
2 
+    position: relative;
3 
+    background: rgb(255, 255, 255);
4 
+    background: linear-gradient(184deg,
5 
+            rgba(255, 255, 255, 1) 4%,
6 
+            rgba(235, 255, 133, 1) 100%);
7 
+    overflow: hidden;
8 
+
9 
+    .dragondisplay_heading {
10 
+        position: absolute;
11 
+        bottom: 0;
12 
+        margin: auto;
13 
+        width: 100%;
14 
+
15 
+        >h1 {
16 
+            font-size: 8rem;
17 
+            text-align: center;
18 
+        }
19 
+    }
20 
+
21 
+    .dragondisplay_des {
22 
+        max-width: 600px;
23 
+        position: absolute;
24 
+        right: 0;
25 
+        top: 13%;
26 
+        padding: 4rem;
27 
+    }
28 
+}
29 
+
30 
+@media (max-width:1200px) {
31 
+    .dragondisplay{
32 
+        .dragondisplay_heading{
33 
+            >h1 {
34 
+                font-size: 4rem;
35 
+                text-align: center;
36 
+            }
37 
+        }
38 
+    }
39 
+}
40 
+
41 
+
42 
+@media (max-width:768px) {
43 
+    .dragondisplay{
44 
+        .dragondisplay_heading{
45 
+            >h1 {
46 
+                font-size: 3rem;
47 
+                text-align: center;
48 
+            }
49 
+        }
50 
+    }
51 
+}
52 
+
53 
+@media (max-width:576px) {
54 
+    .dragondisplay{
55 
+        .dragondisplay_heading{
56 
+            >h1 {
57 
+                font-size: 1.5rem;
58 
+                text-align: center;
59 
+            }
60 
+        }
61 
+    }
62 
+}

+ 88
- 0
styles/pages/productOverview/_lens.scss 查看文件 

@@ -0,0 +1,88 @@
1 
+.lensAnwi {
2 
+    .box_lens {
3 
+        .anwi_BoxLen {
4 
+            border-radius: 40px;
5 
+            -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
6 
+            -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
7 
+            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
8 
+        }
9 
+
10 
+        .box_lens_img {
11 
+            width: 45%;
12 
+        }
13 
+
14 
+        .screenpadLens {
15 
+            font-size: 1.2rem;
16 
+        }
17 
+
18 
+        .lenHeading{
19 
+            font-size: 2rem;
20 
+        }
21 
+
22 
+        .anwi_BoxLen {
23 
+            gap: 10px;
24 
+        }
25 
+    }
26 
+}
27 
+
28 
+@media (max-width:1400px) {
29 
+    .lensAnwi {
30 
+        .box_lens {
31 
+            .lenHeading{
32 
+                font-size: 1rem;
33 
+            }
34 
+            .screenpadLens {
35 
+                font-size: 0.7rem;
36 
+            }
37 
+
38 
+        }
39 
+
40 
+    }
41 
+}
42 
+
43 
+@media (max-width:1200px) {
44 
+    .lensAnwi {
45 
+        .row_lensAnwi {
46 
+            padding: 2rem;
47 
+        }
48 
+        .box_lens {
49 
+            .lenHeading{
50 
+                font-size: 0.7rem;
51 
+            }
52 
+            .screenpadLens {
53 
+                font-size: 0.5rem;
54 
+            }
55 
+
56 
+        }
57 
+
58 
+    }
59 
+}
60 
+
61 
+
62 
+@media (max-width:768px) {
63 
+    .lensAnwi {}
64 
+}
65 
+
66 
+@media (max-width:576px) {
67 
+
68 
+
69 
+
70 
+    .lensAnwi {
71 
+        .box_lens {
72 
+            .box_lens_img {
73 
+                width: 25%;
74 
+            }
75 
+
76 
+        }
77 
+
78 
+    }
79 
+
80 
+    .dragondisplay {
81 
+        .dragondisplay_heading {
82 
+            >h1 {
83 
+                font-size: 1.5rem;
84 
+                text-align: center;
85 
+            }
86 
+        }
87 
+    }
88 
+}

+ 77
- 0
styles/pages/productOverview/_popupkeyboard.scss 查看文件 

@@ -0,0 +1,77 @@
1 
+// pop up keyboard
2 
+.popupKeyboard {
3 
+    position: relative;
4 
+    overflow-x: hidden;
5 
+    padding-top: 11rem;
6 
+    .popupKeyboard_hParent {
7 
+        position: absolute;
8 
+        top: 0;
9 
+        left: 0;
10 
+    }
11 
+
12 
+    .popupKeyboard_heading {
13 
+        >h1{
14 
+            font-size: 9rem;
15 
+        }
16 
+    }
17 
+
18 
+
19 
+}
20 
+
21 
+@media (max-width:1200px) {
22 
+    .popupKeyboard {
23 
+        .popupKeyboard_heading {
24 
+            >h1{
25 
+                font-size: 5rem;
26 
+            }
27 
+        }
28 
+    }
29 
+
30 
+}
31 
+
32 
+
33 
+@media (max-width:768px) {
34 
+    .controlPanel{
35 
+        padding-bottom: 100px;
36 
+    }
37 
+    .popupKeyboard {
38 
+
39 
+        .popupKeyboard_heading {
40 
+            padding: 1rem;
41 
+            >h1{
42 
+
43 
+                font-size: 3rem;
44 
+            }
45 
+
46 
+        }
47 
+        .popupKeyboard_des {
48 
+            padding: 1rem;
49 
+            font-size: 1rem;
50 
+        }
51 
+
52 
+        .popupKeyboard_hParent {
53 
+            padding: 1rem;
54 
+        }
55 
+    }
56 
+}
57 
+
58 
+@media (max-width:576px) {
59 
+    .popupKeyboard {
60 
+
61 
+        .popupKeyboard_heading {
62 
+            padding: 1rem;
63 
+            >h1{
64 
+
65 
+                font-size: 2rem;
66 
+            }
67 
+
68 
+        }
69 
+
70 
+        .popupKeyboard_des {
71 
+            padding: 2rem;
72 
+            padding-top: 0;
73 
+            font-size: 0.8rem;
74 
+        }
75 
+    }
76 
+
77 
+}

+ 49
- 0
styles/pages/productOverview/_professinalGrade.scss 查看文件 

@@ -0,0 +1,49 @@
1 
+.professinalGrade {
2 
+    .professinalGradeImgContainer {
3 
+        background-image: url("./../../dist/assets/imgs/productoverview/promask.png");
4 
+        background-color: white;
5 
+        background-size: cover;
6 
+        background-repeat: no-repeat;
7 
+        background-position: center;
8 
+    }
9 
+
10 
+    .professinalGradeImg {
11 
+        @include absCenter;
12 
+        width: 50%;
13 
+    }
14 
+}
15 
+
16 
+@media (max-width:1400px) {
17 
+.professinalGrade{
18 
+
19 
+}
20 
+}
21 
+
22 
+@media (max-width:1200px) {
23 
+    .professinalGrade{
24 
+        h1{
25 
+            font-size: 3rem;
26 
+        }
27 
+    }
28 
+}
29 
+
30 
+
31 
+@media (max-width:768px) {
32 
+    .professinalGrade{
33 
+        h1{
34 
+            font-size: 2rem;
35 
+        }
36 
+
37 
+        .font_p_Dual{
38 
+            font-size: 1rem;
39 
+        }
40 
+    }
41 
+}
42 
+
43 
+@media (max-width:576px) {
44 
+    .professinalGrade{
45 
+      p{
46 
+        padding-left: 1rem;
47 
+      }
48 
+    }
49 
+}

+ 129
- 0
styles/pages/productOverview/_stunningsound.scss 查看文件 

@@ -0,0 +1,129 @@
1 
+.stunningSound {
2 
+    position: relative;
3 
+    padding-top: 15rem;
4 
+    overflow-x: hidden;
5 
+    .stunningSound_heading {
6 
+        position: absolute;
7 
+        z-index: -1;
8 
+        top: 0;
9 
+        left: 0;
10 
+
11 
+        >h1 {
12 
+            font-size: 10rem;
13 
+        }
14 
+    }
15 
+
16 
+    .stunningSound_des {
17 
+        position: absolute;
18 
+        right: 0;
19 
+        top: 30%;
20 
+        transform: translate(0%, 0%);
21 
+
22 
+
23 
+        max-width: 400px;
24 
+    }
25 
+
26 
+
27 
+}
28 
+
29 
+// @media (max-width:1400px) {}
30 
+
31 
+@media (max-width:1200px) {
32 
+    .stunningSound {
33 
+
34 
+
35 
+        .stunningSound_heading {
36 
+
37 
+
38 
+            >h1 {
39 
+                font-size: 7rem;
40 
+            }
41 
+        }
42 
+
43 
+        .stunningSound_des{
44 
+
45 
+        padding-right: 1rem;
46 
+         max-width: 300px;
47 
+        }
48 
+    }
49 
+
50 
+}
51 
+
52 
+
53 
+@media (max-width:1000px) {
54 
+    .stunningSound {
55 
+
56 
+
57 
+        .stunningSound_heading {
58 
+
59 
+            top: 20%;
60 
+
61 
+            >h1 {
62 
+                font-size: 5rem;
63 
+            }
64 
+        }
65 
+
66 
+        .stunningSound_des {
67 
+
68 
+            top: 40%;
69 
+            right:0;
70 
+        }
71 
+
72 
+    }
73 
+
74 
+}
75 
+
76 
+
77 
+
78 
+
79 
+@media (max-width:768px) {
80 
+    .stunningSound {
81 
+
82 
+
83 
+        .stunningSound_heading {
84 
+
85 
+
86 
+            >h1 {
87 
+                font-size: 4rem;
88 
+            }
89 
+        }
90 
+
91 
+        .stunningSound_des {
92 
+            max-width: 270px;
93 
+            top: 50%;
94 
+            right: 0;
95 
+            p{
96 
+                font-size: 1rem;
97 
+            }
98 
+        }
99 
+
100 
+    }
101 
+}
102 
+
103 
+@media (max-width:576px) {
104 
+    .stunningSound {
105 
+
106 
+
107 
+        .stunningSound_heading {
108 
+
109 
+            top: 15%;
110 
+            >h1 {
111 
+                font-size: 2rem;
112 
+                padding: 2rem;
113 
+            }
114 
+        }
115 
+
116 
+        .stunningSound_des {
117 
+            padding: 2rem;
118 
+            top: 25%;
119 
+            max-width: 100%;
120 
+            left: 0;
121 
+            // top: 50%;
122 
+            // right: -19%;
123 
+            // p{
124 
+            //     font-size: 1rem;
125 
+            // }
126 
+        }
127 
+
128 
+    }
129 
+}

+ 43
- 0
styles/pages/productOverview/_tablesection.scss 查看文件 

@@ -0,0 +1,43 @@
1 
+.circleTableLaptop_Heading {
2 
+    top: 20%;
3 
+}
4 
+
5 
+.circleTableLaptop_text{
6 
+    bottom: 25%;
7 
+    >div{
8 
+        padding: 0px 22%;
9 
+    }
10 
+
11 
+}
12 
+
13 
+@media (max-width:1300px) {
14 
+    .circleTableLaptop_text {
15 
+        bottom: 18%;
16 
+        >div{
17 
+            font-size: 1rem;
18 
+        }
19 
+    }
20 
+}
21 
+
22 
+@media (max-width:1000px) {
23 
+    .circleTableLaptop_Heading {
24 
+        h1{
25 
+            font-size: 1.5rem;
26 
+        }
27 
+    }
28 
+    .circleTableLaptop_text {
29 
+         bottom: 25%;
30 
+        >div{
31 
+            font-size: 0.7rem;
32 
+        }
33 
+    }
34 
+}
35 
+
36 
+@media (max-width:600px) {
37 
+    .circleTableLaptop_Heading {
38 
+        top: 0;
39 
+        h1{
40 
+            font-size: 1.5rem;
41 
+        }
42 
+    }
43 
+}

+ 73
- 0
styles/pages/productOverview/_wifisection.scss 查看文件 

@@ -0,0 +1,73 @@
1 
+
2 
+.wifiSection {
3 
+    overflow-x: hidden;
4 
+    position: relative;
5 
+
6 
+    // .wifiSectionImg {
7 
+    //   width: 100vw;
8 
+    //   height: 100vh;
9 
+    //   margin: 10rem 0;
10 
+    //   background-image: url("./../../dist/assets/imgs/productoverview/wifilap.png");
11 
+    //   background-color: white;
12 
+    //   background-size: cover;
13 
+    //   background-repeat: no-repeat;
14 
+    //   background-position: center;
15 
+    // }
16 
+        .wifiSectionDes{
17 
+            display: none;
18 
+        }
19 
+    .textWifiContainer {
20 
+      position: relative;
21 
+
22 
+      .wifiSection_des {
23 
+        max-width: 500px;
24 
+        position: absolute;
25 
+        right: 0;
26 
+        top: -48%;
27 
+        width: 100%;
28 
+        height: 100%;
29 
+      }
30 
+
31 
+      .textWifiContainerHeading {
32 
+        >h1 {
33 
+          font-size: 8rem;
34 
+        }
35 
+      }
36 
+    }
37 
+  }
38 
+
39 
+
40 
+
41 
+  @media (max-width:1200px) {
42 
+        .wifiSection{
43 
+            .textWifiContainer {
44 
+                .textWifiContainerHeading {
45 
+                    >h1 {
46 
+                      font-size: 5rem;
47 
+                    }
48 
+                  }
49 
+            }
50 
+
51 
+        }
52 
+  }
53 
+
54 
+  @media (max-width:1000px) {
55 
+    .wifiSection{
56 
+        .textWifiContainer {
57 
+            display: none;
58 
+
59 
+        }
60 
+
61 
+        .wifiSectionDes{
62 
+            padding: 2rem;
63 
+            display: block;
64 
+            .wifiSection_des {
65 
+                >p{
66 
+                    font-size: 1rem;
67 
+                }
68 
+            }
69 
+
70 
+        }
71 
+
72 
+    }
73 
+}

+ 1050
- 170
styles/style.css
文件差異過大導致無法顯示
查看文件


+ 1
- 1
styles/style.css.map
文件差異過大導致無法顯示
查看文件


+ 24
- 4
styles/style.scss 查看文件 

@@ -8,9 +8,18 @@
8 8 
 @import "components/button";
9 9 
 // pages
10 10 
 @import "pages/productOverview";
11 
-@import "pages/home";
12 
-@import "pages/shopping-cart";
13 
-
11 
+@import "pages/productOverview/designedpro";
12 
+@import "pages/productOverview/popupkeyboard";
13 
+@import "pages/productOverview/dragondisplay";
14 
+@import "pages/productOverview/lens";
15 
+@import "pages/productOverview/professinalGrade";
16 
+@import "pages/productOverview/stunningsound";
17 
+@import "pages/productOverview/wifisection";
18 
+@import "pages/productOverview/tablesection";
19 
+
20 
+// @import "pages/home";
21 
+// @import "pages/shopping-cart";
22 
+@import "pages/allInOne";
14 23 
 /*
15 24 
 0 - 600px:      Phone
16 25 
 600 - 900px:    Tablet portrait
 
@@ -185,4 +194,15 @@ body {
185 194 
         line-height: 2rem;
186 195 
         font-family: "Satoshi", sans-serif;
187 196 
     }
188 
-}
197 
+}
198 
+
199 
+// sachin
200 
+  /* footer */
201 
+  .footer-wrapper {
202 
+    background-color: rgb(0, 0, 0);
203 
+    border-radius: 0 275px 0 0;
204 
+    clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
205 
+  }
206 
+  .footer-wrapper li {
207 
+    line-height: 2rem;
208 
+  }

Write Preview
Loading…
取消
儲存