Para cualquiera que tenga un negocio en línea, el pago se convierte en una parte importante del proceso de venta para mantener la comodidad de las ventas en línea y las transacciones rápidas. Una interfaz de usuario (UI) atractiva nos ayudará a atraer visitantes potenciales y facilitará la experiencia del usuario.
En este artículo, crearemos una página de pago para realizar transacciones. El proyecto simple es un ejemplo perfecto de cuán fácilmente podemos hacer un diseño de interfaz de usuario usando HTML y CSS.
Creación de una estructura para nuestra página web: Comenzaremos con la creación de un aspecto estructural de nuestro sitio web mediante el uso de HTML simple y, más adelante, le daremos estilo mediante el uso de hojas de estilo en cascada (CSS), que describirán el estilo de nuestro documento HTML y sus elementos.
Código HTML: en este archivo HTML hemos dividido principalmente nuestra página web en varias etiquetas <div>, y también hemos usado varias clases como «contenido principal», «contenido central», «último contenido», etc. Este CSS Las clases son para estilizar nuestros elementos HTML.
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>
Diseñando nuestra página de pago: Usando CSS, podemos almacenar toda la información de estilo que compartiría nuestra página. Cada vez que un usuario visite la página web, el navegador cargará toda la información relacionada junto con el estilo adecuado relacionado con el contenido de la página. En CSS, una clase es un grupo de elementos iguales o similares. Puedes tener los elementos que quieras en una clase. Y cada elemento puede ser miembro de varias clases. Cada clase tiene atributos CSS (como color y tamaño de fuente) que son específicos de esa clase.
Código CSS: CSS nos permite crear sitios web únicos e interactivos.
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);
}
Código final: combine las dos secciones anteriores y obtendrá la representación final de nuestra página de pago en línea.
Producción:
