diff --git a/dist/html/pages/laptopmulti.html b/dist/html/pages/laptopmulti.html index 9f55c1c..161eefa 100644 --- a/dist/html/pages/laptopmulti.html +++ b/dist/html/pages/laptopmulti.html @@ -7,7 +7,7 @@ - + project @@ -36,7 +36,7 @@ -
+
@@ -44,22 +44,23 @@
Delivery
-
See estimated delivery times by
-
entering your PIN code
+
See estimated delivery times by
+
entering your PIN code
-
+
-
$69,999.00
-
- $ 89,999 Save $ 19,999 +
$69,999.00
+
+ $ 89,999 Save $ 19,999
- + Add to cart
-
No Cost EMI Available Learn more
+
No Cost EMI Available Learn more
@@ -71,17 +72,18 @@
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

+
+ +
+
+ leftlaptop +
+
+ rightlaptop +
+
+
+
+
+
+ +
+ + +
+
+
+

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
    • +
+
+ - + 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":"AAUA;;;;;;;;;;;;;;;;CAAA;ACVA;;;EAGI,SAAA;EACA,UAAA;EACA,mBAAA;ACkBJ;;ADXA;EACI,sBAAA;EAEA,kBAAA;ACaJ;AFIQ;ECpBR;IAKQ,UAAA;ECeN;AACF;;AChCA;EACE,yBAAA;EACA,6FAAA;ADmCF;;AChCA;EACE,cAAA;ADmCF;;AChCA;EACE,mCAAA;ADmCF;;AC/BA;EACE,eAAA;ADkCF;;AChCA;EACE,eAAA;ADmCF;;AChCA;EACE,iBAAA;ADmCF;;AChCA;EACE,iBAAA;ADmCF;;AChCA;EACE,iBAAA;ADmCF;;AChCA;EACE,iBAAA;ADmCF;;AC/BA;EACE,eAAA;ADkCF;;AC9BA;EACE,iBAAA;ADiCF;;AC5BA;EACE,eAAA;AD+BF;;ACzBA;EACE,kBAAA;AD4BF;;ACzBA;EACE,aAAA;AD4BF;;ACzBA;EACE,kBAAA;AD4BF;;ACvBA;EACE,WAAA;AD0BF;;ACvBA;EACE,WAAA;AD0BF;;ACvBA;EACE,WAAA;AD0BF;;ACvBA;EACE,WAAA;AD0BF;;ACvBA;EACE,WAAA;AD0BF;;ACxBA;EACE,WAAA;AD2BF;;ACzBA;EACE,WAAA;AD4BF;;ACzBA;EACE,WAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,YAAA;AD4BF;;ACzBA;EACE,aAAA;AD4BF;;ACtBA;EACE,gBAAA;ADyBF;;ACrBE;EACE,gBAAA;ADwBJ;;ACrBA;EACE,aAAA;ADwBF;;ACjBA;EACE,WAAA;ADoBF;;ACjBA;EACE,SAAA;ADoBF;;ACfA;EACE,mBAAA;ADkBF;;AE7KA;EACI,kFAAA;UAAA,0EAAA;EACA,qBAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;AFgLJ;;AGtLA;EACE,6EAAA;EACA,uBAAA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;EAEA,kBAAA;AHwLF;;AGnLA;EACE,YAAA;AHsLF;;AGnLA;EACE,qCAAA;EACA,wDAAA;EACA,0BAAA;EACA,kCAAA;EAEA,2CAAA;EACA,iBAAA;EAEA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,OAAA;AHoLF;;AGjLA;EACE,WAAA;AHoLF;;AGjLA;EACE,iBA1Bc;AH8MhB;;AGjLA;EACE,iBA9Bc;AHkNhB;;AGjLA;EACE,iBAAA;EACA,kCAAA;EACA,gBAAA;AHoLF;;AGjLA;EACE,mBAAA;EACA,eAAA;EACA,mCAAA;AHoLF;;AGjLA;EACE,eAAA;EACA,iBAAA;EACA,kCAAA;AHoLF;;AGjLA;EACE,iBAAA;EACA,WAAA;EACA,iBAAA;EACA,4HAAA;EACA,kBAAA;AHoLF;;AGlLA;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AHqLF;;AGlLA;EACE,aAAA;EACA,yBAAA;AHqLF;;AGjLE;EAEE,YAAA;AHmLJ;AGlLI;EACE,kBAAA;AHoLN;AGlLI;EACE,YAAA;AHoLN;AGjLI;EACE,8BAAA;EACA,kFAAA;AHmLN;AG7KI;EACE,kBAAA;AH+KN;AG7KI;EACE,mBAAA;AH+KN;;AGzKE;EACE,kBAAA;AH4KJ;AG1KE;EACE,eAAA;AH4KJ;AGzKE;EACE,WAAA;AH2KJ;AGxKI;EACE,SAAA;AH0KN;AGrKI;EACE,WAAA;AHuKN;;AGlKA;EACE,eAAA;AHqKF;;AGjKA;EACE,YAAA;EACA,cAAA;EACA,WAAA;EACA,qBAAA;EACA,kBAAA;AHoKF;AGjKE;EACE,iBAAA;AHmKJ;AGjKE;EACE,kBAAA;EACA,MAAA;EACA,QAAA;EACA,gBAAA;EACA,mBAAA;AHmKJ;AGhKE;EACE,kBAAA;AHkKJ;AG/JI;EACE,UAAA;AHiKN;AG3JE;EACE,MAAA;EACA,UAAA;EACA,yBAAA;EACA,UAAA;AH6JJ;AG1JE;EAKE,QAAA;EACA,WAAA;EACA,yBAAA;AHwJJ;AGvJI;EACE,UAAA;AHyJN;;AGpJA;EACE,iBAAA;EAGA,YAAA;EACA,YAAA;EACA,kBAAA;EA4CA,oBAAA;AH0GF;AGrJE;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,iCAAA;AHuJJ;AGrJE;EACE,kBAAA;EACA,UAAA;EACA,UAAA;EACA,YAAA;EACA,UAAA;AHuJJ;AGpJE;EACE,yBAAA;EACA,aAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,gBAAA;AHsJJ;AGnJI;EAEA,WAAA;EACA,UAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,8BAAA;AHoJJ;AG/IE;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AHiJJ;;AGxIE;EACE,eAAA;AH2IJ;AGvIC;EACC,gBAAA;AHyIF;;AGpIA;EACE,iBAAA;AHuIF;;AGpIA;EAEE,iBAAA;EACA,qBAAA;AHsIF;AGrIE;EACE,kBAAA;EACA,WAAA;EACA,UAAA;AHuIJ;AGpIE;EACE,iBAAA;EACA,yBAAA;EACA,oBAAA;EACA,kBAAA;AHsIJ;AGpII;EAEE,kBAAA;EACA,UAAA;EACA,QAAA;AHqIN;AGnIM;EACE,wBAAA;EACA,mBAAA;AHqIR;AGnIM;EACE,kBAAA;EACA,YAAA;AHqIR;AGjIM;EACC,kBAAA;EACA,YAAA;EACA,gBAAA;AHmIP;AGhIM;EACE,YAAA;EACA,6BAAA;AHkIR;AG/HM;EACE,cAAA;AHiIR;AG9HM;EACE,WAAA;EACA,kBAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,QAAA;EACA,aAAA;EACA,uBAAA;AHgIR;;AGxHA;EACE,kBAAA;AH2HF;AG1HE;EACE,kBAAA;EACA,WAAA;EACA,OAAA;EACA,UAAA;AH4HJ;AGxHE;EACE,gBAAA;AH0HJ;AGxHE;EACE,kBAAA;EACA,MAAA;EACA,YAAA;AH0HJ;;AI5bA;;;;;;;;;;;;;;;;CAAA;AAkBA,aAAA;AACA;EACI,uBAAA;EACA,2EAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,uBAAA;EACA,0EAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,uBAAA;EACA,4EAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,uBAAA;EACA,wEAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE,iBAAA;AACA,YAAA;AACA;EACE,sBAAA;EACA,yEAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,sBAAA;EACA,wEAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI5bE;EACE,sBAAA;EACA,sEAAA;EACA,gBAAA;EACA,kBAAA;AJ8bJ;AI3bE,gBAAA;AAEA;EACE,kCAAA;AJ4bJ;;AI7aE;EACE,yBAAA;EACA,yEAAA;AJgbJ;;AI7aE,WAAA;AACA;EACE,kFAAA;UAAA,0EAAA;EACA,qBAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;AJgbJ;;AI/aE,WAAA;AACA;EACE,8BAAA;EACA,0BAAA;EACA,gGAAA;UAAA,wFAAA;AJkbJ;;AIhbE;EACE,iBAAA;AJmbJ","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;