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

Responsive en diferentes tamaños

Browse Source
This commit is contained in:
kleper 2017-03-05 13:21:30 -05:00
parent 8920a09a1a
commit 32568434fc
2 changed files with 112 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
landingpage_a.html
View File

@ -295,7 +295,7 @@
<div class="col-sm-12"> <div class="col-sm-12">
<nav class='navbar navbar-inverse navbar-fixed-top'> <nav class='navbar navbar-inverse navbar-toggleable-md navbar-fixed-top'>
<div class='container navegacion'> <div class='container navegacion'>
<div class='navbar-header'> <div class='navbar-header'>
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'> <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
@ -305,7 +305,8 @@
<span class='icon-bar'></span> <span class='icon-bar'></span>
</button> </button>
<a class='navbar-brand' href='#'> <a class='navbar-brand' href='#'>
<img src='temas/landingpage/images/logo.png' alt='Tupale.co'> <img src='temas/landingpage/images/logo.png' class='image_full' alt='Tupale.co'>
<img src='temas/landingpage/images/logo_tupale.png' class='image_mobile' alt='Tupale.co'>
</a> </a>
</div> </div>
<div id='navbar' class='navbar-collapse collapse'> <div id='navbar' class='navbar-collapse collapse'>

120
temas/landingpage/css/landingpage.css
View File

@ -14,6 +14,14 @@ html,body {
position: absolute; position: absolute;
} }
.image_full {
display: block;
}
.image_mobile{
display: none !important;
}
/*logo barra navegacion*/ /*logo barra navegacion*/
.navbar-brand img{ .navbar-brand img{
width: 250px; width: 250px;
@ -132,15 +140,22 @@ filter: grayscale(0);
/*RESPONSIVE*/ /*RESPONSIVE*/
/*ESCRITORIO*/
@media (max-width: 1199px){ @media (max-width: 1199px){
body { /* body {
background-color: yellow; background-color: yellow;
} }*/
.navbar-brand { .navbar-brand {
margin-top: 0px; margin-top: 0px;
} }
.image_full {
display: block;
}
.image_mobile{
display: none !important;
}
.navbar.shrink img { .navbar.shrink img {
margin-top: 0px; margin-top: 0px;
@ -157,11 +172,14 @@ filter: grayscale(0);
} }
} }
/*TABLETS*/
@media (max-width: 990px){ @media (max-width: 990px){
body { /* body {
background-color: green !important; background-color: green !important;
} }
*/
.navbar-nav{ .navbar-nav{
float:right; float:right;
transition: all 0.4s ease; transition: all 0.4s ease;
@ -179,6 +197,13 @@ filter: grayscale(0);
margin-top: 0px; margin-top: 0px;
transition: all 0.4s ease; transition: all 0.4s ease;
} }
.image_full{
display: block;
}
.image_mobile{
display: none !important;
}
.navbar.shrink a { .navbar.shrink a {
font-size: 20px; font-size: 20px;
@ -188,10 +213,35 @@ filter: grayscale(0);
} }
@media (max-width: 768px){ /*MOBILES*/
body {
background-color: red !important; @media (max-width: 767px){
/* body {
background-color: blue !important;
} }
*/
/*menú proyectos a la izquierda*/
.navbar-nav{
padding-top: 20px;
float:left;
}
/* textos menú*/
a {
font-size: 23px;
padding-bottom: 23px !important;
padding-top: 23px !important;
transition: all 0.4s ease;
}
/*menú Nosotros a la derecha*/
.navbar-right{
float:right !important;
}
/*volver a centrar logo*/
.navbar-brand { .navbar-brand {
transform: translateX(-50%); transform: translateX(-50%);
left: 50%; left: 50%;
@ -200,13 +250,59 @@ filter: grayscale(0);
/*logo barra navegacion*/ /*logo barra navegacion*/
.navbar-brand img{ .navbar-brand img{
width: 250px; margin-top: 50px;
height: 250px; }
margin-top: 80px;
.image_full{
display: none !important;
}
.image_mobile{
display: block !important;
width: 300px !important;
height: 80px !important;
}
/*menú desplegable por delante del logo*/
.navbar.shrink a {
font-size: 20px;
padding-bottom: 15px !important;
padding-top: 15px !important;
}
.navbar.shrink img {
width: 200px !important;
height: 54px !important;
transition: all 0.4s ease; transition: all 0.4s ease;
margin-top: 30px;
}
.navbar.shrink .navbar-toggle {
margin: 25px 23px 8px 0;
padding: 7px 8px;
transition: all 0.4s ease;
}
.navbar-toggle {
margin: 13px 15px 13px 0;
padding: 4px 5px;
}
.navbar.collapse{
margin-top: 50px;
}
.collapse.in {
margin-top: 75px !important;
}
} }
}
/*fin móbiles*/