This commit is contained in:
Roman Pyrih
2024-11-14 16:02:05 +01:00
parent e293b7ee41
commit 4d90bf6de0
5 changed files with 490 additions and 1 deletions

View File

@@ -0,0 +1,149 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
#page-black-week .c-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1560px) {
#page-black-week .c-container {
max-width: 1560px;
}
}
@media (min-width: 1200px) and (max-width: 1559.98px) {
#page-black-week .c-container {
max-width: 1140px;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
#page-black-week .c-container {
max-width: 960px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
#page-black-week .c-container {
max-width: 720px;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
#page-black-week .c-container {
max-width: 540px;
}
}
@media (max-width: 575.98px) {
#page-black-week .c-container {
max-width: 100%;
}
}
#page-black-week .box-1 {
text-align: center;
margin-bottom: 50px;
}
#page-black-week .box-1 img {
width: 100%;
max-width: -moz-fit-content;
max-width: fit-content;
}
#page-black-week .box-2 {
text-align: center;
margin-bottom: 100px;
}
#page-black-week .box-2 h2 {
font-size: 48px;
font-family: "Open Sans", sans-serif;
font-weight: 300;
text-transform: uppercase;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 90px;
color: #000;
}
#page-black-week .box-2 h2 strong {
display: block;
font-weight: 700;
}
#page-black-week .box-2 p {
width: 100%;
max-width: 920px;
color: #000;
font-size: 32px;
font-family: "Open Sans", sans-serif;
font-weight: 300;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
#page-black-week .box-3 h2 {
color: #000;
font-family: "Open Sans", sans-serif;
font-size: 36px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 60px;
}
#page-black-week .box-3 ul {
list-style: decimal;
margin-bottom: 50px;
}
#page-black-week .box-3 ul li {
color: #000;
font-family: "Open Sans", sans-serif;
font-size: 36px;
font-weight: 300;
}
#page-black-week .box-3 a {
display: inline-block;
color: #fff;
padding: 20px 40px;
background: #1d1d1b;
font-style: italic;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
}
#page-black-week .box-3 p {
color: #000;
font-family: "Open Sans", sans-serif;
font-size: 18px;
text-align: right;
max-width: 1170px;
margin-left: auto;
margin-bottom: 0;
}
#page-black-week .box-3 .sale-box {
display: flex;
flex-direction: column;
}
#page-black-week .box-4 {
margin-bottom: 200px;
}
#page-black-week .box-4 h2 {
color: #000;
font-size: 38px;
font-family: "Open Sans", sans-serif;
font-weight: 300;
margin-bottom: 48px;
text-transform: uppercase;
}
#page-black-week .box-4 h2 strong {
display: block;
font-size: 24px;
text-align: center;
font-weight: bold;
}
#page-black-week .box-4 ul li {
color: #000;
font-size: 20px;
font-family: "Open Sans", sans-serif;
font-weight: 300;
}
#page-black-week .box-4 ul li:not(:last-child) {
margin-bottom: 20px;
}
#page-black-week .box-4 .c-row {
margin-top: 90px;
padding-top: 90px;
border-top: 1px solid #000;
}/*# sourceMappingURL=black-week.css.map */

View File

@@ -0,0 +1 @@
{"version":3,"sources":["black-week.scss","black-week.css"],"names":[],"mappings":"AAAQ,8GAAA;AAKP;EACC,WAAA;EACA,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,iBAAA;ACHF;ADKE;EAPD;IAQE,iBAAA;ECFD;AACF;ADGE;EAVD;IAWE,iBAAA;ECAD;AACF;ADCE;EAbD;IAcE,gBAAA;ECED;AACF;ADDE;EAhBD;IAiBE,gBAAA;ECID;AACF;ADHE;EAnBD;IAoBE,gBAAA;ECMD;AACF;ADLE;EAtBD;IAuBE,eAAA;ECQD;AACF;ADLC;EACC,kBAAA;EACA,mBAAA;ACOF;ADLE;EACC,WAAA;EACA,2BAAA;EAAA,sBAAA;ACOH;ADHC;EACC,kBAAA;EACA,oBAAA;ACKF;ADCE;EACC,eAAA;EACA,oCAlDK;EAmDL,gBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;ACCH;ADCG;EACC,cAAA;EACA,gBAAA;ACCJ;ADYE;EACC,WAAA;EACA,gBAAA;EAEA,WAAA;EACA,eAAA;EACA,oCAhFK;EAiFL,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;ACXH;ADuBE;EACC,WAAA;EACA,oCAlGK;EAmGL,eAAA;EACA,gBAAA;EACA,yBAAA;EACA,mBAAA;ACrBH;ADgCE;EACC,mBAAA;EACA,mBAAA;AC9BH;ADoCG;EACC,WAAA;EACA,oCA3HI;EA4HJ,eAAA;EACA,gBAAA;AClCJ;AD6CE;EACC,qBAAA;EACA,WAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;EACA,gBAAA;EACA,yBAAA;EACA,eAAA;AC3CH;ADkDE;EACC,WAAA;EACA,oCAzJK;EA0JL,eAAA;EAEA,iBAAA;EACA,iBAAA;EACA,iBAAA;EACA,gBAAA;ACjDH;ADwDE;EACC,aAAA;EACA,sBAAA;ACtDH;AD0DC;EACC,oBAAA;ACxDF;AD8DE;EACC,WAAA;EACA,eAAA;EACA,oCAtLK;EAuLL,gBAAA;EACA,mBAAA;EACA,yBAAA;AC5DH;AD8DG;EACC,cAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;AC5DJ;ADqEG;EACC,WAAA;EACA,eAAA;EACA,oCA3MI;EA4MJ,gBAAA;ACnEJ;ADqEI;EACC,mBAAA;ACnEL;AD4EE;EACC,gBAAA;EACA,iBAAA;EAEA,0BAAA;AC3EH","file":"black-week.css"}

View File

@@ -0,0 +1,231 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
$font1: 'Open Sans', sans-serif;
#page-black-week {
.c-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 1560px) {
max-width: 1560px;
}
@media (min-width: 1200px) and (max-width: 1559.98px) {
max-width: 1140px;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
max-width: 960px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
max-width: 720px;
}
@media (min-width: 576px) and (max-width: 767.98px) {
max-width: 540px;
}
@media (max-width: 575.98px) {
max-width: 100%;
}
}
.box-1 {
text-align: center;
margin-bottom: 50px;
img {
width: 100%;
max-width: fit-content;
}
}
.box-2 {
text-align: center;
margin-bottom: 100px;
// @include respond-below(md) {
// margin-bottom: 60px;
// }
h2 {
font-size: 48px;
font-family: $font1;
font-weight: 300;
text-transform: uppercase;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 90px;
color: #000;
strong {
display: block;
font-weight: 700;
}
// @include respond-below(lg) {
// font-size: 38px;
// margin-bottom: 50px;
// }
// @include respond-below(sm) {
// font-size: 28px;
// }
}
p {
width: 100%;
max-width: 920px;
color: #000;
font-size: 32px;
font-family: $font1;
font-weight: 300;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
// @include respond-below(lg) {
// font-size: 26px;
// }
// @include respond-below(sm) {
// font-size: 20px;
// }
}
}
.box-3 {
h2 {
color: #000;
font-family: $font1;
font-size: 36px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 60px;
// @include respond-below(lg) {
// font-size: 50px;
// }
// @include respond-below(sm) {
// font-size: 30px;
// margin-bottom: 40px;
// }
}
ul {
list-style: decimal;
margin-bottom: 50px;
// @include respond-below(sm) {
// margin-bottom: 40px;
// }
li {
color: #000;
font-family: $font1;
font-size: 36px;
font-weight: 300;
// @include respond-below(lg) {
// font-size: 26px;
// }
// @include respond-below(sm) {
// font-size: 20px;
// }
}
}
a {
display: inline-block;
color: #fff;
padding: 20px 40px;
background: #1d1d1b;
font-style: italic;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
// @include respond-below(lg) {
// padding: 15px 30px;
// }
}
p {
color: #000;
font-family: $font1;
font-size: 18px;
text-align: right;
max-width: 1170px;
margin-left: auto;
margin-bottom: 0;
// @include respond-below(md) {
// text-align: left;
// font-size: 16px;
// }
}
.sale-box {
display: flex;
flex-direction: column;
}
}
.box-4 {
margin-bottom: 200px;
// @include respond-below(md) {
// margin-bottom: 150px;
// }
h2 {
color: #000;
font-size: 38px;
font-family: $font1;
font-weight: 300;
margin-bottom: 48px;
text-transform: uppercase;
strong {
display: block;
font-size: 24px;
text-align: center;
font-weight: bold;
}
// @include respond-below(lg) {
// font-size: 32px;
// }
}
ul {
li {
color: #000;
font-size: 20px;
font-family: $font1;
font-weight: 300;
&:not(:last-child) {
margin-bottom: 20px;
}
// @include respond-below(lg) {
// font-size: 18px;
// }
}
}
.c-row {
margin-top: 90px;
padding-top: 90px;
border-top: 1px solid #000;
// @include respond-below(md) {
// margin-top: 60px;
// padding-top: 60px;
// }
}
}
}