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

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

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

Loading…
Cancel
Save