<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daily UI | #002 - Credit Card Checkout</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Abel">
</head>
<body class="align">
<div class="grid align__item">
<h2>Enter your payment information below</h2>
<div class="card">
<header class="card__header">
<h3 class="card__title">Payment Details</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="card__logo" width="140" height="43" viewBox="0 0 175.7 53.9"><style>.visa{fill:#fff;}</style><path class="visa" d="M61.9 53.1l8.9-52.2h14.2l-8.9 52.2zm65.8-50.9c-2.8-1.1-7.2-2.2-12.7-2.2-14.1 0-24 7.1-24 17.2-.1 7.5 7.1 11.7 12.5 14.2 5.5 2.6 7.4 4.2 7.4 6.5 0 3.5-4.4 5.1-8.5 5.1-5.7 0-8.7-.8-13.4-2.7l-2-.9-2 11.7c3.3 1.5 9.5 2.7 15.9 2.8 15 0 24.7-7 24.8-17.8.1-5.9-3.7-10.5-11.9-14.2-5-2.4-8-4-8-6.5 0-2.2 2.6-4.5 8.1-4.5 4.7-.1 8 .9 10.6 2l1.3.6 1.9-11.3M164.2 1h-11c-3.4 0-6 .9-7.5 4.3l-21.1 47.8h14.9s2.4-6.4 3-7.8h18.2c.4 1.8 1.7 7.8 1.7 7.8h13.2l-11.4-52.1m-17.5 33.6c1.2-3 5.7-14.6 5.7-14.6-.1.1 1.2-3 1.9-5l1 4.5s2.7 12.5 3.3 15.1h-11.9zm-96.7-33.7l-14 35.6-1.5-7.2c-2.5-8.3-10.6-17.4-19.6-21.9l12.7 45.7h15.1l22.4-52.2h-15.1"/><path fill="#F7A600" d="M23.1.9h-22.9l-.2 1.1c17.9 4.3 29.7 14.8 34.6 27.3l-5-24c-.9-3.3-3.4-4.3-6.5-4.4"/></svg>
</header>
<form action="" method="post" class="form">
<div class="card__number form__field">
<label for="card__number" class="card__number__label">Card Number</label>
<input type="text" id="card__number" class="card__number__input" placeholder="4000 1234 5678 9010">
</div>
<div class="card__expiration form__field">
<label for="card__expiration__year">Expiration</label>
<select name="" id="card__expiration__year">
<option value="january">January</option>
<option value="februrary">Februrary</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<select name="" id="">
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
<div class="card__ccv form__field">
<label for="">CCV</label>
<input type="text" class="card__ccv__input" placeholder="583">
</div>
</form>
</div>
<p class="text--center"><a href="#">change</a> payment method</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</body>
</html>
@mixin clearfix() {
&:before,
&:after {
content: ' ';
display: table;
}
&:after {
clear: both;
}
}
$base-bgcolor: #f1f1f1;
$base-color: #171a1c;
$base-font-weight: 300;
$base-font-size: 1rem;
$base-line-height: 1.5;
$base-font-family: Source Sans Pro;
$base-font-family-fallback: sans-serif;
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background-color: $base-bgcolor;
color: $base-color;
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family, $base-font-family-fallback;
margin: 0;
min-height: 100%;
padding: 5vw 0;
}
.align {
align-items: center;
display: flex;
flex-direction: row;
&__item {
&--start {
align-self: flex-start;
}
&--end {
align-self: flex-end;
}
}
}
.text {
&--center {
text-align: center;
}
}
$card-bgcolor: #171a1c;
$card-border-radius: 1rem;
$card-color: #47474e;
$card-padding: 2rem;
.card {
background-color: $card-bgcolor;
border-radius: $card-border-radius;
color: $card-color;
padding: $card-padding;
font-family: Abel;
&__header {
@include clearfix();
margin-bottom: 4rem;
}
&__title {
color: #fff;
float: left;
font-size: 1.5rem;
}
&__logo {
float: right;
}
&__number {
&__input {
font-size: 2rem;
}
}
&__expiration {
float: left;
}
&__ccv {
float: right;
&__input {
width: 1.75rem;
}
}
.ui-selectmenu-button {
float: left;
margin-right: 2rem;
}
}
$input-color: #fff;
input {
background-color: transparent;
border: 0;
color: $input-color;
font: inherit;
width: auto;
&::placeholder {
color: $input-color;
}
}
label {
display: block;
}
.form {
@include clearfix();
&__field {
margin-bottom: 1.5rem;
}
input {
outline: 0;
&[type="email"],
&[type="password"] {
width: 100%;
}
}
}
$grid-max-width: 36rem;
$grid-width: 90%;
.grid {
margin: 0 auto;
max-width: $grid-max-width;
width: $grid-width;
}
h1,
h2,
h3 {
margin: 0 0 .5rem;
}
svg {
height: auto;
max-width: 100%;
vertical-align: middle;
}
$link-color: #171a1c;
a {
color: $link-color
}
.ui-selectmenu {
&-menu {
display: none;
font-family: Abel;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
z-index: 999;
li {
background-color: #171a1c;
color: #fff;
padding: .25rem 1rem;
cursor: pointer;
&.ui-state-focus {
background-color: #47474e;
}
}
.ui-menu {
list-style: none;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow: auto;
}
}
&-open {
display: block;
}
&-button {
color: #fff;
cursor: pointer;
outline: 0;
&.ui-corner-top {
.ui-icon-triangle-1-s {
transform: rotate(-180deg);
}
}
.ui-icon-triangle-1-s {
background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-254 408.9 42 24" fill="#47474e"><path d="M-212 411.9c0-1.7-1.3-3-3-3-.8 0-1.5.3-2.1.8l-15.9 15.9-15.7-15.7c-.5-.6-1.4-1-2.3-1-1.7 0-3 1.3-3 3 0 .8.3 1.5.8 2.1l18 18c.5.6 1.3.9 2.2.9.8 0 1.6-.4 2.2-.9l18-18c.5-.6.8-1.3.8-2.1z"/></svg>') 50% / 14px no-repeat;
float: right;
height: 14px;
margin-top: 5px;
transform-origin: 50%;
transition: transform .3s;
width: 14px;
}
}
}
View Compiled
(function($) {
'use strict';
// Selectmenu
$('select').selectmenu();
}(jQuery));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.