Checkout credit card page using HTML, CSS and JavaScript

Welcome to Coding Torque! Are you ready to take your coding skills to the next level? Today, we are going to create a Checkout Credit Card Page that is sure to impress. With HTML, CSS and JavaScript, you will be able to create a page that is both visually appealing and functional. So let’s get started and see what we can create!

Before we start, here are some JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Credit Card Checkout Page - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <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>


    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<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="1234 1234 1234 1234">
            </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>

Output Till Now

CSS Code

Create a file style.css and paste the code below.

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: #f1f1f1;
  color: #2b2f31;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  min-height: 100%;
  padding: 5vw 0;
}

.align {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.align__item--start {
  align-self: flex-start;
}

.align__item--end {
  align-self: flex-end;
}

.text--center {
  text-align: center;
}

.card {
  background-color: #171a1c;
  border-radius: 1rem;
  color: #bebec4;
  padding: 2rem;
}

.card__header {
  margin-bottom: 4rem;
}

.card__header:before,
.card__header:after {
  content: " ";
  display: table;
}

.card__header:after {
  clear: both;
}

.card__title {
  color: #fff;
  float: left;
  font-size: 1.5rem;
}

.card__logo {
  float: right;
}

.card__number__input {
  font-size: 2rem;
}

.card__expiration {
  float: left;
}

.card__ccv {
  float: right;
}

.card__ccv__input {
  width: 1.75rem;
}

.card .ui-selectmenu-button {
  float: left;
  margin-right: 2rem;
}
input {
  background-color: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  width: auto;
}

input::placeholder {
  color: #fff;
}

label {
  display: block;
}

.form:before,
.form:after {
  content: " ";
  display: table;
}

.form:after {
  clear: both;
}

.form__field {
  margin-bottom: 1.5rem;
}
.form input {
  outline: 0;
}
.form input[type="email"],
.form input[type="password"] {
  width: 100%;
}
.grid {
  margin: 0 auto;
  max-width: 36rem;
  width: 90%;
}
h1,
h2,
h3 {
  margin: 0 0 0.5rem;
}

svg {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

a {
  color: #171a1c;
}

.ui-selectmenu-menu {
  display: none;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  z-index: 999;
}

.ui-selectmenu-menu li {
  background-color: #171a1c;
  color: #fff;
  padding: 0.25rem 1rem;
  cursor: pointer;
}

.ui-selectmenu-menu li.ui-state-focus {
  background-color: #47474e;
}

.ui-selectmenu-menu .ui-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow: auto;
}

.ui-selectmenu-open {
  display: block;
}

.ui-selectmenu-button {
  color: #fff;
  cursor: pointer;
  outline: 0;
}

.ui-selectmenu-button.ui-corner-top .ui-icon-triangle-1-s {
  transform: rotate(-180deg);
}

.ui-selectmenu-button .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 0.3s;
  width: 14px;
}

Output Till Now

JavaScript Code

Create a file script.js and paste the code below.

(function ($) {
    'use strict';

    // Selectmenu
    $('select').selectmenu();

}(jQuery));

Written by: Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖

HTML Code

Starter Template

Paste the below code in your <body> tag.

Output Till Now

CSS Code

Output Till Now

JavaScript Code

Related Posts

Paste the below code in your `<body>` tag.