Skip to content
Related Articles

Related Articles

Improve Article

Create an Online Payment UI design using HTML/CSS

  • Last Updated : 31 Mar, 2021

For anyone who is running an online business, checkout becomes an important part of the selling process to maintain the convenience for online sales and Fast transactions. An appealing User-Interface(UI) will help us in bringing in potential visitors and facilitates the user experience.

In this article, we will be creating a payment page for transaction purposes. The simple project is a perfect example of how easily we can make a User Interface design using HTML and CSS.

Creating Structure for our web-page: We will be starting out with creating a structural aspect of our website by using simple HTML, and later on, we will style it by using Cascading Style Sheets(CSS), which will be describing the style of our HTML document and its elements.

HTML Code: In this HTML file we have mainly divided our webpage into several <div> tags, and we have use several classes as well like “main-content”, “centre-content”, “last-content” etc. This CSS classes are to stylize our HTML elements.

HTML






<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,
               initial-scale=1.0"/>
    <link rel="stylesheet" href="style.css" 
          class="css" />
  </head>
  <body>
    <div class="container">
      <div class="main-content">
        <p class="text">GeeksforGeeks</p>
      </div>
  
      <div class="centre-content">
        <h1 class="price">2499<span>/-</span></h1>
        <p class="course">
           Buy DSA Self-Paced Course Now !
        </p>
      </div>
  
      <div class="last-content">
        <button type="button" class="pay-now-btn">
           Apply Coupons
        </button>
        <button type="button" class="pay-now-btn">
           Pay with Netbanking
        </button>
  
        <!-- <button type="button" class="pay-now-btn">
        Netbanking options
        </button> -->
      </div>
  
      <div class="card-details">
        <p>Pay using Credit or Debit card</p>
  
        <div class="card-number">
          <label> Card Number </label>
          <input
            type="text"
            class="card-number-field"
            placeholder="###-###-###"/>
        </div>
        <br />
        <div class="date-number">
          <label> Expiry Date </label>
          <input type="text" class="date-number-field" 
                 placeholder="DD-MM-YY" />
        </div>
  
        <div class="cvv-number">
          <label> CVV number </label>
          <input type="text" class="cvv-number-field" 
                 placeholder="xxx" />
        </div>
        <div class="nameholder-number">
          <label> Card Holder name </label>
          <input
            type="text"
            class="card-name-field"
            placeholder="Enter your Name"/>
        </div>
        <button type="submit" 
                class="submit-now-btn">
          submit
        </button>
      </div>
    </div>
  </body>
</html>

Designing Our Payment Page: Using CSS, we can store all the style information that our page would share. Whenever a user will visit the web page, the browser will load all the related information along with the proper styling related to the contents of the page. In CSS, a class is an element group that is the same or similar. You can have the elements that you want in a class. And each element can be a member of multiple classes. Every class has CSS attributes (like color and font-size) that are specific to that class.

CSS Code: CSS allows us to create unique and interactive websites.

style.css




* {
  margin: 0;
  padding: 0;
}
  
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
}
  
.container {
  height: 900px;
  width: 400px;
  background-image: linear-gradient(#1e6b30, #308d46);
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  position: absolute;
  border-bottom-left-radius: 180px;
  border-top-right-radius: 150px;
}
  
.main-content {
  height: 235px;
  background-color: #1b9236;
  border-bottom-left-radius: 90px;
  border-bottom-right-radius: 80px;
  border-top: #1e6b30;
}
  
.text {
  text-align: center;
  font-size: 300%;
  text-decoration: aliceblue;
  color: aliceblue;
}
  
.course {
  color: black;
  font-size: 25px;
  font-weight: bolder;
}
  
.centre-content {
  height: 180px;
  margin: -70px 30px 20px;
  color: aliceblue;
  text-align: center;
  font-size: 20px;
  border-radius: 25px;
  padding-top: 0.5px;
  background-image: linear-gradient(#1e6b30, #308d46);
}
  
.centre-content-h1 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-weight: normal;
}
  
.price {
  font-size: 60px;
  margin-left: 5px;
  bottom: 15px;
  position: relative;
}
  
.pay-now-btn {
  cursor: pointer;
  color: #fff;
  height: 50px;
  width: 290px;
  border: none;
  margin: 5px 30px;
  background-color: rgb(71, 177, 61);
  position: relative;
}
  
.card-details {
  background: rgb(8, 49, 14);
  color: rgb(225, 223, 233);
  margin: 10px 30px;
  padding: 10px;
  /* border-bottom-left-radius: 80px; */
}
  
.card-details p {
  font-size: 15px;
}
  
.card-details label {
  font-size: 15px;
  line-height: 35px;
}
  
.submit-now-btn {
  cursor: pointer;
  color: #fff;
  height: 30px;
  width: 240px;
  border: none;
  margin: 5px 30px;
  background-color: rgb(71, 177, 61);
}

Final Code: Combine above two section, will give you final representation of our online payment page.

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :