Actualización diseño Sección de Proyectos #12
181
css/style.css
181
css/style.css
@ -1,5 +1,22 @@
|
||||
body {overflow-x:hidden!important;}
|
||||
body {
|
||||
overflow-x:hidden!important;
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Helvetica", times, sans-serif;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
#cabecera{
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#cabecera-botonera-admin {
|
||||
background-color: #777677;
|
||||
@ -52,6 +69,58 @@ body {overflow-x:hidden!important;}
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
/*PROYECTOS*/
|
||||
|
||||
/* @media (max-width: 767px){
|
||||
.container-fluid.box{
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
} */
|
||||
|
||||
#proyectos {
|
||||
background-color: #d4d4d4;
|
||||
}
|
||||
|
||||
|
||||
.div_proyecto{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
background-color: grey;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.img-gris{
|
||||
-webkit-filter: grayscale(100%) blur(3px) ;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
z-index:10;
|
||||
transition:filter 0.2s;
|
||||
-webkit-transition:-webkit-filter 1s;
|
||||
}
|
||||
.img-gris:hover{
|
||||
filter: grayscale(0);
|
||||
z-index: 500;
|
||||
-webkit-filter: grayscale(0);
|
||||
}
|
||||
|
||||
.proyecto_titulo{
|
||||
position: absolute;
|
||||
top:100px;
|
||||
color:#fff;
|
||||
background-color:#000;
|
||||
padding:2px ;
|
||||
opacity:0.5;
|
||||
font-weight:bold; width:190px; z-index:20; word-wrap: break-word;
|
||||
}
|
||||
|
||||
/*fin proyectos*/
|
||||
|
||||
|
||||
|
||||
.thumbnail {
|
||||
height: 100% !important;
|
||||
overflow-y: auto;
|
||||
@ -235,7 +304,8 @@ box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
<!-- ESTILOS PRIORITARIOS -->.modal-dialog {
|
||||
<!-- ESTILOS PRIORITARIOS -->
|
||||
.modal-dialog {
|
||||
width: 95% !important;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
@ -309,108 +379,11 @@ legend.legend-area {
|
||||
padding: 0 10px;
|
||||
border-bottom: none;
|
||||
}
|
||||
/*
|
||||
RESPONSIVE */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*RESPONSIVE*/
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
|
||||
@media (max-width: 767px){
|
||||
.box {
|
||||
display: table !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
#encabezado_proyecto {
|
||||
text-align: center;
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
|
||||
#contenedor_cabecera{
|
||||
padding-top: 30px !important;
|
||||
}
|
||||
|
||||
#buscador_blog {
|
||||
padding: 0px;;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal-body {
|
||||
max-height: calc(100vh - 100px) !important;
|
||||
min-height: calc(100vh - 100px) !important;
|
||||
}
|
||||
#contenedor_cabecera{
|
||||
padding-top: 30px !important;
|
||||
}
|
||||
|
||||
#menu_tupale {
|
||||
background-color: #dfdfdf;
|
||||
}
|
||||
.btn-botonera-admin {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.dropdown-menu>li>a {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#secciones,
|
||||
.articulo_cuadro {
|
||||
padding: 0px;
|
||||
}
|
||||
#btn_agregar {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#btn_filtro{
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#logo_cabecera {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.cabecera {
|
||||
padding-bottom: 30px;
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#caja,
|
||||
#texto_articulo,
|
||||
.articulo_contenido{
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.box-secciones{
|
||||
padding: 40px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*FIN responsive*/
|
||||
|
||||
@ -5573,17 +5573,17 @@ if (mysqli_num_rows($sql)!='0'){
|
||||
|
||||
mysqli_data_seek($sql, 0);
|
||||
$fila=1;
|
||||
$divider=3;
|
||||
$divider=1000;
|
||||
$cols = (12/$divider);
|
||||
$sm = 4;
|
||||
$i =0;
|
||||
while( $row = mysqli_fetch_array( $sql ) ) {
|
||||
if($i % $divider==0) {
|
||||
$encontrados .= "<div class='container-fluid ' role='row' id='grid_$i' style=''>";
|
||||
$encontrados .= "<div class='container-fluid box text-center' role='row' id='grid_$i' style=''>";
|
||||
}
|
||||
$i++;
|
||||
if($row['imagen'] !="") {
|
||||
$logo="<img class='lazy img-responsive img-rounded' alt='$row[razon_social]' src='milfs/images/loading.gif' data-src='milfs/images/secure/?file=300/$row[imagen]' style='width:300px; display:block; background-image: url(\"\");
|
||||
$logo="<img class='lazy img-gris img-responsive img-rounded' alt='$row[razon_social]' src='milfs/images/loading.gif' data-src='milfs/images/secure/?file=300/$row[imagen]' style='width:300px; display:block; background-image: url(\"\");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;' >";
|
||||
}
|
||||
@ -5595,8 +5595,8 @@ while( $row = mysqli_fetch_array( $sql ) ) {
|
||||
// $slogan= substr($row[slogan],0, $length = 100)."";
|
||||
$slogan = $row['slogan'];
|
||||
$dominio = remplacetas('empresa','id',"$row[id_empresa]",'web','') ;
|
||||
$contenido ="
|
||||
<div class='proyecto col-md-$cols col-sm-$cols' title=''>
|
||||
$contenido ="<!-- PROYECTOS -->
|
||||
<div class='proyecto col-md-$cols col-sm-$cols ' title=''>
|
||||
<div class='div_proyecto'>
|
||||
<a href='http://$dominio[0]/e$row[id_empresa]' target ='empresa'>
|
||||
<div class='proyecto_titulo ' style=''>$row[razon_social]</div>
|
||||
@ -5621,7 +5621,7 @@ while( $row = mysqli_fetch_array( $sql ) ) {
|
||||
<h1>Proyectos</h1>
|
||||
<p class='lead'>Conoce los proyectos que usan Tupale.co para la implementación de sus herramientas, selecciona para conocer más</p>
|
||||
</div>
|
||||
<div class='container-fluid'>
|
||||
<div class='container'>
|
||||
<div class=''>
|
||||
$encontrados
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user