Difference between revisions of "Team:Valencia UPV/Applied Design"

Line 227: Line 227:
 
</section>
 
</section>
 
<!--/CABECERA-->
 
<!--/CABECERA-->
 +
 +
<section class="section-xs">
 +
<div class="container">
 +
<div class="row">
 +
<div class="col-md-3">
 +
<!--INDEX-->
 +
<div id ="index" class="side-nav">
 +
<div class="side-nav-head">
 +
<button class="fa fa-bars"></button>
 +
<h4 style="color:#005368; padding-left: 20px !important;">INDEX</h4>
 +
</div>
 +
<ul class="list-group list-unstyled">
 +
<!--FIJAOS QUE LO QUE PONGAIS TRAS LA # EN href="#" ES LO QUE DEBEIS PONER EN LA id="" DE LA SECTION-->
 +
<li class="list-group-item active"><a href="#section1">Nombre del apartado 1</a></li>
 +
<li class="list-group-item"><a href="#section2">Nombre del apartado 2</a></li>
 +
<li class="list-group-item"><a href="#section3">Nombre del apartado 3</a></li>
 +
<li class="list-group-item"><a href="#section4">Nombre del apartado 4</a></li>
 +
<li class="list-group-item"><a href="#section5">Nombre del apartado 5</a></li>
 +
<li class="list-group-item"><a href="#section6">Nombre del apartado 6</a></li>
 +
<li class="list-group-item"><a href="#section7">Nombre del apartado 7</a></li>
 +
<li class="list-group-item"><a href="#section8">Nombre del apartado 8</a></li>
 +
<li class="list-group-item"><a href="#section9">Nombre del apartado 9</a></li>
 +
<li class="list-group-item"><a href="#section10">Nombre del apartado 10</a></li>
 +
<!--SI NECESITAS MAS PON LO SIGUIENTE:
 +
<li class="list-group-item"><a href="#sectionX">Nombre del apartado</a></li>
 +
-->
 +
</ul>
 +
</div>
 +
<!--/INDEX-->
 +
</div>
 +
<div class="col-md-9">
 +
<!--AQUI EMPIEZA LOS APARTADOS, TENEIS VARIOS EJEMPLOS
 +
EL NOMBRE DEL APARTADO SIEMPRE EN MAYUSCULAS
 +
DONDE PONE id="" PONEIS DENTRO LO QUE HABEIS PUESTO TRAS LA # EN
 +
EL INDICE href="#"
 +
LUEGO:
 +
- TODO PARRAFO VA ENTRE LAS SIGUIENTES ETIQUETAS <p class="jopesangria">Aqui el parrafo</p>
 +
SI NO LO QUEREIS CON SANGRIA QUITAD EL ATRIBUTO class="jopesangria"
 +
- SI QUEREIS PONER UNA PALABRA EN NEGRITA DEBERA IR ENTRE <strong class="jopenegrita">Aqui la palabra/texto</strong>
 +
- SI USAIS CURSIVA TENDRA QUE IR ENTRE LAS SIGUIENTES ETIQUETAS <i class="jopecursiva">Aqui el palabra/texto</i>
 +
- SI QUEREIS PONER UN ENLACE EN ALGUNA PALABRA DEBERA SER <u><a href="AQUI VA EL ENLACE">Aqui palabra/texto donde haces click</a></u>
 +
EL RESULTADO SERA LA PALABRA/TEXTO SUBRAYADO QUE LO HACE LA ETIQUETA <u></u> y el enlace que viene por la etiqueta <a ...></a>
 +
- LAS IMAGENES USADAS SOLO PUEDEN TENER DOS TAMAÑOS:
 +
1. /SANGRADA/ 1024px de ancho el alto me da igual, aunque se pondra a unos 815px.
 +
2. /EMBEBIDA/ y 400px de ancho, bueno da igual el ancho de la imagen, la pondre siempre a 400px
 +
-->
 +
<!--APARTADO-->
 +
<div id="section1" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 1</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita">Ejemplo de texto en negrita</strong> aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<p class="jopesangria"><i class="jopecursiva">Esto es un ejemplo de texto en italic</i></p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<div class="divider"><!-- divider /ESTO ES LA BARRITA QUE SALE TRAS UN APARTADO NO SE PUEDE QUITAR/ --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--APARTADO-->
 +
<div id="section2" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 2</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita"></strong> aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<!--ESTO ES UN EJEMPLO DE IMAGEN SANGRADA-->
 +
<img class="img-responsive" style="width:100%;margin-bottom: 20px;" src="https://static.igem.org/mediawiki/2017/8/83/LabSafetyPaulaValencia.jpeg"/>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<div class="divider"><!-- divider --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--APARTADO-->
 +
<div id="section3" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 3</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita"></strong> aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<!--EJEMPLO DE IMAGEN EMBEBIDA
 +
/solo funciona en parrafos cuyas lineas se quedan del tamaño del ancho de la imagen so ¡Cuidado!/
 +
-->
 +
<img class="float-left img-fluid" src="https://static.igem.org/mediawiki/2017/6/63/HardwareSafetyValencia.jpeg" style="width:400px !important" alt=""/>
 +
<p class="jopesangria">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
<p class="jopesangria">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
<div class="divider"><!-- divider --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--APARTADO-->
 +
<div id="section4" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 4</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita"></strong> aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<div class="divider"><!-- divider --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--APARTADO-->
 +
<div id="section5" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 5</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita"></strong> aquí va el texto.</p>
 +
<img class="float-right img-fluid" src="https://static.igem.org/mediawiki/2017/6/63/HardwareSafetyValencia.jpeg" style="width:400px !important" alt=""/>
 +
<p class="jopesangria">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
<p class="jopesangria">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
<div class="divider"><!-- divider --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--APARTADO-->
 +
<div id="section6" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 6</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita"></strong> aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<div class="divider"><!-- divider --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--APARTADO-->
 +
<div id="section7" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 7</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita"></strong> aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<div class="divider"><!-- divider --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--APARTADO-->
 +
<div id="section8" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 8</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita"></strong> aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<div class="divider"><!-- divider --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--APARTADO-->
 +
<div id="section9" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 9</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita"></strong> aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<div class="divider"><!-- divider --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--APARTADO-->
 +
<div id="section10" class="container">
 +
<div class="heading-color">
 +
<h2><span>NOMBRE DEL APARTADO 10</span></h2>
 +
</div>
 +
<p class="jopesangria"><strong class="jopenegrita"></strong> aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<p class="jopesangria">Aquí va el texto.</p>
 +
<div class="divider"><!-- divider --></div>
 +
</div>
 +
<!--/APARTADO-->
 +
<!--SI QUIERES AÑADIR UN NUEVO APARTADO COPIA Y PEGA EL CODIGO DE APARTADO-->
 +
</div>
 +
</div>
 +
</div>
 +
</section>
 +
<!-- SCROLL TO TOP -->
 +
<a href="#" id="toTop"></a>
 +
<!-- /SCROLL TO TOP -->
 +
<!-- PRELOADER -->
 +
<div id="preloader">
 +
<div class="inner">
 +
<span class="loader"></span>
 +
</div>
 +
</div>
 +
<!-- /PRELOADER -->
  
 
<!-- SCROLL TO TOP -->
 
<!-- SCROLL TO TOP -->

Revision as of 00:05, 2 November 2017

Home • Project •

APPLIED DESIGN

NOMBRE DEL APARTADO 1

Ejemplo de texto en negrita aquí va el texto.

Aquí va el texto.

Esto es un ejemplo de texto en italic

Aquí va el texto.

NOMBRE DEL APARTADO 2

aquí va el texto.

Aquí va el texto.

Aquí va el texto.

NOMBRE DEL APARTADO 3

aquí va el texto.

Aquí va el texto.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

NOMBRE DEL APARTADO 4

aquí va el texto.

Aquí va el texto.

Aquí va el texto.

NOMBRE DEL APARTADO 5

aquí va el texto.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

NOMBRE DEL APARTADO 6

aquí va el texto.

Aquí va el texto.

Aquí va el texto.

NOMBRE DEL APARTADO 7

aquí va el texto.

Aquí va el texto.

Aquí va el texto.

NOMBRE DEL APARTADO 8

aquí va el texto.

Aquí va el texto.

Aquí va el texto.

NOMBRE DEL APARTADO 9

aquí va el texto.

Aquí va el texto.

Aquí va el texto.

NOMBRE DEL APARTADO 10

aquí va el texto.

Aquí va el texto.

Aquí va el texto.