forked from M3-Academy/m3-academy-template-checkout
Develop #1
@ -17,7 +17,6 @@
|
||||
|
||||
&-title {
|
||||
font-family: $font-family;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
@ -25,9 +24,67 @@
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin-top: 170px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
@include mq(tv, min) {
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
&-links {
|
||||
a {
|
||||
position: relative;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: transparent;
|
||||
|
||||
@include mq(tv, min) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: "Continuar comprando";
|
||||
color: $black;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
@include mq(Gf, max) {
|
||||
top: 25%;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@include mq(tv, min) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
top: 13%;
|
||||
}
|
||||
}
|
||||
.link-choose-products {
|
||||
background: $white;
|
||||
border: 1px solid $black;
|
||||
@ -40,28 +97,16 @@
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 15px 65px;
|
||||
color: $black;
|
||||
padding: 16px 65px;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
|
||||
a {
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: transparent;
|
||||
@include mq(sm, max) {
|
||||
padding: 16px 26px;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: "Continuar comprando";
|
||||
color: $black;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@include mq(Gf, max) {
|
||||
padding: 0 26px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
@ -5,16 +5,16 @@
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid $black;
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
padding: 33.5px 130px;
|
||||
padding: 33.5px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
padding: 33.5px 256px;
|
||||
padding: 33.5px 0;
|
||||
}
|
||||
}
|
||||
.progress-bar {
|
||||
@ -120,13 +120,22 @@
|
||||
}
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
width: 17.059%;
|
||||
width: 19.22%;
|
||||
}
|
||||
}
|
||||
|
||||
&__safeBuy {
|
||||
justify-content: end;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
span {
|
||||
min-width: fit-content;
|
||||
@ -149,15 +158,11 @@
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 11.25%;
|
||||
top: -11%;
|
||||
left: -11px;
|
||||
width: 4.5%;
|
||||
min-width: 12px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 14.34%;
|
||||
top: -15%;
|
||||
left: -27px;
|
||||
width: 6.1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user