En esta ocación les traigo un Un cuadro con diseño util si se deea crear una web de aplicaciones o para darle un toque distintivo a tu web ;)
Hola en esta ocación les traigo unas tarjetas si podria decirse con un diseño algo particular, algo vistoso para los visitantes que deseguro lo habran visto por uno que otro blog u video quizas, más para los que no conocian de el, aqui os dejo los pasos de instalación y uso. ;)
Un consejo, para evitar estar buscando linea por linea cualquier texto o codigo que se mencione en el post solo presione Crtl + f y aparecera un campo en la parte superior izquierda del editor html de su plantilla. Donde podra escribir o pegar la palabra que desee buscar para luego darle "Enter" y listo!
Vaya a blogger > temas > editar html, copia el css y a continuación péguelo encima del código ]]></b:skin> o antes del anterior</style>
/* material design box */
.box{background-color:#fff;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)}
.box h2 {background-color:#02d07a;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase}
.box.box-yellow h2{background:#e2c601}
.box.box-blue h2{background:#2ad2c9}
.box.box-red h2{background:#f7176a}
/* table detail */
table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background-color:transparent}
table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}
table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0}
table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}
table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)}
.table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}
/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .box{background-color:#2d2d30;color:#fefefe;}
.darkMode .box table,.darkMode .box table td,.darkMode .box{border-color:rgba(255,255,255,.15);color:#fefefe}
Una vez hecho lo anterior.... a ¡Probar lo que hicimos!
Acontinuación debabajo de cada tarjeta estaran los el codigo el cual tendra pegar en la entrada donde desee que aparesca.
Para usar los siguientes colores debemos buscar class="box" y reemplazarlo por:
Description
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egetas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egetas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim.<div class="box"> <h2>Descripción</h2> <ul> <li>text kalian</li> <li>text kalian</li> </ul> </div>
Azul = class="box box-blue"
Description
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egetas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egetas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim.<div class="box box-blue"> <h2>Descripción</h2> <ul> <li>text kalian</li> <li>text kalian</li> </ul> </div>
Amarillo = class="box box-yellow"
Description
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egetas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egetas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim.<div class="box box-yellow"> <h2>Descripción</h2> <ul> <li>text kalian</li> <li>text kalian</li> </ul> </div>
Detalles
| Nombre | Coding Pro |
| Licensia | Personal |
| Versión | 1.0 |
| Precio | PEN.100.00 |
<div class="box"> <h2>Descripción</h2> <table cellpadding="0" cellspacing="0" style="text-align: left;"> <tbody> <tr><td><b>Nama</b></td> <td>Coding Pro</td></tr> <tr><td><b>Lisensi</b></td> <td>Personal</td></tr> <tr><td><b>Versi</b></td> <td>1.0</td></tr> <tr><td><b>Harga</b></td> <td>Rp.100.000</td></tr> </tbody> </table> </div>