reza completed subscribe desktop design

master
RezaAshrafi77 3 years ago
parent 25cd80511a
commit fd38e16dc2
  1. 7
      src/views/Subscription/DiscountCode/index.scss
  2. 13
      src/views/Subscription/SubscribeRadio/index.scss
  3. 7
      src/views/Subscription/index.scss
  4. 3
      src/views/Subscription/index.tsx

@ -22,6 +22,7 @@
border-top-left-radius: 10px;
color: white;
border-bottom-left-radius: 10px;
border: none;
}
}
@ -48,14 +49,14 @@
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.discount-code{
h3{
font-size: calc(100vw / 72);
font-size: calc(100vw / 82);
}
input{
padding: 20px 10px 20px 0px;
width: 200px;
width: 240px;
font-size: calc(100vw / 90);
&::placeholder{
font-size: calc(100vw / 110);
font-size: calc(100vw / 130);
}
}
button{

@ -4,9 +4,11 @@
margin-bottom: 15px;
border-radius: 10px;
&__name{
padding: 12px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
h2{
margin-bottom: 0px;
}
}
&__factor{
border-top-left-radius: 10px;
@ -22,6 +24,7 @@
padding: 4px 20px;
border-radius: 30px;
width: fit-content;
letter-spacing: -1px;
}
&--finalPrice{
i{
@ -99,7 +102,7 @@
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.subscribe-radio{
min-height: 100px;
min-height: 70px;
&__name{
flex: 7;
h2{
@ -110,7 +113,7 @@
&__factor{
flex: 3;
&--tag{
font-size: calc(100vw / 110);
font-size: calc(100vw / 130);
}
&--off{
b{
@ -122,10 +125,10 @@
}
&--finalPrice{
i{
font-size: calc(100vw / 115);
font-size: calc(100vw / 125);
}
strong{
font-size: calc(100vw / 64);
font-size: calc(100vw / 74);
}
}
}

@ -28,13 +28,14 @@
@media screen and (min-width : 1008px) and (max-width : 1440px) {
.subscription{
main{
margin-top: 50px;
margin-top: 0px;
max-width: 700px;
transform: scale(0.8) translateY(-20px);
h1{
font-size: calc(100vw / 30);
font-size: calc(100vw / 50);
}
p{
font-size: calc(100vw / 70);
font-size: calc(100vw / 90);
}
}
}

@ -23,6 +23,9 @@ function Subscription({subscribes} : any) {
))
}
<DiscountCode />
<div className="d-flex justify-content-end py-4">
<button className="submit submit-large">تایید و پرداخت</button>
</div>
</main>
<Footer />
</div>

Loading…
Cancel
Save