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

1231
landingpage_a.html
View File

File diff suppressed because it is too large Load Diff

167
temas/landingpage/css/landingpage.css
View File

@ -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,36 +55,49 @@ 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{
display: table-cell;
position: relative;
margin: 10px;
display: inline-block;
float: left;
padding: 5px;
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;
@ -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;
}
}