<section>
<nav>
<ul class="nav">
<li class="nav-logo">
UI # 2
</li>
</ul>
</nav>
<div class="checkout">
<div class="checkout-image">
<img src="https://secure-images.nike.com/is/image/DotCom/848625_401_98_PREM?$SNKRS_COVER_WT$&align=0,1" alt="airmax-shoe" />
<label class="checkout-image-title">Nike Air Max</label>
<label class="checkout-image-price">
£120.00
</label>
</div>
<form class="checkout-form" id="checkout">
<label for="card">Card number</label>
<input id="card" type="text" maxlength="16 "autofocus required/>
<label for="expiry">MM / YY</label>
<input type="text" maxlength="4" required/>
<label for="cvc">CVC</label>
<input type="text" maxlength="3" required/>
<button class="checkout-button">Pay now</button>
</form>
</div>
</section>
body {
display: flex;
justify-content: center;
background-color: #673AB7;
height: 100vh;
color: white;
}
.nav {
font-family: 'Pacifico', cursive;
font-size: 1.5em;
letter-spacing: 0.05em;
text-align: center;
list-style: none;
padding: 20px 0;
margin: 0;
}
.checkout {
font-family: 'Roboto', sans-serif;
width: 300px;
min-height: 570px;
background-color: white;
position: relative;
border-radius: 0.5em;
&-image {
max-height: 250px;
max-width: 300px;
overflow: hidden;
img {
height: auto;
width: 100%;
transform: translateY(-80px);
}
&-title {
color: #777;
position: absolute;
top: 1em;
right: 1em;
}
&-price {
color: #444;
position: absolute;
top: 2.5em;
right: 1em;
font-weight: 600;
}
}
&-form {
display: flex;
flex-direction: column;
max-width: 90%;
max-height: 50%;
justify-content: center;
align-items: center;
padding: 1.25em 1.5em 0 1.5em;
label {
font-size: .8em;
color: #aaa;
display: block;
width: 100%;
margin-top: 1em;
}
input {
width: 100%;
height: 2em;
margin-top: .65em;
font-size: 1em;
border: none;
border-bottom: 1px solid #ccc;
&:focus, :active {
outline: 0;
border-bottom: 1px solid #03A9F4;
}
}
}
&-button {
width: 100%;
background-color: #03A9F4;
color: white;
border: none;
padding: 24px;
position: absolute;
bottom: 0;
text-transform: uppercase;
font-size: .75em;
transition: .4s;
&:active, &:focus, &:hover {
outline: 0;
background-color: darken(#03A9F4, 15%)
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.