first commit
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
// Set Text Color
|
||||
@function set-text-color($color) {
|
||||
@if (lightness($color) > 50) {
|
||||
@return #000;
|
||||
} @else {
|
||||
@return #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Transform mixin
|
||||
@mixin transform($property) {
|
||||
--webkit-transform: $property;
|
||||
-ms-transform: $property;
|
||||
transform: $property;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
|
||||
@mixin absCenter {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
|
||||
// MEDIA QUERY MANAGER
|
||||
/*
|
||||
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
|
||||
*/
|
||||
@mixin respond($breakpoint) {
|
||||
@if $breakpoint == phone {
|
||||
@media only screen and (max-width: 600px) { @content }; //600px
|
||||
}
|
||||
@if $breakpoint == tab-port {
|
||||
@media only screen and (max-width: 900px) { @content }; //900px
|
||||
}
|
||||
@if $breakpoint == tab-land {
|
||||
@media only screen and (max-width: 1200px) { @content }; //1200px
|
||||
}
|
||||
@if $breakpoint == big-desktop {
|
||||
@media only screen and (min-width: 1800) { @content }; //1800
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
// $primary-color: steelblue;
|
||||
|
||||
$grey-bg:#EEEEEE;
|
||||
|
||||
$animation-timer:.8s;
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
|
||||
// html {
|
||||
// font-size: 62.5%;
|
||||
// }
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
// font-size: 62.5%;
|
||||
overflow-x: hidden;
|
||||
@include respond(tab-port) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,285 @@
|
||||
// colors
|
||||
.bg-green {
|
||||
background-color: #3bb78f;
|
||||
background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
|
||||
}
|
||||
|
||||
.text-green-Awni{
|
||||
color: #0A886A;
|
||||
}
|
||||
|
||||
.anwi_grey_bg{
|
||||
background-color: #ECECEC;
|
||||
}
|
||||
|
||||
.orbitron_font{
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.satoshi_font{
|
||||
font-family: "Satoshi", sans-serif;
|
||||
}
|
||||
|
||||
// font size
|
||||
.font-1{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.font-3 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.font-1-2{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.font-1-5{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.font-1_5 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.font-1_7{
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
|
||||
.font-2{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.font-2_2{
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.font-2_7{
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
|
||||
|
||||
.font_4{
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.font-5{
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.font-6{
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.font-7{
|
||||
font-size: 7rem;
|
||||
}
|
||||
|
||||
.font-10{
|
||||
font-size: 10rem;
|
||||
}
|
||||
|
||||
|
||||
.subtitle_1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.banner_heading_4 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
|
||||
// padding
|
||||
|
||||
.padding_top_14 {
|
||||
padding-top: 14rem;
|
||||
}
|
||||
|
||||
.p-6{
|
||||
padding:5rem;
|
||||
}
|
||||
|
||||
.ps-7{
|
||||
padding-left: 6rem;
|
||||
}
|
||||
|
||||
.px-6{
|
||||
padding-left: 6rem;
|
||||
padding-right: 6rem;
|
||||
}
|
||||
|
||||
.p-7{
|
||||
padding: 7rem;
|
||||
}
|
||||
|
||||
.padding_top_10 {
|
||||
padding-top: 10rem; }
|
||||
|
||||
.padding_top_13{
|
||||
padding-top: 13rem;
|
||||
}
|
||||
|
||||
.padding_bottom_ONE_FIVE{
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
|
||||
.vh-85 {
|
||||
height: 85vh;
|
||||
}
|
||||
|
||||
.vh-15 {
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.h-700p{
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.h-25{
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
.h-60{
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.h-75{
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.w-60{
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
|
||||
.w-20p{
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.w-200{
|
||||
width:200px;
|
||||
}
|
||||
|
||||
// font weight
|
||||
|
||||
|
||||
.fw-500{
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fw-600{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700; }
|
||||
|
||||
|
||||
.h-200p{
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
// margin
|
||||
.mt-7 {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
|
||||
// spacing
|
||||
|
||||
|
||||
.sec-space-1 {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.sec-space-2 {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.sec-space-3 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.sec-space-4 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sec-space-5 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.h-100p {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// gap
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.gap-2{
|
||||
gap:2rem
|
||||
}
|
||||
|
||||
// border-radius
|
||||
|
||||
.br-1{
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.cursor-pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// margin
|
||||
.mt-5C{
|
||||
margin-top: 5rem;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// button
|
||||
.button_dark{
|
||||
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;
|
||||
}
|
||||
+2296
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,507 @@
|
||||
|
||||
.clipPathSectionCol{
|
||||
|
||||
|
||||
position: relative;
|
||||
|
||||
.innerClipPathImg{
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 9%;
|
||||
width: 81%;
|
||||
}
|
||||
|
||||
.innerClipPathImgFirstThree{
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left:5%;
|
||||
width: 81%;
|
||||
}
|
||||
|
||||
.innerClipPathImgFirstFour{
|
||||
|
||||
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left:5%;
|
||||
width: 81%;
|
||||
>img{
|
||||
transform: scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.innerClipPathImgSectionTwo{
|
||||
position: absolute;
|
||||
|
||||
top: 50%;
|
||||
left: 28%;
|
||||
transform: translateY(-50%);
|
||||
width: 81%;
|
||||
}
|
||||
|
||||
.innerClipPathImgSectionThree{
|
||||
position: absolute;
|
||||
|
||||
top: 50%;
|
||||
left:17%;
|
||||
transform: translateY(-50%);
|
||||
width: 81%;
|
||||
|
||||
}
|
||||
.innerClipPathImgSectionFour{
|
||||
position: absolute;
|
||||
|
||||
top: 50%;
|
||||
left: 17%;
|
||||
transform: translateY(-50%);
|
||||
width: 81%;
|
||||
// >img{
|
||||
// transform: scale(0.7);
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.allinoneLanding{
|
||||
// background-image: url("./../../dist/assets/imgs/allinone/allinonebg.png");
|
||||
// background-color: white;
|
||||
// background-size: cover;
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
#navbar-head *{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.headingAllinOne{
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTwoImgAllInone{
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
.allinoneDualMarginTop{
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.sectionfiveAllinOne{
|
||||
.infoContainer{
|
||||
position: relative;
|
||||
.infoContainerOneText{
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
>h1{
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
}
|
||||
// width: 100%;
|
||||
// max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.infoContainerYellow{
|
||||
background-color: #FFB518;
|
||||
|
||||
}
|
||||
.infoContainerOrange{
|
||||
background-color: #E05E00;
|
||||
color: white;
|
||||
}
|
||||
.infoContainerBlue{
|
||||
background-color: #461DCF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.infoContainer_des{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.supportBoxCircle{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: black;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// carouselLanding
|
||||
|
||||
.carouselLanding{
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
margin-bottom:4rem;
|
||||
.carouselLandingItem{
|
||||
width: 300px;
|
||||
>div{
|
||||
border-radius: 25px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carouselLandingItemInner{
|
||||
position: relative;
|
||||
.carouselLandingItemInnerOverlay{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.453);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// owl-nav
|
||||
.allinoneslider{
|
||||
.carouselLanding {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.owl-nav{
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
display: none;
|
||||
right: 15%;
|
||||
border: 1px solid;
|
||||
padding: 0.5rem 1.3rem;
|
||||
border-radius: 70px;
|
||||
span{
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.owl-stage{
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1400px) {
|
||||
.allinoneslider{
|
||||
|
||||
|
||||
.owl-stage{
|
||||
width: max-content !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:1300px) {
|
||||
.laptopsSection .headinglaptop{
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.headinglaptopSub{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:1000px) {
|
||||
.laptopsSection .headinglaptop{
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.headinglaptopSub{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
// allinoneDual
|
||||
|
||||
.allinoneDualMarginTop {
|
||||
.allinoneDualMarginTop_desContainer {
|
||||
padding: 2rem;
|
||||
h1{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.allinoneDualMarginTop_p{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.allinoneDualMarginTop{
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (tab-port) {
|
||||
.laptopsSection .headinglaptop{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.headinglaptopSub{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond(phone) {
|
||||
.headingAllinOne > h1{
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
|
||||
|
||||
.supTitleSection{
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.allinoneDualMarginTop .clipPathSectionCol{
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.headingAllinOne{
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 2rem !important;
|
||||
> h1{
|
||||
font-size: 2rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.laptopSectionDesP{
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.allinoneDualMarginTop {
|
||||
.clipPathSectionCol{
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.clipPathSectionCol{
|
||||
//padding-left: 1rem !important;
|
||||
.allinoneDualMarginTop_pContainer{
|
||||
padding: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
.innerClipPathImgSectionThree{
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.innerClipPathImgSectionFour{
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.supportBoxParent{
|
||||
padding: 2rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.allinoneDualMarginTop_p{
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.insightsAdvHeading{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.insightsAdv{
|
||||
width: 100vw;
|
||||
padding: 1rem;
|
||||
>ul{
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.carouselLanding{
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
gap:0;
|
||||
margin-bottom:1rem;
|
||||
.carouselLandingItem{
|
||||
width: 100%;
|
||||
>div{
|
||||
border-radius: 25px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carouselLandingItemInner{
|
||||
position: relative;
|
||||
.carouselLandingItemInnerOverlay{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.453);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mt-5C{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:576px){
|
||||
.allinInMargintop{
|
||||
margin-top: 100px;
|
||||
}
|
||||
.content-main-allinone{
|
||||
padding: 1rem;
|
||||
}
|
||||
.scaleSmallAllinone{
|
||||
scale: 0.9;
|
||||
}
|
||||
.allinoneslider{
|
||||
|
||||
|
||||
.owl-stage{
|
||||
width: max-content !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:320px) {
|
||||
|
||||
|
||||
.laptopsSection {
|
||||
.headinglaptopSub{
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
|
||||
}
|
||||
|
||||
.laptopSectionDesP {
|
||||
gap: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.allinoneDualMarginTop {
|
||||
.allinoneDualMarginTop_p{
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.allinoneDualMarginTop_pContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.clipPathSectionCol{
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.clipPathSectionCol {
|
||||
|
||||
.innerClipPathImgSectionThree{
|
||||
top: 22%;
|
||||
}
|
||||
|
||||
.innerClipPathImgSectionFour{
|
||||
top: 22%;
|
||||
}
|
||||
.innerClipPathImgFirstFour{
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.allinoneDualMarginTop {
|
||||
margin-top: 100px;
|
||||
.innerClipPathImgFirstThree{
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.animateHeadingLeft,.dualLaptopSlideLeftone{
|
||||
transform: translateX(1000%);
|
||||
transition: $animation-timer ease;
|
||||
}
|
||||
|
||||
.addTextanimationLeft{
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.animateHeadingRight,.dualLaptopSlideone{
|
||||
transform: translateX(-1000%);
|
||||
transition: $animation-timer ease;
|
||||
}
|
||||
|
||||
.addTextanimationRight{
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
// laptop 1
|
||||
.laptoponanimation,.allinOnepc{
|
||||
opacity: 0;
|
||||
transition: $animation-timer ease;
|
||||
}
|
||||
|
||||
.addOpacity{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.clipPathSectionCol {
|
||||
.dualLaptopSlideLeftone{
|
||||
transform: translate(1000%,-50%);
|
||||
transition: $animation-timer ease;
|
||||
}
|
||||
|
||||
.dualLaptopSlideLeftoneLeft{
|
||||
transform: translate(0,-50%);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.cpuSlideLeftone{
|
||||
transform: translateX(-1000%);
|
||||
transition: $animation-timer ease;
|
||||
}
|
||||
.controllerEight{
|
||||
transform: translateX(1000%);
|
||||
}
|
||||
.traslateZero{
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.clipPathSectionCol .innerClipPathImgSectionFour.controllerEight{
|
||||
transform: translate(1000%,-50%);
|
||||
transition: $animation-timer ease;
|
||||
}
|
||||
|
||||
.clipPathSectionCol .innerClipPathImgSectionFour.traslateZero{
|
||||
transform: translate(0,-50%);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,301 @@
|
||||
/* home page */
|
||||
$color_1: #000;
|
||||
$color_2: white;
|
||||
$font-family_1: "Satoshi", sans-serif;
|
||||
$background-color_1: #000;
|
||||
$background-color_2: #0fa5c5;
|
||||
$background-color_3: #f2f9fb;
|
||||
/* BUtton */
|
||||
.button_dark.btn-dark {
|
||||
background-color: $background-color_1 !important;
|
||||
font-family: $font-family_1;
|
||||
&:hover {
|
||||
background-color: $background-color_1 !important;
|
||||
font-family: $font-family_1;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
/* main-container */
|
||||
.home-main-container {
|
||||
#navbar-head { /* navbar */
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $color_1;
|
||||
font-family: $font-family_1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.offer-main-sec {/* main-offersec */
|
||||
.offer-sec {
|
||||
margin-top: -35px;
|
||||
}
|
||||
}
|
||||
.aw-feature-name {
|
||||
h5 {
|
||||
transform: rotate(180deg);
|
||||
transform-origin: center center 0;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
}
|
||||
.out-of-world { /* out-of-worldzz */
|
||||
.card {
|
||||
background-color: $background-color_2;
|
||||
}
|
||||
}
|
||||
.aw-support-sec {
|
||||
.aw-support-sec-main-container {
|
||||
background-color: $background-color_3;
|
||||
}
|
||||
.news-letter-sec {
|
||||
.news-letter-email {
|
||||
&:focus {
|
||||
border-bottom: 1px solid white;
|
||||
outline: none;
|
||||
}
|
||||
&::placeholder {
|
||||
color: $color_2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.owl-carousel.star-products-img-sec { /* owl-carousal */
|
||||
.owl-dots {
|
||||
text-align: left;
|
||||
.owl-dot {
|
||||
span {
|
||||
height: 3px;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
.owl-dot.active {
|
||||
color: $color_1;
|
||||
}
|
||||
}
|
||||
.owl-nav {
|
||||
text-align: right;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* banner */
|
||||
.hero-banner {
|
||||
background-image: url(../../dist/assets/imgs/Home/banner.png);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-position-y: -100px;
|
||||
.banner-main-container {
|
||||
height: 620px;
|
||||
}
|
||||
}
|
||||
@media (min-width:1900px) {
|
||||
.hero-banner {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.products-main-container .col-md-6 {
|
||||
text-align: center !important;
|
||||
.product-heading span {
|
||||
text-align: center !important;
|
||||
margin: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:769px) and (max-width:1024px) {
|
||||
.home-main-container {
|
||||
.aw-partners.sec-space-1 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.aw-partners .sec-space-3 {
|
||||
margin-right: 60px;
|
||||
}
|
||||
.offer-main-sec {
|
||||
.offer-sec {
|
||||
margin-top: -30%;
|
||||
}
|
||||
}
|
||||
.news-letter-sec {
|
||||
.card-body.px-5 {
|
||||
padding: 20px !important;
|
||||
}
|
||||
}
|
||||
.news-letter-sec {
|
||||
a.button_dark {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:278px) and (max-width:767px) {
|
||||
.home-main-container {
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.sec-space-1 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.sec-space-2 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.banner-main-container {
|
||||
height: 550px;
|
||||
display: block !important;
|
||||
text-align: center;
|
||||
.col-md-6 {
|
||||
padding-top: 7rem;
|
||||
.button_dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mobile-home-img {
|
||||
width: 85%;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
.hero-banner {
|
||||
background-position: 0;
|
||||
}
|
||||
.aw-main-features {
|
||||
display: none;
|
||||
}
|
||||
.mobile-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.aw-feature-name {
|
||||
h5 {
|
||||
transform: rotate(0deg);
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
}
|
||||
.products-main-container {
|
||||
.enterprise-prd {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.consumer-prd {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.news-letter-sec {
|
||||
a.button_dark {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
}
|
||||
.owl-carousel.star-products-img-sec {
|
||||
.d-flex{
|
||||
justify-content: center !important;
|
||||
}
|
||||
.owl-nav {
|
||||
text-align: center;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.star-products {
|
||||
.owl-dots {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.aw-support-sec-main-container {
|
||||
.row {
|
||||
margin: 0px !important;
|
||||
text-align: center;
|
||||
}
|
||||
.col-md-4 {
|
||||
border: none !important;
|
||||
}
|
||||
.support-sec-heading {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
.offer-main-sec {
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.offer-sec {
|
||||
p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-wrapper {
|
||||
.accordion-button {
|
||||
font-family: $font-family_1;
|
||||
color: $color_2;
|
||||
background-color: $background-color_1;
|
||||
&:not(.collapsed) {
|
||||
&::after {
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
.accordion-body {
|
||||
font-family: $font-family_1;
|
||||
color: $color_2;
|
||||
background-color: $background-color_1;
|
||||
}
|
||||
.accordion-button.collapsed {
|
||||
&::after {
|
||||
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");
|
||||
}
|
||||
}
|
||||
.footer-sub-content p{
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// index styles
|
||||
.feature-bg-image.animated-feature-img {
|
||||
animation: slide 1s ease .2s forwards;
|
||||
opacity: 0;
|
||||
// transform-origin: left top;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
from {
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[alt=footer-rocket-img]{
|
||||
cursor: pointer;
|
||||
width: 70px;
|
||||
}
|
||||
.partners-img{
|
||||
height:60px;
|
||||
}
|
||||
@media (min-width:405px) and (max-width:570px) {
|
||||
.home-main-container .banner-main-container .mobile-home-img{
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1800px) {
|
||||
.banner-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.banner-main-container {
|
||||
height: 900px !important;
|
||||
}
|
||||
|
||||
.offer-main-sec{
|
||||
position: absolute;
|
||||
bottom: 40%;
|
||||
right: 20%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,809 @@
|
||||
.productOverviewBody{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
$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);
|
||||
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border: 2px solid;
|
||||
|
||||
position: absolute; //head
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.price_footerContainer{
|
||||
// padding-left: 3rem;
|
||||
// padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:768px){
|
||||
.footerDesText{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.boxImgContainer {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.priceCut_multi {
|
||||
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 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%, #ff8e9e4d 52%, #eb869478 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -46%);
|
||||
}
|
||||
|
||||
.PO_gallery_box {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_box_inner {
|
||||
padding: 1rem;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.mobileAw{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.productoverBox {
|
||||
height: 900px;
|
||||
|
||||
.productoverBox-1 {
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.productoverBox-2 {
|
||||
height: 225px;
|
||||
|
||||
.futureProof {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.futureProofImg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.productoverBox-3 {
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.productoverBox-4 {
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.productoverBox-5 {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
|
||||
.box_innerImg {
|
||||
position: absolute;
|
||||
right: 8%;
|
||||
top: 0;
|
||||
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
scale: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productoverBox-6 {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.productoverBox-7 {
|
||||
height: 225px;
|
||||
position: relative;
|
||||
|
||||
.gridTruelifeImg {
|
||||
position: absolute;
|
||||
width: 85%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.productoverBox-8 {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.productoverBox-9 {
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.productoverBox-10 {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.productoverBox-11 {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.productoverBox-12 {
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.PO_box {
|
||||
// background-color: red;
|
||||
height: 100%;
|
||||
|
||||
>div {
|
||||
padding: 1rem 0rem;
|
||||
}
|
||||
|
||||
.box_inner {
|
||||
// height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// specsgrid
|
||||
|
||||
.specsgrid {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(8, minmax(5%, 1fr));
|
||||
grid-template-rows: repeat(12, minmax(5%, 1fr));
|
||||
|
||||
.specsItem {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.specsItem-1 {
|
||||
grid-column: 1/4;
|
||||
grid-row: 1/4;
|
||||
}
|
||||
|
||||
.specsItem-2 {
|
||||
grid-column: 1/4;
|
||||
grid-row: 1/4;
|
||||
}
|
||||
}
|
||||
|
||||
// specsgrid end
|
||||
|
||||
.displayscreenpad {
|
||||
.displayscreenpadContainer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.displayscreenpadHeading {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
.displayscreenpadMain {
|
||||
// top: -108px;
|
||||
margin-top: -8%;
|
||||
}
|
||||
|
||||
.displayscreenpadleft {
|
||||
>img {
|
||||
left: -8%;
|
||||
}
|
||||
}
|
||||
|
||||
.displayscreenpadright {
|
||||
>img {
|
||||
right: -10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dual_des_heading {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.dualLaptop {
|
||||
|
||||
width: 100vw;
|
||||
// height: 1300px;
|
||||
top: -100px;
|
||||
margin-top: 100px;
|
||||
margin-bottom: -100px;
|
||||
position: relative;
|
||||
|
||||
// overflow-x: hidden;
|
||||
.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: 50rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dualImgsOne {
|
||||
top: 0;
|
||||
left: -10rem;
|
||||
transform: rotate(343deg);
|
||||
width: 68%;
|
||||
}
|
||||
|
||||
.dualImgsTwo {
|
||||
// top:0;
|
||||
// right: -80%;
|
||||
// transform: rotate(330deg);
|
||||
|
||||
top: 14rem;
|
||||
right: -62%;
|
||||
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%, 106%);
|
||||
}
|
||||
|
||||
margin-bottom: 300px;
|
||||
}
|
||||
|
||||
.trueLifeDisplay {
|
||||
.trueLifeDisplay_headingHD {
|
||||
>.headingLife {
|
||||
font-size: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.trueLifeDisplay_des {
|
||||
padding: 0 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.font_p_Dual {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tableLaptopTwo{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: url("../../dist/assets/imgs/sectiontest.png");
|
||||
background-color: white;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.dragondisplay {
|
||||
position: relative;
|
||||
background: rgb(255, 255, 255);
|
||||
background: linear-gradient(184deg,
|
||||
rgba(255, 255, 255, 1) 4%,
|
||||
rgba(235, 255, 133, 1) 100%);
|
||||
overflow: hidden;
|
||||
|
||||
.dragondisplay_heading {
|
||||
position: absolute;
|
||||
bottom: -4%;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
|
||||
>h1 {
|
||||
font-size: 8rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.dragondisplay_des {
|
||||
max-width: 600px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 13%;
|
||||
padding: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.intelGen {
|
||||
.intelGenUL {
|
||||
max-width: 250px;
|
||||
gap: 8rem;
|
||||
|
||||
.intelGenULHeading {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.cpuSection {
|
||||
background-image: url("./../../dist/assets/imgs/productoverview/cpu.png");
|
||||
background-color: white;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width:1200px) {
|
||||
|
||||
// section
|
||||
|
||||
.productOverview {
|
||||
.p-6{
|
||||
padding:0;
|
||||
}
|
||||
.overviewProductFullTitle{
|
||||
padding: 2rem 5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// section
|
||||
.productOverview {
|
||||
>div {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// seciton
|
||||
.dualLaptop .dualImgsTwo .dualImgsInner {
|
||||
transform: rotate(339deg) translateX(57%) translateY(55%);
|
||||
}
|
||||
// section
|
||||
|
||||
.productOverview .overviewProductFullTitle {
|
||||
font-size: 1rem;
|
||||
padding: 2rem 0rem;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductDes {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_display {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.PO_gallery_box {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_box_inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.productoverBox.px-6 {
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
// ssection end
|
||||
|
||||
.displayscreenpad {
|
||||
.displayscreenpadHeading {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
// section end
|
||||
|
||||
.dualLaptop {
|
||||
.dual_des_heading {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.zeroBMain_des {
|
||||
padding-right: 0;
|
||||
|
||||
.zeroBMain_desP {
|
||||
font-size: 0.8rem;
|
||||
max-width: 400px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
//section
|
||||
.controlPanel {
|
||||
|
||||
.controlPanel_des{
|
||||
top: -110px;
|
||||
>h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:1000px){
|
||||
.dualpassage{
|
||||
padding-left: 10rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:790px) {
|
||||
|
||||
.productOverview {
|
||||
.p-6{
|
||||
padding:0;
|
||||
}
|
||||
.overviewProductFullTitle{
|
||||
padding: 2rem 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.overviewProductDes{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
// section
|
||||
|
||||
|
||||
// section
|
||||
|
||||
.displayscreenpad {
|
||||
.displayscreenpadHeading {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dualLaptop {
|
||||
.dual_des_heading {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.zeroBMain_des {
|
||||
// padding-right: 3rem;
|
||||
|
||||
.zeroBMain_desP {
|
||||
font-size: 0.7rem;
|
||||
max-width: 400px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// section
|
||||
.controlPanel{
|
||||
.controlPanel_des{
|
||||
|
||||
>h1 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:670px) {
|
||||
.zeroBMain_des{
|
||||
display: none;
|
||||
}
|
||||
.mobileAw{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// media quiue
|
||||
|
||||
@include respond(phone) {
|
||||
.p-6 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.productoverviewmain .displayscreenpad .displayscreenpadHeading {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.banner_heading_4 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// section 3
|
||||
.displayscreenpad {
|
||||
.displayscreenpadHeading {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.displayscreenpadMain {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.twoScreenHeading{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// section 5
|
||||
.tableLaptop {
|
||||
margin-top: 20%;
|
||||
margin-bottom: 0;
|
||||
height: max-content;
|
||||
|
||||
.dual_des_heading {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.circleTableLaptop {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.circleTableLaptop .circleTableLaptopTop {
|
||||
bottom: -3%;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 2%);
|
||||
}
|
||||
|
||||
.circleTableLaptop_Heading {
|
||||
position: absolute;
|
||||
top: 4%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.justTableLaptop {
|
||||
position: absolute;
|
||||
width: 86%;
|
||||
top: 26%;
|
||||
right: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.circleTableLaptop_text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
}
|
||||
|
||||
.trueLifeDisplay {
|
||||
margin-top: 50px;
|
||||
|
||||
.trueLifeDisplay_headingHD {
|
||||
|
||||
>h1,
|
||||
.headingLife {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.trueLifeDisplay_des {
|
||||
padding: 1rem;
|
||||
|
||||
.font_p_Dual {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// section 6
|
||||
.controlPanel {
|
||||
margin-top: 3rem;
|
||||
padding-bottom: 100px;
|
||||
|
||||
//heading h1
|
||||
>.p-5 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.bgControlpanel {
|
||||
min-height: 85vh;
|
||||
|
||||
.bgControlpaneltabs {
|
||||
top: 55%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.controlPanel_des {
|
||||
top:0%;
|
||||
width: 100%;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
margin: 1rem 0;
|
||||
margin: 1rem 0;
|
||||
|
||||
>h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bgControlpaneltabs {
|
||||
padding: 0.1rem !important;
|
||||
padding-top: 3rem !important;
|
||||
|
||||
>.nav-tabs {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
>ul {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#tabLaptopContent {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// section 7
|
||||
.proSection{
|
||||
.designedProLaptop_title{
|
||||
.designedProLaptop_title_text {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // popupKeyboard
|
||||
// .popupKeyboard {
|
||||
// padding: 1rem;
|
||||
|
||||
// .popupKeyboard_heading {
|
||||
// >h1 {
|
||||
// font-size: 2rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .popupKeyboard_hParent .popupKeyboard_des {
|
||||
// max-width: max-content;
|
||||
// font-size: 0.9rem;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
// shopping-cart
|
||||
.shopping-cart-main-container {
|
||||
* {
|
||||
font-family: "Satoshi", sans-serif;
|
||||
}
|
||||
h6 {
|
||||
padding: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
background-color: #F5FFEA;
|
||||
padding-bottom: 50px;
|
||||
.cart-sec-highlighter {
|
||||
.text-muted {
|
||||
color: #C5C5C5 !important;
|
||||
}
|
||||
}
|
||||
.alert-display-sec {
|
||||
z-index: 1;
|
||||
.alert-dismissible{
|
||||
background:rgb(255 255 255 / 66%)
|
||||
}
|
||||
}
|
||||
}
|
||||
.warrenty-sec img{
|
||||
width: 40px;
|
||||
}
|
||||
#footer-head {
|
||||
.footer-wrapper.sec-space-1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1300px) {
|
||||
.cart-sec-highlighter h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:768px) {
|
||||
.cart-sec-highlighter,
|
||||
.shopping-cart-details-row-1 {
|
||||
display: none !important;
|
||||
}
|
||||
.buy-together-sec {
|
||||
text-align: center;
|
||||
.row {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.mobile-cart-img img{
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
.controlPanel {
|
||||
margin-top: 10rem;
|
||||
padding-bottom: 300px;
|
||||
|
||||
.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-link:focus-visible,
|
||||
.nav-item:focus-visible {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:768px) {
|
||||
.controlPanel {
|
||||
padding-bottom: 100px;
|
||||
|
||||
.bgControlpanel {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
|
||||
.controlPanel {
|
||||
|
||||
.controlPanel_des {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.proSection{
|
||||
.designedProLaptop_title > .designedProLaptop_title_text{
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.designedProLaptopList{
|
||||
> li{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width:1200px) {
|
||||
.proSection{
|
||||
.designedProLaptopList{
|
||||
> li{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:768px){
|
||||
.proSection{
|
||||
padding: 1rem;
|
||||
.designedProLaptop_title > .designedProLaptop_title_text{
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.designedProLaptopList {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:576px) {
|
||||
.proSection{
|
||||
.designedProLaptop_title > .designedProLaptop_title_text{
|
||||
font-size: 2.5rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.dragondisplay {
|
||||
position: relative;
|
||||
background: rgb(255, 255, 255);
|
||||
background: linear-gradient(184deg,
|
||||
rgba(255, 255, 255, 1) 4%,
|
||||
rgba(235, 255, 133, 1) 100%);
|
||||
overflow: hidden;
|
||||
|
||||
.dragondisplay_heading {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
|
||||
>h1 {
|
||||
font-size: 8rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.dragondisplay_des {
|
||||
max-width: 600px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 13%;
|
||||
padding: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1200px) {
|
||||
.dragondisplay{
|
||||
.dragondisplay_heading{
|
||||
>h1 {
|
||||
font-size: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:768px) {
|
||||
.dragondisplay{
|
||||
.dragondisplay_heading{
|
||||
>h1 {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:576px) {
|
||||
.dragondisplay{
|
||||
.dragondisplay_heading{
|
||||
>h1 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.lensAnwi {
|
||||
.box_lens {
|
||||
.anwi_BoxLen {
|
||||
border-radius: 40px;
|
||||
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
|
||||
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
|
||||
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
|
||||
}
|
||||
|
||||
.box_lens_img {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.screenpadLens {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.lenHeading{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.anwi_BoxLen {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1400px) {
|
||||
.lensAnwi {
|
||||
.box_lens {
|
||||
.lenHeading{
|
||||
font-size: 1rem;
|
||||
}
|
||||
.screenpadLens {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1200px) {
|
||||
.lensAnwi {
|
||||
.row_lensAnwi {
|
||||
padding: 2rem;
|
||||
}
|
||||
.box_lens {
|
||||
.lenHeading{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.screenpadLens {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:768px) {
|
||||
.lensAnwi {}
|
||||
}
|
||||
|
||||
@media (max-width:576px) {
|
||||
|
||||
|
||||
|
||||
.lensAnwi {
|
||||
.box_lens {
|
||||
.box_lens_img {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dragondisplay {
|
||||
.dragondisplay_heading {
|
||||
>h1 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
.osPlusSoftware {
|
||||
position: relative;
|
||||
padding-top: 10rem;
|
||||
.osContianer{
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.osContianer_des_font{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:1200px) {
|
||||
.osPlusSoftware {
|
||||
position: relative;
|
||||
|
||||
.osContianer{
|
||||
|
||||
}
|
||||
|
||||
.osContianerHeading{
|
||||
>h1{
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.osContianer_des_font{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:1000px){
|
||||
.osPlusSoftware{
|
||||
padding-top: 1rem;
|
||||
.osContianer{
|
||||
top: 1rem;
|
||||
}
|
||||
.osContianerHeading{
|
||||
>h1{
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.osContianer_des_font{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:768px){
|
||||
.osPlusSoftware{
|
||||
.osContianer{
|
||||
top: -1rem;
|
||||
}
|
||||
|
||||
.osContianerHeading{
|
||||
>h1{
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.osContianer_des_font{
|
||||
font-size: 0.7rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
// pop up keyboard
|
||||
.popupKeyboard {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding-top: 11rem;
|
||||
.popupKeyboard_hParent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.popupKeyboard_heading {
|
||||
>h1{
|
||||
font-size: 9rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:1200px) {
|
||||
.popupKeyboard {
|
||||
.popupKeyboard_heading {
|
||||
>h1{
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:768px) {
|
||||
.controlPanel{
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.popupKeyboard {
|
||||
|
||||
.popupKeyboard_heading {
|
||||
padding: 1rem;
|
||||
>h1{
|
||||
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
}
|
||||
.popupKeyboard_des {
|
||||
padding: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.popupKeyboard_hParent {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:576px) {
|
||||
.popupKeyboard {
|
||||
|
||||
.popupKeyboard_heading {
|
||||
padding: 1rem;
|
||||
>h1{
|
||||
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.popupKeyboard_des {
|
||||
padding: 2rem;
|
||||
padding-top: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.proConnectivity{
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:1200px) {
|
||||
|
||||
.proConnectivity{
|
||||
h1{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.font_p_Dual{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:768px) {
|
||||
.proConnectivity{
|
||||
h1{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.font_p_Dual{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
.proConnectivity{
|
||||
// h1{
|
||||
// font-size: 2rem;
|
||||
// }
|
||||
|
||||
.connectivityPso_des{
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.font_p_Dual{
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
.professinalGrade {
|
||||
.professinalGradeImgContainer {
|
||||
background-image: url("./../../dist/assets/imgs/productoverview/promask.png");
|
||||
background-color: white;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.professinalGradeImg {
|
||||
@include absCenter;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1400px) {
|
||||
.professinalGrade{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1200px) {
|
||||
.professinalGrade{
|
||||
h1{
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:768px) {
|
||||
.professinalGrade{
|
||||
h1{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.font_p_Dual{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:576px) {
|
||||
.professinalGrade{
|
||||
p{
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.professinalGradeImg {
|
||||
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
.stunningSound {
|
||||
position: relative;
|
||||
padding-top: 15rem;
|
||||
overflow-x: hidden;
|
||||
.stunningSound_heading {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
>h1 {
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stunningSound_des {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30%;
|
||||
transform: translate(0%, 0%);
|
||||
|
||||
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// @media (max-width:1400px) {}
|
||||
|
||||
@media (max-width:1200px) {
|
||||
.stunningSound {
|
||||
|
||||
|
||||
.stunningSound_heading {
|
||||
|
||||
|
||||
>h1 {
|
||||
font-size: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stunningSound_des{
|
||||
|
||||
padding-right: 1rem;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width:1000px) {
|
||||
.stunningSound {
|
||||
|
||||
|
||||
.stunningSound_heading {
|
||||
|
||||
top: 20%;
|
||||
|
||||
>h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stunningSound_des {
|
||||
|
||||
top: 40%;
|
||||
right:0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width:768px) {
|
||||
.stunningSound {
|
||||
|
||||
|
||||
.stunningSound_heading {
|
||||
|
||||
|
||||
>h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stunningSound_des {
|
||||
max-width: 270px;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
p{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:576px) {
|
||||
.stunningSound {
|
||||
padding-top: 1rem;
|
||||
|
||||
.stunningSound_heading {
|
||||
|
||||
top: 15%;
|
||||
>h1 {
|
||||
font-size: 2rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stunningSound_des {
|
||||
padding: 2rem;
|
||||
top: 25%;
|
||||
max-width: 100%;
|
||||
left: 0;
|
||||
// top: 50%;
|
||||
// right: -19%;
|
||||
// p{
|
||||
// font-size: 1rem;
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.circleTableLaptop_Heading {
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
.circleTableLaptop_text{
|
||||
bottom: 25%;
|
||||
>div{
|
||||
padding: 0px 22%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:1300px) {
|
||||
.circleTableLaptop_text {
|
||||
bottom: 18%;
|
||||
>div{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1000px) {
|
||||
.circleTableLaptop_Heading {
|
||||
h1{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
.circleTableLaptop_text {
|
||||
bottom: 25%;
|
||||
>div{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
.circleTableLaptop_Heading {
|
||||
top: 0;
|
||||
h1{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
|
||||
.wifiSection {
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
||||
// .wifiSectionImg {
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
// margin: 10rem 0;
|
||||
// background-image: url("./../../dist/assets/imgs/productoverview/wifilap.png");
|
||||
// background-color: white;
|
||||
// background-size: cover;
|
||||
// background-repeat: no-repeat;
|
||||
// background-position: center;
|
||||
// }
|
||||
.wifiSectionDes{
|
||||
display: none;
|
||||
}
|
||||
.textWifiContainer {
|
||||
position: relative;
|
||||
|
||||
.wifiSection_des {
|
||||
max-width: 500px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -48%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textWifiContainerHeading {
|
||||
>h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width:1200px) {
|
||||
.wifiSection{
|
||||
.textWifiContainer {
|
||||
.textWifiContainerHeading {
|
||||
>h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1000px) {
|
||||
.wifiSection{
|
||||
.textWifiContainer {
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.wifiSectionDes{
|
||||
padding: 2rem;
|
||||
display: block;
|
||||
.wifiSection_des {
|
||||
>p{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
+2781
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,384 @@
|
||||
@import "abstracts/functions";
|
||||
@import "abstracts/mixins";
|
||||
@import "abstracts/variables";
|
||||
@import "base/base";
|
||||
@import "base/typography";
|
||||
@import "base/utilities";
|
||||
// components
|
||||
@import "components/button";
|
||||
// pages
|
||||
@import "pages/productOverview";
|
||||
@import "pages/productOverview/designedpro";
|
||||
@import "pages/productOverview/popupkeyboard";
|
||||
@import "pages/productOverview/dragondisplay";
|
||||
@import "pages/productOverview/lens";
|
||||
@import "pages/productOverview/professinalGrade";
|
||||
@import "pages/productOverview/stunningsound";
|
||||
@import "pages/productOverview/wifisection";
|
||||
@import "pages/productOverview/tablesection";
|
||||
@import "pages/productOverview/proConnectivity";
|
||||
@import "pages/productOverview/osPlusSoftware";
|
||||
@import "pages/productOverview/controlPanel";
|
||||
|
||||
|
||||
@import "pages/home";
|
||||
@import "pages/shopping-cart";
|
||||
@import "pages/allInOne";
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit;
|
||||
font-family: "Orbitron", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// html {
|
||||
// font-size: 100%; }
|
||||
// body {
|
||||
// box-sizing: border-box;
|
||||
// overflow-x: hidden;
|
||||
// }
|
||||
// @media only screen and (max-width: 56.25em) {
|
||||
// body {
|
||||
// padding: 0; }
|
||||
// }
|
||||
$color_1: #000;
|
||||
$font-family_1: "Satoshi", sans-serif;
|
||||
$background-color_1: #3bb78f;
|
||||
$background-color_2: #fff;
|
||||
|
||||
|
||||
.bg-green {
|
||||
background-color: $background-color_1;
|
||||
background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%);
|
||||
}
|
||||
/* button */
|
||||
.button_dark {
|
||||
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;
|
||||
}
|
||||
/* navbar */
|
||||
#navbar-head {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
.biz-nav-wrapper {
|
||||
.navbar-brand {
|
||||
img {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
.dropdown.has-mega-menu {
|
||||
position: static !important;
|
||||
}
|
||||
.dropdown-menu {
|
||||
.dropdown-items-row {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
gap: 2rem;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $color_1;
|
||||
font-family: $font-family_1;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
.dropdown.has-mega-menu {
|
||||
&:hover {
|
||||
>.navbar {
|
||||
background-color: $background-color_2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.button_dark.btn-dark {
|
||||
font-weight: bold;
|
||||
}
|
||||
.dropdown-menu {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
// margin-top: 1.5rem;
|
||||
}
|
||||
.dropdown {
|
||||
&:hover {
|
||||
>.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-item-img {
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* footer */
|
||||
.footer-wrapper {
|
||||
background-image: url(../dist/assets/imgs/Home/Footer-bg-1.png);
|
||||
background-size: cover;
|
||||
.footer-content-main-container {
|
||||
background-image: url(../dist/assets/imgs/Home/Footer-pattern.png);
|
||||
background-size: contain;
|
||||
background-position: right 30px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.last-col-footer {
|
||||
width: 23%;
|
||||
}
|
||||
.footer-logo {
|
||||
img {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
li {
|
||||
line-height: 2rem;
|
||||
font-family: $font-family_1;
|
||||
}
|
||||
.footer-sub-content {
|
||||
p {
|
||||
line-height: 2rem;
|
||||
font-family: $font-family_1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-socailImg {
|
||||
width: 30px;
|
||||
}
|
||||
@media (min-width: 1990px) {
|
||||
.footer-wrapper {
|
||||
.footer-rkt {
|
||||
right: 45px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
$color_1: rgb(255 32 32 / 0%);
|
||||
$background-color_1: #4f4f4f;
|
||||
#navbar-head {
|
||||
.navbar-nav {
|
||||
gap: 0;
|
||||
.dropdown-menu{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggler {
|
||||
color: $color_1;
|
||||
span {
|
||||
display: block;
|
||||
background-color: $background-color_1;
|
||||
height: 3px;
|
||||
width: 25px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
transition: all 0.35s ease-out;
|
||||
transform-origin: center left;
|
||||
&:nth-child(1) {
|
||||
transform: translate(0%, 0%) rotate(0deg);
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
opacity: 1;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
transform: translate(0%, 0%) rotate(0deg);
|
||||
}
|
||||
}
|
||||
&:not(.collapsed) {
|
||||
span {
|
||||
&:nth-child(1) {
|
||||
transform: translate(15%, -33%) rotate(45deg);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
transform: translate(15%, 33%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width:991px) {
|
||||
#navbar-head{
|
||||
.accordion-button:not(.collapsed){
|
||||
background-color: #fff;
|
||||
color:rgb(0, 0, 0);
|
||||
box-shadow: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.accordion-button{
|
||||
font-family: "Satoshi", sans-serif;
|
||||
}
|
||||
.accordion-body {
|
||||
ul{
|
||||
li{
|
||||
font-size: 1rem;
|
||||
font-family: "Satoshi", sans-serif;
|
||||
color: #635c5c;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.accordion-button:focus{
|
||||
// border-color:#ffffff00;
|
||||
box-shadow:none
|
||||
}
|
||||
.accordion-button::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
|
||||
transform: scale(.7) !important;
|
||||
}
|
||||
.accordion-button:not(.collapsed)::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
.delivery-to-sec{
|
||||
.d-flex{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.button_dark{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
#footer-head{
|
||||
.accordion-item{
|
||||
border: 1px solid;
|
||||
box-shadow: none;
|
||||
.accordion-button:not(.collapsed){
|
||||
box-shadow: none !important;}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// footer
|
||||
.footer-socailImg{
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.footer-rkt:hover{
|
||||
animation: rocketRotate 2s;
|
||||
}
|
||||
|
||||
@keyframes rocketRotate {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.mbil-name, .navbar-brand img{
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user