sachin.ganesh
/
anwi_website
ウォッチ 1
スター 0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

commit

sachinganesh 2年前
親
475141e2d0
コミット
6e3f74a33b
18個のファイルの変更、1736行の追加、1511行の削除
ユニファイド表示 差分情報を表示
  1. 451
    420
      allinone.html
  2. 10
    6
      dist/Js/footer.js
  3. 1
    1
      dist/Js/laptopmuti.js
  4. 19
    19
      dist/Js/navbar.js
  5. バイナリ
      dist/assets/imgs/footer/facebook.png
  6. バイナリ
      dist/assets/imgs/footer/instra.png
  7. バイナリ
      dist/assets/imgs/footer/linkedin.png
  8. バイナリ
      dist/assets/imgs/footer/twitter.png
  9. バイナリ
      dist/assets/imgs/footer/youtube.png
  10. バイナリ
      dist/assets/imgs/productoverview/productbg.png
  11. 139
    118
      index.html
  12. 944
    921
      laptopmulti.html
  13. 5
    7
      shopping-cart.html
  14. 5
    1
      styles/base/_utilities.scss
  15. 70
    13
      styles/pages/_home.scss
  16. 73
    4
      styles/style.css
  17. 1
    1
      styles/style.css.map
  18. 18
    0
      styles/style.scss

+ 451
- 420
allinone.html ファイルの表示

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

+ 10
- 6
dist/Js/footer.js ファイルの表示

256 
                                 <li>
 256 
                                 <li>
257 
                                     <ul class="d-flex
 257 
                                     <ul class="d-flex
258 
                                             list-inline">
 258 
                                             list-inline">
259 
-                                        <li><img src="" alt="logo"></li>
259 
+                                        <li class="footer-socailImg"><img src="dist/assets/imgs/footer/twitter.png" alt="logo" class="px-1 img-fluid"></li>
260 
                                         <li>Twitter</li>
 260 
                                         <li>Twitter</li>
261 
                                     </ul>
 261 
                                     </ul>
262 
                                 </li>
 262 
                                 </li>
263 
                                 <li>
 263 
                                 <li>
264 
                                     <ul class="d-flex list-inline">
 264 
                                     <ul class="d-flex list-inline">
265 
-                                        <li><img src="" alt="logo"></li>
265 
+                                        <li class="footer-socailImg"><img src="dist/assets/imgs/footer/instra.png" alt="logo" class="px-1 img-fluid"></li>
266 
                                         <li>Instagram</li>
 266 
                                         <li>Instagram</li>
267 
                                     </ul>
 267 
                                     </ul>
268 
                                 </li>
 268 
                                 </li>
269 
                                 <li>
 269 
                                 <li>
270 
                                     <ul class="d-flex list-inline">
 270 
                                     <ul class="d-flex list-inline">
271 
-                                        <li><img src="" alt="logo"></li>
271 
+                                        <li class="footer-socailImg"><img src="dist/assets/imgs/footer/youtube.png" alt="logo" class="px-1 img-fluid"></li>
272 
                                         <li>Youtube</li>
 272 
                                         <li>Youtube</li>
273 
                                     </ul>
 273 
                                     </ul>
274 
                                 </li>
 274 
                                 </li>
275 
                                 <li>
 275 
                                 <li>
276 
                                     <ul class="d-flex list-inline">
 276 
                                     <ul class="d-flex list-inline">
277 
-                                        <li><img src="" alt="logo"></li>
277 
+                                        <li class="footer-socailImg"><img src="dist/assets/imgs/footer/linkedin.png" alt="logo" class="px-1 img-fluid"></li>
278 
                                         <li>Linkedin</li>
 278 
                                         <li>Linkedin</li>
279 
                                     </ul>
 279 
                                     </ul>
280 
                                 </li>
 280 
                                 </li>
281 
                                 <li>
 281 
                                 <li>
282 
                                     <ul class="d-flex list-inline">
 282 
                                     <ul class="d-flex list-inline">
283 
-                                        <li><img src="" alt="logo"></li>
283 
+                                        <li class="footer-socailImg"><img src="dist/assets/imgs/footer/facebook.png" alt="logo" class="px-1 img-fluid"></li>
284 
                                         <li>Facebook</li>
 284 
                                         <li>Facebook</li>
285 
                                     </ul>
 285 
                                     </ul>
286 
                                 </li>
 286 
                                 </li>
299 
             <div class="container">
 299 
             <div class="container">
300 
                 <div class="row g-0 py-4 align-items-center">
 300 
                 <div class="row g-0 py-4 align-items-center">
301 
                     <div class="col-md-5 text-white">
 301 
                     <div class="col-md-5 text-white">
302 
-                        <p class="mb-0">Copyright © 2022 Anwisystems pvt ltd. All rights reserved.</p>
302 
+                        <p class="mb-0">Copyright ©${new Date().getFullYear()} Anwisystems pvt ltd. All rights reserved.</p>
303 
                     </div>
 303 
                     </div>
304 
                     <div class="col-md-2 text-white border-end
 304 
                     <div class="col-md-2 text-white border-end
305 
                             text-center">
 305 
                             text-center">
335 
 </footer>`;
 335 
 </footer>`;
336
336
337 
     $("#footer-head").html(footerHtml);
 337 
     $("#footer-head").html(footerHtml);
338 
+
339 
+    $("[alt=footer-rocket-img]").click(function(e){
340 
+        document.documentElement.scrollTop = 0;
341 
+    })
338 
 });
 342 
 });

+ 1
- 1
dist/Js/laptopmuti.js ファイルの表示

11 
     callGallery();
 11 
     callGallery();
12 
 }
 12 
 }
13
13
14 
-callMain();
14 
+callMain();

+ 19
- 19
dist/Js/navbar.js ファイルの表示

69 
     //on-scroll-nav
 69 
     //on-scroll-nav
70 
     var c,
 70 
     var c,
71 
         currentScrollTop = 0,
 71 
         currentScrollTop = 0,
72 
-        navbar = $("#biz-main-nav");
72 
+        navbar = $("#navbar-head");
73
73
74 
-    $(window).scroll(function() {
75 
-        var a = $(window).scrollTop();
76 
-        var b = navbar.height();
77 
-        currentScrollTop = a;
74 
+    // $(window).scroll(function() {
75 
+    //     var a = $(window).scrollTop();
76 
+    //     var b = navbar.height();
77 
+    //     currentScrollTop = a;
78
78
79 
-        if (c < currentScrollTop && a > b + b) {
80 
-            if ($("#navbarNavDropdown").hasClass("show") == false) {
81 
-                navbar.addClass("scrollUp");
82 
-                $(".workflow-pills").removeClass("top-space");
83 
-            }
84 
-        } else if (c > currentScrollTop && !(a <= b)) {
85 
-            navbar.removeClass("scrollUp");
86 
-            $(".workflow-pills").addClass("top-space");
87 
-        }
79 
+    //     // if (c < currentScrollTop && a > b + b) {
80 
+    //     //     if ($("#navbarNavDropdown").hasClass("show") == false) {
81 
+    //     //         navbar.addClass("scrollUp");
82 
+    //     //         $(".workflow-pills").removeClass("top-space");
83 
+    //     //     }
84 
+    //     // } else if (c > currentScrollTop && !(a <= b)) {
85 
+    //     //     navbar.removeClass("scrollUp");
86 
+    //     //     $(".workflow-pills").addClass("top-space");
87 
+    //     // }
88
88
89 
-        c = currentScrollTop;
90 
-    });
89 
+    //     c = currentScrollTop;
90 
+    // });
91
91
92 
     var scroll_start = 0;
 92 
     var scroll_start = 0;
93 
     var startchange = $(".main-body");
 93 
     var startchange = $(".main-body");
96 
         $(document).scroll(function() {
 96 
         $(document).scroll(function() {
97 
             scroll_start = $(this).scrollTop();
 97 
             scroll_start = $(this).scrollTop();
98 
             if (scroll_start > offset.top) {
 98 
             if (scroll_start > offset.top) {
99 
-                $(".index-new")
99 
+                $("#navbar-head")
100 
                     .find(".navbar")
 100 
                     .find(".navbar")
101 
                     .css("background-color", "#fff")
 101 
                     .css("background-color", "#fff")
102 
                     .css("box-shadow", "0px 12px 20px -25px");
 102 
                     .css("box-shadow", "0px 12px 20px -25px");
103 
             } else {
 103 
             } else {
104 
-                $(".index-new")
104 
+                $("#navbar-head")
105 
                     .find(".navbar")
 105 
                     .find(".navbar")
106 
                     .css("background-color", "transparent")
 106 
                     .css("background-color", "transparent")
107 
                     .css("box-shadow", "none");
 107 
                     .css("box-shadow", "none");
108 
             }
 108 
             }
109 
         });
 109 
         });
110 
     } else {
 110 
     } else {
111 
-        $(".index-new")
111 
+        $("#navbar-head")
112 
             .find(".navbar")
 112 
             .find(".navbar")
113 
             .css("background-color", "#fff")
 113 
             .css("background-color", "#fff")
114 
             .css("box-shadow", "0px 12px 20px -25px");
 114 
             .css("box-shadow", "0px 12px 20px -25px");

バイナリ
dist/assets/imgs/footer/facebook.png ファイルの表示


バイナリ
dist/assets/imgs/footer/instra.png ファイルの表示


バイナリ
dist/assets/imgs/footer/linkedin.png ファイルの表示


バイナリ
dist/assets/imgs/footer/twitter.png ファイルの表示


バイナリ
dist/assets/imgs/footer/youtube.png ファイルの表示


バイナリ
dist/assets/imgs/productoverview/productbg.png ファイルの表示


+ 139
- 118
index.html ファイルの表示

15 
 </head>
 15 
 </head>
16
16
17 
 <body>
 17 
 <body>
18 
-     <!-- main-body -->
19 
-    <main class="home-main-container">
18 
+     <!-- navbar -->
19 
+     <div id="navbar-head"></div>
20 
+     <!-- end-navbar -->
21 
+    <!-- main-body -->
22 
+    <main class="main-body home-main-container">
20 
         <section class="hero-banner">
 23 
         <section class="hero-banner">
21 
-            <header>
22 
-                <!-- navbar -->
23 
-                <div id="navbar-head"></div>
24 
-                <!-- end-navbar -->
25 
-            </header>
26 
-            <hr class="mx-5">
24 
+
25 
+
26 
+
27 
             <!-- banner-start -->
 27 
             <!-- banner-start -->
28 
             <div class="container">
 28 
             <div class="container">
29 
                 <section class="banner-wrapper ">
 29 
                 <section class="banner-wrapper ">
30 
-                    <div class="banner-main-container">
31 
-                        <div class="col-md-6 mt-7">
30 
+                    <div class="banner-main-container d-flex align-items-center">
31 
+                        <div class="col-md-6">
32 
                             <h5 class="mb-4">AIO24 - 1700N</h5>
 32 
                             <h5 class="mb-4">AIO24 - 1700N</h5>
33 
                             <h1 class="banner_heading_4 mb-4">All-in-One</h1>
 33 
                             <h1 class="banner_heading_4 mb-4">All-in-One</h1>
34 
                             <h6 class="subtitle_1 mb-4">Extraordinary Performance and Unparalleled Flexibility</h6>
 34 
                             <h6 class="subtitle_1 mb-4">Extraordinary Performance and Unparalleled Flexibility</h6>
35 
                             <a class="btn btn-dark button_dark" href="#">Know
 35 
                             <a class="btn btn-dark button_dark" href="#">Know
36 
-                                    More</a>
36 
+                                More</a>
37 
                         </div>
 37 
                         </div>
38 
                         <div class="col-md-12 d-block d-sm-none">
 38 
                         <div class="col-md-12 d-block d-sm-none">
39 
-                            <img src="./dist/assets/imgs/Home/all-in-one-mobile.png" class="img-fluid" alt="mobile-all-in-one">
39 
+                            <img src="./dist/assets/imgs/Home/all-in-one-mobile.png" class="img-fluid mobile-home-img"
40 
+                            alt="mobile-all-in-one">
40 
                         </div>
 41 
                         </div>
41 
                     </div>
 42 
                     </div>
42 
                 </section>
 43 
                 </section>
43 
                 <section class="offer-main-sec py-2 mb-3">
 44 
                 <section class="offer-main-sec py-2 mb-3">
44 
                     <div class="offer-sec bg-white shadow rounded ms-auto
 45 
                     <div class="offer-sec bg-white shadow rounded ms-auto
45 
                             col-md-4">
 46 
                             col-md-4">
46 
-                        <p class="py-3 text-center satoshi_font">Flat <span class="fw-bold"> 4,500</span> Instant Discount with HDFC Credit Card</p>
47 
+                        <p class="py-3 text-center satoshi_font">Flat <span class="fw-bold"> 4,500</span> Instant
48 
+                            Discount with HDFC Credit Card</p>
47 
                     </div>
 49 
                     </div>
48 
                 </section>
 50 
                 </section>
49 
                 <div class="col-5 d-block d-sm-none">
 51 
                 <div class="col-5 d-block d-sm-none">
50 
                     <a class="btn btn-dark button_dark mb-4" href="#">Know
 52 
                     <a class="btn btn-dark button_dark mb-4" href="#">Know
51 
                         More</a>
 53 
                         More</a>
52 
-                    </div>
54 
+                </div>
53 
             </div>
 55 
             </div>
54 
         </section>
 56 
         </section>
55 
         <!-- end-banner -->
 57 
         <!-- end-banner -->
58 
             <div class="container d-none d-sm-block">
 60 
             <div class="container d-none d-sm-block">
59 
                 <div class="row g-0 justify-content-center
 61 
                 <div class="row g-0 justify-content-center
60 
                         align-items-center px-4 text-center">
 62 
                         align-items-center px-4 text-center">
61 
-                    <div class="col-md-3 sec-space-3"><img src="./dist/assets/imgs/Home/aw-partner-1.png" class="
62 
-                                img-fluid" alt="partners-img"></div>
63 
-                    <div class="col-md-3 sec-space-3"><img src="./dist/assets/imgs/Home/aw-partner-2.png" class="
64 
-                                img-fluid" alt="partners-img"></div>
65 
-                    <div class="col-md-3 sec-space-3"><img src="./dist/assets/imgs/Home/aw-partner-3.png" class="
66 
-                                img-fluid" alt="partners-img"></div>
67 
-                    <div class="col-md-3 sec-space-3"><img src="./dist/assets/imgs/Home/aw-partner-4.png" class="
68 
-                                img-fluid" alt="partners-img"></div>
69 
-
63 
+                    <div class="col-md-3"><img src="./dist/assets/imgs/Home/aw-partner-1.png" class="
64 
+                                img-fluid partners-img" alt="partners-img"></div>
65 
+                    <div class="col-md-3 ps-3"><img src="./dist/assets/imgs/Home/aw-partner-2.png" class="
66 
+                                img-fluid partners-img" alt="partners-img"></div>
67 
+                    <div class="col-md-3"><img src="./dist/assets/imgs/Home/aw-partner-3.png" class="
68 
+                                img-fluid partners-img" alt="partners-img"></div>
69 
+                    <div class="col-md-3"><img src="./dist/assets/imgs/Home/aw-partner-4.png" class="
70 
+                                img-fluid partners-img" alt="partners-img"></div>
70 
                 </div>
 71 
                 </div>
71 
             </div>
 72 
             </div>
72 
             <div class="d-block d-sm-none">
 73 
             <div class="d-block d-sm-none">
73 
                 <div class="d-flex g-0 justify-content-center
 74 
                 <div class="d-flex g-0 justify-content-center
74 
                         align-items-center text-center">
 75 
                         align-items-center text-center">
75 
-                    <div class="col-md-6 sec-space-3"><img src="./dist/assets/imgs/Home/moobile-partner-img-1.png" class="
76 
+                    <div class="col-md-6 sec-space-3"><img src="./dist/assets/imgs/Home/moobile-partner-img-1.png"
77 
+                            class="
76 
                                 img-fluid" alt="partners-img"></div>
 78 
                                 img-fluid" alt="partners-img"></div>
77 
-                    <div class="col-md-6 ms-5 sec-space-3"><img src="./dist/assets/imgs/Home/moobile-partner-img-2.png" class="
79 
+                    <div class="col-md-6 ms-5 sec-space-3"><img src="./dist/assets/imgs/Home/moobile-partner-img-2.png"
80 
+                            class="
78 
                                 img-fluid" alt="partners-img"></div>
 81 
                                 img-fluid" alt="partners-img"></div>
79 
                 </div>
 82 
                 </div>
80 
                 <div class="d-flex g-0 justify-content-center
 83 
                 <div class="d-flex g-0 justify-content-center
81 
                         align-items-center text-center">
 84 
                         align-items-center text-center">
82 
-                    <div class="col-md-6 sec-space-3 windows-icon-mb"><img src="./dist/assets/imgs/Home/moobile-partner-img-3.png" class="
85 
+                    <div class="col-md-6 sec-space-3 windows-icon-mb"><img
86 
+                            src="./dist/assets/imgs/Home/moobile-partner-img-3.png" class="
83 
                                 img-fluid" alt="partners-img"></div>
 87 
                                 img-fluid" alt="partners-img"></div>
84 
-                    <div class="col-md-6 ms-5 sec-space-3"><img src="./dist/assets/imgs/Home/moobile-partner-img-4.png" class="
88 
+                    <div class="col-md-6 ms-5 sec-space-3"><img src="./dist/assets/imgs/Home/moobile-partner-img-4.png"
89 
+                            class="
85 
                                 img-fluid" alt="partners-img"></div>
 90 
                                 img-fluid" alt="partners-img"></div>
86 
                 </div>
 91 
                 </div>
87 
             </div>
 92 
             </div>
89 
         <section class="products-container sec-space-1">
 94 
         <section class="products-container sec-space-1">
90 
             <div class="products-main-container">
 95 
             <div class="products-main-container">
91 
                 <div class="row g-0">
 96 
                 <div class="row g-0">
92 
-                    <div class="col-md-6 consumer-prd position-relative"><img class="img-fluid" src="./dist/assets/imgs/Home/consumer-product.png" alt="consumer-product">
97 
+                    <div class="col-md-6 consumer-prd position-relative"><img class="img-fluid"
98 
+                            src="./dist/assets/imgs/Home/consumer-product.png" alt="consumer-product">
93 
                         <div class="product-heading position-absolute top-0
 99 
                         <div class="product-heading position-absolute top-0
94 
                                 w-100">
 100 
                                 w-100">
95 
                             <div class="d-flex align-items-center m-4">
 101 
                             <div class="d-flex align-items-center m-4">
96 
                                 <span class="text-start">
 102 
                                 <span class="text-start">
97 
-                                        <h4 class="text-white fw-bold">Consumer
98 
-                                            Product</h4>
99 
-                                    </span>
103 
+                                    <h4 class="text-white fw-bold">Consumer
104 
+                                        Product</h4>
105 
+                                </span>
100 
                                 <span class="text-end ms-auto">
 106 
                                 <span class="text-end ms-auto">
101 
-                                        <h5 class="text-white fw-bold"><svg
102 
-                                                xmlns="http://www.w3.org/2000/svg"
103 
-                                                width="45"
104 
-                                                height="45"
105 
-                                                fill="#fff" class="bi
106 
-                                                bi-arrow-right-circle"
107 
-                                                viewBox="0
107 
+                                    <h5 class="text-white fw-bold"><svg xmlns="http://www.w3.org/2000/svg" width="45"
108 
+                                            height="45" fill="#fff" class="bi
109 
+                                                bi-arrow-right-circle" viewBox="0
108 
                                                 0 16 16">
 110 
                                                 0 16 16">
109 
-                                                <path fill-rule="evenodd" d="M1
111 
+                                            <path fill-rule="evenodd" d="M1
110 
                                                     8a7 7 0 1 0 14 0A7 7 0 0
 112 
                                                     8a7 7 0 1 0 14 0A7 7 0 0
111 
                                                     0 1 8zm15 0A8 8 0 1 1 0 8a8
 113 
                                                     0 1 8zm15 0A8 8 0 1 1 0 8a8
112 
                                                     8 0 0 1 16 0zM4.5 7.5a.5.5
 114 
                                                     8 0 0 1 16 0zM4.5 7.5a.5.5
114 
                                                     2.146a.5.5 0 0 0
 116 
                                                     2.146a.5.5 0 0 0
115 
                                                     .708.708l3-3a.5.5 0 0 0
 117 
                                                     .708.708l3-3a.5.5 0 0 0
116 
                                                     0-.708l-3-3a.5.5 0 1
 118 
                                                     0-.708l-3-3a.5.5 0 1
117 
-                                                    0-.708.708L10.293 7.5H4.5z"
118 
-                                                    />
119 
-                                                </svg></h5>
120 
-                                        </span>
119 
+                                                    0-.708.708L10.293 7.5H4.5z" />
120 
+                                        </svg></h5>
121 
+                                </span>
121 
                             </div>
 122 
                             </div>
122 
                         </div>
 123 
                         </div>
123 
                     </div>
 124 
                     </div>
124 
                     <div class="col-md-6 enterprise-prd
 125 
                     <div class="col-md-6 enterprise-prd
125 
-                                position-relative"><img src="./dist/assets/imgs/Home/enterprise-product.png" alt="enterprise-product" class="img-fluid">
126 
+                                position-relative"><img src="./dist/assets/imgs/Home/enterprise-product.png"
127 
+                            alt="enterprise-product" class="img-fluid">
126 
                         <div class="product-heading position-absolute
 128 
                         <div class="product-heading position-absolute
127 
                                     bottom-0 w-100">
 129 
                                     bottom-0 w-100">
128 
                             <div class="d-flex align-items-center m-4">
 130 
                             <div class="d-flex align-items-center m-4">
129 
                                 <span class="text-start">
 131 
                                 <span class="text-start">
130 
-                                            <h4 class="text-white fw-bold">Enterprise
131 
-                                                Product</h4>
132 
-                                        </span>
132 
+                                    <h4 class="text-white fw-bold">Enterprise
133 
+                                        Product</h4>
134 
+                                </span>
133 
                                 <span class="text-end ms-auto">
 135 
                                 <span class="text-end ms-auto">
134 
-                                            <h5 class="text-white
135 
-                                                fw-bold"><svg
136 
-                                                    xmlns="http://www.w3.org/2000/svg"
137 
-                                                    width="45" height="45"
138 
-                                                    fill="#fff" class="bi
139 
-                                                    bi-arrow-right-circle"
140 
-                                                    viewBox="0 0 16 16">
141 
-                                                    <path fill-rule="evenodd"
142 
-                                                        d="M1 8a7 7 0 1 0 14 0A7
136 
+                                    <h5 class="text-white
137 
+                                                fw-bold"><svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"
138 
+                                            fill="#fff" class="bi
139 
+                                                    bi-arrow-right-circle" viewBox="0 0 16 16">
140 
+                                            <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7
143 
                                                         7 0
 141 
                                                         7 0
144 
                                                         0
 142 
                                                         0
145 
                                                         0 1 8zm15 0A8 8 0 1 1 0
 143 
                                                         0 1 8zm15 0A8 8 0 1 1 0
151 
                                                         0-.708l-3-3a.5.5 0 1
 149 
                                                         0-.708l-3-3a.5.5 0 1
152 
                                                         0-.708.708L10.293
 150 
                                                         0-.708.708L10.293
153 
                                                         7.5H4.5z" />
 151 
                                                         7.5H4.5z" />
154 
-                                                    </svg></h5>
155 
-                                            </span>
152 
+                                        </svg></h5>
153 
+                                </span>
156 
                             </div>
 154 
                             </div>
157 
                         </div>
 155 
                         </div>
158 
                     </div>
 156 
                     </div>
159 
                 </div>
 157 
                 </div>
160 
             </div>
 158 
             </div>
161 
-            </div>
159 
+            <!-- </div> -->
162 
         </section>
 160 
         </section>
163 
         <!-- end-partners -->
 161 
         <!-- end-partners -->
164 
         <!-- features -->
 162 
         <!-- features -->
165 
-        <section class="main-features-container sec-space-1">
163 
+        <section class="main-features-container d-none d-lg-block  sec-space-1">
166 
             <div class="main-features-heading">
 164 
             <div class="main-features-heading">
167 
                 <div class="container ">
 165 
                 <div class="container ">
168 
                     <div class="justify-content-between
 166 
                     <div class="justify-content-between
172 
                             <h1> <span class="fw-bold"> Presenting</span></h1>
 170 
                             <h1> <span class="fw-bold"> Presenting</span></h1>
173 
                         </div>
 171 
                         </div>
174 
                         <div class="col-md-6">
 172 
                         <div class="col-md-6">
175 
-                            <h5 class="satoshi_font fw-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis repudiandae eos inventore necessitatibus rem nostrum placeat fugit repellat. Similique provident reprehenderit quas cupiditate.</h5>
173 
+                            <h5 class="satoshi_font fw-normal">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
174 
+                                Blanditiis repudiandae eos inventore necessitatibus rem nostrum placeat fugit repellat.
175 
+                                Similique provident reprehenderit quas cupiditate.</h5>
176 
                         </div>
 176 
                         </div>
177 
                     </div>
 177 
                     </div>
178 
                     <div class="aw-main-features sec-space-1">
 178 
                     <div class="aw-main-features sec-space-1">
179 
                         <div class=" d-block d-sm-flex
 179 
                         <div class=" d-block d-sm-flex
180 
-                                    justify-content-around">
181 
-                            <div class="aw-main-features-toggle">
180 
+                        justify-content-between" style="height:520px">
181 
+                            <div class="aw-main-features-toggle d-flex">
182 
                                 <div class="aw-main-features-toggler-tab
 182 
                                 <div class="aw-main-features-toggler-tab
183 
-                                            d-none">
183 
+                                p-4">
184 
                                     <div class="feature-sno">
 184 
                                     <div class="feature-sno">
185 
                                         <h3 class="border-bottom
 185 
                                         <h3 class="border-bottom
186 
                                                     border-dark
 186 
                                                     border-dark
189 
                                         </h3>
 189 
                                         </h3>
190 
                                     </div>
 190 
                                     </div>
191 
                                     <div class="aw-feature-name
 191 
                                     <div class="aw-feature-name
192 
-                                                satoshi_font">
192 
+                                                satoshi_font  ">
193 
                                         <h5 class="satoshi_font">Advanced Cooling
 193 
                                         <h5 class="satoshi_font">Advanced Cooling
194 
                                         </h5>
 194 
                                         </h5>
195 
                                     </div>
 195 
                                     </div>
196 
                                 </div>
 196 
                                 </div>
197
197
198 
                                 <div class="feature-bg-image
 198 
                                 <div class="feature-bg-image
199 
-                                            position-relative me-3" style="max-width: 30rem;">
200 
-                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
199 
+                                            position-relative" style="max-width: 50rem;">
200 
+                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100 h-100" />
201 
                                     <div class="position-absolute
 201 
                                     <div class="position-absolute
202 
                                                 bottom-0 text-light w-100">
 202 
                                                 bottom-0 text-light w-100">
203 
                                         <p class="p-2 m-0">01.</p>
 203 
                                         <p class="p-2 m-0">01.</p>
210 
                                             <button type="button" class="btn
 210 
                                             <button type="button" class="btn
211 
                                                         btn-primary
 211 
                                                         btn-primary
212 
                                                         rounded-0 satoshi_font">Learn
 212 
                                                         rounded-0 satoshi_font">Learn
213 
-                                                        More</button>
213 
+                                                More</button>
214 
                                         </div>
 214 
                                         </div>
215 
                                     </div>
 215 
                                     </div>
216 
                                 </div>
 216 
                                 </div>
217 
                             </div>
 217 
                             </div>
218 
-                            <div class="bg-light p-3
218 
+                            <div class="bg-light p-4
219 
                                         aw-main-features-toggle">
 219 
                                         aw-main-features-toggle">
220 
                                 <div class="aw-main-features-toggler-tab">
 220 
                                 <div class="aw-main-features-toggler-tab">
221 
                                     <div class="feature-sno">
 221 
                                     <div class="feature-sno">
233 
                                 </div>
 233 
                                 </div>
234
234
235 
                                 <div class="feature-bg-image
 235 
                                 <div class="feature-bg-image
236 
-                                            position-relative me-3 d-none" style="max-width: 30rem;">
237 
-                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
236 
+                                            position-relative  d-none" style="max-width: 50rem;">
237 
+                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100 h-100" />
238 
                                     <div class="position-absolute
 238 
                                     <div class="position-absolute
239 
                                                 bottom-0 text-light w-100">
 239 
                                                 bottom-0 text-light w-100">
240 
                                         <p class="p-2 m-0">02.</p>
 240 
                                         <p class="p-2 m-0">02.</p>
247 
                                             <button type="button" class="btn
 247 
                                             <button type="button" class="btn
248 
                                                         btn-primary
 248 
                                                         btn-primary
249 
                                                         rounded-0 satoshi_font">Learn
 249 
                                                         rounded-0 satoshi_font">Learn
250 
-                                                        More</button>
250 
+                                                More</button>
251 
                                         </div>
 251 
                                         </div>
252 
                                     </div>
 252 
                                     </div>
253 
                                 </div>
 253 
                                 </div>
254 
                             </div>
 254 
                             </div>
255 
-                            <div class="bg-light p-3
255 
+                            <div class="bg-light p-4
256 
                                         aw-main-features-toggle">
 256 
                                         aw-main-features-toggle">
257 
                                 <div class="aw-main-features-toggler-tab">
 257 
                                 <div class="aw-main-features-toggler-tab">
258 
                                     <div class="feature-sno">
 258 
                                     <div class="feature-sno">
270 
                                 </div>
 270 
                                 </div>
271
271
272 
                                 <div class="feature-bg-image
 272 
                                 <div class="feature-bg-image
273 
-                                            position-relative me-3 d-none" style="max-width: 30rem;">
274 
-                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
273 
+                                            position-relative  d-none" style="max-width: 50rem;">
274 
+                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100 h-100" />
275 
                                     <div class="position-absolute
 275 
                                     <div class="position-absolute
276 
                                                 bottom-0 text-light w-100">
 276 
                                                 bottom-0 text-light w-100">
277 
                                         <p class="p-2 m-0">03.</p>
 277 
                                         <p class="p-2 m-0">03.</p>
284 
                                             <button type="button" class="btn
 284 
                                             <button type="button" class="btn
285 
                                                         btn-primary
 285 
                                                         btn-primary
286 
                                                         rounded-0 satoshi_font">Learn
 286 
                                                         rounded-0 satoshi_font">Learn
287 
-                                                        More</button>
287 
+                                                More</button>
288 
                                         </div>
 288 
                                         </div>
289 
                                     </div>
 289 
                                     </div>
290 
                                 </div>
 290 
                                 </div>
291 
                             </div>
 291 
                             </div>
292 
-                            <div class="bg-light p-3
292 
+                            <div class="bg-light p-4
293 
                                         aw-main-features-toggle">
 293 
                                         aw-main-features-toggle">
294 
                                 <div class="aw-main-features-toggler-tab">
 294 
                                 <div class="aw-main-features-toggler-tab">
295 
                                     <div class="feature-sno">
 295 
                                     <div class="feature-sno">
307 
                                 </div>
 307 
                                 </div>
308
308
309 
                                 <div class="feature-bg-image
 309 
                                 <div class="feature-bg-image
310 
-                                            position-relative me-3 d-none" style="max-width: 30rem;">
311 
-                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
310 
+                                            position-relative  d-none" style="max-width: 50rem;">
311 
+                                    <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100 h-100" />
312 
                                     <div class="position-absolute
 312 
                                     <div class="position-absolute
313 
                                                 bottom-0 text-light w-100">
 313 
                                                 bottom-0 text-light w-100">
314 
                                         <p class="p-2 m-0">04.</p>
 314 
                                         <p class="p-2 m-0">04.</p>
321 
                                             <button type="button" class="btn
 321 
                                             <button type="button" class="btn
322 
                                                         btn-primary
 322 
                                                         btn-primary
323 
                                                         rounded-0 satoshi_font">Learn
 323 
                                                         rounded-0 satoshi_font">Learn
324 
-                                                        More</button>
324 
+                                                More</button>
325 
                                         </div>
 325 
                                         </div>
326 
                                     </div>
 326 
                                     </div>
327 
                                 </div>
 327 
                                 </div>
381 
                             sec-space-2">
 381 
                             sec-space-2">
382 
                     <div class="col">
 382 
                     <div class="col">
383 
                         <div class="card h-100 border-0">
 383 
                         <div class="card h-100 border-0">
384 
-                            <img src="./dist/assets/imgs/Home/dark-circle.png" class="img-fluid mx-auto w-25" alt="different-img-1">
384 
+                            <img src="./dist/assets/imgs/Home/dark-circle.png" class="img-fluid mx-auto w-25"
385 
+                                alt="different-img-1">
385 
                             <div class="card-body">
 386 
                             <div class="card-body">
386 
                                 <h5 class="card-title text-center">Solution Focus
 387 
                                 <h5 class="card-title text-center">Solution Focus
387 
                                 </h5>
 388 
                                 </h5>
388 
                                 <p class="card-text text-center
 389 
                                 <p class="card-text text-center
389 
-                                            satoshi_font">This card has supporting text below as a natural lead-in to additional content.
390 
+                                            satoshi_font">This card has supporting text below as a natural lead-in to
391 
+                                    additional content.
390 
                                 </p>
 392 
                                 </p>
391 
                             </div>
 393 
                             </div>
392 
                         </div>
 394 
                         </div>
393 
                     </div>
 395 
                     </div>
394 
                     <div class="col">
 396 
                     <div class="col">
395 
                         <div class="card h-100 border-0">
 397 
                         <div class="card h-100 border-0">
396 
-                            <img src="./dist/assets/imgs/Home/dark-circle.png" class="img-fluid mx-auto w-25" alt="different-img-2">
398 
+                            <img src="./dist/assets/imgs/Home/dark-circle.png" class="img-fluid mx-auto w-25"
399 
+                                alt="different-img-2">
397 
                             <div class="card-body">
 400 
                             <div class="card-body">
398 
                                 <h5 class="card-title text-center">Our People & Culture</h5>
 401 
                                 <h5 class="card-title text-center">Our People & Culture</h5>
399 
                                 <p class="card-text text-center
 402 
                                 <p class="card-text text-center
400 
-                                            satoshi_font">This card has supporting text below as a natural lead-in to additional content.
403 
+                                            satoshi_font">This card has supporting text below as a natural lead-in to
404 
+                                    additional content.
401 
                                 </p>
 405 
                                 </p>
402 
                             </div>
 406 
                             </div>
403 
                         </div>
 407 
                         </div>
404 
                     </div>
 408 
                     </div>
405 
                     <div class="col">
 409 
                     <div class="col">
406 
                         <div class="card h-100 border-0">
 410 
                         <div class="card h-100 border-0">
407 
-                            <img src="./dist/assets/imgs/Home/dark-circle.png" class="img-fluid mx-auto w-25" alt="different-img-3">
411 
+                            <img src="./dist/assets/imgs/Home/dark-circle.png" class="img-fluid mx-auto w-25"
412 
+                                alt="different-img-3">
408 
                             <div class="card-body">
 413 
                             <div class="card-body">
409 
                                 <h5 class="card-title text-center">Design Lead Approch</h5>
 414 
                                 <h5 class="card-title text-center">Design Lead Approch</h5>
410 
                                 <p class="card-text text-center
 415 
                                 <p class="card-text text-center
411 
-                                            satoshi_font">This card has supporting text below as a natural lead-in to additional content.
416 
+                                            satoshi_font">This card has supporting text below as a natural lead-in to
417 
+                                    additional content.
412 
                                 </p>
 418 
                                 </p>
413 
                             </div>
 419 
                             </div>
414 
                         </div>
 420 
                         </div>
427 
                             <div class="card-body text-white mb-5">
 433 
                             <div class="card-body text-white mb-5">
428 
                                 <h1 class="card-title fw-700 ">Out of World
 434 
                                 <h1 class="card-title fw-700 ">Out of World
429 
                                 </h1>
 435 
                                 </h1>
430 
-                                <p class="card-text satoshi_font">Anwi Systems excels the performance with open hardware enabling customers to use memory and storage of their choices.
436 
+                                <p class="card-text satoshi_font">Anwi Systems excels the performance with open hardware
437 
+                                    enabling customers to use memory and storage of their choices.
431 
                                 </p>
 438 
                                 </p>
432 
                                 <a class="btn btn-light button_dark
 439 
                                 <a class="btn btn-light button_dark
433 
                                             satoshi_font fw-600" href="#">Learn
 440 
                                             satoshi_font fw-600" href="#">Learn
434 
-                                            More</a>
441 
+                                    More</a>
435 
                             </div>
 442 
                             </div>
436 
                         </div>
 443 
                         </div>
437 
                         <div class="col-md-6 ms-auto">
 444 
                         <div class="col-md-6 ms-auto">
438 
-                            <img src="./dist/assets/imgs/Home/out-of-world.png" class="img-fluid rounded-start" alt="...">
445 
+                            <img src="./dist/assets/imgs/Home/out-of-world.png" class="img-fluid rounded-start"
446 
+                                alt="...">
439 
                         </div>
 447 
                         </div>
440 
                     </div>
 448 
                     </div>
441 
                 </div>
 449 
                 </div>
455 
                                 <p class="fw-bold"> Hassel-free Replacement
 463 
                                 <p class="fw-bold"> Hassel-free Replacement
456 
                                 </p>
 464 
                                 </p>
457 
                                 <small class="satoshi_font">10-day
 465 
                                 <small class="satoshi_font">10-day
458 
-                                            easy
459 
-                                            replacement policy
460 
-                                            on
461 
-                                            anwisystems.com</small>
466 
+                                    easy
467 
+                                    replacement policy
468 
+                                    on
469 
+                                    anwisystems.com</small>
462 
                             </div>
 470 
                             </div>
463 
                         </div>
 471 
                         </div>
464 
                         <div class="col-md-4 my-4 border-dark
 472 
                         <div class="col-md-4 my-4 border-dark
468 
                                 <p class="fw-bold"> Hassel-free Replacement
 476 
                                 <p class="fw-bold"> Hassel-free Replacement
469 
                                 </p>
 477 
                                 </p>
470 
                                 <small class="satoshi_font">10-day
 478 
                                 <small class="satoshi_font">10-day
471 
-                                            easy
472 
-                                            replacement policy
473 
-                                            on
474 
-                                            anwisystems.com</small>
479 
+                                    easy
480 
+                                    replacement policy
481 
+                                    on
482 
+                                    anwisystems.com</small>
475 
                             </div>
 483 
                             </div>
476 
                         </div>
 484 
                         </div>
477 
                         <div class="col-md-4 my-4">
 485 
                         <div class="col-md-4 my-4">
479 
                                 <p class="fw-bold">100 % Secure Payments
 487 
                                 <p class="fw-bold">100 % Secure Payments
480 
                                 </p>
 488 
                                 </p>
481 
                                 <small class="satoshi_font">we
 489 
                                 <small class="satoshi_font">we
482 
-                                            support
483 
-                                            cards, Wallets, EMI
484 
-                                            and Cash on Deliver</small>
490 
+                                    support
491 
+                                    cards, Wallets, EMI
492 
+                                    and Cash on Deliver</small>
485 
                             </div>
 493 
                             </div>
486 
                         </div>
 494 
                         </div>
487 
                     </div>
 495 
                     </div>
507 
                                                             news-letter-email
 515 
                                                             news-letter-email
508 
                                                             text-white
 516 
                                                             text-white
509 
                                                             border-0" placeholder="Email
 517 
                                                             border-0" placeholder="Email
510 
-                                                            Address" /> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="#fff" class="bi
518 
+                                                            Address" /> <svg xmlns="http://www.w3.org/2000/svg"
519 
+                                                    width="25" height="25" fill="#fff" class="bi
511 
                                                             bi-arrow-right
 520 
                                                             bi-arrow-right
512 
                                                             me-3" viewBox="0
 521 
                                                             me-3" viewBox="0
513 
                                                             0 16 16">
 522 
                                                             0 16 16">
514 
-                                                            <path
515 
-                                                                fill-rule="evenodd"
516 
-                                                                d="M1 8a.5.5
523 
+                                                    <path fill-rule="evenodd" d="M1 8a.5.5
517 
                                                                 0 0
 524 
                                                                 0 0
518 
                                                                 1
 525 
                                                                 1
519 
                                                                 .5-.5h11.793l-3.147-3.146a.5.5
 526 
                                                                 .5-.5h11.793l-3.147-3.146a.5.5
527 
                                                                 1-.708-.708L13.293
 534 
                                                                 1-.708-.708L13.293
528 
                                                                 8.5H1.5A.5.5
 535 
                                                                 8.5H1.5A.5.5
529 
                                                                 0 0
 536 
                                                                 0 0
530 
-                                                                1 1 8z"/>
531 
-                                                            </svg></a>
537 
+                                                                1 1 8z" />
538 
+                                                </svg></a>
532 
                                         </div>
 539 
                                         </div>
533 
                                     </div>
 540 
                                     </div>
534 
                                 </div>
 541 
                                 </div>
549 
     <script src="./dist/Js/jquery.min.js"></script>
 556 
     <script src="./dist/Js/jquery.min.js"></script>
550 
     <script src="./libs/Owlcarousel/Js/owl.carousel.min.js"></script>
 557 
     <script src="./libs/Owlcarousel/Js/owl.carousel.min.js"></script>
551 
     <script src="./dist/Js/navbar.js"></script>
 558 
     <script src="./dist/Js/navbar.js"></script>
552 
-    <script src="./dist/Js/footer.js"></script>
559 
+    <script src="./dist/Js/footer.js"></script>
553 
     <script>
 560 
     <script>
554 
         $('.owl-carousel.star-products-img-sec').owlCarousel({
 561 
         $('.owl-carousel.star-products-img-sec').owlCarousel({
555 
-            loop: true,
562 
+            // loop: true,
556 
             margin: 10,
 563 
             margin: 10,
564 
+            rtl:false,
557 
             nav: true,
 565 
             nav: true,
558 
-            navText: ["<svg xmlns='http://www.w3.org/2000/svg' width='35' height='35' fill='#B8B8B8' class='bi bi-arrow-left-short' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'/></svg>", "<svg xmlns='http://www.w3.org/2000/svg' width='35' height='35' fill='#B8B8B8' class='bi bi-arrow-right-short' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z'/> </svg>"],
566 
+            navText: [
567 
+                "<svg xmlns='http://www.w3.org/2000/svg' width='35' height='35' fill='#B8B8B8' class='bi bi-arrow-left-short' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'/></svg>",
568 
+                "<svg xmlns='http://www.w3.org/2000/svg' width='35' height='35' fill='#B8B8B8' class='bi bi-arrow-right-short' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z'/> </svg>"
569 
+            ],
559 
             responsive: {
 570 
             responsive: {
560 
                 0: {
 571 
                 0: {
561 
                     items: 1
 572 
                     items: 1
567 
                     items: 5
 578 
                     items: 5
568 
                 }
 579 
                 }
569 
             }
 580 
             }
570 
-        })
571 
-        $(".aw-main-features-toggle").click(function() {
581 
+        });
582 
+        $('.owl-nav,.owl-dots').wrapAll('<div class="d-flex flex-row-reverse justify-content-between align-items-center"></div>')
583 
+        $(".aw-main-features-toggle").click(function () {
572 
             $('.feature-bg-image').addClass('d-none');
 584 
             $('.feature-bg-image').addClass('d-none');
573 
-            $(".aw-main-features-toggle").addClass('p-3 bg-light')
585 
+            $(".aw-main-features-toggle").addClass('p-4 bg-light')
574 
             $('.aw-main-features-toggler-tab').removeClass('d-none');
 586 
             $('.aw-main-features-toggler-tab').removeClass('d-none');
587 
+         //   $('.aw-main-features-toggler-tab.p-4').removeClass('p-4');
575 
             let toggleTab = $(this).find('.feature-bg-image:visible').length
 588 
             let toggleTab = $(this).find('.feature-bg-image:visible').length
576 
             if (toggleTab) {
 589 
             if (toggleTab) {
577 
-                $(this).find('.feature-bg-image').addClass('d-none');
590 
+              //  $(this).find('.feature-bg-image').addClass('d-none');
578 
                 $(this).find('.feature-bg-image').animate({
 591 
                 $(this).find('.feature-bg-image').animate({
579 
                     width: "toggle"
 592 
                     width: "toggle"
580 
                 }, 500);
 593 
                 }, 500);
581 
             } else {
 594 
             } else {
582 
-                $(this).find('.aw-main-features-toggler-tab').addClass('d-none');
583 
-                $(this).find('.feature-bg-image').removeClass('d-none')
584 
-                $(this).find('.feature-bg-image').show();
595 
+               // $(this).find('.aw-main-features-toggler-tab').addClass('d-none');
596 
+
597 
+              $('.aw-main-features-toggle.d-flex').removeClass('p-4')
598 
+
599 
+               $(this).addClass('d-flex');
600 
+
601 
+                $(this).find('.aw-main-features-toggler-tab').addClass('p-4');
602 
+
603 
+               debugger;
604 
+                $(this).find('.feature-bg-image').removeClass('d-none').addClass('animated-feature-img');
605 
+
585 
                 if (window.width > 768) {
 606 
                 if (window.width > 768) {
586 
                     $(this).find('.feature-bg-image').animate({
 607 
                     $(this).find('.feature-bg-image').animate({
587 
-                        width: "30rem"
608 
+                        width: "50rem"
588 
                     }, 500);
 609 
                     }, 500);
589 
                 } else {
 610 
                 } else {
590 
                     $(this).find('.feature-bg-image').animate({
 611 
                     $(this).find('.feature-bg-image').animate({
592 
                     }, 500);
 613 
                     }, 500);
593
614
594 
                 }
 615 
                 }
595 
-                $(this).removeClass('p-3 bg-light')
616 
+                $(this).removeClass('p-4 bg-light')
596 
             }
 617 
             }
597 
         });
 618 
         });
598 
     </script>
 619 
     </script>

+ 944
- 921
laptopmulti.html
ファイル差分が大きすぎるため省略します
ファイルの表示


+ 5
- 7
shopping-cart.html ファイルの表示

15 
 </head>
 15 
 </head>
16
16
17 
 <body>
 17 
 <body>
18 
+      <!-- navbar -->
19 
+      <div id="navbar-head" class="bg-white"></div>
20 
+      <!-- end-navbar -->
21 
+  <hr class="mx-5">
18 
     <!-- main-body -->
 22 
     <!-- main-body -->
19 
-    <main class="shopping-cart-main-container">
23 
+    <main class="shopping-cart-main-container main-body">
20 
         <section class="bg-white">
 24 
         <section class="bg-white">
21 
-            <header>
22 
-                <!-- navbar -->
23 
-                <div id="navbar-head" class="bg-white"></div>
24 
-                <!-- end-navbar -->
25 
-            </header>
26 
-            <hr class="mx-5">
27 
             <div class="cart-sec-highlighter d-none d-sm-block">
 25 
             <div class="cart-sec-highlighter d-none d-sm-block">
28 
                 <div class="container">
 26 
                 <div class="container">
29 
                     <div class="row align-items-center py-4 justify-content-around">
 27 
                     <div class="row align-items-center py-4 justify-content-around">

+ 5
- 1
styles/base/_utilities.scss ファイルの表示

115 
 .padding_top_10 {
 115 
 .padding_top_10 {
116 
   padding-top: 10rem; }
 116 
   padding-top: 10rem; }
117
117
118 
-
118 
+.padding_top_13{
119 
+  padding-top: 13rem;
120 
+}
119 
 // heights
 121 
 // heights
120
122
121 
 .h-10{
 123 
 .h-10{
220
222
221
223
222 
 // spacing
 224 
 // spacing
225 
+
226 
+
223 
 .sec-space-1 {
 227 
 .sec-space-1 {
224 
   margin-top: 80px;
 228 
   margin-top: 80px;
225 
 }
 229 
 }

+ 70
- 13
styles/pages/_home.scss ファイルの表示

28 
     background-position-y: -100px;
 28 
     background-position-y: -100px;
29 
     // home-banner
 29 
     // home-banner
30 
     .banner-main-container {
 30 
     .banner-main-container {
31 
-        height: 400px;
31 
+        height: 620px;
32 
     }
 32 
     }
33 
 }
 33 
 }
34
34
118 
     }
 118 
     }
119 
 }
 119 
 }
120
120
121 
-@media (min-width:298px) and (max-width:768px) {
121 
+@media (min-width:278px) and (max-width:767px) {
122 
     .home-main-container {
 122 
     .home-main-container {
123 
         h5,
 123 
         h5,
124 
         h6 {
 124 
         h6 {
129 
             margin-top: 40px;
 129 
             margin-top: 40px;
130 
         }
 130 
         }
131 
         .banner-main-container {
 131 
         .banner-main-container {
132 
-                height: 550px;
133 
-            text-align: center;
134 
-            .col-md-6 {
135 
-                margin-top: 0px;
136 
-                .button_dark{
137 
-                    display: none;
138 
-                }
139 
-            }
140 
-            h1 {
141 
-                font-size: 2rem;
132 
+            height: 550px;
133 
+            display: block !important;
134 
+        text-align: center;
135 
+        .col-md-6 {
136 
+            padding-top: 7rem;
137 
+
138 
+            .button_dark{
139 
+                display: none;
142 
             }
 140 
             }
143 
         }
 141 
         }
142 
+        .mobile-home-img{
143 
+            width: 85%;
144 
+        }
145 
+        h1 {
146 
+            font-size: 2rem;
147 
+        }
148 
+    }
144 
         .hero-banner {
 149 
         .hero-banner {
145 
             // background: url(../../dist/assets/imgs/Home/All-in-one.png);
 150 
             // background: url(../../dist/assets/imgs/Home/All-in-one.png);
146 
             // background-size: cover;
 151 
             // background-size: cover;
165 
             writing-mode: horizontal-tb;
 170 
             writing-mode: horizontal-tb;
166 
         }
 171 
         }
167 
         .products-main-container {
 172 
         .products-main-container {
168 
-            .enterprise-prd {
173 
+            .enterprise-prd,.consumer-prd {
169 
                 margin-top: 10px;
 174 
                 margin-top: 10px;
170 
             }
 175 
             }
176 
+
171 
         }
 177 
         }
178 
+
172 
         .news-letter-sec {
 179 
         .news-letter-sec {
173 
             a.button_dark {
 180 
             a.button_dark {
174 
                 padding: 10px 5px;
 181 
                 padding: 10px 5px;
217 
             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 224 
             background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
218 
         }
 225 
         }
219 
     }
 226 
     }
227 
+}
228 
+
229 
+// index styles
230 
+
231 
+.feature-bg-image.animated-feature-img {
232 
+
233 
+    animation: slide 1s ease .2s forwards;
234 
+    opacity: 0;
235 
+    // transform-origin: left top;
236 
+}
237 
+
238 
+@keyframes slide {
239 
+    from {
240 
+
241 
+        opacity: 0;
242 
+    }
243 
+
244 
+    to {
245 
+
246 
+        opacity: 1;
247 
+    }
248 
+}
249 
+
250 
+[alt=footer-rocket-img]{
251 
+    cursor: pointer;
252 
+}
253 
+.partners-img{
254 
+    height:60px;
255 
+}
256 
+@media (min-width:405px) and (max-width:570px) {
257 
+    .home-main-container .banner-main-container .mobile-home-img{
258 
+        width: 60%;
259 
+    }
260 
+}
261 
+
262 
+@media (min-width:1800px) {
263 
+    .banner-wrapper {
264 
+        position: relative;
265 
+    }
266 
+    .banner-main-container {
267 
+        height: 900px !important;
268 
+    }
269 
+
270 
+    .offer-main-sec{
271 
+        position: absolute;
272 
+    bottom: 40%;
273 
+    right: 20%;
274 
+    width: 60%;
275 
+    }
276 
+
220 
 }
 277 
 }

+ 73
- 4
styles/style.css ファイルの表示

135 
   padding-top: 10rem;
 135 
   padding-top: 10rem;
136 
 }
 136 
 }
137
137
138 
+.padding_top_13 {
139 
+  padding-top: 13rem;
140 
+}
141 
+
138 
 .h-10 {
 142 
 .h-10 {
139 
   height: 10%;
 143 
   height: 10%;
140 
 }
 144 
 }
1356 
   background-position-y: -100px;
 1360 
   background-position-y: -100px;
1357 
 }
 1361 
 }
1358 
 .hero-banner .banner-main-container {
 1362 
 .hero-banner .banner-main-container {
1359 
-  height: 400px;
1363 
+  height: 620px;
1360 
 }
 1364 
 }
1361
1365
1362 
 .home-main-container .offer-main-sec .offer-sec {
 1366 
 .home-main-container .offer-main-sec .offer-sec {
1436 
     padding: 10px 5px;
 1440 
     padding: 10px 5px;
1437 
   }
 1441 
   }
1438 
 }
 1442 
 }
1439 
-@media (min-width: 298px) and (max-width: 768px) {
1443 
+@media (min-width: 278px) and (max-width: 767px) {
1440 
   .home-main-container h5,
 1444 
   .home-main-container h5,
1441 
 .home-main-container h6 {
 1445 
 .home-main-container h6 {
1442 
     font-size: 1rem;
 1446 
     font-size: 1rem;
1447 
   }
 1451 
   }
1448 
   .home-main-container .banner-main-container {
 1452 
   .home-main-container .banner-main-container {
1449 
     height: 550px;
 1453 
     height: 550px;
1454 
+    display: block !important;
1450 
     text-align: center;
 1455 
     text-align: center;
1451 
   }
 1456 
   }
1452 
   .home-main-container .banner-main-container .col-md-6 {
 1457 
   .home-main-container .banner-main-container .col-md-6 {
1453 
-    margin-top: 0px;
1458 
+    padding-top: 7rem;
1454 
   }
 1459 
   }
1455 
   .home-main-container .banner-main-container .col-md-6 .button_dark {
 1460 
   .home-main-container .banner-main-container .col-md-6 .button_dark {
1456 
     display: none;
 1461 
     display: none;
1457 
   }
 1462 
   }
1463 
+  .home-main-container .banner-main-container .mobile-home-img {
1464 
+    width: 85%;
1465 
+  }
1458 
   .home-main-container .banner-main-container h1 {
 1466 
   .home-main-container .banner-main-container h1 {
1459 
     font-size: 2rem;
 1467 
     font-size: 2rem;
1460 
   }
 1468 
   }
1472 
     -ms-writing-mode: lr-tb;
 1480 
     -ms-writing-mode: lr-tb;
1473 
         writing-mode: horizontal-tb;
 1481 
         writing-mode: horizontal-tb;
1474 
   }
 1482 
   }
1475 
-  .home-main-container .products-main-container .enterprise-prd {
1483 
+  .home-main-container .products-main-container .enterprise-prd, .home-main-container .products-main-container .consumer-prd {
1476 
     margin-top: 10px;
 1484 
     margin-top: 10px;
1477 
   }
 1485 
   }
1478 
   .home-main-container .news-letter-sec a.button_dark {
 1486 
   .home-main-container .news-letter-sec a.button_dark {
1513 
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 1521 
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
1514 
   }
 1522 
   }
1515 
 }
 1523 
 }
1524 
+.feature-bg-image.animated-feature-img {
1525 
+  -webkit-animation: slide 1s ease 0.2s forwards;
1526 
+          animation: slide 1s ease 0.2s forwards;
1527 
+  opacity: 0;
1528 
+}
1529 
+
1530 
+@-webkit-keyframes slide {
1531 
+  from {
1532 
+    opacity: 0;
1533 
+  }
1534 
+  to {
1535 
+    opacity: 1;
1536 
+  }
1537 
+}
1538 
+
1539 
+@keyframes slide {
1540 
+  from {
1541 
+    opacity: 0;
1542 
+  }
1543 
+  to {
1544 
+    opacity: 1;
1545 
+  }
1546 
+}
1547 
+[alt=footer-rocket-img] {
1548 
+  cursor: pointer;
1549 
+}
1550 
+
1551 
+.partners-img {
1552 
+  height: 60px;
1553 
+}
1554 
+
1555 
+@media (min-width: 405px) and (max-width: 570px) {
1556 
+  .home-main-container .banner-main-container .mobile-home-img {
1557 
+    width: 60%;
1558 
+  }
1559 
+}
1560 
+@media (min-width: 1800px) {
1561 
+  .banner-wrapper {
1562 
+    position: relative;
1563 
+  }
1564 
+  .banner-main-container {
1565 
+    height: 900px !important;
1566 
+  }
1567 
+  .offer-main-sec {
1568 
+    position: absolute;
1569 
+    bottom: 40%;
1570 
+    right: 20%;
1571 
+    width: 60%;
1572 
+  }
1573 
+}
1516 
 .shopping-cart-main-container {
 1574 
 .shopping-cart-main-container {
1517 
   background-color: #F5FFEA;
 1575 
   background-color: #F5FFEA;
1518 
   padding-bottom: 50px;
 1576 
   padding-bottom: 50px;
1953 
   border-radius: 10px;
 2011 
   border-radius: 10px;
1954 
 }
 2012 
 }
1955
2013
2014 
+#navbar-head {
2015 
+  position: fixed;
2016 
+  width: 100%;
2017 
+  z-index: 9999;
2018 
+  top: 0;
2019 
+}
2020 
+
1956 
 .biz-nav-wrapper .navbar-brand img {
 2021 
 .biz-nav-wrapper .navbar-brand img {
1957 
   width: 150px;
 2022 
   width: 150px;
1958 
 }
 2023 
 }
1988 
 .footer-wrapper .footer-sub-content p {
 2053 
 .footer-wrapper .footer-sub-content p {
1989 
   line-height: 2rem;
 2054 
   line-height: 2rem;
1990 
   font-family: "Satoshi", sans-serif;
 2055 
   font-family: "Satoshi", sans-serif;
2056 
+}
2057 
+
2058 
+.footer-socailImg {
2059 
+  width: 30px;
1991 
 }/*# sourceMappingURL=style.css.map */
 2060 
 }/*# sourceMappingURL=style.css.map */

+ 1
- 1
styles/style.css.map
ファイル差分が大きすぎるため省略します
ファイルの表示


+ 18
- 0
styles/style.scss ファイルの表示

20 
 @import "pages/productOverview/osPlusSoftware";
 20 
 @import "pages/productOverview/osPlusSoftware";
21 
 @import "pages/productOverview/controlPanel";
 21 
 @import "pages/productOverview/controlPanel";
22
22
23 
+
23 
 @import "pages/home";
 24 
 @import "pages/home";
24 
 @import "pages/shopping-cart";
 25 
 @import "pages/shopping-cart";
25 
 @import "pages/allInOne";
 26 
 @import "pages/allInOne";
120 
     overflow-x: hidden;
 121 
     overflow-x: hidden;
121 
 }
 122 
 }
122
123
124 
+
123 
 @media only screen and (max-width: 56.25em) {
 125 
 @media only screen and (max-width: 56.25em) {
124 
     body {
 126 
     body {
125 
         padding: 0;
 127 
         padding: 0;
153 
 }
 155 
 }
154
156
155 
 // navbar
 157 
 // navbar
158 
+#navbar-head{
159 
+    position: fixed;
160 
+    width: 100%;
161 
+    z-index: 9999;
162 
+    top: 0;
163 
+}
156 
 .biz-nav-wrapper {
 164 
 .biz-nav-wrapper {
157 
     .navbar-brand img {
 165 
     .navbar-brand img {
158 
         width: 150px;
 166 
         width: 150px;
171 
     // background-color: rgb(0, 0, 0);
 179 
     // background-color: rgb(0, 0, 0);
172 
     background-image: url(../dist/assets/imgs/Home/Footer-bg-1.png);
 180 
     background-image: url(../dist/assets/imgs/Home/Footer-bg-1.png);
173 
     background-size: cover;
 181 
     background-size: cover;
182 
+
174 
     .footer-content-main-container {
 183 
     .footer-content-main-container {
175 
         background-image: url(../dist/assets/imgs/Home/Footer-pattern.png);
 184 
         background-image: url(../dist/assets/imgs/Home/Footer-pattern.png);
176 
         background-size: contain;
 185 
         background-size: contain;
177 
         background-position: right 30px;
 186 
         background-position: right 30px;
178 
         background-repeat: no-repeat;
 187 
         background-repeat: no-repeat;
179 
     }
 188 
     }
189 
+
180 
     .last-col-footer {
 190 
     .last-col-footer {
181 
         width: 23%;
 191 
         width: 23%;
182 
     }
 192 
     }
193 
+
183 
     @media (min-width:1990px) {
 194 
     @media (min-width:1990px) {
184 
         .footer-rkt {
 195 
         .footer-rkt {
185 
             right: 45px !important;
 196 
             right: 45px !important;
186 
         }
 197 
         }
187 
     }
 198 
     }
199 
+
188 
     .footer-logo img {
 200 
     .footer-logo img {
189 
         width: 120px;
 201 
         width: 120px;
190 
     }
 202 
     }
203 
+
191 
     li,
 204 
     li,
192 
     .footer-sub-content p {
 205 
     .footer-sub-content p {
193 
         line-height: 2rem;
 206 
         line-height: 2rem;
194 
         font-family: "Satoshi", sans-serif;
 207 
         font-family: "Satoshi", sans-serif;
195 
     }
 208 
     }
209 
+}
210 
+
211 
+// footer
212 
+.footer-socailImg{
213 
+    width: 30px;
196 
 }
 214 
 }

書き込み プレビュー
読み込み中…
キャンセル
保存