<!-- Font Awesome -->
<script src="https://use.fontawesome.com/2d1c7583b1.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="container">
<header>
<div id="menu"><img src="https://thinsoldier.com/wip/nike-grid/images/icon-menu.svg" alt="Menu"></div>
<div id="logo"><img src="https://thinsoldier.com/wip/nike-grid/images/nike_logo.png" alt="Nike Logo"></div>
<div id="cart"><p>1 item <i class="fa fa-shopping-cart" aria-hidden="true"></i></p></div>
</header>
<section class="content">
<article id="checkoutNav" class="shadow">
<ul>
<li>
<p>01</p>
<i class="fa fa-truck" aria-hidden="true"></i>
<p>Shipping</p>
</li>
<li class="active">
<p>02</p>
<i class="fa fa-credit-card" aria-hidden="true"></i>
<p>Payment</p>
</li>
<li>
<p>03</p>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<p>Success</p>
</li>
</ul>
</article>
<article id="product" class="shadow"><img src="https://thinsoldier.com/wip/nike-grid/images/lunar2_full.jpg" alt="Lunar 2"></article>
<h1>Flyknit Lunar 2</h1>
<article id="checkoutCard" class="shadow">
<div id="details">
<dl class="">
<dt>Product</dt>
<dd> <img id="thumbnail" src="http://thinsoldier.com/wip/nike-grid/images/nike_luna_thumbnail.png" alt="Lunar 2"></dd>
<dt>Quantity</dt>
<dd> <input type="number" value="1"> </dd>
<dt>Price</dt>
<dd> $69.99 </dd>
</dl>
</div>
<form action="">
<div id="cards">
<ul>
<li><label for="" name="Card Type">Card Type</label></li>
<li><i class="fa fa-cc-visa" aria-hidden="true"></i></li>
<li><i class="fa fa-cc-paypal" aria-hidden="true"></i></li>
<li><i class="fa fa-cc-amex" aria-hidden="true"></i></li>
<li><i class="fa fa-cc-mastercard" aria-hidden="true"></i></li>
</ul>
</div>
<div id="cardNumber">
<label for="">Card number</label>
<input type="number" placeholder="XXXX">
<input type="number" placeholder="XXXX">
<input type="number" placeholder="XXXX">
<input type="number" placeholder="XXXX">
</div>
<div id="securityInfo">
<label for="">Start date</label>
<label for="">Expiry date</label>
<label for="">Cvv</label>
<input type="text" placeholder="MM/YY">
<input type="text" placeholder="MM/YY">
<input type="number" placeholder="XXX">
</div>
<input type="submit" value="Check out" id="btnSubmit">
</form>
</article>
</section>
<footer><a href="https://edwardfury.com/nikelunar2">Photographer: Edward Fury</a><a href="https://dribbble.com/shots/2469246-Credit-Card-Checkout-Daily-UI-002" target="_blank">Designer: Nathan Riley</a><a href="https://rayhatron.github.io" target="_blank">Web developers: Rayhatron & thinsoldier</a> </footer>
</section>
</body>
</html>@import url('https://fonts.googleapis.com/css?family=Roboto');
/* * { box-sizing: border-box; } */
html, body{
margin: 0;
}
body{
background: #CA136B;
font-family: 'Roboto', sans-serif;
}
.container{
}
header{
display: flex;
justify-content: space-between;
padding: 20px;
margin-bottom: 20px;
}
header div{
width: 100px;
height: 40px;
overflow: visible;
}
.shadow{
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(0, 0, 0, 0.3);
}
#menu{
min-width: 50px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #E22E8C;
}
#logo {
align-self: flex-end;
}
#logo img{
width: 100%;
height: auto;
}
#cart{
width: 150px;
min-width: 100px;
background: #E22E8C;
border-radius: 10px;
text-transform: uppercase;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.content{
display: grid;
grid-template-rows: [a] 93px [b] 109px [c] auto [d];
grid-template-columns: [a] 45px [b] minmax(300px,950px) [c] 50px [d] 350px [e];
}
.content h1{
color: #fff;
text-transform: uppercase;
font-size: 32px;
text-align: center;
margin: 0;
grid-row: b;
grid-column: d;
}
label{
text-transform: uppercase;
font-size: 16px;
color: #336AC9;
font-weight: bold;
}
input{
color: #CA136B;
border: 1px solid rgb(226, 225, 232);
border-radius: 5px;
text-align: center;
padding: 5px 0 5px 12px;
width: 60px;
height: 25px;
}
#checkoutNav{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 400px;
background: #336AC9;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
grid-row: c;
z-index: 2;
}
#checkoutNav ul{
color: #D5D2DD;
list-style: none;
padding: 0;
text-align: center;
font-size: 18px;
text-transform: uppercase;
grid-row: b / -1;
}
#checkoutNav ul i.fa {
font-size: 25px;
}
.active{
color: #FBFBFB;
}
#product{
max-width: 1000px;
max-height: 752px;
border-radius: 10px;
overflow: hidden;
grid-row: a / -1;
grid-column: b / d;
}
#product img{
object-fit: cover;
display: block;
max-width: 100%;
height: 100%;
}
#checkoutCard{
max-width: 400px;
background: #FBFBFB;
border-radius: 10px;
grid-row: c;
grid-column: c / e;
align-self: start;
}
#details{
padding: 10px;
background: linear-gradient(#FBFBFB 40%, #D5D2DD 100%);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#details dl {
margin:0;
display: grid;
grid-template-columns: repeat( 3, 1fr );
grid-template-rows: 60px auto;
justify-items: center;
align-items: center;
margin-bottom: 20px;
}
#details dt {
color: #D5D2DD;
text-transform: uppercase;
font-size: 18px;
grid-row: 1;
}
#details dd {
color: #336AC9;
margin:0;
}
#checkoutCard ul{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
font-size: 18px;
}
#checkoutCard ul li input{
width: 30px;
height: 30px;
margin-left: 70px;
color: #336AC9;
}
#thumbnail{
width: 175px;
height: auto;
}
form {
padding-top: 1em;
}
form > * {
padding: 0 0.8em;
margin-bottom: 1.5em;
}
form > :last-child {
margin:0;
}
#checkoutCard form #cards{
display: flex;
flex-wrap: wrap;
align-items: center;
}
#checkoutCard form #cards ul{
margin: 0;
padding: 0;
width: 100%;
}
#cards i.fa {
font-size: 40px;
color: #D5D2DD;
}
#cards i.fa.fa-cc-visa {
color: #CA136B;
}
#cards label{
}
#cardNumber{
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 10px;
}
#cardNumber label{
grid-column: 1 / -1;
}
#cardNumber input{
padding: 0;
/*
the following are required to fix what
seems to be buggy behaviour between inputs
and css grid in firefox.
The width and min-width are especially important.
If the elements were spans instead of inputs this wouldn't be necessary.
*/
width: auto;
height: auto;
min-width: 60px;
min-height: 35px;
}
#securityInfo {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
}
#securityInfo input {
padding: 0;
width: auto;
height: auto;
min-width: 60px;
min-height: 35px;
}
#btnSubmit{
text-align: center;
width: 100%;
border: none;
height: 50px;
text-transform: uppercase;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #336AC9;
color: #FBFBFB;
font-size: 20px;
}
footer{
text-align: center;
padding: 10px;
color: #FBFBFB;
}
footer a{
color: #FBFBFB;
padding: 0 20px;
text-decoration: none;
}
footer a:hover{
color: #336AC9;
}
@media screen and ( max-width: 746px )
{
.content {
display: block;
}
.content h1 {
margin: 1em;
}
#checkoutNav {
width: auto;
height: auto;
margin: 0 0 1em 0;
border-radius: 0;
display: block;
}
#checkoutNav ul {
display: flex;
justify-content: space-around;
min-width: 50%;
margin:0;
}
#checkoutCard {
margin: auto;
}
footer {
display: flex;
flex-direction: column;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.