@@ -44,22 +44,23 @@
Delivery
- See estimated delivery times by
- entering your PIN code
+ See estimated delivery times by
+ entering your PIN code
+
@@ -71,17 +72,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
diff --git a/styles/base/_base.scss b/styles/base/_base.scss
index 13572f9..246500e 100644
--- a/styles/base/_base.scss
+++ b/styles/base/_base.scss
@@ -6,14 +6,14 @@
box-sizing: inherit;
}
-html {
- font-size: 100%;
-}
+// html {
+// font-size: 62.5%;
+// }
body {
box-sizing: border-box;
-
-
+ // font-size: 62.5%;
+ overflow-x: hidden;
@include respond(tab-port) {
padding: 0;
}
diff --git a/styles/base/_utilities.scss b/styles/base/_utilities.scss
index 7adfa4c..19cd46a 100644
--- a/styles/base/_utilities.scss
+++ b/styles/base/_utilities.scss
@@ -4,6 +4,14 @@
background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
}
+.text-green-Awni{
+ color: #0A886A;
+}
+
+.orbitron_font{
+ font-family: 'Orbitron', sans-serif;
+}
+
// font size
.font-3 {
font-size: 3rem;
@@ -24,15 +32,21 @@
font-size: 2.2rem;
}
+.font-2_7{
+ font-size: 2.7rem;
+}
+
+
+.font_4{
+ font-size: 4rem;
+}
.subtitle_1 {
font-size: 1.5rem;
}
-.gap-1 {
- gap: 0.7rem;
-}
+
.banner_heading_4 {
font-size: 3rem;
@@ -55,10 +69,44 @@
// heights
+.h-10{
+ height: 10%;
+}
+
+.h-15{
+ height: 15%;
+}
+
+.h-20{
+ height: 20%;
+}
+
+.h-30{
+ height: 30%;
+}
+
+.h-33{
+ height: 33%;
+}
+.h-34{
+ height: 34%;
+}
+.h-35{
+ height: 35%;
+}
+
+.h-40{
+ height: 40%;
+}
+
.vh_60{
height: 60vh;
}
+.vh-70{
+ height: 70vh;
+}
+
.vh-77{
height: 77vh;
}
@@ -71,6 +119,10 @@
height: 15vh;
}
+.h-700p{
+ height: 700px;
+}
+
// font weight
@@ -89,3 +141,18 @@
+// gap
+
+.gap-1 {
+ gap: 0.7rem;
+}
+
+.gap-2{
+ gap:2rem
+}
+
+// border-radius
+
+.br-1{
+ border-radius: 1rem;
+}
\ No newline at end of file
diff --git a/styles/pages/_productOverview.scss b/styles/pages/_productOverview.scss
index c8bf9dd..90c2125 100644
--- a/styles/pages/_productOverview.scss
+++ b/styles/pages/_productOverview.scss
@@ -1,27 +1,30 @@
-.productoverviewmain{
+.productoverviewmain {
background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
- background-color: #C9DBB5;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
+ background-color: white;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
position: relative;
-}
+}
+
+$PO_footerText: 0.7rem;
.photo_dual {
width: 40rem;
}
.price_footer {
- background: rgba( 255, 255, 255, 0.25 );
-/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
-backdrop-filter: blur( 4px );
--webkit-backdrop-filter: blur( 4px );
+ background: rgba(255, 255, 255, 0.25);
+ /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
-border: 1px solid rgba( 255, 255, 255, 0.18 );
+ border: 1px solid rgba(255, 255, 255, 0.18);
border: 2px solid;
position: absolute;
+ z-index: 999;
bottom: 0;
left: 0;
}
@@ -31,21 +34,29 @@ border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.priceCut_multi {
- font-size: 0.7rem;
+ font-size: $PO_footerText;
+}
+
+.PO_learnMore {
+ font-size: $PO_footerText;
}
.productOverview .overviewProductHeading {
font-size: 2.1rem;
+ font-family: "satoshi", sans-serif;
+ font-weight: 500;
}
.productOverview .overviewProductFullTitle {
- padding: 2rem 13rem;
+ padding: 2rem 11rem;
font-size: 3rem;
+ font-family: "orbitron", sans-serif;
}
.productOverview .overviewProductDes {
padding: 0 2rem;
font-size: 1.5rem;
+ font-family: "satoshi", sans-serif;
}
.PO_galleryContainer .PO_gallery_display {
@@ -66,3 +77,264 @@ border: 1px solid rgba( 255, 255, 255, 0.18 );
padding: 2rem;
background-color: #eeeeee;
}
+
+.productoverBox {
+ .PO_box {
+ // background-color: red;
+ height: 100%;
+ > div {
+ padding: 1rem 0rem;
+ }
+ .box_inner {
+ height: 100%;
+ }
+
+ .bgBox_Content {
+ background: rgb(236, 236, 236);
+ background: linear-gradient(
+ 90deg,
+ rgba(236, 236, 236, 1) 4%,
+ rgba(118, 118, 118, 1) 100%
+ );
+ }
+ .box_inner_right {
+ padding-left: 1rem;
+ }
+ .box_inner_left {
+ padding-right: 1rem;
+ }
+ }
+}
+
+.displayscreenpad {
+ .displayscreenpadContainer {
+ text-align: center;
+ }
+ .displayscreenpadHeading {
+ font-size: 8rem;
+ }
+
+ .displayscreenpadMain {
+ top: -108px;
+ }
+ .displayscreenpadleft {
+ > img {
+ left: -8%;
+ }
+ }
+
+ .displayscreenpadright {
+ > img {
+ right: -10%;
+ }
+ }
+}
+
+.dual_des_heading{
+ font-size: 3rem;
+}
+
+
+.dualLaptop{
+ width: 100vw;
+ height: 1000px;
+ top:-100px;
+ margin-bottom: -100px;
+ position: relative;
+
+
+ .zeroBMain_desP{
+ font-size: 1.2rem;
+ }
+ .zeroBMain_des{
+ position: absolute;
+ top: 0;
+ right: 0;
+ max-width: 700px;
+ padding-right: 9rem;
+ }
+
+ .dualImgs{
+ position: absolute;
+
+
+ .dualImgsInner{
+ width: 63%;
+ }
+ }
+
+
+
+ .dualImgsOne{
+ top:0;
+ left: -10%;
+ transform: rotate(343deg);
+ width: 68%;
+ }
+
+ .dualImgsTwo{
+ // top:0;
+ // right: -80%;
+ // transform: rotate(330deg);
+
+ top: 31%;
+ right: -68%;
+ transform: rotate(339deg);
+ .dualImgsInner{
+ width: 82%;
+ }
+ }
+}
+
+.tableLaptop{
+ margin-top: 300px;
+
+ // border: 1px solid;
+ height: 90vh;
+ width: 100vw;
+ position: relative;
+ .circleTableLaptop_Heading{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -311%);
+ }
+ .justTableLaptop{
+ position: absolute;
+ width: 86%;
+ top: -10px;
+ right: 128px;
+ z-index: 1;
+ }
+
+ .circleTableLaptop{
+ background-color: #ECECEC;
+ height: 70rem;
+ width: 70rem;
+ border-radius: 50%;
+ position: relative;
+ overflow: hidden;
+
+
+ .circleTableLaptopTop{
+
+ bottom: -3%;
+ width: 80%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, 2%);
+
+ }
+ }
+
+ .circleTableLaptop_text{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, 168%);
+
+ }
+
+ margin-bottom: 300px;
+}
+
+.trueLifeDisplay{
+ .trueLifeDisplay_headingHD{
+ >.headingLife{
+ font-size: 6rem;
+ }
+ }
+
+ .trueLifeDisplay_des{
+ padding: 0 10rem;
+
+ }
+}
+
+.font_p_Dual{
+ font-size: 1.2rem;
+}
+
+.controlPanel{
+
+ margin-top: 10rem;
+ padding-bottom: 550px;
+ .controlPanel_des{
+ position: absolute;
+ top: -170px;
+ left: 80px;
+
+ }
+ .bgControlpanel{
+ min-height: 100vh;
+ background-color: #ECECEC;
+ border-radius: 157px;
+ position: relative;
+
+ .bgControlpaneltabs{
+
+ position: absolute;
+ top: 100px;
+ right: 0;
+
+ .nav-tabs{
+ border-bottom: 1px solid;
+ margin-bottom: 2rem;
+ }
+ .nav-item{
+ position: relative;
+ border: none;
+ }
+
+
+ .nav-tabs .nav-link {
+ position: relative;
+ color: black;
+ font-weight: 500;
+ }
+
+ .nav-tabs .nav-link.active{
+ border: none;
+ background-color: transparent;
+ }
+
+ .nav-tabs .nav-link.active::before {
+ display: block;
+ }
+
+ .nav-item .nav-link::before{
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 5px;
+ bottom: -2px;
+ right: 0;
+ display: none;
+ background-color: black;
+ }
+ }
+ }
+
+
+}
+
+.designedProLaptop{
+ position: relative;
+ .designedProLaptop_title{
+ position: absolute;
+ top: -200px;
+ left: 0;
+ z-index: 1;
+
+
+ }
+ .designedProLaptop_title_text{
+ font-size: 10rem;
+ }
+ .designedProLaptop_img{
+ position: absolute;
+ top: 0;
+ right: 700px;
+ }
+}
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..031dacf
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,555 @@
+/*
+0 - 600px: Phone
+600 - 900px: Tablet portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our normal styles apply
+1800px + : Big desktop
+
+$breakpoint arguement choices:
+- phone
+- tab-port
+- tab-land
+- big-desktop
+
+ORDER: Base + typography > general layout + grid > page layout > components
+
+1em = 16px
+*/
+*,
+*::after,
+*::before {
+ margin: 0;
+ padding: 0;
+ box-sizing: inherit;
+}
+
+body {
+ box-sizing: border-box;
+ overflow-x: hidden;
+}
+@media only screen and (max-width: 56.25em) {
+ body {
+ padding: 0;
+ }
+}
+
+.bg-green {
+ background-color: #3bb78f;
+ background: linear-gradient(90deg, #3bb78f 0%, rgb(11, 171, 100) 35%, rgb(59, 183, 143) 100%);
+}
+
+.text-green-Awni {
+ color: #0A886A;
+}
+
+.orbitron_font {
+ font-family: "Orbitron", sans-serif;
+}
+
+.font-3 {
+ font-size: 3rem;
+}
+
+.font-1_5 {
+ font-size: 2rem;
+}
+
+.font-1_7 {
+ font-size: 1.7rem;
+}
+
+.font-2 {
+ font-size: 2.2rem;
+}
+
+.font-2_2 {
+ font-size: 2.2rem;
+}
+
+.font-2_7 {
+ font-size: 2.7rem;
+}
+
+.font_4 {
+ font-size: 4rem;
+}
+
+.subtitle_1 {
+ font-size: 1.5rem;
+}
+
+.banner_heading_4 {
+ font-size: 3rem;
+}
+
+.padding_top_14 {
+ padding-top: 14rem;
+}
+
+.p-6 {
+ padding: 5rem;
+}
+
+.padding_top_10 {
+ padding-top: 10rem;
+}
+
+.h-10 {
+ height: 10%;
+}
+
+.h-15 {
+ height: 15%;
+}
+
+.h-20 {
+ height: 20%;
+}
+
+.h-30 {
+ height: 30%;
+}
+
+.h-33 {
+ height: 33%;
+}
+
+.h-34 {
+ height: 34%;
+}
+
+.h-35 {
+ height: 35%;
+}
+
+.h-40 {
+ height: 40%;
+}
+
+.vh_60 {
+ height: 60vh;
+}
+
+.vh-70 {
+ height: 70vh;
+}
+
+.vh-77 {
+ height: 77vh;
+}
+
+.vh-85 {
+ height: 85vh;
+}
+
+.vh-15 {
+ height: 15vh;
+}
+
+.h-700p {
+ height: 700px;
+}
+
+.fw-600 {
+ font-weight: 600;
+}
+
+.fw-700 {
+ font-weight: 700;
+}
+
+.h-200p {
+ height: 200px;
+}
+
+.gap-1 {
+ gap: 0.7rem;
+}
+
+.gap-2 {
+ gap: 2rem;
+}
+
+.br-1 {
+ border-radius: 1rem;
+}
+
+.button_dark {
+ -webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+ clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+ padding-right: 1.7rem;
+ padding-bottom: 0.6rem;
+ padding-top: 0.6rem;
+ border-radius: 10px;
+}
+
+.productoverviewmain {
+ background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
+ background-color: white;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ position: relative;
+}
+
+.photo_dual {
+ width: 40rem;
+}
+
+.price_footer {
+ background: rgba(255, 255, 255, 0.25);
+ /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ border: 2px solid;
+ position: absolute;
+ z-index: 999;
+ bottom: 0;
+ left: 0;
+}
+
+.boxImgContainer {
+ width: 4rem;
+}
+
+.priceCut_multi {
+ font-size: 0.7rem;
+}
+
+.PO_learnMore {
+ font-size: 0.7rem;
+}
+
+.productOverview .overviewProductHeading {
+ font-size: 2.1rem;
+ font-family: "satoshi", sans-serif;
+ font-weight: 500;
+}
+
+.productOverview .overviewProductFullTitle {
+ padding: 2rem 11rem;
+ font-size: 3rem;
+ font-family: "orbitron", sans-serif;
+}
+
+.productOverview .overviewProductDes {
+ padding: 0 2rem;
+ font-size: 1.5rem;
+ font-family: "satoshi", sans-serif;
+}
+
+.PO_galleryContainer .PO_gallery_display {
+ min-height: 500px;
+ width: 100%;
+ background: white;
+ background: linear-gradient(180deg, white 7%, rgba(255, 142, 158, 0.3019607843) 52%, rgba(235, 134, 148, 0.4705882353) 100%);
+ position: relative;
+}
+
+.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.PO_galleryContainer .PO_gallery_box_inner {
+ padding: 2rem;
+ background-color: #eeeeee;
+}
+
+.productoverBox .PO_box {
+ height: 100%;
+}
+.productoverBox .PO_box > div {
+ padding: 1rem 0rem;
+}
+.productoverBox .PO_box .box_inner {
+ height: 100%;
+}
+.productoverBox .PO_box .bgBox_Content {
+ background: rgb(236, 236, 236);
+ background: linear-gradient(90deg, rgb(236, 236, 236) 4%, rgb(118, 118, 118) 100%);
+}
+.productoverBox .PO_box .box_inner_right {
+ padding-left: 1rem;
+}
+.productoverBox .PO_box .box_inner_left {
+ padding-right: 1rem;
+}
+
+.displayscreenpad .displayscreenpadContainer {
+ text-align: center;
+}
+.displayscreenpad .displayscreenpadHeading {
+ font-size: 8rem;
+}
+.displayscreenpad .displayscreenpadMain {
+ top: -108px;
+}
+.displayscreenpad .displayscreenpadleft > img {
+ left: -8%;
+}
+.displayscreenpad .displayscreenpadright > img {
+ right: -10%;
+}
+
+.dual_des_heading {
+ font-size: 3rem;
+}
+
+.dualLaptop {
+ width: 100vw;
+ height: 1000px;
+ top: -100px;
+ margin-bottom: -100px;
+ position: relative;
+}
+.dualLaptop .zeroBMain_desP {
+ font-size: 1.2rem;
+}
+.dualLaptop .zeroBMain_des {
+ position: absolute;
+ top: 0;
+ right: 0;
+ max-width: 700px;
+ padding-right: 9rem;
+}
+.dualLaptop .dualImgs {
+ position: absolute;
+}
+.dualLaptop .dualImgs .dualImgsInner {
+ width: 63%;
+}
+.dualLaptop .dualImgsOne {
+ top: 0;
+ left: -10%;
+ transform: rotate(343deg);
+ width: 68%;
+}
+.dualLaptop .dualImgsTwo {
+ top: 31%;
+ right: -68%;
+ transform: rotate(339deg);
+}
+.dualLaptop .dualImgsTwo .dualImgsInner {
+ width: 82%;
+}
+
+.tableLaptop {
+ margin-top: 300px;
+ height: 90vh;
+ width: 100vw;
+ position: relative;
+ margin-bottom: 300px;
+}
+.tableLaptop .circleTableLaptop_Heading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -311%);
+}
+.tableLaptop .justTableLaptop {
+ position: absolute;
+ width: 86%;
+ top: -10px;
+ right: 128px;
+ z-index: 1;
+}
+.tableLaptop .circleTableLaptop {
+ background-color: #ECECEC;
+ height: 70rem;
+ width: 70rem;
+ border-radius: 50%;
+ position: relative;
+ overflow: hidden;
+}
+.tableLaptop .circleTableLaptop .circleTableLaptopTop {
+ bottom: -3%;
+ width: 80%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, 2%);
+}
+.tableLaptop .circleTableLaptop_text {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, 168%);
+}
+
+.trueLifeDisplay .trueLifeDisplay_headingHD > .headingLife {
+ font-size: 6rem;
+}
+.trueLifeDisplay .trueLifeDisplay_des {
+ padding: 0 10rem;
+}
+
+.font_p_Dual {
+ font-size: 1.2rem;
+}
+
+.controlPanel {
+ margin-top: 10rem;
+ padding-bottom: 550px;
+}
+.controlPanel .controlPanel_des {
+ position: absolute;
+ top: -170px;
+ left: 80px;
+}
+.controlPanel .bgControlpanel {
+ min-height: 100vh;
+ background-color: #ECECEC;
+ border-radius: 157px;
+ position: relative;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs {
+ position: absolute;
+ top: 100px;
+ right: 0;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs {
+ border-bottom: 1px solid;
+ margin-bottom: 2rem;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-item {
+ position: relative;
+ border: none;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link {
+ position: relative;
+ color: black;
+ font-weight: 500;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active {
+ border: none;
+ background-color: transparent;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-tabs .nav-link.active::before {
+ display: block;
+}
+.controlPanel .bgControlpanel .bgControlpaneltabs .nav-item .nav-link::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 5px;
+ bottom: -2px;
+ right: 0;
+ display: none;
+ background-color: black;
+}
+
+.designedProLaptop {
+ position: relative;
+}
+.designedProLaptop .designedProLaptop_title {
+ position: absolute;
+ top: -200px;
+ left: 0;
+ z-index: 1;
+}
+.designedProLaptop .designedProLaptop_title_text {
+ font-size: 10rem;
+}
+.designedProLaptop .designedProLaptop_img {
+ position: absolute;
+ top: 0;
+ right: 700px;
+}
+
+/*
+0 - 600px: Phone
+600 - 900px: Tablet portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our normal styles apply
+1800px + : Big desktop
+
+$breakpoint arguement choices:
+- phone
+- tab-port
+- tab-land
+- big-desktop
+
+ORDER: Base + typography > general layout + grid > page layout > components
+
+1em = 16px
+*/
+/* Orbitron */
+@font-face {
+ font-family: "Orbitron";
+ src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
+ font-weight: 400;
+ font-style: normal;
+}
+@font-face {
+ font-family: "Orbitron";
+ src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
+ font-weight: 500;
+ font-style: normal;
+}
+@font-face {
+ font-family: "Orbitron";
+ src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
+ font-weight: 600;
+ font-style: normal;
+}
+@font-face {
+ font-family: "Orbitron";
+ src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
+ font-weight: 700;
+ font-style: normal;
+}
+/* Orbitron end */
+/* Satoshi */
+@font-face {
+ font-family: "Satoshi";
+ src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
+ font-weight: 400;
+ font-style: normal;
+}
+@font-face {
+ font-family: "Satoshi";
+ src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
+ font-weight: 500;
+ font-style: normal;
+}
+@font-face {
+ font-family: "Satoshi";
+ src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
+ font-weight: 700;
+ font-style: normal;
+}
+/* Satoshi end */
+.satoshi_font {
+ font-family: "Satoshi", sans-serif;
+}
+
+.bg-green {
+ background-color: #3bb78f;
+ background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
+}
+
+/* button */
+.button_dark {
+ -webkit-clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+ clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
+ padding-right: 1.7rem;
+ padding-bottom: 0.6rem;
+ padding-top: 0.6rem;
+ border-radius: 10px;
+}
+
+/* footer */
+.footer-wrapper {
+ background-color: rgb(0, 0, 0);
+ border-radius: 0 275px 0 0;
+ -webkit-clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
+ clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
+}
+
+.footer-wrapper li {
+ line-height: 2rem;
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/styles/style.css.map b/styles/style.css.map
new file mode 100644
index 0000000..2d2d028
--- /dev/null
+++ b/styles/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["abstracts/_mixins.scss","base/_base.scss","style.css","base/_utilities.scss","components/_button.scss","pages/_productOverview.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/styles/style.scss b/styles/style.scss
index 699fa36..e016981 100644
--- a/styles/style.scss
+++ b/styles/style.scss
@@ -78,31 +78,22 @@ ORDER: Base + typography > general layout + grid > page layout > components
}
/* Satoshi end */
- *,
- *::after,
- *::before {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-
- font-family: "Orbitron" ,sans-serif;
- }
-
+
.satoshi_font{
font-family: "Satoshi", sans-serif;
}
- html {
- font-size: 100%; }
+ // html {
+ // font-size: 100%; }
- body {
- box-sizing: border-box;
- overflow-x: hidden;
- }
- @media only screen and (max-width: 56.25em) {
- body {
- padding: 0; }
- }
+ // body {
+ // box-sizing: border-box;
+ // overflow-x: hidden;
+ // }
+ // @media only screen and (max-width: 56.25em) {
+ // body {
+ // padding: 0; }
+ // }
.bg-green {
background-color: #3bb78f;
-
$69,999.00
-
- $ 89,999 Save $ 19,999
+
$69,999.00
+
+ $ 89,999 Save $ 19,999
Overview
The Laptop of tomorrow with
4K OLED Dual Screen for Creative Multitasking
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+
-
+
-
+
- 
+
+
@@ -116,16 +118,304 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Latest 11th Gen Intel Core i5/i7 H35
+
+
+
+
+ 2
+
+
+
+
+
+
+ 4
+
+
+
+
+ 5
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+ 2
+
+
+
+
+
+ 2
+
+
+
+
+
+ 2
+
+
+
+
+
+
+
+
+
+ 2
+
+
+
+
+ 2
+
+
+
+
+ 2
+
+
+
+
+ 2
+
+
+
+
+
+
+ Display / Screenpad
+
+
+
+
+ TWO SCREENS.
+ZERO BOUNDARIES
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+ Experience Ultimate
+productivity
+
+ Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
+ availability Experience
+ ultimate productivityExperience ultimate productivity
+ Cooperation with leading component suppliers and compatibility testing ensure a wide range of product
+ availability Experience
+ ultimate productivityExperience ultimate productivity
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+ Two Screens.
+Zero BOUNDARIES.
+
+ 
+
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+ diam nonumy eirmod tempor invidunt ut labore et dolore
+ magna aliquyam erat, sed diam voluptua. Lorem ipsum
+ dolor sit amet, consetetur sadipscing elitr, sed diam
+ nonumy eirmodorem ipsum dolor sit amet, consetetur
+ sadipscing elitr, sed
+
+
+
+ 2.5k QHD +
+Anwi Truelife Display
+
+
+ Witness never before like visuals on the "2.5K (QHD+) Mi TrueLife Display that has twice as many pixels as a Full-HD display. Higher contrast ratio combined with up to 300 Nits of brightness ensures vivid colours + and excellent viewing angles.
+
+ 
+
+
+
+
+
+
+
+
+
+ Customize
+your workflow
+with Control Panel
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, deleniti!
+
+ ProgrammerTab
+
+
+ 
+
+
+
+ Music_Artist
+
+ 3d
+
+ game
+
+
+ Designed for +
+a Pro
+
+ 
+
+
+ -
+
- + 17.3 mm Thin + + +
- + 1.46 kg Light + + +
- + 0.3 mm Depeth + + +
- Superior quality + hinge tested for up + to 30,000 operations +