Skip to content
No results
  • Home
  • HTML & CSS
    • Card Designs
    • Navbars
    • Login Forms
  • JavaScript
    • JavaScript Games
    • API Projects
  • Web Development
    • Frontend
    • Backend
  • Cheatsheets
  • Home
  • About us
  • Contact Us
  • Privacy Policy
Twitter Instagram Telegram Pinterest
Coding Torque

Learn by projectsšŸš€

  • Home
  • HTML & CSS
    • Card Designs
    • Navbars
    • Login Forms
  • JavaScript
    • JavaScript Games
    • API Projects
  • Web Development
    • Frontend
    • Backend
  • Cheatsheets
Coding Torque

Learn by projectsšŸš€

Checkout credit card page using HTML, CSS and JavaScript

Checkout credit card page using HTML, CSS and JavaScript

  • Piyush PatilPiyush Patil
  • March 1, 2023
  • HTML & CSS, JavaScript, Login Forms, Web Development
Share your love
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

Checkout credit card page using HTML, CSS and JavaScript

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šŸ’–
Share your love
Step by step form validation using HTML, CSS and JavaScript
Previous Post Step by step form validation using HTML, CSS and JavaScript
Next Post Cards with reflection effect using HTML and CSS
cards with reflection effect using html and css
Recent Posts
  • How To Perform CRUD Operations in MongoDB

    How To Perform CRUD Operations in MongoDB

    April 1, 2023
  • Virtual Credit Card Design using HTML & CSS

    Virtual Credit Card Design using HTML & CSS

    March 29, 2023
  • CSS Glassmorphism Cards with Hover Effects

    CSS Glassmorphism Cards with Hover Effects

    March 28, 2023
  • Travel Service Cards with Rotation Effect using HTML & CSS

    Travel Service Cards with Rotation Effect using HTML & CSS

    March 27, 2023
  • Responsive Glittery Credit Card using HTML and CSS

    Responsive Glittery Credit Card using HTML and CSS

    March 26, 2023
Categories
Advance Algorithms API Projects App Development Backend Beginner Blockchain Development Bootstrap Card Designs Cheatsheets Coding Express JS Frontend HTML & CSS Intermediate JavaScript JavaScript Games Login Forms MongoDB Navbars Node JS Products Programming React Reel SCSS TailwindCSS Web Design Web Development

Related Posts

how to perform CRUD Operations on MongoDB

How To Perform CRUD Operations in MongoDB

  • April 1, 2023
Virtual Credit Card Design using HTML & CSS

Virtual Credit Card Design using HTML & CSS

  • March 29, 2023
CSS Glassmorphism Cards with Hover Effects

CSS Glassmorphism Cards with Hover Effects

  • March 28, 2023
About Us

Coding Torque is a platform where we share amazing projects related Web development, App development, Software development, etc with Source Code.

Important Links
  • About us
  • Contact Us
  • Privacy Policy
Categories
Advance Algorithms API Projects App Development Backend Beginner Blockchain Development Bootstrap Card Designs Cheatsheets Coding Express JS Frontend HTML & CSS Intermediate JavaScript JavaScript Games Login Forms MongoDB Navbars Node JS Products Programming React Reel SCSS TailwindCSS Web Design Web Development

Copyright Ā© 2023 - Coding Torque | Design by Piyush Patil

Twitter Instagram Telegram Pinterest