code added
Этот коммит содержится в:
@@ -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,41 @@
|
||||
|
||||
@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: 37.5em) { @content }; //600px
|
||||
}
|
||||
@if $breakpoint == tab-port {
|
||||
@media only screen and (max-width: 56.25em) { @content }; //900px
|
||||
}
|
||||
@if $breakpoint == tab-land {
|
||||
@media only screen and (max-width: 75em) { @content }; //1200px
|
||||
}
|
||||
@if $breakpoint == big-desktop {
|
||||
@media only screen and (min-width: 112.5em) { @content }; //1800
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
// $primary-color: steelblue;
|
||||
|
||||
$grey-bg:#EEEEEE;
|
||||
@@ -0,0 +1,21 @@
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
@include respond(tab-port) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
// colors
|
||||
.bg-green {
|
||||
background-color: #3bb78f;
|
||||
background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
|
||||
}
|
||||
|
||||
// font size
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.subtitle_1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.banner_heading_4 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
|
||||
// padding
|
||||
|
||||
.padding_top_14 {
|
||||
padding-top: 14rem;
|
||||
}
|
||||
|
||||
.p-6{
|
||||
padding:5rem;
|
||||
}
|
||||
|
||||
.padding_top_10 {
|
||||
padding-top: 10rem; }
|
||||
|
||||
|
||||
// heights
|
||||
|
||||
.vh_60{
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.vh-77{
|
||||
height: 77vh;
|
||||
}
|
||||
|
||||
.vh-85 {
|
||||
height: 85vh;
|
||||
}
|
||||
|
||||
.vh-15 {
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
|
||||
// font weight
|
||||
|
||||
.fw-600{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700; }
|
||||
|
||||
|
||||
.h-200p{
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
.productoverviewmain{
|
||||
background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
|
||||
background-color: #C9DBB5;
|
||||
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;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.boxImgContainer {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.priceCut_multi {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductHeading {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductFullTitle {
|
||||
padding: 2rem 13rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductDes {
|
||||
padding: 0 2rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_display {
|
||||
min-height: 500px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 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;
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
@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";
|
||||
|
||||
/*
|
||||
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 */
|
||||
*,
|
||||
*::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%; }
|
||||
|
||||
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%, #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; }
|
||||
/* footer */
|
||||
.footer-wrapper {
|
||||
background-color: rgb(0, 0, 0);
|
||||
border-radius: 0 275px 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;
|
||||
}
|
||||
Ссылка в новой задаче
Block a user