.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

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
  2. https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.