232 lines
3.8 KiB
SCSS
232 lines
3.8 KiB
SCSS
@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;
|
|
// }
|
|
}
|
|
}
|
|
}
|