sachin.ganesh
/
anwi_website
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

code added

sachinganesh 2 jaren geleden
bovenliggende
3c2b00a9f3
commit
767190eca6
6 gewijzigde bestanden met toevoegingen van 118 en 195 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 1
    1
      dist/html/pages/allinone.html
  2. 97
    91
      dist/html/pages/laptopmulti.html
  3. 1
    7
      styles/base/_base.scss
  4. 15
    91
      styles/pages/_productOverview.scss
  5. 1
    1
      styles/pages/productOverview/_wifisection.scss
  6. 3
    4
      styles/style.scss

+ 1
- 1
dist/html/pages/allinone.html Bestand weergeven 

@@ -522,7 +522,7 @@
522 522 
 </section>
523 523 
 <!-- section 7 end -->
524 524 
     <!-- footer -->
525 
-    <!-- <section id="footer-head"></section> -->
525 
+    <section id="footer-head"></section>
526 526 
     <!-- end-footer -->
527 527
528 528 
     <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>

+ 97
- 91
dist/html/pages/laptopmulti.html Bestand weergeven 

@@ -12,7 +12,7 @@
12 12 
     <title>project</title>
13 13 
 </head>
14 14
15 
-<body>
15 
+<body class="productOverviewBody">
16 16
17 17 
     <header class="productoverviewmain  vh-100">
18 18 
 
@@ -36,9 +36,9 @@
36 36 
             </div>
37 37
38 38 
         </div>
39 
-        <div class="price_footer d-md-block d-none  py-4 w-100 ">
40 
-            <div class="d-flex align-items-center container justify-content-between">
41 
-                <div class="d-flex">
39 
+        <div class="price_footer px-1 px-md-3 py-4 w-100 ">
40 
+            <div class="d-flex align-items-center price_footerContainer justify-content-between">
41 
+                <div class="d-none d-md-flex">
42 42 
                     <div class="boxImgContainer">
43 43 
                         <img class="w-100 h-100" src="./../../assets/imgs/box.png" alt="box" />
44 44 
                     </div>
 
@@ -48,8 +48,8 @@
48 48 
                         <div class="satoshi_font ">entering your PIN code</div>
49 49 
                     </div>
50 50 
                 </div>
51 
-                <div class="d-flex align-items-center ">
52 
-                    <div class="pe-5">
51 
+                <div class="d-flex align-items-center footerDesText justify-content-lg-end  justify-content-around">
52 
+                    <div class="pe-2 pe-md-5">
53 53 
                         <div class="font-1_5  fw-700 satoshi_font">$69,999.00</div>
54 54 
                         <div class="d-flex align-items-center pt-1 justify-content-end gap-1 priceCut_multi">
55 55 
                             <span class="text-decoration-line-through  pe-3 satoshi_font">$ 89,999</span><span
 
@@ -70,12 +70,14 @@
70 70 
     <section class="productOverview container ">
71 71 
         <div class=" d-flex flex-column p-6  align-items-center container justify-content-between">
72 72 
             <div class="font-1_7 overviewProductHeading fw-600">Overview</div>
73 
-            <div class="font_p_Dual text-center fw-bold overviewProductFullTitle">The Laptop of tomorrow with
74 
-                4K OLED Dual Screen for Creative Multitasking</div>
75 
-            <div class="overviewProductDes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
76 
-                eirmod tempor
77 
-                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
78 
-                amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
73 
+            <div class="font_p_Dual text-center fw-bold overviewProductFullTitle">
74 
+                <div>Perform. Produce.</div>
75 
+                <div>
76 
+                    Only the Perfects
77 
+                </div>
78 
+
79 
+            </div>
80 
+            <div class="overviewProductDes">Powered by up to 11th Gen  Intel® Core™ i7-10850H Processor and a refresh rate of up to 120 Hz, Performance will not be a problem. Embedded with 16 Gb DDr4 Memory series and up to 1TB M.2 NVme storage Anwi Xseries Laptop is a high throughput laptop with increased Clock speed, memory bandwidth, and effective data transfers with very minimal power consumption.</div>
79 81 
         </div>
80 82 
     </section>
81 83 
     
@@ -125,7 +127,7 @@
125 127 
     <!-- specs  -->
126 128 
     <section class="container p-6">
127 129 
         <div class="productoverBox row w-100 h-700p px-6">
128 
-            <div class="col-sm-5">
130 
+            <div class="col-lg-5">
129 131 
                 <div class="PO_box">
130 132 
                     <div class="">
131 133 
                         <div
 
@@ -155,13 +157,13 @@
155 157
156 158 
                                 </div>
157 159 
                                 <div class="col-6 flex-column d-flex justify-content-center align-items-center">
158 
-
160 
+
159 161 
                                     <div class="orbitron_font fw-600">
160 
-                                        Latest 11th
162 
+                                        Intel® Core™ i7
161 163 
                                     </div>
162 
-                                    <div class="orbitron_font fw-600">Gen Intel Core
164 
+                                    <div class="orbitron_font fw-600">11th Gen
163 165 
                                     </div>
164 
-                                    <div class="orbitron_font fw-600"> i5/i7 H35 </div>
166 
+                                    <div class="orbitron_font fw-600"> Processor</div>
165 167 
                                 </div>
166 168 
                             </div>
167 169 
                         </div>
 
@@ -282,7 +284,7 @@
282 284 
                 </div>
283 285
284 286 
             </div>
285 
-            <div class="col-sm-4">
287 
+            <div class="col-lg-4">
286 288 
                 <div class="PO_box">
287 289 
                     <div class="">
288 290 
                         <div
 
@@ -407,7 +409,7 @@
407 409 
                 </div>
408 410
409 411 
             </div>
410 
-            <div class="col-sm-3">
412 
+            <div class="col-lg-3">
411 413 
                 <div class="PO_box">
412 414 
                     <div class="">
413 415 
                         <div
 
@@ -455,11 +457,14 @@
455 457 
         <div class="">
456 458 
             <div class=" d-flex flex-column align-items-center justify-content-center">
457 459 
                 <div class="satoshi_font font-1_7 fw-600">
458 
-                    Display / Screenpad
460 
+                    Two Screens
459 461 
                 </div>
460 462 
                 <div class="displayscreenpadContainer">
461 
-                    <h1 class="displayscreenpadHeading orbitron_font">TWO SCREENS.</h1>
462 
-                    <h1 class="displayscreenpadHeading orbitron_font">ZERO BOUNDARIES</h1>
463 
+                    <!-- <h1 class="displayscreenpadHeading orbitron_font text-uppercase"> Two Screens
464 
+                    </h1> -->
465 
+                    <h1 class="displayscreenpadHeading orbitron_font text-uppercase">To Display
466 
+                    </h1>
467 
+                    <h1 class="displayscreenpadHeading orbitron_font text-uppercase ">True Colors</h1>
463 468 
                 </div>
464 469 
                 <!-- <div class="w-100 d-flex">
465 470 
                 <div class="displayscreenpadleft w-50  position-relative">
 
@@ -491,22 +496,22 @@
491 496 
             <div class="col-7 pe-0">
492 497 
                 <img src="./../../assets/imgs/productoverview/leftlap.png" alt="" class="img-fluid">
493 498 
             </div>
494 
-            <div class="col-5 ps-0">
499 
+            <div class="col-5 ps-0 ">
495 500 
                 <div class="zeroBMain_des d-none d-md-block" style="margin-left: -200px;">
496 501 
                     <div>
497 
-                        <h1 class="dual_des_heading orbitron_font">Experience Ultimate</h1>
498 
-                        <h1 class="dual_des_heading orbitron_font">productivity</h1>
502 
+                        <h1 class="dual_des_heading orbitron_font">Complemented by Multi-touch Brilliance
503 
+                        </h1>
504 
+
505 
+                        <h1 class="dual_des_heading orbitron_font d-none"></h1>
499 506 
                     </div>
500 507 
                     <div class=" satoshi_font zeroBMain_desP font-1">
501 
-                        Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
502 
-                        availability Experience
503 
-                        ultimate productivityExperience ultimate productivity
504 
-                        Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
505 
-                        availability Experience
506 
-                        ultimate productivityExperience ultimate productivity
508 
+                        A 16'inch 2K QHD display and a 14'inch touch screen dual display- designed to capture the enhancement of visual impressions and to drive the imaginations of visual creators into the real world with all twirls and whirls.
509 
+                        The Touch screen dual display brings in the added excitement of viewing and creating artwork. Importing artwork is always on the horizon to get the most out of the artists' illusions and imagination.
510 
+
511 
+
507 512 
                     </div>
508 513 
                 </div>
509 
-                <img src="./../../assets/imgs/productoverview/rightlap.png" alt="" class="img-fluid">
514 
+                <img src="./../../assets/imgs/productoverview/rightlap.png" alt="" class="img-fluid w-100">
510 515 
             </div>
511 516 
         </div>
512 517 
         <div class="zeroBMain_des d-md-none d-block">
 
@@ -553,28 +558,20 @@
553 558 
     <section>
554 559 
         <div>
555 560 
             <div class="d-md-none d-block satoshi_font p-4" >
556 
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
557 
-                    diam nonumy eirmod tempor invidunt ut labore et dolore
558 
-                    magna aliquyam erat, sed diam voluptua. Lorem ipsum
559 
-                    dolor sit amet, consetetur sadipscing elitr, sed diam
560 
-                    nonumy eirmodorem ipsum dolor sit amet, consetetur
561 
-                    sadipscing elitr, sed
561 
+                A 16'inch 2K QHD display and a 14'inch touch screen dual display together campaigning to produce simulations of ultra-high contrast of deep blacks for true-to-life impressions and photorealistic visualizations. Industry-standard 100% sRGB Wide Color GamutDelta E &#10094; 1.5DC to ensure vibrantly enriched vivids.
562 562 
                 </div>
563 563 
         </div>
564 564 
         <div class="position-relative">
565 
-            <img src="./../../assets/imgs/sectiontest.png" alt="" class="img-fluid">
565 
+            <img src="./../../assets/imgs/sectiontest.png" alt="" class="img-fluid w-100">
566 566 
                 <div class="circleTableLaptop_Heading text-center position-absolute w-100 ">
567 
-                    <h1 class="orbitron_font fw-700">Two Screens.</h1>
568 
-                    <h1 class="orbitron_font fw-700"> Zero BOUNDARIES.</h1>
567 
+                    <h1 class="orbitron_font fw-700">Two Screens</h1>
568 
+                    <h1 class="orbitron_font fw-700"> To Display</h1>
569 
+                    <h1 class="orbitron_font fw-700">True Colors
570 
+                    </h1>
569 571 
                 </div>
570 572 
                 <div class="circleTableLaptop_text font_p_Dual d-none d-md-block position-absolute w-100 px-5" >
571 573 
                     <div class="satoshi_font font-1-2 ">
572 
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
573 
-                    diam nonumy eirmod tempor invidunt ut labore et dolore
574 
-                    magna aliquyam erat, sed diam voluptua. Lorem ipsum
575 
-                    dolor sit amet, consetetur sadipscing elitr, sed diam
576 
-                    nonumy eirmodorem ipsum dolor sit amet, consetetur
577 
-                    sadipscing elitr, sed
574 
+                        A 16'inch 2K QHD display and a 14'inch touch screen dual display together campaigning to produce simulations of ultra-high contrast of deep blacks for true-to-life impressions and photorealistic visualizations. Industry-standard 100% sRGB Wide Color GamutDelta E &#10094; 1.5DC to ensure vibrantly enriched vivids.
578 575 
                 </div>
579 576 
                 </div>
580 577 
         </div>
 
@@ -585,8 +582,8 @@
585 582 
     <!-- table end -->
586 583 
     <section class="trueLifeDisplay ">
587 584 
         <div class="trueLifeDisplay_headingHD text-center pb-5">
588 
-            <h1 class="orbitron_font headingLife fw-700">2.5k QHD +</h1>
589 
-            <h1 class="orbitron_font  fw-700">Anwi Truelife Display</h1>
585 
+            <h1 class="orbitron_font headingLife fw-700">2k FHD</h1>
586 
+            <h1 class="orbitron_font  fw-700 d-none">Anwi Truelife Display</h1>
590 587 
         </div>
591 588 
         <div class="trueLifeDisplay_des">
592 589 
             <p class="satoshi_font font_p_Dual">Witness never before like visuals on the "2.5K (QHD+) Mi TrueLife
 
@@ -605,9 +602,9 @@
605 602
606 603 
             <div class="bgControlpanel ">
607 604 
                 <div class="controlPanel_des">
608 
-                    <h1 class="orbitron_font font_4 fw-700">Customize</h1>
609 
-                    <h1 class="orbitron_font font_4 fw-700">your workflow</h1>
610 
-                    <h1 class="orbitron_font font_4 fw-700">with Control Panel</h1>
605 
+                    <h1 class="orbitron_font font_4 fw-700">Peripheral  </h1>
606 
+                    <h1 class="orbitron_font font_4 fw-700">Artwork</h1>
607 
+                    <h1 class="orbitron_font font_4 fw-700">Studio</h1>
611 608 
                 </div>
612 609 
                 <div class="bgControlpaneltabs w-100 px-5">
613 610 
                     <ul class="nav nav-tabs d-flex justify-content-between" id="myTab" role="tablist">
 
@@ -722,7 +719,7 @@
722 719 
     </section> -->
723 720 
     <!-- pro section end -->
724 721
725 
-    <section class="proSection ">
722 
+    <section class="proSection d-none">
726 723 
         <div class="px-md-5 px-3 designedProLaptop_title">
727 724 
             <h1 class="designedProLaptop_title_text orbitron_font d-none d-sm-block">Designed for
728 725 
             </h1>
 
@@ -762,7 +759,7 @@
762 759 
     </section>
763 760
764 761 
     <!-- popup keyboard -->
765 
-    <section class="popupKeyboard vw-100">
762 
+    <section class="popupKeyboard vw-100 d-none">
766 763 
         <div class="popupKeyboard_hParent p-6">
767 764 
             <div class="popupKeyboard_heading">
768 765 
                 <h1 class="orbitron_font">Popup</h1>
 
@@ -777,7 +774,7 @@
777 774 
         </div>
778 775
779 776
780 
-            <img class="img-fluid" src="./../../assets/imgs/productoverview/popkey.png" alt="popupkeyboard">
777 
+            <img class="img-fluid w-100" src="./../../assets/imgs/productoverview/popkey.png" alt="popupkeyboard">
781 778
782 779
783 780 
     </section>
 
@@ -788,15 +785,14 @@
788 785 
      <section class="dragondisplay">
789 786 
         <div class="dragondisplay_des d-none d-md-block">
790 787 
             <p class="font_p_Dual satoshi_font">
791 
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
792 
-                labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur
793 
-                sadipscing elitr, sed diam nonumy eirmod
788 
+                Designed for Professional creators & illustrators to flex their creative muscles with spectacular style-frame settings with on-point Precision to develop any kind of artistic project. From high-end visuals to animation, Digital Sculpting to 3D modeling or illustration creations, the designer can swing through unwraps and textures very swiftly.
789 
+
794 790 
             </p>
795 
-            <div class="font-1 fw-700">*as compared to a 14 inch FHD display</div>
791 
+            <div class="font-1 fw-700 d-none">*as compared to a 14 inch FHD display</div>
796 792 
         </div>
797 793 
         <img src="./../../assets/imgs/productoverview/dragonbg.png" alt="" class="w-100 h-100">
798 794 
         <div class="dragondisplay_heading d-flex    justify-content-center text-white">
799 
-            <h1 class="m-0 p-0 font_4 orbitron_font">Anwi Roxo Display</h1>
795 
+            <h1 class="m-0 p-0 font_4 orbitron_font d-none">Anwi Roxo Display</h1>
800 796 
         </div>
801 797
802 798 
     </section>
 
@@ -896,13 +892,15 @@
896 892 
        <section class="professinalGrade container pb-5">
897 893 
         <div class="text-end">
898 894 
             <h1 class="font-6 orbitron_font">
899 
-                Professional-grade
895 
+             Blitz through every and any routine
896 
+
900 897
901 898 
             </h1>
902 
-            <h1 class="font-6 orbitron_font">graphics</h1>
899 
+            <h1 class="font-6 orbitron_font d-none">graphics</h1>
903 900 
             <p class="font_p_Dual satoshi_font ps-7 py-5">
904 
-                2x performance over 10th Gen Iris Plus graphics, redefining thin and light laptop graphics Trade blows
905 
-                with NVidia MX350 / MX450 Play 100s of PC games
901 
+                A perfect companion for anyone who desires to elevate their computing experience with exceptional performance.
902 
+                The Anwi Xseries Laptop is a true powerhouse of performance, designed to efficiently handle even the most demanding tasks. Effortlessly multitask and experience smooth visuals thanks to the 16 GB of DDR4 memory and 1 TB of M.2 NVme storage. Equipped with the latest 11th Gen  Intel® Core™ i7-10850H Processor and an impressive 120 Hz refresh rate, this laptop is tailored for power users, gamers, and professionals who demand the best.
903 
+
906 904 
             </p>
907 905 
         </div>
908 906 
         <div class="vw-100 vh-100 position-relative professinalGradeImgContainer container">
 
@@ -925,12 +923,12 @@
925 923 
             </div> -->
926 924
927 925 
             <div class="stunningSound_heading text-start">
928 
-                <h1 class="orbitron_font d-none d-sm-block">Stuning</h1>
929 
-                <h1 class="orbitron_font d-none d-sm-block">Sound</h1>
930 
-                <h1 class="orbitron_font d-block d-sm-none">Stuning Sound</h1>
926 
+                <h1 class="orbitron_font d-none d-sm-block">Acoustics, Astounding!</h1>
927 
+                <!-- <h1 class="orbitron_font d-none d-sm-block">Sound</h1>
928 
+                <h1 class="orbitron_font d-block d-sm-none">Stuning Sound</h1> -->
931 929 
             </div>
932 930
933 
-            <div class="stunningSound_des font_p_Dual">
931 
+            <div class="stunningSound_des font_p_Dual d-none">
934 932 
                 <p class=" satoshi_font"> 2x performance over 10th Gen Iris Plus graphics, redefining thin and light laptop
935 933 
                     graphics Trade blows with NVidia MX350 / MX450 Play 100s of PC games</p>
936 934 
             </div>
 
@@ -942,26 +940,31 @@
942 940 
         </section>
943 941
944 942 
         <!-- Stunning end -->
943 
+
944 
+        <section class=" d-flex justify-content-center align-items-center font_p_Dual container satoshi_font">
945 
+           <h3> Encompass Yourself In Pulsating Resonates
946 
+        </h3>
947 
+        </section>
945 948 
     <!-- wifi  -->
946 949 
     <section class="wifiSection">
947 950 
         <div class="wifiSectionImg">
948 
-            <img src="./../../assets/imgs/productoverview/wifilap.png" class="img-fluid" alt="">
951 
+            <img src="./../../assets/imgs/productoverview/wifilap.png" class="img-fluid w-100" alt="">
949 952 
         </div>
950 953 
         <div class="container textWifiContainer px-5">
951 954 
             <div class="textWifiContainerHeading">
952 
-                <h1 class="orbitron_font d-none d-md-block">
955 
+                <!-- <h1 class="orbitron_font d-none d-md-block">
953 956 
                     Wifi 6
954 957
955 
-                </h1>
958 
+                </h1> -->
956 959 
                 <h1 class="orbitron_font d-none d-md-block">
957 
-                    Wider;
960 
+                    Newfangled
958 961
959 962 
                 </h1>
960 
-                <h1 class="orbitron_font d-none d-md-block"> Faster Internet</h1>
963 
+                <h1 class="orbitron_font d-none d-md-block "> Connectivity </h1>
961 964 
                 <!-- <h1 class="orbitron_font d-block d-md-none">Wifi 6 Wider;</h1>
962 965 
                 <h1 class="orbitron_font d-block d-md-none">Faster Internet</h1> -->
963 966 
             </div>
964 
-            <div class="wifiSection_des d-flex align-items-end justify-content-end">
967 
+            <div class="wifiSection_des d-flex align-items-end justify-content-end d-none">
965 968 
                 <p class="font_p_Dual fw-600"> 2x performance over 10th Gen Iris Plus graphics, redefining thin and
966 969 
                     light laptop graphics Trade blows with NVidia MX350 / MX450 Play 100s of PC games</p>
967 970 
             </div>
 
@@ -980,19 +983,20 @@
980 983
981 984 
       <!-- Pro Connectivity  -->
982 985
983 
-      <section class="vw-100 vh-100 pt-5  d-none d-md-block">
986 
+      <section class=" pt-5 proConnectivity">
984 987 
         <div class="row">
985 988 
             <div class="col-sm-6">
986 989 
                 <img src="./../../assets/imgs/productoverview/ports.png" alt="ports" class="img-fluid">
987 990 
             </div>
988 
-            <div class="col-sm-6 d-flex flex-column align-content-center justify-content-center p-6">
991 
+            <div class="col-sm-6 d-flex flex-column align-content-center justify-content-center p-6 connectivityPso_des">
989 992 
                 <div>
990 
-                    <h1 class="orbitron_font font-5">Pro Connectivity</h1>
993 
+                    <h1 class="orbitron_font font-5 d-none">Pro Connectivity</h1>
991 994 
                 </div>
992 995 
                 <div>
993 
-                    <p class="font_p_Dual">Connect up to two external 4K displays or one 8K display or an eGPU via
994 
-                        Thunderbolt 4. Experience blazing fast data transmission speedsand charging support on both
995 
-                        Thunderbolt 4 and Type C ports.
996 
+                    <p class="font_p_Dual satoshi_font">Engineered with WiFi 6 network protocol for improved connectivity and to benefit more from the advantage of frequency bands.
997 
+                    </p>
998 
+                    <p class="font_p_Dual satoshi_font">WiFi 6 is complemented by v5.3 Bluetooth technology.
999 
+
996 1000 
                     </p>
997 1001 
                 </div>
998 1002 
             </div>
 
@@ -1002,7 +1006,7 @@
1002 1006 
     <!-- Pro Connectivity end  -->
1003 1007
1004 1008 
       <!-- interGen start -->
1005 
-      <section class="intelGen container  d-none d-md-block">
1009 
+      <!-- <section class="intelGen container  d-none d-md-block">
1006 1010 
         <div class="p-6">
1007 1011 
             <h1 class="orbitron_font font_4  text-center">
1008 1012 
                 Intel 11th-generation Tigerlake
 
@@ -1042,36 +1046,38 @@
1042 1046 
                 </ul>
1043 1047 
             </div>
1044 1048 
         </div>
1045 
-    </section>
1049 
+    </section> -->
1046 1050 
     <!-- interGen end -->
1047 1051
1048 1052 
     <!-- os+ software -->
1049 
-    <section class="osPlusSoftware container p-6 d-none d-md-block">
1050 
-        <div class="osContianer  anwi_grey_bg d-flex flex-column align-items-center">
1053 
+    <section class="osPlusSoftware container p-6 ">
1054 
+        <div class="osContianerImg">
1055 
+            <img class="w-100 h-100" src="./../../assets/imgs/productoverview/ossoftware.png" alt="">
1056 
+        </div>
1057 
+        <div class="osContianer   d-flex flex-column align-items-center">
1051 1058 
             <div class="osContianerHeading">
1052 1059 
                 <h1 class="orbitron_font font-7">OS+</h1>
1053 1060 
                 <h1 class="orbitron_font font-7">Software</h1>
1054 1061 
             </div>
1055 1062 
             <div class="osContianer_des_fontParent d-flex flex-column align-items-center justify-content-center">
1056 
-                <div class="osContianer_des_font">Window 11 Home</div>
1057 
-                <div class="osContianer_des_font">Microsoft Office Home and Student Edition</div>
1058 
-                <div class="osContianer_des_font">Anwi Smart Share</div>
1059 
-            </div>
1060 
-            <div class="osContianerImg">
1061 
-                <img class="w-100 h-100" src="./../../assets/imgs/productoverview/osgroup.png" alt="">
1063 
+                <div class="osContianer_des_font fw-600 satoshi_font">Window 11 Home</div>
1064 
+                <div class="osContianer_des_font  fw-600 satoshi_font">Microsoft Office Home and Student Edition</div>
1065 
+                <div class="osContianer_des_font  fw-600 satoshi_font">Anwi Smart Share</div>
1062 1066 
             </div>
1067 
+
1063 1068 
         </div>
1064 1069 
     </section>
1065 1070 
     <!-- footer -->
1066 1071
1067 1072 
     <!-- footer -->
1068 
-    <!-- <section id="footer-head"></section> -->
1073 
+    <section id="footer-head"></section>
1069 1074 
     <!-- end-footer -->
1070 1075
1071 1076 
     <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
1072 1077 
     <script src="../../js/jquery.min.js"></script>
1073 1078 
     <script src="../../js/navbar.js"></script>
1074 1079 
     <script src="../../js/footer.js"></script>
1080 
+    <script src="./../../Js/laptopmuti.js"></script>
1075 1081
1076 1082 
 </body>
1077 1083

+ 1
- 7
styles/base/_base.scss Bestand weergeven 

@@ -1,10 +1,4 @@
1 
-*,
2 
-*::after,
3 
-*::before {
4 
-    margin: 0;
5 
-    padding: 0;
6 
-    box-sizing: inherit;
7 
-}
1 
+
8 2
9 3 
 // html {
10 4 
 //     font-size: 62.5%;

+ 15
- 91
styles/pages/_productOverview.scss Bestand weergeven 

@@ -1,3 +1,6 @@
1 
+.productOverviewBody{
2 
+  overflow-x: hidden;
3 
+}
1 4 
 .productoverviewmain {
2 5 
   background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
3 6 
   background-color: white;
 
@@ -23,10 +26,21 @@ $PO_footerText: 0.7rem;
23 26 
   border: 1px solid rgba(255, 255, 255, 0.18);
24 27 
   border: 2px solid;
25 28
26 
-  position: absolute;
29 
+  position: fixed;
27 30 
   z-index: 999;
28 31 
   bottom: 0;
29 32 
   left: 0;
33 
+
34 
+  .price_footerContainer{
35 
+    // padding-left: 3rem;
36 
+    // padding-right: 3rem;
37 
+  }
38 
+}
39 
+
40 
+@media (max-width:768px){
41 
+  .footerDesText{
42 
+    width: 100%;
43 
+  }
30 44 
 }
31 45
32 46 
 .boxImgContainer {
 
@@ -386,65 +400,7 @@ $PO_footerText: 0.7rem;
386 400 
   background-position: center;
387 401 
 }
388 402
389 
-.controlPanel {
390 
-  margin-top: 10rem;
391 
-  padding-bottom: 300px;
392 403
393 
-  .controlPanel_des {
394 
-    position: absolute;
395 
-    top: -170px;
396 
-    left: 80px;
397 
-  }
398 
-
399 
-  .bgControlpanel {
400 
-    min-height: 100vh;
401 
-    background-color: #ececec;
402 
-    border-radius: 157px;
403 
-    position: relative;
404 
-
405 
-    .bgControlpaneltabs {
406 
-      position: absolute;
407 
-      top: 100px;
408 
-      right: 0;
409 
-
410 
-      .nav-tabs {
411 
-        border-bottom: 1px solid;
412 
-        margin-bottom: 2rem;
413 
-      }
414 
-
415 
-      .nav-item {
416 
-        position: relative;
417 
-        border: none;
418 
-      }
419 
-
420 
-      .nav-tabs .nav-link {
421 
-        position: relative;
422 
-        color: black;
423 
-        font-weight: 500;
424 
-      }
425 
-
426 
-      .nav-tabs .nav-link.active {
427 
-        border: none;
428 
-        background-color: transparent;
429 
-      }
430 
-
431 
-      .nav-tabs .nav-link.active::before {
432 
-        display: block;
433 
-      }
434 
-
435 
-      .nav-item .nav-link::before {
436 
-        content: "";
437 
-        position: absolute;
438 
-        width: 100%;
439 
-        height: 5px;
440 
-        bottom: -2px;
441 
-        right: 0;
442 
-        display: none;
443 
-        background-color: black;
444 
-      }
445 
-    }
446 
-  }
447 
-}
448 404
449 405
450 406 
 
@@ -504,38 +460,6 @@ $PO_footerText: 0.7rem;
504 460 
   }
505 461 
 }
506 462
507 
-.osPlusSoftware {
508 
-  width: 100vw;
509 
-  height: 140vh;
510 
-  margin-top: 14rem;
511 
-
512 
-  .osContianer {
513 
-    position: relative;
514 
-    width: 100%;
515 
-    height: 100%;
516 
-    border-radius: 30%;
517 
-
518 
-    .osContianer_des_fontParent {
519 
-      position: relative;
520 
-      top: -8%;
521 
-    }
522 
-
523 
-    .osContianer_des_font {
524 
-      font-size: 2rem;
525 
-      font-weight: 600;
526 
-    }
527 
-
528 
-    .osContianerHeading {
529 
-      position: relative;
530 
-      top: -15%;
531 
-    }
532 
-
533 
-    .osContianerImg {
534 
-      position: absolute;
535 
-      bottom: 0;
536 
-    }
537 
-  }
538 
-}
539 463
540 464
541 465 
 @media (max-width:1200px) {

+ 1
- 1
styles/pages/productOverview/_wifisection.scss Bestand weergeven 

@@ -30,7 +30,7 @@
30 30
31 31 
       .textWifiContainerHeading {
32 32 
         >h1 {
33 
-          font-size: 8rem;
33 
+          font-size: 5rem;
34 34 
         }
35 35 
       }
36 36 
     }

+ 3
- 4
styles/style.scss Bestand weergeven 

@@ -16,6 +16,9 @@
16 16 
 @import "pages/productOverview/stunningsound";
17 17 
 @import "pages/productOverview/wifisection";
18 18 
 @import "pages/productOverview/tablesection";
19 
+@import "pages/productOverview/proConnectivity";
20 
+@import "pages/productOverview/osPlusSoftware";
21 
+@import "pages/productOverview/controlPanel";
19 22
20 23 
 @import "pages/home";
21 24 
 @import "pages/shopping-cart";
 
@@ -106,11 +109,7 @@ ORDER: Base + typography > general layout + grid > page layout > components
106 109 
 }
107 110
108 111
109 
-/* Satoshi end */
110 112
111 
-.satoshi_font {
112 
-    font-family: "Satoshi", sans-serif;
113 
-}
114 113
115 114 
 html {
116 115 
     font-size: 100%;

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan