qwerty/tupali
4
1
Fork 1
Code Issues 25 Pull Requests Releases Wiki Activity

Cambios CSS navbar responsive proyectos responsive

Browse Source
This commit is contained in:
kleper 2017-03-05 09:44:40 -05:00
parent d5267c8128
commit 8920a09a1a
2 changed files with 921 additions and 553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1297
landingpage_a.html
View File

File diff suppressed because it is too large Load Diff

183
temas/landingpage/css/landingpage.css
View File

@ -2,15 +2,28 @@
html,body { html,body {
height:100%; height:100%;
background-size: cover; background-size: cover;
padding-top:5em; padding-top:8%;
} }
/* USING BOOTSTRAP 3.0.3 */ /* USING BOOTSTRAP 3.0.3 */
.navbar-toggle { /*NAVBAR BRAND*/
margin: 13px 15px 13px 0; .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 { a {
font-size: 18px; font-size: 18px;
padding-bottom: 40px !important; padding-bottom: 40px !important;
@ -18,14 +31,15 @@ a {
transition: all 0.4s ease; transition: all 0.4s ease;
} }
.navbar.shrink { .navbar.shrink {
min-height: 35px; min-height: 35px;
} }
.navbar.shrink a { .navbar.shrink a {
font-size: 15px; font-size: 18px;
padding-bottom: 15px !important; padding-bottom: 18px !important;
padding-top: 20px !important; padding-top: 20px !important;
} }
@ -33,6 +47,7 @@ a {
width: 70px; width: 70px;
height: 70px; height: 70px;
transition: all 0.4s ease; transition: all 0.4s ease;
margin: 0px;
} }
.navbar.shrink .navbar-toggle { .navbar.shrink .navbar-toggle {
@ -40,43 +55,56 @@ a {
padding: 7px 8px; padding: 7px 8px;
} }
.navbar-toggle {
.navbar-brand { margin: 13px 15px 13px 0;
transform: translateX(-50%); padding: 4px 5px;
left: 50%;
position: absolute;
}
.navbar-brand img{
width: 250px;
height: 250px;
} }
.logos{
display: inline-block;
margin-left: 70px; /*PROYECTOS*/
.principal{
} }
/*container proyectos*/
.box_proyectos{
display: table;
}
/*container proyecto*/
.div_proyecto{ .div_proyecto{
margin: 10px; display: table-cell;
display: inline-block; position: relative;
margin: 10px;
float: left;
padding: 5px; 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{ .img-gris{
-webkit-filter: grayscale(100%) blur(3px) ; -webkit-filter: grayscale(100%) blur(3px) ;
height: 200px; height: 200px;
width: 200px; width: 200px;
z-index:10; z-index:10;
transition:filter 0.2s; transition:filter 0.2s;
-webkit-transition:-webkit-filter 1s; -webkit-transition:-webkit-filter 1s;
} }
.img-gris:hover{ .img-gris:hover{
filter: grayscale(0); filter: grayscale(0);
@ -84,20 +112,16 @@ filter: grayscale(0);
-webkit-filter: grayscale(0); -webkit-filter: grayscale(0);
} }
.img-center {margin:0 auto;}
.proyecto_titulo{
position: absolute; /*PATROCINADOR*/
top:100px; .logos{
color:#fff; display: inline-block;
background-color:#000; margin-left: 70px;
padding:2px ;
opacity:0.5;
font-weight:bold; width:190px; z-index:20; word-wrap: break-word;
} }
.img-center {margin:0 auto;}
.patrocina{ .patrocina{
background-color: white; background-color: white;
padding: 15px; padding: 15px;
@ -106,11 +130,82 @@ position: absolute;
display: inline-block; 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;
}
} }