El modal es básicamente una ventana emergente utilizada para comunicar al usuario una advertencia, un comunicado, un contenido de jerarquía oculta u otro mensaje desde la plataforma. El modal debe siempre aparecer sobre el contenido de la página en la que navega el usuario a través de un z-index específico (@zindex-modal).
<button class="btn btn-md" data-toggle="modal" data-target="#modal_de_ejemplo"> Ejecutar Modal </button>
<div class="modal fade" id="modal_de_ejemplo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Titulo del Modal</h4>
</div>
<div class="modal-body">
<p>...</p>
<p>...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Otro Boton</button>
</div>
</div>
</div>
</div>
.modal-open {
overflow: hidden;
}
.modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
&.fade .modal-dialog {
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: none;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(@modal-backdrop-opacity); }
}
.modal-header {
padding: @modal-title-padding;
border-bottom: 1px solid @modal-header-border-color;
min-height: (@modal-title-padding + @modal-title-line-height);
}
<script src="js/jquery.js"></script>
<script src="js/modal.js"></script>
El tooltip es una pequeña señal de ayuda que funciona al situar el cursor sobre algún elemento del DOM. Despliega la información del atributo "title" del elemento HTML y puede dar cuenta de una mayor contextualización hacia el usuario. Entre sus declaraciones de variables específicas se observa un ancho máximo (@tooltip-max-width), un z-index (@zindex-tooltip), colores (@tooltip-color, @tooltip-bg), etc.
<ul class="tooltip-demo margen-vertical-md">
<li><a class='sans' data-toggle="tooltip" data-toggle="tooltip" data-original-title="Este es un tooltip funcionando">Tooltip funcionando</a></li>
</ul>
.tooltip {
position: absolute;
z-index: @zindex-tooltip;
display: block;
visibility: visible;
font-size: 14px;
font-style: normal;
line-height: 1.4;
.opacity(0);
a{
&:hover{
color: @blanco !important;
}
}
&.in { .opacity(@tooltip-opacity); }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
}
.tooltip-inner {
max-width: @tooltip-max-width;
padding: 3px 8px;
color: @tooltip-color;
text-align: center;
font-family: @sans;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
}
.tooltip-imagenes{
.tooltip {
font-size: @cuerpo * 0.8;
}
.tooltip-inner {
color: @negro;
background-color: @masking;
border-radius: 1px;
}
.tooltip {
&.top .tooltip-arrow {
border-top-color: @gris-blanco;
}
&.top-left .tooltip-arrow {
border-top-color: @gris-blanco;
}
&.top-right .tooltip-arrow {
border-top-color: @gris-blanco;
}
&.right .tooltip-arrow {
border-right-color: @gris-blanco;
}
&.left .tooltip-arrow {
border-left-color: @gris-blanco;
}
&.bottom .tooltip-arrow {
border-bottom-color: @gris-blanco;
}
&.bottom-left .tooltip-arrow {
border-bottom-color: @gris-blanco;
}
&.bottom-right .tooltip-arrow {
border-bottom-color: @gris-blanco;
}
}
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
<script src="js/jquery.js"></script>
<script src="js/tooltip.js"></script>
El popover es una pequeña ventana de ayuda o de advertencia específica. Despliega la información del atributo "title" del elemento HTML. A diferencia del tooltip, éste debe ser cliqueado con el cursor para gatillar la interacción del elemento. En sus declaraciones específicas de variables se observa un ancho máximo (@popover-max-width), un z-index (@zindex-popover), colores (@popover-bg), etc. Para inicializar los popovers (similiar a lo hecho con los tooltip), se requiere el <script> con su respectivo id (en este caso, '#popover-test') en el elemento <a> declarado para su ejecución.
<a class="btn margen-vertical-md" id="popover-test" title="" data-content="Este es un popover..." data-toggle="popover" data-original-title="Titulo de un popover">Popover</a>
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
display: none;
max-width: @popover-max-width;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
&.top { margin-top: -@popover-arrow-width; }
&.right { margin-left: @popover-arrow-width; }
&.bottom { margin-top: @popover-arrow-width; }
&.left { margin-left: -@popover-arrow-width; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 10px 15px;
font-size: @font-size-base;
font-weight: normal;
line-height: 18px;
background-color: @blanco;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 20px 15px;
font-family: @sans;
background-color: @gris-blanco;
}
.popover > .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover > .arrow {
border-width: @popover-arrow-outer-width;
}
.popover > .arrow:after {
border-width: @popover-arrow-width;
content: "";
}
<script src="js/jquery.js"></script>
<script src="js/popover.js"></script>
<script> $('#popover-test').popover();</script>
El popover es una pequeña ventana de ayuda o de advertencia específica. Despliega la información del atributo "title" del elemento HTML. A diferencia del tooltip, éste debe ser cliqueado con el cursor para gatillar la interacción del elemento. En sus declaraciones específicas de variables se observa un ancho máximo (@popover-max-width), un z-index (@zindex-popover), colores (@popover-bg), etc. Para inicializar los popovers (similiar a lo hecho con los tooltip), se requiere el <script> con su respectivo id (en este caso, '#popover-test') en el elemento <a> declarado para su ejecución.
La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.
La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.
La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.
La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.
La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.
La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.
La misión de la Escuela de Arquitectura y Diseño es cultivar el arte de la Arquitectura, del Diseño Gráfico y del Diseño Industrial por medio de la creación y transmisión del conocimiento del oficio de estas artes, formar Arquitectos y Diseñadores con la vocación de concebir obras que den cabida y expresión al habitar humano. La Escuela afirma que tanto la Arquitectura como el Diseño son un Arte. Esto diferencia profundamente de otras orientaciones, disciplinas y saberes, e implica una manera peculiar de estudiar y de hacer.
<a class="btn margen-vertical-md" id="popover-test" title="" data-content="Este es un popover..." data-toggle="popover" data-original-title="Titulo de un popover">Popover</a>
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
display: none;
max-width: @popover-max-width;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popover-bg;
background-clip: padding-box;
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
&.top { margin-top: -@popover-arrow-width; }
&.right { margin-left: @popover-arrow-width; }
&.bottom { margin-top: @popover-arrow-width; }
&.left { margin-left: -@popover-arrow-width; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 10px 15px;
font-size: @font-size-base;
font-weight: normal;
line-height: 18px;
background-color: @blanco;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 20px 15px;
font-family: @sans;
background-color: @gris-blanco;
}
.popover > .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover > .arrow {
border-width: @popover-arrow-outer-width;
}
.popover > .arrow:after {
border-width: @popover-arrow-width;
content: "";
}
<script src="js/jquery.js"></script>
<script src="js/popover.js"></script>
<script> $('#popover-test').popover();</script>
Utilizar dropdowns permite condensar una navegación compleja en grandes rótulos, dando paso a a una navegación más simplificada con una jerarquía notoria. La jerarquía se divide en dos clases; la primera en el orden de cada enlace, y la segunda en la categoría de "separaeted link", bajo un <hr> o divider. Entre las variables específicas resaltan el font-size (@cuerpo-nav z-index), z-index (@zindex-dropdown), hr o dividers (@dropdown-divider-bg), colores (@dropdown-bg) e íconos o carets de despliegue (@caret-width-base ).
<ul class="nav nav-pills margen-vertical-md">
<li class="dropdown">
<a href="#" data-toggle="dropdown" role="button" id="drop4" class="dropdown-toggle">Dropdown 1<b class="caret"></b></a>
<ul aria-labelledby="drop4" role="menu" class="dropdown-menu" id="menu1">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Una cosa</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Otra cosa</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Relevancia de tercera cosa</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Algo más</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" role="button" id="drop5" class="dropdown-toggle">Dropdown 2 <b class="caret"></b></a>
<ul aria-labelledby="drop5" role="menu" class="dropdown-menu" id="menu2">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" role="button" id="drop5" class="dropdown-toggle">Dropdown 3 <b class="caret"></b></a>
<ul aria-labelledby="drop5" role="menu" class="dropdown-menu" id="menu3">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
</ul>
</li>
</ul>
.nav-divider(@color: #e5e5e5) {
height: 1px;
margin: ((@line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: @color;
}
.navbar-vertical-align(@element-height) {
margin-top: ((@navbar-height - @element-height) / 2);
margin-bottom: ((@navbar-height - @element-height) / 2);
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: @cuadratin-tercio;
margin-right: @cuadratin * 1.5;
vertical-align: middle;
border-top: @caret-width-base solid;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 80%;
left: 0;
z-index: @zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: @cuadratin-tercio @cuadratin-tercio;
margin:0; // override default ul
list-style: none;
font-size: @cuerpo-nav;
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @gris-claro;
background-clip: padding-box;
li{
list-style: none;
}
.divider {
.nav-divider(@dropdown-divider-bg);
}
> li > a {
display: block;
padding: @cuadratin-tercio / 2 @cuadratin-tercio;
clear: both;
font-family: @sans;
font-weight: 300;
line-height: @line-height-base;
color: @negro;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
&.xs {
background-color: @azul;
width: 100%;
}
&.left {
left: 0;
right: auto;
}
}
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: @rojo;
background-color: @gris-blanco;
}
}
.dropdown-menu > .disabled > a {
&,
&:hover,
&:focus {
color: @rojo;
}
}
.dropdown-menu > .disabled > a {
&:hover,
&:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: not-allowed;
}
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: (@zindex-dropdown - 10);
}
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: @caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
<script src="js/jquery.js"></script>
<script src="js/dropdown.js"></script>
El carrusel...
Utilizar dropdowns permite condensar una navegación compleja en grandes rótulos, dando paso a a una navegación más simplificada con una jerarquía notoria. La jerarquía se divide en dos clases; la primera en el orden de cada enlace, y la segunda en la categoría de "separaeted link", bajo un <hr> o divider. Entre las variables específicas resaltan el font-size (@cuerpo-nav z-index), z-index (@zindex-dropdown), hr o dividers (@dropdown-divider-bg), colores (@dropdown-bg) e íconos o carets de despliegue (@caret-width-base ).
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div data-ride="carousel" class="carousel slide" id="carousel-example">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="1" data-target="#carousel-example-generic"></li>
<li data-slide-to="2" data-target="#carousel-example-generic"></li>
</ol>
<div class="carousel-inner">
<div class="item active car-sm">
<img alt="First slide" src="http://eadpucv.github.io/pyxis/img-samples/manto-6.jpg">
</div>
<div class="item car-sm">
<img alt="Second slide" src="http://eadpucv.github.io/pyxis/img-samples/torneo2.jpg">
</div>
<div class="item car-sm">
<img alt="Third slide" src="http://eadpucv.github.io/pyxis/img-samples/manto4.jpg">
</div>
</div>
<a data-slide="prev" href="#carousel" data-target="#carousel-example" class="left carousel-control">
<span class="icn icn-navizquierda"></span>
</a>
<a data-slide="next" href="#carousel" data-target="#carousel-example" class="right carousel-control">
<span class="icn icn-nav"></span>
</a>
</div>
.carousel{
.carousel-inner{
.car-sm{
img{
.ancho-completo;
.absoluto;
}
.pag {
.cf;
.h100;
.oculto-xs {
.h100;
.derecha;
.cf;
a{
div{
.fondo-gris-blanco-trans;
.absoluto;
.abs-der;
.abs-sup;
.bloque;
.alto-completo;
.relleno;
h2{
.gris-oscuro;
.condensado;
.gruesa;
.sombra-cabecera-blanco-xs;
i{
.margen-der-xs;
}
}
p{
.italica;
.margen-sup-sm;
.sombra-cabecera-blanco-xs;
}
span{
.cond;
.negro;
.derecha;
.interletraje-xs;
.relleno-vertical-xs;
.relleno-der-xs;
.sombra;
.borde
.radio-md;
i{
.negro;
.relleno-der-xs;
.relleno-izq-xs;
.margen-der-xs;
.icn-light;
.sombra-cabecera-blanco-xs;
}
}
}
&:hover{
h2{
.rojo;
}
}
}
}
.oculto-md{
.h100;
.cf;
a{
div{
.fondo-gris-blanco-trans;
.absoluto;
.abs-der;
.abs-inf;
.bloque;
.relleno;
.ancho-completo;
h5{
.condensado;
.centrado;
.gruesa;
.sombra-cabecera-blanco-xs;
.gris-oscuro;
i{
.margen-der-xs;
}
}
}
}
}
}
}
}
}
<div id='carrusel-index'>
<!-- Carrousel -->
<div data-ride="carousel" class="carousel slide" id="carousel-home">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-home" class="active"></li>
<li data-slide-to="1" data-target="#carousel-home"></li>
<li data-slide-to="2" data-target="#carousel-home"></li>
</ol>
<div class="carousel-inner">
<!-- item (la clase 'car-sm' corresponde al height de visibilidad) -->
<div class="item active car-sm">
<img alt="Third slide" src="http://www.domusweb.it/content/dam/domusweb/en/news/2013/11/05/archizoom_open_city/03_Open-City.jpg">
<div class='pag sin-relleno'>
<div class='col-md-4 col-sm-6 oculto-xs'>
<!-- enlace -->
<a href='#'>
<div>
<!-- título de noticia-->
<h2><i class='icn icn-noticias'></i>...
<!-- texto de noticia -->
<p>[...]</p>
<!-- autor de noticia -->
<span class='xs'><i class='icn icn-usuario'></i>...</span>
</div>
</a>
</div>
<!-- móviles -->
<div class='oculto-lg oculto-md oculto-sm col-xs-12'>
<!-- enlace -->
<a href='#'>
<div>
<!-- título de noticia-->
<h5 class='sm'><i class='icn icn-noticias'></i>...</h5>
</div>
</a>
</div><!-- fin de móvil -->
</div><!-- fin de pag -->
</div><!-- fin de item -->
<!-- item (la clase 'car-sm' corresponde al height de visibilidad) -->
<div class="item car-sm">
<img alt="First slide" src="http://www.ead.pucv.cl/wp-content/uploads/2015/03/DSC_1956.jpg">
<div class='pag sin-relleno'>
<div class='col-md-4 col-sm-6 oculto-xs'>
<!-- enlace -->
<a href="http://eadpucv.github.io/pyxis/maquetas/post">
<div>
<!-- título de noticia-->
<h2><i class='icn icn-noticias'></i>...</h2>
<!-- texto de noticia -->
<p>[...]</p>
<!-- autor de noticia -->
<span class='xs'><i class='icn icn-usuario'></i>...</span>
</div>
</a>
</div>
<!-- móviles -->
<div class='oculto-lg oculto-md oculto-sm col-xs-12'>
<!-- enlace -->
<a href='#'>
<div>
<!-- título de noticia-->
<h5 class='sm'><i class='icn icn-noticias'></i>...</h5>
</div>
</a>
</div><!-- fin de móvil -->
</div><!-- fin de pag -->
</div><!-- fin de item -->
</div> <!-- fin de carousel inner -->
<!-- botones adelante y atrás -->
<a data-slide="prev" data-target='#carousel-home' href="#carousel-2" class="left carousel-control">
<span class="icn icn-navizquierda"></span>
</a>
<a data-slide="next" data-target='#carousel-home' href="#carousel-2" class="right carousel-control">
<span class="icn icn-nav"></span>
</a>
</div>
</div>
.carousel{
.carousel-inner{
.car-sm{
img{
.ancho-completo;
.absoluto;
}
.pag {
.cf;
.h100;
.oculto-xs {
.h100;
.derecha;
.cf;
a{
div{
.fondo-gris-blanco-trans;
.absoluto;
.abs-der;
.abs-sup;
.bloque;
.alto-completo;
.relleno;
h2{
.gris-oscuro;
.condensado;
.gruesa;
.sombra-cabecera-blanco-xs;
i{
.margen-der-xs;
}
}
p{
.italica;
.margen-sup-sm;
.sombra-cabecera-blanco-xs;
}
span{
.cond;
.negro;
.derecha;
.interletraje-xs;
.relleno-vertical-xs;
.relleno-der-xs;
.sombra;
.borde
.radio-md;
i{
.negro;
.relleno-der-xs;
.relleno-izq-xs;
.margen-der-xs;
.icn-light;
.sombra-cabecera-blanco-xs;
}
}
}
&:hover{
h2{
.rojo;
}
}
}
}
.oculto-md{
.h100;
.cf;
a{
div{
.fondo-gris-blanco-trans;
.absoluto;
.abs-der;
.abs-inf;
.bloque;
.relleno;
.ancho-completo;
h5{
.condensado;
.centrado;
.gruesa;
.sombra-cabecera-blanco-xs;
.gris-oscuro;
i{
.margen-der-xs;
}
}
}
}
}
}
}
}
}
<div data-ride="carousel" class="carousel slide oculto-sm oculto-xs bloque ancho-completo" id="carousel-portadilla">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-portadilla" class="active"></li>
<li data-slide-to="1" data-target="#carousel-portadilla"></li>
<li data-slide-to="2" data-target="#carousel-portadilla"></li>
</ol>
<div class="carousel-inner">
<!-- item (la clase 'car-sm' corresponde al height de visibilidad) -->
<div class="item active car-sm relativo">
<img class='ancho-completo atras abs-der portadilla' alt="First slide" src="http://www.ead.pucv.cl/wp-content/themes/gamma/img/disenografico.jpg">
<!-- pie de imagen carousel -->
<div class='ancho-completo alto-completo oculto-xs izquierda cf'>
<a href='#'>
<div class='fondo-gris-blanco-trans-xs alto-completo absoluto abs-inf abs-izq bloque ancho-completo margen-sup-xs-negativo relleno-xs'>
<div class='pag sin-relleno cf'>
<div class='col-md-10 col-md-offset-1'>
<div class='bloque ancho-completo'>
<!-- Breadcrumbs -->
<ul class='sin-relleno margen-sup-sm centrado margen-inf-xs' id="breadcrumb">
<li><a href='#'><i class='icn icn-hogar'></i></a></li>
<li><a href='#'>...</a></li>
<li><a>...</a></li>
</ul>
<h1 class='md rojo condensado gruesa centrado interletraje-xs'>— ... —</h1>
</div>
<h4 class='xs semi-gruesa interletraje-sm altas rojo relleno-sup-xs centrado sans fino'>...</h4>
<h2 class='sm interletraje-negativo relleno-sup-xs centrado margen-sup-xs sombra-cabecera-blanco-xs gruesa negro-fundido condensado'><i class='icn icn-noticias margen-der-xs sin-interletraje'></i>...</h2>
<div class='ancho-completo bloque izquierda'>
<span class='italica negro-fundido sombra-cabecera-blanco-xs relleno-sup-xs centrado relleno-inf-xs gruesa'>...</span>
<p class='margen-inf-sm sans sm negro centrado sombra-cabecera-blanco-xs relleno-sup-sm oculto-sm'>[...]</p>
<div class='centrado oculto-sm'>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
<!-- item -->
<div class="item car-sm">
<img class='ancho-completo atras ocultar-desborde portadilla' alt="Second slide" src="http://www.ead.pucv.cl/wp-content/uploads/2014/12/DSC_1383.jpg">
<div class='ancho-completo alto-completo oculto-xs izquierda cf'>
<a href='#'>
<div class='fondo-gris-blanco-trans-xs alto-completo absoluto abs-inf abs-izq bloque ancho-completo relleno-xs'>
<div class='pag sin-relleno cf'>
<div class='col-md-10 col-md-offset-1'>
<div class='bloque ancho-completo'>
<!-- Breadcrumbs -->
<ul class='sin-relleno margen-sup-sm centrado margen-inf-xs' id="breadcrumb">
<li><a href='#'><i class='icn icn-hogar'></i></a></li>
<li><a href='#'>...</a></li>
<li><a>...</a></li>
</ul>
<h1 class='md rojo condensado gruesa centrado interletraje-xs'>— ... —</h1>
</div>
<h4 class='xs semi-gruesa interletraje-sm altas rojo relleno-sup-xs centrado sans fino'>...</h4>
<h2 class='sm interletraje-negativo relleno-sup-xs centrado sombra-cabecera-blanco-xs gruesa negro-fundido condensado'><i class='icn icn-lapiz margen-der-xs'></i>...</h2>
<div class='ancho-completo bloque izquierda'>
<span class='italica negro-fundido sombra-cabecera-blanco-xs relleno-sup-xs centrado relleno-inf-xs gruesa'>...</span>
<p class='margen-inf-sm sans sm negro centrado sombra-cabecera-blanco-xs relleno-sup-sm'>[...]</p>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
.carousel{
.carousel-inner{
.car-sm{
img{
.ancho-completo;
.absoluto;
}
.pag {
.cf;
.h100;
.oculto-xs {
.h100;
.derecha;
.cf;
a{
div{
.fondo-gris-blanco-trans;
.absoluto;
.abs-der;
.abs-sup;
.bloque;
.alto-completo;
.relleno;
h2{
.gris-oscuro;
.condensado;
.gruesa;
.sombra-cabecera-blanco-xs;
i{
.margen-der-xs;
}
}
p{
.italica;
.margen-sup-sm;
.sombra-cabecera-blanco-xs;
}
span{
.cond;
.negro;
.derecha;
.interletraje-xs;
.relleno-vertical-xs;
.relleno-der-xs;
.sombra;
.borde
.radio-md;
i{
.negro;
.relleno-der-xs;
.relleno-izq-xs;
.margen-der-xs;
.icn-light;
.sombra-cabecera-blanco-xs;
}
}
}
&:hover{
h2{
.rojo;
}
}
}
}
.oculto-md{
.h100;
.cf;
a{
div{
.fondo-gris-blanco-trans;
.absoluto;
.abs-der;
.abs-inf;
.bloque;
.relleno;
.ancho-completo;
h5{
.condensado;
.centrado;
.gruesa;
.sombra-cabecera-blanco-xs;
.gris-oscuro;
i{
.margen-der-xs;
}
}
}
}
}
}
}
}
}
El cuerpo académico de la e[ad] está compuesto por arquitectos y diseñadores de dedicación exclusiva al quehacer académico, en constante perfeccionamiento y ejercicio del oficio, trabajando en conjunto con un destacado equipo de profesores de dedicación parcial que, desde su disciplina, fortalecen nuestra docencia.
La e[ad] se ha consolidado como una de las escuelas referentes en Chile y el mundo, que se funda en el encuentro y co-generación de los tres oficios que imparte: Arquitectura, y los Diseños Gráfico e Industrial, en permanente relación con la poesía. Así, afirmamos que tanto la Arquitectura como el Diseño son, en su sentido más profundo, un arte.
La e[ad] ofrece tres carreras: Arquitectura, Diseño Gráfico y Diseño Industrial. Además, imparte el Magíster en Arquitectura y Diseño, en sus menciones Ciudad y Territorio, y Náutico y Marítimo.
La e[ad] desarrolla sus actividades académicas en dos lugares, principalmente: en Sede Recreo, en Viña del Mar y en la Ciudad Abierta.
<div class='oculto-xs'>
<div data-ride="carousel" class="carousel slide" id="carousel-enlaces">
<div class="carousel-inner">
<!-- item (la clase 'car-xs' corresponde al height de visibilidad) -->
<div class="item active car-xs escuela-y-enlaces">
<div class='pag sin-relleno'>
<div class='fila'>
<div class='col-md-4 col-sm-12 oculto-xs'>
<h5 class='sm condensado gruesa negro margen-inf-sm'>...</h5>
<p class='serif italica sin-margen relleno-inf-sm'>El cuerpo académico de la <span class='rojo'>e[ad]</span> ....</p>
<div class='oculto-sm margen-sup-xs'>
<button class='btn btn-alerta'>Profesores</button>
</div>
</div>
<div class='col-md-8 col-sm-12 oculto-xs'>
<div class='ocultar-desborde alto-md sombra borde radio-md'>
<img class='ocultar-desborde ancho-completo' alt="First slide" src="https://c2.staticflickr.com/2/1352/966261530_3b86c61b02_z.jpg?zz=1">
</div>
</div>
</div>
</div>
</div>
<!-- item (la clase 'car-xs' corresponde al height de visibilidad) -->
<div class="item car-xs escuela-y-enlaces">
<div class='pag sin-relleno'>
<div class='fila'>
<div class='col-md-4 col-sm-12 oculto-xs'>
<h5 class='sm condensado gruesa negro margen-inf-sm'>...</h5>
<p class='serif italica sin-margen relleno-inf-sm'>La <span class='rojo'>e[ad]</span> ...</p>
<div class='grupo-botones oculto-sm margen-sup-xs'>
<button class='btn btn-alerta'>Historia</button>
<button class='btn btn-alerta'>Amereida</button>
</div>
</div>
<div class='col-md-8 col-sm-12 oculto-xs'>
<div class='ocultar-desborde alto-md sombra borde radio-md'>
<img class='ocultar-desborde ancho-completo' alt="Second slide" src="https://c4.staticflickr.com/8/7329/8893052788_7362412230_h.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- botones adelante y atrás -->
<a data-slide="prev" data-target='#carousel-enlaces' href="#carousel-2" class="left carousel-control">
<span class="icn icn-navizquierda"></span>
</a>
<a data-slide="next" data-target='#carousel-enlaces' href="#carousel-2" class="right carousel-control">
<span class="icn icn-nav"></span>
</a>
</div>
</div>
.carousel{
.carousel-inner{
.car-sm{
img{
.ancho-completo;
.absoluto;
}
.pag {
.cf;
.h100;
.oculto-xs {
.h100;
.derecha;
.cf;
a{
div{
.fondo-gris-blanco-trans;
.absoluto;
.abs-der;
.abs-sup;
.bloque;
.alto-completo;
.relleno;
h2{
.gris-oscuro;
.condensado;
.gruesa;
.sombra-cabecera-blanco-xs;
i{
.margen-der-xs;
}
}
p{
.italica;
.margen-sup-sm;
.sombra-cabecera-blanco-xs;
}
span{
.cond;
.negro;
.derecha;
.interletraje-xs;
.relleno-vertical-xs;
.relleno-der-xs;
.sombra;
.borde
.radio-md;
i{
.negro;
.relleno-der-xs;
.relleno-izq-xs;
.margen-der-xs;
.icn-light;
.sombra-cabecera-blanco-xs;
}
}
}
&:hover{
h2{
.rojo;
}
}
}
}
.oculto-md{
.h100;
.cf;
a{
div{
.fondo-gris-blanco-trans;
.absoluto;
.abs-der;
.abs-inf;
.bloque;
.relleno;
.ancho-completo;
h5{
.condensado;
.centrado;
.gruesa;
.sombra-cabecera-blanco-xs;
.gris-oscuro;
i{
.margen-der-xs;
}
}
}
}
}
}
}
}
}
<script src="js/jquery.js"></script>
<script src="js/jquery.localScroll.js"></script>
<script src="js/jquery.parallax.1.1.-.js"></script>
<div id='parallax' class='columna ejemplo-1'>
<h1 class='blanco fino gigante centrado'>Primer parallax</h1>
</div>
<div id='parallax' class='columna ejemplo-2'>
<h1 class='blanco centrado fino gigante'>Segundo parallax</h1>
</div>
<div id='parallax' class='columna ejemplo-3'>
<h1 class='blanco centrado fino gigante'>Tercer parallax</h1>
</div>