.screen
.illustration
h3 Checkout
img(src="https://ouch-cdn2.icons8.com/sMdnu9KC_CDyuEfohi0P8HR0outXXYZ4xKn7uaNJ7Hw/rs:fit:1511:912/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNzky/LzJmNTAwYjU1LTc4/M2MtNGYyMy1iZmVm/LTNhMDg0NWFkNTVj/Yi5zdmc.png", alt="Credit Card")
.checkout
form#form
.name
label(for="name") Cardholder Name
input#name(type="text")
.num
label(for="card_num") Card Number
input#card_num(type="tel" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}")
.sec
.date
label(for="date") Exp Date
input#date(type="date")
.cvc
label(for="cvc") CVC
input#cvc(type="password")
.button
button Check out ›
View Compiled
body {
display: grid;
place-content: center;
height: 100vh;
background: #ffdcef;
font-family: 'Roboto';
}
.screen {
margin: auto;
padding: 0 1em 1em 1em;
background: #fff;
display: grid;
grid-template-rows: repeat(2, 1fr);
border-radius: 1em;
.illustration {
display: grid;
justify-items: center;
align-content: center;
padding: 0 1em 1em 1em;
img { width: 20em }
h3 {
padding: .8em;
background: #440A67;
color: #fff;
border-radius: .5em;
font-weight: 900;
}
}
.checkout {
padding: 1em;
form {
display: grid;
grid-gap: 2em;
div {
display: grid;
grid-gap: .2em;
}
@mixin input($bg) {
border: .1em solid $bg;
background: transparent;
border-radius: .3em;
box-shadow: 0 .0 .25em rgba($bg, .5);
padding: .4em;
outline: none;
color: $bg;
}
label[for=name] { color: #93329E; }
input[type=text] { @include input(#93329E) }
label[for=card_num] { color: #440A67 }
input[type=tel] { @include input(#440A67) }
label[for=date] { color: #B4AEE8; }
input[type=date] {
@include input(#B4AEE8);
&::-webkit-datetime-edit { color: #B4AEE8; }
}
label[for=cvc] { color: #93329E; }
input[type=password] { @include input(#93329E) }
.sec {
display: grid;
grid-template-columns: repeat(2, .5fr);
grid-gap: .5em;
}
label { font-weight: 700; }
}
.button {
display: grid;
justify-items: center;
align-content: center;
place-content: center;
padding: 1em;
padding-top: 2em;
button {
background: #440A67;
color: #FFE3FE;
border: none;
padding: 0.8em;
border-radius: 0.3em;
font-weight: 700;
}
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.