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">
<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='navbar-header'>
<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>
</button>
<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>
</div>
<div id='navbar' class='navbar-collapse collapse'>

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

@ -14,6 +14,14 @@ html,body {
position: absolute;
}
.image_full {
display: block;
}
.image_mobile{
display: none !important;
}
/*logo barra navegacion*/
.navbar-brand img{
width: 250px;
@ -132,15 +140,22 @@ filter: grayscale(0);
/*RESPONSIVE*/
/*ESCRITORIO*/
@media (max-width: 1199px){
body {
/* body {
background-color: yellow;
}
}*/
.navbar-brand {
margin-top: 0px;
}
.image_full {
display: block;
}
.image_mobile{
display: none !important;
}
.navbar.shrink img {
margin-top: 0px;
@ -157,11 +172,14 @@ filter: grayscale(0);
}
}
/*TABLETS*/
@media (max-width: 990px){
body {
/* body {
background-color: green !important;
}
*/
.navbar-nav{
float:right;
transition: all 0.4s ease;
@ -179,6 +197,13 @@ filter: grayscale(0);
margin-top: 0px;
transition: all 0.4s ease;
}
.image_full{
display: block;
}
.image_mobile{
display: none !important;
}
.navbar.shrink a {
font-size: 20px;
@ -188,10 +213,35 @@ filter: grayscale(0);
}
@media (max-width: 768px){
body {
background-color: red !important;
/*MOBILES*/
@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 {
transform: translateX(-50%);
left: 50%;
@ -200,13 +250,59 @@ filter: grayscale(0);
/*logo barra navegacion*/
.navbar-brand img{
width: 250px;
height: 250px;
margin-top: 80px;
margin-top: 50px;
}
.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;
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*/