forked from qwerty/tupali
Cambios CSS navbar responsive proyectos responsive
This commit is contained in:
parent
d5267c8128
commit
8920a09a1a
1291
landingpage_a.html
1291
landingpage_a.html
File diff suppressed because it is too large
Load Diff
|
|
@ -2,15 +2,28 @@
|
|||
html,body {
|
||||
height:100%;
|
||||
background-size: cover;
|
||||
padding-top:5em;
|
||||
padding-top:8%;
|
||||
}
|
||||
|
||||
/* USING BOOTSTRAP 3.0.3 */
|
||||
|
||||
.navbar-toggle {
|
||||
margin: 13px 15px 13px 0;
|
||||
/*NAVBAR BRAND*/
|
||||
.navbar-brand {
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/*logo barra navegacion*/
|
||||
.navbar-brand img{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin-top: 80px;
|
||||
transition: all 0.4s ease;
|
||||
|
||||
}
|
||||
/* textos menú*/
|
||||
|
||||
a {
|
||||
font-size: 18px;
|
||||
padding-bottom: 40px !important;
|
||||
|
|
@ -18,14 +31,15 @@ a {
|
|||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
|
||||
.navbar.shrink {
|
||||
min-height: 35px;
|
||||
}
|
||||
|
||||
|
||||
.navbar.shrink a {
|
||||
font-size: 15px;
|
||||
padding-bottom: 15px !important;
|
||||
font-size: 18px;
|
||||
padding-bottom: 18px !important;
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
|
||||
|
|
@ -33,6 +47,7 @@ a {
|
|||
width: 70px;
|
||||
height: 70px;
|
||||
transition: all 0.4s ease;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.navbar.shrink .navbar-toggle {
|
||||
|
|
@ -40,43 +55,56 @@ a {
|
|||
padding: 7px 8px;
|
||||
}
|
||||
|
||||
|
||||
.navbar-brand {
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navbar-brand img{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
.navbar-toggle {
|
||||
margin: 13px 15px 13px 0;
|
||||
padding: 4px 5px;
|
||||
|
||||
}
|
||||
.logos{
|
||||
display: inline-block;
|
||||
margin-left: 70px;
|
||||
|
||||
|
||||
/*PROYECTOS*/
|
||||
.principal{
|
||||
}
|
||||
|
||||
|
||||
/*container proyectos*/
|
||||
.box_proyectos{
|
||||
display: table;
|
||||
|
||||
}
|
||||
|
||||
/*container proyecto*/
|
||||
.div_proyecto{
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
background-color: grey;
|
||||
background-color: grey;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
|
||||
}
|
||||
.proyecto{
|
||||
|
||||
padding: 5px;
|
||||
|
||||
/*container titulo*/
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
.img-gris{
|
||||
-webkit-filter: grayscale(100%) blur(3px) ;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
z-index:10;
|
||||
transition:filter 0.2s;
|
||||
-webkit-transition:-webkit-filter 1s;
|
||||
-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);
|
||||
|
|
@ -84,20 +112,16 @@ filter: grayscale(0);
|
|||
-webkit-filter: grayscale(0);
|
||||
}
|
||||
|
||||
.img-center {margin:0 auto;}
|
||||
|
||||
.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;
|
||||
|
||||
/*PATROCINADOR*/
|
||||
.logos{
|
||||
display: inline-block;
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
|
||||
.img-center {margin:0 auto;}
|
||||
|
||||
.patrocina{
|
||||
background-color: white;
|
||||
padding: 15px;
|
||||
|
|
@ -106,11 +130,82 @@ position: absolute;
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
/*RESPONSIVE*/
|
||||
|
||||
@media (min-width: 992px){
|
||||
/* .col-md-3 {
|
||||
width: 22%;
|
||||
}*/
|
||||
|
||||
|
||||
@media (max-width: 1199px){
|
||||
body {
|
||||
background-color: yellow;
|
||||
}
|
||||
.navbar-brand {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.navbar.shrink img {
|
||||
margin-top: 0px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-top: 80px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 990px){
|
||||
body {
|
||||
background-color: green !important;
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
float:right;
|
||||
transition: all 0.4s ease;
|
||||
border-bottom: 1px solid #333333;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
margin-top:0px;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.navbar-brand img{
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
margin-top: 0px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.navbar.shrink a {
|
||||
font-size: 20px;
|
||||
padding-bottom: 18px !important;
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
body {
|
||||
background-color: red !important;
|
||||
}
|
||||
.navbar-brand {
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/*logo barra navegacion*/
|
||||
.navbar-brand img{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin-top: 80px;
|
||||
transition: all 0.4s ease;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue