merkatsu / website

3 stars 0 forks source link

Layout Payment #39

Closed mariacovasgrilo closed 8 years ago

mariacovasgrilo commented 9 years ago

shop payment page /* Payment (like "shopping cart"): */ font-family: Montserrat-Bold; font-size: 28px; color: #302B2F;

/* BACK: */ font-family: Montserrat-Regular; font-size: 13px; color: #201D20;

card details line: border: 1px solid rgba(165,159,163,0.50); length: 400px;

card number textfield line length: 260px;

all the text-field formatting is to be the same as in the shipping details case.

"powered by" line: length: 350px; margin-left: 60px;

The image of Mangopay should be with the little logo aligned to the left edge of the line and a distance of 30px upward and downward (counting from the edges of the image text)

/* Your card details go: */ font-family: Montserrat-Light; font-size: 13px; color: #8B8B8B; letter-spacing: 0px; line-height: 22px;

text width: 305px

/* pay now button: */ background: #E53527; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.24); border-radius: 2px; width: 166px; height: 30px;

/* PAY NOW: */ font-family: Montserrat-Regular; font-size: 14px; color: #F5F5F5;

screen shot 2015-02-16 at 12 50 56 screen shot 2015-02-16 at 12 51 31

/* This card is not valid: */ font-family: Montserrat-Regular; font-size: 14px; color: #E53527; margin-top: 60px;

screen shot 2015-02-16 at 12 51 12

/* all done: */ font-family: Montserrat-Light; font-size: 13px; color: #767075; line-height: 22px;

text width: 264px;

paragraph spacing: +6px;

mariacovasgrilo commented 9 years ago

screen shot 2015-04-26 at 22 29 35

Let's do this the way I designed :p I forgot to include the css attributes of this "back to cart" in the issue, but here they are:

/* BACK TO CART: */ font-family: Montserrat-Regular; font-size: 13px; color: #201D20; line-height: 18px; text-transform: uppercase;

mariacovasgrilo commented 9 years ago

also:

screen shot 2015-04-26 at 22 36 25

the button is not following the slick style of the rest of the page

/* PAY NOW: */ font-family: Montserrat-Regular; font-size: 14px; color: #F5F5F5; line-height: 18px;

/button / width: 165px; height: 30px;

To look like this: screen shot 2015-04-26 at 22 38 30