Skip to content

Instantly share code, notes, and snippets.

@furenku

furenku/alturas.css

Last active November 26, 2016 20:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save furenku/f9b25825d57c14854de435c796fced8d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save furenku/f9b25825d57c14854de435c796fced8d to your computer and use it in GitHub Desktop.
Download ZIP
portal musica
Raw
alturas.css
/* ALTURAS */
.h-a {
/*ha*/
height: auto;
}
.h-100-v {
height: 100vh;
}
.h-5 {
height: 5%;
}
.h-10 {
height: 10%;
}
.h-15 {
height: 15%;
}
.h-20 {
height: 20%;
}
.h-25 {
height: 25%;
}
.h-30 {
height: 30%;
}
.h-35 {
height: 35%;
}
.h-40 {
height: 40%;
}
.h-45 {
height: 45%;
}
.h-50 {
height: 50%;
}
.h-55 {
height: 55%;
}
.h-60 {
height: 60%;
}
.h-65 {
height: 65%;
}
.h-70 {
height: 70%;
}
.h-75 {
height: 75%;
}
.h-80 {
height: 80%;
}
.h-85 {
height: 85%;
}
.h-90 {
height: 90%;
}
.h-95 {
height: 95%;
}
.h-100 {
height: 100%;
}
.h-5-v {
height: 5vh;
}
.h-10-v {
height: 10vh;
}
.h-15-v {
height: 15vh;
}
.h-20-v {
height: 20vh;
}
.h-25-v {
height: 25vh;
}
.h-30-v {
height: 30vh;
}
.h-35-v {
height: 35vh;
}
.h-40-v {
height: 40vh;
}
.h-45-v {
height: 45vh;
}
.h-50-v {
height: 50vh;
}
.h-55-v {
height: 55vh;
}
.h-60-v {
height: 60vh;
}
.h-65-v {
height: 65vh;
}
.h-70-v {
height: 70vh;
}
.h-75-v {
height: 75vh;
}
.h-80-v {
height: 80vh;
}
.h-85-v {
height: 85vh;
}
.h-90-v {
height: 90vh;
}
.h-95-v {
height: 95vh;
}
.h-100-v {
height: 100vh;
}
@media screen and (max-width: 767px) {
.h-xs-10 {
height: 10%;
}
.h-xs-20 {
height: 20%;
}
.h-xs-30 {
height: 30%;
}
.h-xs-40 {
height: 40%;
}
.h-xs-50 {
height: 50%;
}
.h-xs-60 {
height: 60%;
}
.h-xs-70 {
height: 70%;
}
.h-xs-80 {
height: 80%;
}
.h-xs-90 {
height: 90%;
}
.h-xs-100 {
height: 100%;
}
}
@media screen and (min-width: 768px) {
.h-sm-10 {
height: 10%;
}
.h-sm-20 {
height: 20%;
}
.h-sm-30 {
height: 30%;
}
.h-sm-40 {
height: 40%;
}
.h-sm-50 {
height: 50%;
}
.h-sm-60 {
height: 60%;
}
.h-sm-70 {
height: 70%;
}
.h-sm-80 {
height: 80%;
}
.h-sm-90 {
height: 90%;
}
.h-sm-100 {
height: 100%;
}
}
@media screen and (min-width: 992px) {
.h-md-10 {
height: 10%;
}
.h-md-20 {
height: 20%;
}
.h-md-30 {
height: 30%;
}
.h-md-40 {
height: 40%;
}
.h-md-50 {
height: 50%;
}
.h-md-60 {
height: 60%;
}
.h-md-70 {
height: 70%;
}
.h-md-80 {
height: 80%;
}
.h-md-90 {
height: 90%;
}
.h-md-100 {
height: 100%;
}
}
@media screen and (min-width: 1200px) {
.h-lg-10 {
height: 10%;
}
.h-lg-20 {
height: 20%;
}
.h-lg-30 {
height: 30%;
}
.h-lg-40 {
height: 40%;
}
.h-lg-50 {
height: 50%;
}
.h-lg-60 {
height: 60%;
}
.h-lg-70 {
height: 70%;
}
.h-lg-80 {
height: 80%;
}
.h-lg-90 {
height: 90%;
}
.h-lg-100 {
height: 100%;
}
}
Raw
app.css
* { outline: 1px solid #def; }
body,
html,
header,
main,
footer,
section,
div,
article {
height: 100%;
}
li {
list-style: none;
}
.p-0 {
padding: 0;
}
.p-1 {
padding: 15px;
}
.m-b-1 {
margin-bottom: 15px;
}
.rel {
/*posr*/
position: relative;
}
.abs {
/*posa*/
position: absolute;
}
.z-1 {
z-index: -1;
}
.z1 {
z-index: 1;
}
.evento .dia {
font-size: 35px;
}
.evento .mes {
font-size: 14px;
}
.evento .anno {
font-size: 20px;
}
.card {
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
transition: all 0.4s;
}
.card:hover {
-webkit-box-shadow: 5px 5px 8px rgba(0,0,0,0.2);
box-shadow: 5px 5px 8px rgba(0,0,0,0.2);
}
.nombre-artista {
font-weight: bold;
}
.nombre-artista,
.nombre-cancion {
text-align:left;
font-size: 11px;
}
.scroll-y {
overflow-y: auto;
}
Raw
app.js
$(document).ready(function(){
setup_imagenes();
});
function setup_imagenes() {
$(".imgLiquid.imgLiquidFill").imgLiquid();
$(".imgLiquid.imgLiquidNoFill").imgLiquid({ fill: false });
$(".imgLiquid.imgLiquidNoFillLeft").imgLiquid({ fill: false, horizontalAlign: "left" });
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>portalmusica</title>
<link rel="stylesheet" href="recursos/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="recursos/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="recursos/slick-1.6.0/slick/slick.css">
<link rel="stylesheet" href="recursos/slick-1.6.0/slick/slick-theme.css">
<link rel="stylesheet" href="css/alturas.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<header id="cabecera" class="container-fluid h-10">
<!-- #logotipo.col-xs-4.col-sm-3.col-md-2.imgLiquid.imgLiquidNoFillLeft -->
<div id="logotipo" class="col-xs-4 col-sm-3 col-md-2 imgLiquid imgLiquidNoFillLeft">
<img src="http://fakeimg.pl/300x200?text=LOGO" alt="Logotipo del Portal de Música">
</div>
<!-- nav#menu.col-md-10.hidden-xs.visible-md>ul>(li.col-xs-4>a{Menú $})*3 -->
<nav id="menu" class="col-md-10 hidden-xs visible-md visible-lg visible-xl">
<ul>
<li class="col-xs-4"><a href="">Menú 1</a></li>
<li class="col-xs-4"><a href="">Menú 2</a></li>
<li class="col-xs-4"><a href="">Menú 3</a></li>
</ul>
</nav>
<!-- #boton-menu-movil.col-xs-4.col-xs-offset-4.hidden-md.text-right{Menú} -->
<div id="boton-menu-movil" class="col-xs-4 col-sm-3 col-xs-offset-4 col-sm-offset-6 visible-xs visible-sm text-right">
Menú
</div>
</header>
<main id="principal" class="container-fluid h-a p-0">
<!-- section#portada.container-fluid.h-70 -->
<section id="portada" class="container-fluid h-70-v p-0 rel">
<!-- .imagen.imgLiquid.imgLiquidFill -->
<div class="imagen imgLiquid imgLiquidFill col-xs-12 h-70-v abs z-1">
<img src="http://fakeimg.pl/1200x600" alt="">
</div>
<div class="col-md-7 h-xs-70 h-md-100">
<!-- .texto.abs>(h1>lorem6)+(h3>lorem9) -->
<div class="texto col-xs-12 abs p-1 z1">
<h1>Únete a la Comunidad.</h1>
<h3>La red de música de tu escena</h3>
</div>
</div>
<section id="boton-registro-movil" class="h-a p-1 visible-xs visible-sm text-center">
<button class="btn btn-success">
Registrarme
</button>
</section>
<!-- form#formulario-registro.col-md-5.hidden-xs.hidden-sm -->
<form action="ruta/a/nuevo-registro.php" method="POST" id="formulario-registro" class="col-md-5 h-a hidden-xs hidden-sm p-1">
<div class="titulo-intro p-1">
<h2>Regístrate</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, cum.</p>
</div>
<div class="form-group">
<input type="email" name="newuser-email" class="form-control" placeholder="E-mail">
<input type="password" name="newuser-password" class="form-control" placeholder="Contraseña">
</div>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#registro-gracias">Regístrate</button>
<!-- <input type="submit" value="Registrarme" class="btn btn-success"> -->
</form>
</section>
<section id="puntos-clave" class="container h-a">
<section class="punto-clave col-md-4 text-center">
<h3>Próximos Eventos</h3>
<article class="evento h-25-v p-1 m-b-1 card">
<div class="info col-xs-7">
<div class="imagen h-15-v imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/400x300" alt="">
</div>
<h5>Título del Evento</h5>
</div>
<div class="fecha col-xs-5 text-center">
<div class="dia h-a ">27</div>
<div class="mes h-a ">octubre</div>
<div class="anno h-a ">2016</div>
</div>
</article>
<article class="evento h-25-v p-1 m-b-1 card">
<div class="info col-xs-7">
<div class="imagen h-15-v imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/400x300" alt="">
</div>
<h5>Título del Evento</h5>
</div>
<div class="fecha col-xs-5 text-center">
<div class="dia h-a ">27</div>
<div class="mes h-a ">octubre</div>
<div class="anno h-a ">2016</div>
</div>
</article>
<button class="btn" data-toggle="modal" data-target="#registro-flotante">Ver más Eventos</button>
</section>
<section class="punto-clave col-md-4 text-center">
<h3>Artistas más Recientes</h3>
<article class="artista h-25-v p-0 m-b-1 card">
<div class="imagen h-100 col-xs-5 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/400x300" alt="">
</div>
<div class="nombre col-xs-7 p-1 text-center">
<h3>Nombre Artista</h3>
</div>
</article>
<article class="artista h-25-v p-0 m-b-1 card">
<div class="imagen h-100 col-xs-5 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/400x300" alt="">
</div>
<div class="nombre col-xs-7 p-1 text-center">
<h3>Nombre Artista</h3>
</div>
</article>
<button class="btn" data-toggle="modal" data-target="#registro-flotante">Ver más Artistas</button>
</section>
<section class="punto-clave col-md-4 text-center">
<h3>Playlist más Escuchado</h3>
<article class="evento h-a m-b-1">
<h3>Titulo del Playlist</h3>
<div class="user-container h-a">
<div class="user col-xs-8 end h-10-v p-1">
<div class="avatar col-xs-3 imgLiquid imgLiquidNoFill">
<img src="http://fakeimg.pl/150x150" alt="">
</div>
<div class="username col-xs-9 text-center">
username
</div>
</div>
</div>
<ul id="playlist-canciones" class="col-xs-12 p-1 h-35-v scroll-y">
<li class="playlist-cancion h-10-v p-0 card">
<div class="numero col-xs-1">
1.
</div>
<div class="imagen col-xs-3 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/150x150" alt="">
</div>
<div class="info-track col-xs-7">
<div class="nombre-artista h-50">
Nombre del Artista
</div>
<div class="nombre-cancion h-50">
Nombre de la Canción
</div>
</div>
</li>
<li class="playlist-cancion h-10-v p-0 card m-b-1">
<div class="numero col-xs-1">
1.
</div>
<div class="imagen col-xs-3 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/150x150" alt="">
</div>
<div class="info-track col-xs-7">
<div class="nombre-artista h-50">
Nombre del Artista
</div>
<div class="nombre-cancion h-50">
Nombre de la Canción
</div>
</div>
</li>
<li class="playlist-cancion h-10-v p-0 card m-b-1">
<div class="numero col-xs-1">
1.
</div>
<div class="imagen col-xs-3 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/150x150" alt="">
</div>
<div class="info-track col-xs-7">
<div class="nombre-artista h-50">
Nombre del Artista
</div>
<div class="nombre-cancion h-50">
Nombre de la Canción
</div>
</div>
</li>
<li class="playlist-cancion h-10-v p-0 card m-b-1">
<div class="numero col-xs-1">
1.
</div>
<div class="imagen col-xs-3 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/150x150" alt="">
</div>
<div class="info-track col-xs-7">
<div class="nombre-artista h-50">
Nombre del Artista
</div>
<div class="nombre-cancion h-50">
Nombre de la Canción
</div>
</div>
</li>
<li class="playlist-cancion h-10-v p-0 card m-b-1">
<div class="numero col-xs-1">
1.
</div>
<div class="imagen col-xs-3 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/150x150" alt="">
</div>
<div class="info-track col-xs-7">
<div class="nombre-artista h-50">
Nombre del Artista
</div>
<div class="nombre-cancion h-50">
Nombre de la Canción
</div>
</div>
</li>
<li class="playlist-cancion h-10-v p-0 card m-b-1">
<div class="numero col-xs-1">
1.
</div>
<div class="imagen col-xs-3 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/150x150" alt="">
</div>
<div class="info-track col-xs-7">
<div class="nombre-artista h-50">
Nombre del Artista
</div>
<div class="nombre-cancion h-50">
Nombre de la Canción
</div>
</div>
</li>
<li class="playlist-cancion h-10-v p-0 card m-b-1">
<div class="numero col-xs-1">
1.
</div>
<div class="imagen col-xs-3 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/150x150" alt="">
</div>
<div class="info-track col-xs-7">
<div class="nombre-artista h-50">
Nombre del Artista
</div>
<div class="nombre-cancion h-50">
Nombre de la Canción
</div>
</div>
</li>
<li class="playlist-cancion h-10-v p-0 card m-b-1">
<div class="numero col-xs-1">
1.
</div>
<div class="imagen col-xs-3 imgLiquid imgLiquidFill">
<img src="http://fakeimg.pl/150x150" alt="">
</div>
<div class="info-track col-xs-7">
<div class="nombre-artista h-50">
Nombre del Artista
</div>
<div class="nombre-cancion h-50">
Nombre de la Canción
</div>
</div>
</li>
</ul>
</article>
<button class="btn" data-toggle="modal" data-target="#registro-flotante">Ver más Playlists</button>
</section>
</section>
</main>
<!-- footer#pie-pagina.container-fluid.h-xs-10.h-md-5 -->
<footer id="pie-pagina" class="container-fluid h-xs-10 h-md-5">
Pie de página
</footer>
<script src="recursos/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="recursos/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="recursos/imgLiquid-master/js/imgLiquid-min.js" type="text/javascript"></script>
<script src="recursos/slick-1.6.0/slick/slick.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<!-- Modal -->
<div id="registro-gracias" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content text-center">
<div class="modal-header h-a p-1">
<div class="imagen h-25-v imgLiquid imgLiquidNoFill">
<img src="http://fakeimg.pl/400x300" alt="">
</div>
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Gracias!</h4>
</div>
<div class="modal-body h-a p-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sunt, ad maiores.</p>
</div>
<div class="modal-footer h-a p-1">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="registro-flotante" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content text-center">
<div class="modal-header h-a p-1">
<div class="imagen h-25-v imgLiquid imgLiquidNoFill">
<img src="http://fakeimg.pl/400x300" alt="">
</div>
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Registrate!</h4>
</div>
<div class="modal-body h-a p-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos sunt, ad maiores.</p>
<form action="ruta/a/nuevo-registro.php" method="POST" id="formulario-registro-flotante" class="h-a hidden-xs hidden-sm p-1">
<div class="form-group">
<input type="email" name="newuser-email" class="form-control" placeholder="E-mail">
<input type="password" name="newuser-password" class="form-control" placeholder="Contraseña">
</div>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#registro-gracias">Regístrate</button>
<!-- <input type="submit" value="Registrarme" class="btn btn-success"> -->
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment