code added
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 */
|
||||
@@ -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"}
|
||||
+11
-20
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user