css para pyp

by jpeter06

HTML

<b>COLORES de fuente</b>
<table width="100%" >
<tr>
    <td>pyp_morado</td>
    <td class="pyp_morado">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
<tr>
    <td>pyp_naranja</td>
    <td class="pyp_naranja">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
<tr>
    <td>pyp_azulClaro</td>
    <td class="pyp_azulClaro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
<tr>
    <td>pyp_blanco </td>
    <td class="pyp_morado_bg pyp_blanco">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
    <tr>
    <td>pyp_rojo </td>
    <td class="pyp_rojo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
</tr>
    <tr>
    <td>pyp_verde </td>
    <td class="pyp_verde">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
</tr>
    <tr>
    <td>pyp_amarillo</td>
    <td class="pyp_amarillo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
</table>
<hr>



<b>COLORES de fondo</b>
<table width="100%" >
<tr>
    <td>pyp_morado_bg</td>
    <td class="pyp_morado_bg pyp_blanco">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
<tr>
    <td>pyp_naranja_bg</td>
    <td class="pyp_naranja_bg  pyp_blanco">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
<tr>
    <td>pyp_azulClaro_bg</td>
    <td class="pyp_azulClaro_bg  pyp_blanco">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
<tr>
    <td>pyp_rojo_bg</td>
    <td class="pyp_rojo_bg  pyp_blanco">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
<tr>
    <td>pyp_verde_bg</td>
    <td class="pyp_verde_bg pyp_blanco">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>
<tr>
    <td>pyp_amarillo_bg</td>
    <td class="pyp_amarillo_bg pyp_blanco">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</td>
</tr>

</table>
<hr>

<b>Marcos de Imagen</b>
<table width="100%" >
<tr>
    <td>pyp_img </td>
    <td class="pyp_img"><img...

CSS

/* logo */
#logo {
  margin-top:auto !important;
}


/* marcos de imagenes */
.pyp_img img{
    border: 5px solid white;
    box-shadow:1px 4px 5px #aaaaaa;
}


/*colores de font */
.pyp_morado{  color:purple;  }
.pyp_naranja{  color:#FF8E00; }
.pyp_azulClaro{ color:#00BFFF; }
.pyp_blanco{ color:#FFFFFF; }
.pyp_rojo{ color:#FF0000; }
.pyp_verde{ color:#00FF00; }
.pyp_amarillo{ color:#FFFF00; }

/*colores de BG */
.pyp_morado_bg{  background-color:purple;  }
.pyp_naranja_bg{  background-color:#FF8E00; }
.pyp_azulClaro_bg{ background-color:#00BFFF; }
.pyp_rojo_bg{ background-color:#FF0000; }
.pyp_verde_bg{ background-color:#00FF00; }
.pyp_amarillo_bg{ background-color:#FFFF00; }

/* marcos de container */
.pyp_cont {

    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
}
 
.pyp_box_shadow{
        box-shadow: 0px 0px 0px 5px #fdfdfd , 0px 0px 0px 6px #ddd  , 1px 1px 3px 6px #ccc ;
}

/* marcos de fonts */
.pyp_block {
    text-align: center;
    height:150px; 
    width:150px;
    margin:10px 12px;
}
 
.pyp_block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; 
}

.pyp_block p {
  display: inline-block;
  vertical-align: middle;
  width: 75%;
}

/* Tipos de border */
.pyp_borde_dashed{
border:1px dashed gray;
    }
.pyp_round_border{
  border-radius: 15px;
}

.pyp_round_border10{
  border-radius: 10px;
}