Hoy en día, todos los sitios web contienen tablas de precios, como comercio electrónico, tecnología electrónica e incluso los sitios web de turismo también tienen tablas de precios, ya que contienen sus planes, el costo de los planes e información sobre los planes para comprar nuevas instalaciones. Entonces, la tabla de precios es una de las partes más importantes de los sitios web que venden algo. En este artículo, estamos creando una hermosa tabla de precios con la ayuda de código HTML y CSS puro. Esta codificación incluye dos archivos, uno para el código HTML guardado con la extensión .html y otro para el código CSS guardado con la extensión .css.
Enfoque: Primero crearemos la estructura básica de la tabla de precios usando etiquetas HTML y luego aplicaremos algunas propiedades CSS para hacerla más atractiva.
Código HTML:
HTML
<!DOCTYPE html> <html> <head> <title> Pricing Table using HTML and CSS </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h2>Select Your Plan</h2> <div class="price-row"> <div class="price-col"> <p>Basic</p> <h3>500 Rs <span>/month</span></h3> <ul> <li>C programming basic</li> <li>Variables in c</li> <li>Function in c</li> <li>Basic programs in c</li> </ul> <button>Buy Now</button> </div> <div class="price-col"> <p>Standard</p> <h3>1000 Rs <span>/month</span></h3> <ul> <li>Algorithms in c</li> <li>Data structures in c</li> <li>Medium+hard level programs</li> <li>High quality study material</li> </ul> <button>Buy Now</button> </div> <div class="price-col"> <p>Premium</p> <h3>1200 Rs <span>/month</span></h3> <ul> <li>C programming basic</li> <li>Algorithms in c</li> <li>Data structures in c</li> <li>All level programs</li> </ul> <button>Buy Now</button> </div> </div> </div> </body> </html>
Código CSS:
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
.container{
width: 100%;
min-height: 100vh;
background: #90EE90;
}
.container h2{
color: #000000;
font-size:32px;
padding:50px 0;
text-align: center;
}
.price-row{
width: 90%;
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 25px;
}
.price-col{
background: #006400;
padding: 10% 15%;
border-radius: 10px;
color: #fff;
text-align: center;
}
.price-col p{
font-size: 22px;
}
.price-col h3{
font-size: 44px;
margin: 20px 0 40px;
font-weight: 500;
}
.price-col h3 span{
font-size: 16px;
}
.price-col ul{
text-align: left;
margin: 20px 0;
color: #ddd;
}
.price-col ul li{
margin: 15px 0;
size: 20px;
}
.price-col button{
width: 100%;
padding: 14px 0;
background: transparent;
color: #fff;
font-size: 15px;
border: 1px solid #fff;
border-radius: 6px;
cursor: pointer;
transition: background 0.5s;
}
.price-col button:hover{
background: #008000;
}
Producción:
Publicación traducida automáticamente
Artículo escrito por akshaybotre203 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA