A Pen by Jose Santana on CodePen.
Created
September 20, 2020 10:35
-
-
Save TomGalla11/927629a854005a50e2d2168b5c4cc5e2 to your computer and use it in GitHub Desktop.
Checkout Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="checkout-panel"> | |
<div class="panel-body"> | |
<h2 class="title">Checkout</h2> | |
<div class="progress-bar"> | |
<div class="step active"></div> | |
<div class="step active"></div> | |
<div class="step"></div> | |
<div class="step"></div> | |
</div> | |
<div class="payment-method"> | |
<label for="card" class="method card"> | |
<div class="card-logos"> | |
<img src="https://designmodo.com/demo/checkout-panel/img/visa_logo.png"/> | |
<img src="https://designmodo.com/demo/checkout-panel/img/mastercard_logo.png"/> | |
</div> | |
<div class="radio-input"> | |
<input id="card" type="radio" name="payment"> | |
Pay 340.00 with credit card | |
</div> | |
</label> | |
<label for="paypal" class="method paypal"> | |
<img src="https://designmodo.com/demo/checkout-panel/img/paypal_logo.png"/> | |
<div class="radio-input"> | |
<input id="paypal" type="radio" name="payment"> | |
Pay 340.00 with PayPal | |
</div> | |
</label> | |
</div> | |
<div class="input-fields"> | |
<div class="column-1"> | |
<label for="cardholder">Cardholder's Name</label> | |
<input type="text" id="cardholder" /> | |
<div class="small-inputs"> | |
<div> | |
<label for="date">Valid thru</label> | |
<input type="text" id="date"/> | |
</div> | |
<div> | |
<label for="verification">CVV / CVC *</label> | |
<input type="password" id="verification"/> | |
</div> | |
</div> | |
</div> | |
<div class="column-2"> | |
<label for="cardnumber">Card Number</label> | |
<input type="password" id="cardnumber"/> | |
<span class="info">* CVV or CVC is the card security code, unique three digits number on the back of your card separate from its number.</span> | |
</div> | |
</div> | |
</div> | |
<div class="panel-footer"> | |
<button class="btn back-btn">Back</button> | |
<button class="btn next-btn">Next Step</button> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
// Radio box border | |
$('.method').on('click', function() { | |
$('.method').removeClass('blue-border'); | |
$(this).addClass('blue-border'); | |
}); | |
// Validation | |
var $cardInput = $('.input-fields input'); | |
$('.next-btn').on('click', function(e) { | |
$cardInput.removeClass('warning'); | |
$cardInput.each(function() { | |
var $this = $(this); | |
if (!$this.val()) { | |
$this.addClass('warning'); | |
} | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
box-sizing: border-box; | |
} | |
html, | |
body { | |
font-family: 'Montserrat', sans-serif; | |
display: flex; | |
margin: 0 auto; | |
background: #f4f4f4; | |
justify-content: center; | |
align-items: center; | |
} | |
.checkout-panel { | |
margin: 100px; | |
display: flex; | |
flex-direction: column; | |
width: 90%; | |
height: 740px; | |
background-color: rgb(255, 255, 255); | |
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2); | |
} | |
.panel-body { | |
padding: 45px 80px 0; | |
flex: 1; | |
} | |
.title { | |
font-weight: 700; | |
margin-top: 0; | |
margin-bottom: 40px; | |
color: #2e2e2e; | |
} | |
.progress-bar { | |
display: flex; | |
margin-bottom: 50px; | |
justify-content: space-between; | |
} | |
.step { | |
box-sizing: border-box; | |
position: relative; | |
z-index: 1; | |
display: block; | |
width: 25px; | |
height: 25px; | |
margin-bottom: 30px; | |
border: 4px solid #fff; | |
border-radius: 50%; | |
background-color: #efefef; | |
} | |
.step:after { | |
position: absolute; | |
z-index: -1; | |
top: 5px; | |
left: 22px; | |
width: 225px; | |
height: 6px; | |
content: ''; | |
background-color: #efefef; | |
} | |
.step:before { | |
color: #2e2e2e; | |
position: absolute; | |
top: 40px; | |
} | |
.step:last-child:after { | |
content: none; | |
} | |
.step.active { | |
background-color: #f62f5e; | |
} | |
.step.active:after { | |
background-color: #f62f5e; | |
} | |
.step.active:before { | |
color: #f62f5e; | |
} | |
.step.active + .step { | |
background-color: #f62f5e; | |
} | |
.step.active + .step:before { | |
color: #f62f5e; | |
} | |
.step:nth-child(1):before { | |
content: 'Delivery'; | |
} | |
.step:nth-child(2):before { | |
right: -40px; | |
content: 'Confirmation'; | |
} | |
.step:nth-child(3):before { | |
right: -30px; | |
content: 'Payment'; | |
} | |
.step:nth-child(4):before { | |
right: 0; | |
content: 'Finish'; | |
} | |
.payment-method { | |
display: flex; | |
margin-bottom: 60px; | |
justify-content: space-between; | |
} | |
.method { | |
display: flex; | |
flex-direction: column; | |
width: 382px; | |
height: 122px; | |
padding-top: 20px; | |
cursor: pointer; | |
border: 1px solid transparent; | |
border-radius: 2px; | |
background-color: rgb(249, 249, 249); | |
justify-content: center; | |
align-items: center; | |
} | |
.card-logos { | |
display: flex; | |
width: 150px; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.radio-input { | |
margin-top: 20px; | |
} | |
input[type='radio'] { | |
display: inline-block; | |
} | |
.input-fields { | |
display: flex; | |
justify-content: space-between; | |
} | |
.input-fields label { | |
display: block; | |
margin-bottom: 10px; | |
color: #b4b4b4; | |
} | |
.info { | |
font-size: 12px; | |
font-weight: 300; | |
display: block; | |
margin-top: 50px; | |
opacity: .5; | |
color: #2e2e2e; | |
} | |
div[class*='column'] { | |
width: 382px; | |
} | |
input[type='text'], | |
input[type='password'] { | |
font-size: 16px; | |
width: 100%; | |
height: 50px; | |
padding-right: 40px; | |
padding-left: 16px; | |
color: rgba(46, 46, 46, .8); | |
border: 1px solid rgb(225, 225, 225); | |
border-radius: 4px; | |
outline: none; | |
} | |
input[type='text']:focus, | |
input[type='password']:focus { | |
border-color: rgb(119, 219, 119); | |
} | |
#date { background: url(img/icons_calendar_black.png) no-repeat 95%; } | |
#cardholder { background: url(img/icons_person_black.png) no-repeat 95%; } | |
#cardnumber { background: url(img/icons_card_black.png) no-repeat 95%; } | |
#verification { background: url(img/icons_lock_black.png) no-repeat 95%; } | |
.small-inputs { | |
display: flex; | |
margin-top: 20px; | |
justify-content: space-between; | |
} | |
.small-inputs div { | |
width: 182px; | |
} | |
.panel-footer { | |
display: flex; | |
width: 100%; | |
height: 96px; | |
padding: 0 80px; | |
background-color: rgb(239, 239, 239); | |
justify-content: space-between; | |
align-items: center; | |
} | |
.btn { | |
font-size: 16px; | |
width: 163px; | |
height: 48px; | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
letter-spacing: 1px; | |
border: none; | |
border-radius: 23px; | |
} | |
.back-btn { | |
color: #f62f5e; | |
background: #fff; | |
} | |
.next-btn { | |
color: #fff; | |
background: #f62f5e; | |
} | |
.btn:focus { | |
outline: none; | |
} | |
.btn:hover { | |
transform: scale(1.1); | |
} | |
.blue-border { | |
border: 1px solid rgb(110, 178, 251); | |
} | |
.warning { | |
border-color: #f62f5e; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment