Wireframe Aplicaciones Móviles

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

FelipeLoTo
Posts: 1
Joined: Fri Aug 10, 2018 9:58 am

Re: Wireframe Aplicaciones Móviles

Post by FelipeLoTo » Fri Aug 10, 2018 1:42 pm

CSS:

Code: Select all

html{
    background-color: #EADBD7;
}

.dropbtn{
    background-color: #000000;
    color: white;
    padding: 16px;
    font-family: "Oswald" ,sans-serif;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus{
    background-color: #877F7A;
}

/* div para la posicion */
.dropdown{
    position: relative;
    display: inline-block;    
}

/* contenido */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* links */
.dropdown-content a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: "Oswald", sans-serif;
}

/* cambiar color cuando se hace hover a los items */
.dropdown-content a:hover{
    background-color: #ddd
}

/* show para el script */
.show{
    display:block;
}

.logo{    
    font-family: "Abel" , sans-serif;
    text-align: center;
}

.logo h1{
    display: inline;
}

#primeraImagen{
    float:left;    
}

.texto{
    margin-left: 15%;
    margin-right: 15%
}

h2{
    text-align: center;
    font-family: "Abel" , sans-serif;
}

p{
    font-family: "Karla",sans-serif;
    text-align: justify;
}

#video{
    float: right;
}

#ultimaImg{
    display: block;
    margin-left:auto;
    margin-right:auto;
    width:40%;
}

.scroll{
    margin-left: 15%;
    margin-right: 15%;
    height:120px;
    width:70%;
    border:1px solid #ccc;
    font-family: "Karla",sans-serif;
    overflow:auto;
    text-align: justify;
}

.imgArtista{
    margin-left: 40%;
    margin-right: 40%;
}

.lista{
    display: inline-block;    
}

.lista li{
    font-family: "Karla",sans-serif;
    font-size: large;
}

.collage{    
    display: inline-block;    
    margin-left: 10%;
    margin-right: -30%;
}

.collage img{
    width: 30%;    
    display: block;
}
Pagina principal:

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Abel|Karla|Oswald" rel="stylesheet">	
	<link rel="stylesheet" type="text/css" href="css/main.css">	
	
</head>
<body>
	<div class="dropdown">
  		<button onclick="dropMenu()" class="dropbtn">Menú</button>
  		<div id="myDropdown" class="dropdown-content">
    		<a href="artistas.html">Artistas</a>
    		<a href="top.html">Top</a>    		
  		</div>
	</div>

	
	<div class="logo">
		<img src="img/icono.png" id="icono" width="50" height="50">	
		<h1>Clásica</h1>	
	</div>
	

	<div class="texto">
		<h2>Noticias</h2><br>
		<p><img src="img/violin.jpg" width="50%" id="primeraImagen">
			Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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 adipisicing 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>

	<div class="texto" >
		<p><iframe width="50%" height="300" src="https://www.youtube.com/embed/uT3SBzmDxGk?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen id="video"></iframe>Lorem ipsum dolor sit 
		amet, consectetur adipisicing 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 adipisicing 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 adipisicing 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>

	<img src="img/bethoven.jpg" id="ultimaImg">

	<script>
		/* When the user clicks on the button, 
		toggle between hiding and showing the dropdown content */
		function dropMenu() {
    		document.getElementById("myDropdown").classList.toggle("show");
		}	

		// Close the dropdown if the user clicks outside of it
		window.onclick = function(event) {
  		if (!event.target.matches('.dropbtn')) {
    		var dropdowns = document.getElementsByClassName("dropdown-content");
    		var i;
    		for (i = 0; i < dropdowns.length; i++) {
      			var openDropdown = dropdowns[i];
      			if (openDropdown.classList.contains('show')) {
        			openDropdown.classList.remove('show');
      			}
    		}
	  	}
		}
	</script>
</body>
</html>
Artistas:

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Abel|Karla|Oswald" rel="stylesheet">	
	<link rel="stylesheet" type="text/css" href="css/main.css">	
	
</head>
<body>

	<div class="dropdown">
  		<button onclick="dropMenu()" class="dropbtn">Menú</button>
  		<div id="myDropdown" class="dropdown-content">
    		<a href="index.html">Inicio</a>
    		<a href="top.html">Top</a>    		
  		</div>
	</div>

	<div class="logo">
		<img src="img/icono.png" id="icono" width="50" height="50">	
		<h1>Clásica</h1>	
	</div>

	<h2>Artistas</h2>
	<img src="img/vivaldi.jpg" width="20%" class="imgArtista">
	<div class="scroll">Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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.</div>
	<img src="img/tchaikovsky.jpg" width="20%" class="imgArtista">
	<div class="scroll">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
	<img src="img/mozart.jpg" width="20%" class="imgArtista">
	<div class="scroll">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</div>
	<script>
		/* When the user clicks on the button, 
		toggle between hiding and showing the dropdown content */
		function dropMenu() {
    		document.getElementById("myDropdown").classList.toggle("show");
		}	

		// Close the dropdown if the user clicks outside of it
		window.onclick = function(event) {
  		if (!event.target.matches('.dropbtn')) {
    		var dropdowns = document.getElementsByClassName("dropdown-content");
    		var i;
    		for (i = 0; i < dropdowns.length; i++) {
      			var openDropdown = dropdowns[i];
      			if (openDropdown.classList.contains('show')) {
        			openDropdown.classList.remove('show');
      			}
    		}
	  	}
		}
	</script>
</body>
</html>
Top:

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Abel|Karla|Oswald" rel="stylesheet">	
	<link rel="stylesheet" type="text/css" href="css/main.css">	
	
</head>
<body>

	<div class="dropdown">
  		<button onclick="dropMenu()" class="dropbtn">Menú</button>
  		<div id="myDropdown" class="dropdown-content">
    		<a href="index.html">Inicio</a>
    		<a href="artistas.html">Artistas</a>
  		</div>
	</div>	

	<div class="logo">
		<img src="img/icono.png" id="icono" width="50" height="50">	
		<h1>Clásica</h1>	
	</div>

	<div class="collage">
		<img src="img/Mozart.jpg">
		<img src="img/Vivaldi.jpg">
		<img src="img/Tchaikovsky.jpg">		
		<img src="img/Mozart.jpg">
		<img src="img/Vivaldi.jpg">
		<img src="img/Tchaikovsky.jpg">
	</div>

	<div class="lista">
		<ol>
			<li>Mozart</li>
			<li>Vivaldi</li>
			<li>Tchaikovsky</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
			<li>Lorem</li>
		</ol>		
	</div>
	
	<script>
		/* When the user clicks on the button, 
		toggle between hiding and showing the dropdown content */
		function dropMenu() {
    		document.getElementById("myDropdown").classList.toggle("show");
		}	

		// Close the dropdown if the user clicks outside of it
		window.onclick = function(event) {
  		if (!event.target.matches('.dropbtn')) {
    		var dropdowns = document.getElementsByClassName("dropdown-content");
    		var i;
    		for (i = 0; i < dropdowns.length; i++) {
      			var openDropdown = dropdowns[i];
      			if (openDropdown.classList.contains('show')) {
        			openDropdown.classList.remove('show');
      			}
    		}
	  	}
		}
	</script>
</body>
</html>
Wireframe a mano:
Image

Wireframe:
Image

Preview:

https://i.imgur.com/Il65KWB.gifv
Luis Felipe López Torres - UPB


User avatar
andresfqs
Posts: 14
Joined: Thu Jul 26, 2018 12:12 pm

Re: Wireframe Aplicaciones Móviles

Post by andresfqs » Fri Aug 10, 2018 5:56 pm

Image

Image

Image

Image

Image

Image

Image

estilos.css

Code: Select all

* {margin:0px; padding:0px; border:0px;}
a {color:brown; text-decoration:none; display:block;font-size:1.5em}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color: black;}
a:active {}
p {text-align:justify; color:white;border-top: black 20px solid; margin:5px 10px 5px 5px;}
.centrado {text-align:center; }
.izquierda {text-align:left; border-left: black 10px solid;border-top: black 6px solid;border-bottom: black 6px solid;border-right: black 10px solid}
.derecha {text-align:right; border-right: black 10px solid;border-top: black 6px solid;border-bottom: black 6px solid;border-left: black 10px}
h1 {font-size:1.5em; color:white; font-weight:bold; text-decoration:none; text-align:center; border-top: black 8px solid}
h2 {font-size:1.3em; color:white; font-weight:bold; text-decoration:none; border-left: black 10px solid;text-align:left}
h2 {font-size:1.3em; color:white; font-weight:bold; text-decoration:none;text-align:center; border-left: black 10px solid;}
body {background-color:#303030; text-align:center;}
#global {text-align:center;width:800px;;margin: white 4px auto;position: relative;margin-left: auto; margin-right: auto;}
#cabecera {background-color:black;border-left:red 3px solid;border-right:red 3px solid;}
#logotipo {float:left;border-bottom: red 3px solid}
#publicidad {float:rightborder-bottom: red 3px solid}
#navegacion {background-color:black; border:red 3px solid; height:30px;}
#navegacion li {float:left;list-style:none;margin:0px 30px 0px 30px;}
#navegacion ul {margin-left: 150px}
#contenido {background-color:black ;border-left:red 3px solid;border-right:red 3px solid;border-bottom: red 3px solid;}
#contenido a {color:brown; text-decoration:none; display:block;font-size:1.2em}
#contenido a:link {}
#contenido a:visited {}
#contenido a:hover {color:red; text-decoration:underline; background-color: black;}
#contenido a:active {}
#foto {background-color:yellow; width:200px; float:left;margin:20px 20px 20px 20px}
#curva-superior {background-image:url(objetos/curva-superior.gif);background-repeat:no-repeat; width:794px; height: 35px;overflow:hidden;border-left:red 3px solid;border-right:red 3px solid; border-top: red 3px solid}
#center {align:center;}
index.html

Code: Select all

<!DOCTYPE HTML>

<html>
	<head>
		<title>Alternativa local</title>
		<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
	</head>
	<body>
		<div id="global">
			<div id="curva-superior"></div>
			<div id="cabecera">
				<div id="logotipo">
					<param name=v1 value=78><param name=v2 value=249><img src="objetos/logotipo.gif.gif" height="133px" width="227px"/>
				</div>
				<div id="publicidad">
					<a href="index.html"><img src="objetos/logotipo2.gif" height="133px" width="567px" /></a>
				</div>
			</div>
			<div id="navegacion">
				<ul><li><a href="metal/metal.html">Metal</a></li><li><a href="punk/punk.html">Punk</a></li><li><a href="ska/ska.html">Ska</a></li><li><a href="hard-core/hard-core.html">Hard Core</a></li></ul>
			</div>
			<div id="contenido">
				<h1>Música alternativa de Medellín</h1>
				<h2><a href="metal/metal.html">Metal</a></h2>
				<p class="izquierda">Es un género musical que nació a mediados de los sesenta y principios de los setenta en el Reino Unido
				 y en los Estados Unidos, cuyos orígenes provienen del blues rock, hard rock y del rock psicodélico. Se caracteriza 
				 principalmente por sus guitarras fuertes y distorsionadas, ritmos enfáticos, los sonidos del bajo y la batería son más densas
				  de lo habitual y por voces generalmente agudas. </p>
				<p class="izquierda">Es una rama que representa para muchos jóvenes algo más que solo música, representa una ideología y una 
				manera de vivir totalmente diferente a la de la sociedad actual. Su música es llena de sentimientos, energía y difícil de 
				comprender para mucha gente. Sencillamente es algo fuerte pero delicado. Ruidoso pero melódico. Crudo pero verdadero. 
				Oscuro pero poético.</p>
				<h2 class="derecha"><a href="punk/punk.html">Punk</a></h2>
				<p class="derecha">Es un género musical dentro del rock que emergió a mediados de los años 70. Este género se caracteriza en 
				la industria musical por su actitud independiente y aficionado. En sus inicios, el punk era una música muy simple y cruda, a 
				veces descuidada: un tipo de rock sencillo, con melodías simples de duraciones cortas, sonidos de guitarras amplificadas poco 
				controlados o ruidosos, pocos arreglos e instrumentos, y, por lo general, de compases y tempos rápidos.</p>
				<p class="derecha">Las líneas de guitarra electicas se caracterizan por su sencillez y la crudeza del sonido amplificado, generalmente 
				creando un ambiente sonoro ruidoso o agresivo heredado del garage rock. El bajo, por lo general, sigue solo la línea del acorde 
				y no busca adornar con octavas ni arreglos la melodía. La batería por su parte lleva un tempo acelerado, con ritmos sencillos de 
				rock. Las voces varían desde expresiones fuertes e incluso violentas o desgarradas, expresivas caricaturas cantadas que alteran 
				los parámetros convencionales de la acción del cantante, hasta formas más melódicas y elaboradas.</p>
				<h2 class="izquierda"><a href="ska/ska.html">Ska</a></h2> 
				<p class="Izquierda">El ska es un género musical originado a finales de los 50 y popularizado durante la primera mitad de los 60 
				que deriva principalmente de la fusión de la música negra estadounidense de la época con ritmos populares propiamente jamaicanos, 
				siendo el precursor directo del rocksteady y más tarde del reggae. Al ser un género particularmente apto para fusiones ha sido 
				incorporado, a través de distintas variantes, a los más diversos lenguajes musicales. Desde un principio, las versiones ska de 
				populares composiciones para cine y televisión perfiló su particular identidad, entre callejera, nostálgica y “misteriosa”, 
				característica que conservaría a través de las épocas. Estuvo fuertemente asociado a los Rude Boy y a la independencia de Jamaica 
				del Reino Unido, aunque se hizo popular en todo el mundo desde muy poco tiempo después de su nacimiento.</p>
				<h2 class="derecha"><a href="hard-core/hard-core.html">Hard Core</a></h2>
				<p class="derecha">Es un subgénero musical derivado del punk rock, que se originó en Estados Unidos y posteriormente en el Reino 
				Unido a finales de los años 70.</p>
				<p class="derecha">Se caracteriza por suponer la evolución de los aspectos más enérgicos del punk, los tempos y compases son rápidos, 
				a ritmos de baterías veloces y agresivos, las líneas de guitarras ejecutadas velozmente y con pocos arreglos, amplificadas con un 
				sonido de distorsión, el bajo por lo general hace la misma nota del acorde de la guitarra (sin escalas, ocasionalmente con octavas), 
				la voz es casi gritada, rápida y las canciones suelen ser cortas.</p>
				<p class="derecha">Del hard core han surgido varios géneros, a veces fusionándose con el metal (el cual influyó en la creación del género), 
				derivándose subgéneros como el hardcore melódico, el post-hardcore,el metalcore, el deathcore, el grunge y muchos otros más.</p>
			</div>
		</div>
	</body>
</html>
ska.html

Code: Select all

<!DOCTYPE HTML">

<html>
	<head>
		<title>Ska local</title>
		<link rel="stylesheet" href="../estilos.css" type="text/css" media="all">
	</head>
	<body>
		<div id="global">
			<div id="curva-superior"></div>
			<div id="cabecera">
				<div id="logotipo">
					<param name=v1 value=78><param name=v2 value=249><img src="../objetos/logotipo.gif.gif" height="133px" width="227px"/>
				</div>
				<div id="publicidad">
					<a href="../index.html"><img src="../objetos/logotipo2.gif" height="133px" width="567px" /></a>
				</div>
			</div>
			<div id="navegacion">
				<ul><li><a href="../metal/metal.html">Metal</a></li><li><a href="../punk/punk.html">Punk</a></li><li><a href="ska.html">Ska</a></li><li><a href="../hard-core/hard-core.html">Hard Core</a></li></ul>
			</div>
			<div id="contenido">
				<div>
					<h1>Tob bandas de Ska local</h1>
					<ol>
						<li>
							<h2 class="izquierda">La furruska</h2>
							<p class="izquierda">Es un grupo colombiano de ska de la ciudad de Medellín, Antioquia, formado en 2005. Actualmente está 
							integrado por Carlos Mario Colorado (voz y guitarra), Cristian Castrillón (bajo) y Hans Usma (batería), Miguel Ángel Tamayo (trompeta), 
							Elkin Cruz (saxo alto) y Santiago Osorio (saxo tenor).</p>
							<img src="objetos/maxresdefault.jpg" height="300px" width="600px" />
						</li>
						<li>
							<h2 class="izquierda">La sinfoniska</h2>
							<p class="izquierda">Es un grupo colombiano de ska punk de la ciudad de Medellín, Antioquia, formado en 2009. Actualmente está 
							integrado por Jonathan Durango (voz y tompeta), Eider López (guitarra), Esteban Ramirez (bajo), Mateo Franco (batería), Darien Sepúlveda (trombón), Camilo Araque (trombón y coros), Andrés Ortiz (saxofón tenor y coros) y Andrés Úsuga (trompeta).</p>
							<img src="objetos/lasinfo.jpg" height="300px" width="600px" />
						</li>
						<li>
							<h2 class="izquierda">La mojiganga</h2>
							<p class="izquierda">Es un grupo colombiano de ska core de la ciudad de Medellín, Antioquia, formado en 1995. Actualmente está 
							integrado por Daniel Puerta (voz y trompeta), Alejandro Jaramillo (guitarra y voz), Jorge Conde (bajo), Miguel Cardona (batería), Natalia Villa (saxofón) y Mauricio Agudelo (saxofón y voz).</p>
							<img src="objetos/mojiganga.jpg" height="300px" width="600px" />
						</li>
						<li>
							<h2 class="izquierda">Guaska</h2>
							<p class="izquierda">Es un grupo colombiano de ska punk de la ciudad de Medellín, Antioquia, formado en 2011. Actualmente está 
							integrado por Gabriel (voz), Lucas (guitarra), José (bajo) y Mauricio Restrepo (batería).</p>
							<img src="objetos/guaska.jpg" height="300" width="600" />
						</li>
						<li>
							<h2 class="izquierda">Burkina</h2>
							<p class="izquierda">Es un grupo colombiano de ska de la ciudad de Medellín, Antioquia, formado en 1998. Actualmente está 
							integrado por Erwin Renaldy (voz y guitarra), Juan Pablo López (guitarra),Julian Zapata (percusion),Jhon Alexander Orrego (trombo), Yoni Pérez (trompeta), Andres Piedrahita (bajo) y Diego Vasquez (batería).</p>
							<img src="objetos/burkina.jpg" height="300" width="600" />
						</li>
					</ol>
				</div>
			</div>
		</div>
	</body>
</html>
metal.html

Code: Select all

<!DOCTYPE HTML>

<html>
	<head>
		<title>Metal local</title>
		<link rel="stylesheet" href="../estilos.css" type="text/css" media="all">
	</head>
	<body>
		<div id="global">
			<div id="curva-superior"></div>
			<div id="cabecera">
				<div id="logotipo">
					<param name=v1 value=78><param name=v2 value=249><img src="../objetos/logotipo.gif.gif" height="133px" width="227px"/>
				</div>
				<div id="publicidad">
					<a href="../index.html"><img src="../objetos/logotipo2.gif" height="133px" width="567px" /></a>
				</div>
			</div>
			<div id="navegacion">
				<ul><li><a href="metal.html">Metal</a></li><li><a href="../punk/punk.html">Punk</a></li><li><a href="../ska/ska.html">Ska</a></li><li><a href="../hard-core/hard-core.html">Hard Core</a></li></ul>
			</div>
			<div id="contenido">
				<h1>Top bandas de Metal local</h1>
				<ol>
					<li>
						<h2 class="izquierda">Masacre</h2>
						<p class="izquierda">Es un grupo colombiano de death metal de la ciudad de Medellín, Antioquia, formado en 1988. Actualmente está 
						integrado por Alex Oquendo (voz), Jorge Londoño (guitarra), Álvaro Álvarez (bajo) y Mauricio Londoño (batería).</p>
						<img src="objetos/masacre.jpg" height="300" width="600" />
					</li>
					<li>
						<h2 class="izquierda">Aorta</h2>
						<p class="izquierda">Es un grupo colombiano de black metal de la ciudad de Medellín, Antioquia, formado en el 2001. Actualmente está 
						integrado por Eduar Zapata (voz), Juan Correa (guitarra), Cristian Florez (bajo), Daniel Giraldo (batería) y Jhon Noreña (guitarra).</p>
						<img src="objetos/aorta.jpg" height="300" width="600" />
					</li>
					<li>
						<h2 class="izquierda">Tenebrarum</h2>
						<p class="izquierda">Es un grupo colombiano de metal gotico de la ciudad de Medellín, Antioquia, formado en el 1990. Actualmente está 
						integrado por Juan Carlos Henao (guitarra y voz), Julián Rivera (bajo), Andrés Giraldo (batería), Luis García (teclado) y David Rivera (Violín).</p>
						<img src="objetos/tenebrarum1_gr.jpg" height="300" width="600" />
					</li>
					<li>
						<h2 class="izquierda">Reencarnación</h2>
						<p class="izquierda">Es un grupo colombiano de ultrametal de la ciudad de Medellín, Antioquia, formado en el 1987. Actualmente está 
						integrado por Víctor Raúl Jaramillo (voz), Federico López (guitarra), Petete (guitarra), El Sorpre (bajo), El Gato (batería) y David Rivera (Violín).</p>
						<img src="objetos/reencarnacion.gif" height="300" width="600" />
					</li>
					<li>
						<h2 class="izquierda">Miseria Postmortem</h2>
						<p class="izquierda">Es un grupo colombiano de thrash metal de la ciudad de Medellín, Antioquia, formado en el 2010. Actualmente está 
						integrado por Daniel Herrera (voz y bajo), Sebastian Murcia (guitarra) y  Juan Chope (batería).</p>
						<img alt="Click para ver el video" src="objetos/miseria.jpg" height="300" width="600" />
					</li>
				</ol>
			</div>
		</div>
	</body>
</html>
punk.html

Code: Select all

<!DOCTYPE HTML>

<html>
	<head>
		<title>Punk local</title>
		<link rel="stylesheet" href="../estilos.css" type="text/css" media="all">
	</head>
	<body>
		<div id="global">
			<div id="curva-superior"></div>
			<div id="cabecera">
				<div id="logotipo">
					<param name=v1 value=78><param name=v2 value=249><img src="../objetos/logotipo.gif.gif" height="133px" width="227px"/>
				</div>
				<div id="publicidad">
					<a href="../index.html"><img src="../objetos/logotipo2.gif" height="133px" width="567px" /></a>
				</div>
			</div>
			<div id="navegacion">
				<ul><li><a href="../metal/metal.html">Metal</a></li><li><a href="punk.html">Punk</a></li><li><a href="../ska/ska.html">Ska</a></li><li><a href="../hard-core/hard-core.html">Hard Core</a></li></ul>
			</div>
			<div id="contenido">
				<h1>Top bandas de Punk local</h1>
				<ol>
					<li>
						<h2 class="izquierda">Fertil miseria</h2>
						<p class="izquierda">Es un grupo colombiano de punk hardcore de la ciudad de Medellín, Antioquia, formado en 1990. Actualmente está integrado por Vicky Castro (voz), Juan Londoño (guitarra), Carlos Durango (guitarra), Piedad Castro (bajo) y Edwin Cortez (batería).</p>
						<img src="objetos/fertil_miseria.jpg" height="300" width="600" />
					</li>
					<li>
						<h2 class="izquierda">I.R.A</h2>
						<p class="izquierda">Es un grupo colombiano de punk de la ciudad de Medellín, Antioquia, formado en 1985. Actualmente está 
						integrado por Mónica Moreno (voz y bateria), David viola (voz y guitarra), Duvan Ocampo (bajo y coros).</p>
						<img src="objetos/ira.jpg" height="300" width="600" />
					</li>
					<li>
						<h2 class="izquierda">Los suziox</h2>
						<p class="izquierda">Es un grupo colombiano de Punk de la ciudad de Medellín, Antioquia, formado en 2003. Actualmente está 
						integrado por Andrés Ocampo (voz), Juan Sebastián Pizarra (guitarra), Juan Camilo Monsalve (bajo) y Andrés Felipe Torres (batería).</p>
						<img src="objetos/los-suziox.jpg" height="300" width="600" />
					</li>
					<li>
						<h2 class="izquierda">Intérprete deskonocido</h2>
						<p class="izquierda">Es un grupo colombiano de punk hardcore de la ciudad de Medellín, Antioquia, formado en 2004. Actualmente está 
						integrado por Diego Ramírez (guitarra), David Agudelo (bajo) y Luiz Mendoza (batería y voz).</p>
						<img src="objetos/interprete.jpg" height="300" width="600" />
					</li>
					<li>
						<h2 class="izquierda">IV Tiempos</h2>
						<p class="izquierda">Es un grupo colombiano de punk hardcore de la ciudad de Medellín, Antioquia, formado en 2004. Actualmente está 
						integrado por Anderson Quintero (voz), Robinsón Jaramillo (guitarra), Víctor Orlando Quintero (bajo) y Yeyson Zea (batería).</p>
						<img src="objetos/tiempos.jpg" height="300" width="600" />
					</li>
				</ol>
			</div>
		</div>
	</body>
</html>
hardcore.html

Code: Select all

<!DOCTYPE HTML>

<html>
	<head>
		<title>Hard Core Local</title>
		<link rel="stylesheet" href="../estilos.css" type="text/css" media="all">
	</head>
	<body>
		<div id="global">
			<div id="curva-superior"></div>
			<div id="cabecera">
				<div id="logotipo">
					<param name=v1 value=78><param name=v2 value=249><img src="../objetos/logotipo.gif.gif" height="133px" width="227px"/>
				</div>
				<div id="publicidad">
					<a href="../index.html"><img alt="" src="../objetos/logotipo2.gif" height="133px" width="567px" /></a>
				</div>
			</div>
			<div id="navegacion">
				<ul><li><a href="../metal/metal.html">Metal</a></li><li><a href="../punk/punk.html">Punk</a></li><li><a href="../ska/ska.html">Ska</a></li><li><a href="hard-core.html">Hard Core</a></li></ul>
			</div>
			<div id="contenido">
				<h1>Top bandas de Hard Core local</h1>

				<ol>
					<li>
						<h2 class="izquierda">En contra de todo</h2>
						<p class="izquierda">Es un grupo colombiano de Hardcore punk de la ciudad de Medellín, Antioquia, formado en 2005. Actualmente está 
						integrado por Yesid González (voz), Angelo Zapata (guitarra), Kevin Coterio (guitarra), Juan Esteban Almanzar (bajo) y Faber González (batería).</p>
						<img src="objetos/encontradetodo.jpg" height="300px" width="600px" />
					</li>
					<li>
						<h2 class="izquierda">Grito</h2>
						<p class="izquierda">Es un grupo colombiano de Hardcore de la ciudad de Medellín, Antioquia, formado en 1999. Actualmente está 
						integrado por Manzano (voz), David (guitarra), Felipe (bajo) y Carlos Julio  (batería).</p>
						<img src="objetos/Grito.jpg" height="300px" width="600px" />
					</li>
					<li>
						<h2 class="izquierda">Los crepos</h2>
						<p class="izquierda">Es un grupo colombiano de Harcore Punk de la ciudad de Medellín, Antioquia, formado en 2008. Actualmente está 
						integrado por Jorge Pabon (voz), Felipe (guitarra), Juan Silva (bajo) y Ivan Gonzales (batería).</p>
						<img src="objetos/los-crespos.jpg" height="300px" width="600px" />
					</li>
					<li>
						<h2 class="izquierda">Trauma encefalico</h2>
						<p class="izquierda">Es un grupo colombiano de Hardcore de la ciudad de Medellín, Antioquia, formado en 2007. Actualmente está 
						integrado por Richar Reyes (voz), Pablo Gómez (guitarra), Mauricio Velez (guitarra), Gabriel Rincón (bajo) y Diego (batería).</p>
						<img src="objetos/trauma-encefalico.jpg" height="300px" width="600px" />
					</li>
					<li>
						<h2 class="izquierda">Somos miedo</h2>
						<p class="izquierda">Es un grupo colombiano de Hardcore Melódico de la ciudad de Medellín, Antioquia, formado en 2010. Actualmente está 
						integrado por Jorge Pabón (voz), Simón Estrada (guitarra), David Rendón (guitarra), Alejandro Moreno (bajo) y Jhonny Betancur (batería).</p>
						<img src="objetos/somosmiedo.jpg" height="300px" width="600px" />
					</li>
				</ol>
			</div>
		</div>
	</body>
</html>

User avatar
Mariana Franco
Posts: 14
Joined: Mon Jan 22, 2018 11:24 am
Location: Medellín

Re: Wireframe Aplicaciones Móviles

Post by Mariana Franco » Fri Aug 10, 2018 10:29 pm

Image

Image

Image


Image

Image

Image

Image

Image


Image

Image

Image

Image

Image

Image

Image

Image


Codigo pagina de inicio

Code: Select all

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Add your site or application content here -->
  <div>
    <img id="fotoviolin" src="img/IMG_0501.jpg">
    <br>
    <h1 id="titulo" align="center">EL VIOLÍN</h1>
    <br>
    <div align="center" class="opciones">
      <div>
        <span><a href="historia.html"><img src="img/historia.jpg" class="imagenesop" alt="Enviar"></a></span>
        <span><a href="partes.html"><img src="img/partes.jpg" class="imagenesop" alt="Enviar"></a></span>
        <span><a href="top.html"><img src="img/top.jpg" class="imagenesop" alt="Enviar"></a></span>
        <span><a href="fotos.html"><img src="img/fotos.jpg" class="imagenesop" alt="Enviar"></a></span>
      
    </div>
  </div>
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>

</html>
Codigo pagina de historia

Code: Select all

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <nav>
          <ul class="menu">  
              <li><a href="index.html"><img src="img/violin.png" id="inicio"></a></li>  
              <li id="op"><a href="historia.html">Historia</a></li>  
              <li id="op"><a href="partes.html">Partes</a></li>
              <li id="op"><a href="top.html">Top 10</a></li>
              <li id="op"><a href="fotos.html">Fotos</a></li> 
          </ul>    
  </nav>
 <br>
    <h1 id="titulo" align="center">HISTORIA</h1>
    <br>
  <div align="center">
  <iframe id="video" src="https://www.youtube.com/embed/85MppyLJHz0"  allowfullscreen></iframe>
  </div>
  <br>
  <br>
<div class="historiatxt">
  <img id="historia" src="img/violinh.jpg"/>El violín es el instrumento de cuerda de menor tamaño. Procede de instrumentos tan antiguos como el ravanastrom, de aproximadamente cinco mil años antes de nuestra era. Pero el acercamiento real al violín actual no sucede hasta el siglo XVI, en Italia.

    Un siglo más tarde este instrumento todavía no gozaba de gran prestigio, hasta que el compositor y cantante Claudio Monteverdi lo utilizó para acompañar su ópera “Orfeo”. Estamos en 1607. La fama del violín ya no deja de crecer, en ocasiones de la mano de compositores tan conocidos como Beethoven, Vivaldi o Bach.

    Llega el siglo XVIII y con él la fabricación del violín deja de ser artesanal, para pasar a realizarse de manera industrial y en mayor cantidad, perdiendo gran parte de su calidad. La primera fábrica de violines se abre en Francia alrededor del año 1790.
</div>
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://www.youtube.com/watch?v=L2b-cIoCRWs" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>

</html>
Codigo pagina partes

Code: Select all

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <nav>
          <ul class="menu">  
              <li><a href="index.html"><img src="img/violin.png" id="inicio"></a></li>  
              <li id="op"><a href="historia.html">Historia</a></li>  
              <li id="op"><a href="partes.html">Partes</a></li>
              <li id="op"><a href="top.html">Top 10</a></li>
              <li id="op"><a href="fotos.html">Fotos</a></li> 
          </ul>    
  </nav>
    <br>
    <h1 id="titulo" align="center">PARTES DEL VIOLÍN</h1>
    <br>
<div class="partestxt" align="center">
  <ul>
    <li><img id="partes" src="img/voluta.jpg"/>Voluta</li>
    <li><img id="partes" src="img/diapason.png"/>Diapason</li>
    <li><img id="partes" src="img/cuerdas.jpg"/>Cuerdas</li>
    <li><img id="partes" src="img/clavijero.jpg"/>Clavijero</li>
  </ul>
</div>
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>

</html>
Codigo pagina Top 10

Code: Select all

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <nav>
          <ul class="menu">  
              <li><a href="index.html"><img src="img/violin.png" id="inicio"></a></li>  
              <li id="op"><a href="historia.html">Historia</a></li>  
              <li id="op"><a href="partes.html">Partes</a></li>
              <li id="op"><a href="top.html">Top 10</a></li>
              <li id="op"><a href="fotos.html">Fotos</a></li> 
          </ul>    
  </nav>
    <br>
    <h1 id="titulo" align="center">TOP 10 ARTISTAS</h1>
    <br>

  <div id="top" align="center">

    <h3>1. Paco Montalvo</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/m4jZcZ01rEo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h3>2. David Garrett</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/1TX_w15_gH0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h3>3. itzhak Perlman</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/RYokqDoXQjU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h3>4. Janine Jansen</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VEbyyqyKtM0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h3>5. Joshua Bell</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/hnOPu0_YWhw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h3>6. Alexander Markov</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/CPVUfcQe9og" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h3>7. Maxim Vengerov</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/5n0qXSO7Z-Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h3>8. Samvel Yervinyan</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/henMgfslBPQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h3>9. Hilary Hahn</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/o1dBg__wsuo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <h3>10. Sarah Chang</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/gpS_u5RvMpM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <br>

</div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="script.js"></script>
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>

</html>
Codigo pagina fotos

Code: Select all

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <nav>
          <ul class="menu">  
              <li><a href="index.html"><img src="img/violin.png" id="inicio"></a></li>  
              <li id="op"><a href="historia.html">Historia</a></li>  
              <li id="op"><a href="partes.html">Partes</a></li>
              <li id="op"><a href="top.html">Top 10</a></li>
              <li id="op"><a href="fotos.html">Fotos</a></li> 
          </ul>    
  </nav>
    <br>
    <h1 id="titulo" align="center">FOTOS</h1>
    <br>

 
  <div align="center">
    <span><a href="img/arts_next_08_sized_0.jpg"><img src="img/arts_next_08_sized_0.jpg" class="foto"></a></span>
    <span><a href="img/expensive-violin.jpg"><img src="img/expensive-violin.jpg" class="foto"></a></span>
    <span><a href="img/images (1).jpg"><img src="img/images (1).jpg" class="foto"></a></span>
    <span><a href="img/images.jpg"><img src="img/images.jpg" class="foto"></a></span>
    <span><a href="img/violin (1).jpg"><img src="img/violin (1).jpg" class="foto"></a></span>
    <span><a href="img/e1c4214b8eb99597c246dd7ce717a571.png"><img src="img/e1c4214b8eb99597c246dd7ce717a571.png" class="foto"></a></span>
    <span><a href="img/violin-stradivarius-120117.jpg"><img src="img/violin-stradivarius-120117.jpg" class="foto"></a></span>
    <span><a href="img/violin-v4r-1483624412-editorial-long-form-0.jpg"><img src="img/violin-v4r-1483624412-editorial-long-form-0.jpg" class="foto"></a></span>
    <span><a href="img/68405324-free-violin-wallpapers.jpg"><img src="img/68405324-free-violin-wallpapers.jpg" class="foto"></a></span>
    <span><a href="img/beautiful-violin-wallpaper.jpg"><img src="img/beautiful-violin-wallpaper.jpg" class="foto"></a></span>
    <span><a href="img/images (3).jpg"><img src="img/images (3).jpg" class="foto"></a></span>
    <span><a href="img/wallace-hartley-violin.jpg"><img src="img/wallace-hartley-violin.jpg" class="foto"></a></span>
    <span><a href="img/Violin-Wallpaper-HD-Photos"><img src="img/Violin-Wallpaper-HD-Photos.jpg" class="foto"></a></span>
    <span><a href="img/185558.jpg"><img src="img/185558.jpg" class="foto"></a></span>
    <span><a href="img/e51c6e9054619a8dd7e7339ba05a758a--violin-photography-pen-case.jpg"><img src="img/e51c6e9054619a8dd7e7339ba05a758a--violin-photography-pen-case.jpg" class="foto"></a></span>
    <span><a href="img/images (4).jpg"><img src="img/images (4).jpg" class="foto"></a></span>
    <span><a href="img/images (2).jpg"><img src="img/images (2).jpg" class="foto"></a></span>
    <span><a href="img/images (5).jpg"><img src="img/images (5).jpg" class="foto"></a></span>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>

</html>
Codigo css

Code: Select all

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

#fotoviolin{
    width: 100%;
    height: 200px;
}
.imagenesop{
    width: 250px;
    height: 200px;
    margin-left: 20px;
    margin-top: 20px;
}

#titulo{
    font-size: 70px;
    font-family: verdana;
    color: black;
    margin-top: 60px;
}
#video{
    width: 60%;
    height: 450px;


}
#historia{
    float:right;  
    width: 250px;
    height: 250px;
    display: block;
    margin: 0 200px 100px 200px;
}
.historiatxt{
    margin: 0px 200px 0 300px;
    text-align: left; 
}
.partestxt{
    margin: 0px 200px 0 300px;
    text-align: center; 
    font-family: verdana;
    font-size: 38px;

}
#partes{
    margin-right: 300px;
    width: 150px;
    height: 150px
}
#inicio{
    width: 40px;
    height: 65px;
    margin-right: 100px;
    padding: 5px 0 5px 0 !important;
}
#op{
    margin-top: 15px;

}
#top{
    font-family: verdana;
    font-size: 28px;
}
nav {
display: block;
position : absolute;
left : 0;
width : 100%;
background-color : gray;
}
nav ul {
margin : 0 auto;
width : 940px;
list-style : none;
}
nav ul li {
float : left;
}
nav ul li a {
display : block;
margin-right : 20px;
font-family: verdana;
width : 140px;
font-size : 25px;
line-height : 44px;
text-align : right;
text-decoration : none;
color : #ccc;
}
nav ul li a:hover {
color : #fff;
}
nav ul li.selected a {
color : #fff;
}

.foto{
    width: 230px;
    height: 230px;
    margin-left: 10px;
    margin-bottom: 10px;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
Mariana Franco A.
Estudiante de pregrado, ingeniería en sistemas e informática.

User avatar
JuanDGiraldoM
Posts: 31
Joined: Mon Jan 22, 2018 11:23 am

Re: Wireframe Aplicaciones Móviles

Post by JuanDGiraldoM » Fri Aug 10, 2018 11:26 pm

Wireframe inicial
Image

Wireframe corregido
Image

Wireframe digital
Image

Gif
Image

Página Web
https://juandgiraldom.github.io/MotorVideos/index.html

Código
index.html

Code: Select all

<!doctype html>
<html class="no-js" lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Motor Videos</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">

  <!-- Custom styles -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <!-- Custom styles from web -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
</head>

<body>
  <!--[if lte IE 9]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Title -->
  <header>
    <h1 class="custom_font aligned">Motor Videos</h1>
  </header>

  <!-- Navigation Bar -->
  <nav id="nav_bar" class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <i class="fas fa-bars"></i>
        </a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="#About">About</a></li>
      </ul>
      <form class="navbar-form navbar-right" action="list.html">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">
          <i class="fas fa-search"></i>
        </button>
      </form>
    </div>
  </nav><br>


  <!-- Carousel -->
  <div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">

        <div class="item active">
          <img class="carousel_img" src="img/apollo.jpg" alt="Intensa Emozione">
          <div class="carousel-caption">
            <h3>Apollo</h3>
            <p>Intensa Emozione 2018</p>
          </div>
        </div>

        <div class="item">
          <img class="carousel_img" src="img/camaro.jpg" alt="Camaro">
          <div class="carousel-caption">
            <h3>Chevrolet</h3>
            <p>Camaro Z28 1969</p>
          </div>
        </div>

        <div class="item">
          <img class="carousel_img" src="img/challenger.jpg" alt="Challenger">
          <div class="carousel-caption">
            <h3>Dodge</h3>
            <p>Challenger SRT Deamon 2018</p>
          </div>
        </div>

      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

  <!-- Video list -->
  <div id="portfolio" class="container-fluid text-left bg-grey">
    <h2>Salomundo</h2>
    <div class="row text-left slideanim">
      <div class="col-sm-6">
        <a href="detail.html">
          <div class="thumbnail portfolio_thumb">
            <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/vaI5NskhGKc?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
            <p><strong>Salomundo</strong></p>
            <p>Nissan GTR Nismo</p>
          </div>
        </a>
      </div>
      <div class="col-sm-6">
        <a href="detail.html">
          <div class="thumbnail portfolio_thumb">
            <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/_UWms_T0Eu4?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
            <p><strong>Salomundo</strong></p>
            <p>Pagani Huayra BC</p>
          </div>
        </a>
      </div>
    </div>

    <h2>Majes en Moto</h2>
    <div class="row text-left slideanim">
      <div class="col-sm-6">
        <a href="detail.html">
          <div class="thumbnail portfolio_thumb">
            <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/NPameo-42U0?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
            <p><strong>Majes en Moto</strong></p>
            <p>Kawasaki Z900</p>
          </div>
        </a>
      </div>

      <div class="col-sm-6">
        <a href="detail.html">
          <div class="thumbnail portfolio_thumb">
            <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/60gMaDJEidE?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
            <p><strong>Majes en Moto</strong></p>
            <p>Yamaha YBR 125cc</p>
          </div>
        </a>
      </div>
    </div>
  </div><br>


  <!-- Footer -->
  <footer id="About">
    <h3 class="custom_font">About</h3>
    <hr>
    <section class="col-sm-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
    <section class="col-sm-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
    <section class="col-sm-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
  </footer>

  <!-- Custom javascript -->
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date; ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')</script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>

</body>
</html>
list.html

Code: Select all

<!doctype html>
<html class="no-js" lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Motor Videos</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">

  <!-- Custom styles -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <!-- Custom styles from web -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
</head>

<body>
  <!--[if lte IE 9]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Title -->
  <header>
    <h1 class="custom_font aligned">Motor Videos</h1>
  </header>

  <!-- Navigation Bar -->
  <nav id="nav_bar" class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <i class="fas fa-bars"></i>
        </a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="#About">About</a></li>
      </ul>
      <form class="navbar-form navbar-right" action="list.html">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Majes en Moto">
        </div>
        <button type="submit" class="btn btn-default">
          <i class="fas fa-search"></i>
        </button>
      </form>
    </div>
  </nav><br>


  <!-- Container -->
  <div class="container">
    <h2>Majes en Moto</h2>
    <div class="media">
      <div class="col-sm-4">
        <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/8ZPLOOsEOgo?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
      </div> <br>
      <div class="col-sm-8">
        <h4 class="media-heading">Moto Eléctrica, Escaleras y Quedarse Tirado</h4><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </div>
    <hr>

    <div class="media">
      <div class="col-sm-4">
        <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/VyqnWR3yUDk?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
      </div> <br>
      <div class="col-sm-8">
        <h4 class="media-heading">Mis Viajes en Moto y Consejos para Viajar!</h4><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </div>
    <hr>

    <div class="media">
      <div class="col-sm-4">
        <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/nZWQU3OgSOA?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
      </div> <br>
      <div class="col-sm-8">
        <h4 class="media-heading">Como hacer fotos a una MOTO - En busca de la foto perfecta</h4><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </div>
    <hr>

    <div class="media">
      <div class="col-sm-4">
        <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/EnlXOc32Eek?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
      </div> <br>
      <div class="col-sm-8">
        <h4 class="media-heading">El Tag del Youtuber... En Moto!</h4><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </div>
    <hr>

    <div class="media">
      <div class="col-sm-4">
        <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/4R302Y4Dw8g?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
      </div> <br>
      <div class="col-sm-8">
        <h4 class="media-heading">Premios Vlogger - Tras las líneas Enemigas</h4><br>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </div>
    <hr>
  </div>

  <br><br>

  <!-- Footer -->
  <footer id="About">
    <h3 class="custom_font">About</h3>
    <hr>
    <section class="col-sm-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
    <section class="col-sm-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
    <section class="col-sm-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
  </footer>


  <!-- Custom javascript -->
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date; ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')</script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>

</html>
detail.html

Code: Select all

<!doctype html>
<html class="no-js" lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Motor Videos</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">

  <!-- Custom styles -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <!-- Custom styles from web -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
</head>

<body>
  <!--[if lte IE 9]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Title -->
  <header>
    <h1 class="custom_font aligned">Motor Videos</h1>
  </header>

  <!-- Navigation Bar -->
  <nav id="nav_bar" class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          <i class="fas fa-bars"></i>
        </a>
      </div>
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="#About">About</a></li>
      </ul>
      <form class="navbar-form navbar-right" action="list.html">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">
          <i class="fas fa-search"></i>
        </button>
      </form>
    </div>
  </nav><br>


  <!-- Jumbotron -->
  <div class="jumbotron text-left aligned">
    <h2>Nissan GTR Nismo</h2><br>
    <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/vaI5NskhGKc?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    <h3>Salomundo</h3>
    <p>Después de tanto escuchar que querían ver un Nissan GTR, aquí les traigo el papi de todos los GTRs, el buen NISMO!<br>
      Una gran maquina, pero como ven... si hay razones por la que no tiene sentido tener uno.<br>
      Espero les guste y les mando un abrazo!
    </p>
  </div>

  <!-- Portfolio -->
  <div id="portfolio" class="container-fluid text-left bg-grey">
    <div class="row text-left slideanim">
      <div class="col-sm-6">
        <a href="detail.html">
          <div class="thumbnail portfolio_thumb">
            <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/vaI5NskhGKc?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
            <p><strong>Salomundo</strong></p>
            <p>Nissan GTR Nismo</p>
          </div>
        </a>
      </div>
      <div class="col-sm-6">
        <a href="detail.html">
          <div class="thumbnail portfolio_thumb">
            <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/_UWms_T0Eu4?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
            <p><strong>Salomundo</strong></p>
            <p>Pagani Huayra BC</p>
          </div>
        </a>
      </div>
    </div>
  </div><br><br>


  <!-- Footer -->
  <footer id="About">
    <h3 class="custom_font">About</h3>
    <hr>
    <section class="col-sm-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
    <section class="col-sm-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
    <section class="col-sm-4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </section>
  </footer>


  <!-- Custom javascript -->
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date; ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')</script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>

</html>
main.css

Code: Select all

#nav_bar{
  background-color: rgba(#333333, 0.36);
  font-family: 'Bungee Inline', cursive;
  margin: 1%;
  position: sticky;
}

.aligned{
  margin: 1%;
}

.jumbotron{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  padding: 1% !important;
}

.jumbotron p{
  font-size: 15px !important;
}

.custom_font{
  font-family: 'Bungee Inline', cursive;
}

footer{
  background-color: #44444a;
  display: block;
  color: white;
  padding: 20px;
  height: 250px;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 70%;
  margin: auto;
}

#portfolio{
  padding: 5%;
}

.thumbnail:hover{
  background-color: #333333;
}

.portfolio_thumb{
  text-decoration: none;
  color: black;
}

.portfolio_thumb:hover{
  text-decoration: none;
  color: white;
}
Last edited by JuanDGiraldoM on Sat Aug 11, 2018 8:12 pm, edited 5 times in total.
Aplicaciones Móviles
Juan David Giraldo Marín
juand.giraldom@upb.edu.co

juanjog96
Posts: 1
Joined: Fri Aug 10, 2018 9:57 am

Re: Wireframe Aplicaciones Móviles

Post by juanjog96 » Fri Aug 10, 2018 11:57 pm

Home

Code: Select all

	<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/main.css">

    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Hanalei+Fill" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet"> 
    <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>Música</title>
</head>
<body>
    <div class="top-tittle">
        <img src="img/skull.png" height="28" width="28" alt="">
        <h1 class="header">Rock</h1>
    </div>
    
    <div class="top-bar">
        
        <ul class="top-bar">
            <li class="top-bar"><a href="index.html">Home</a></li>
            <li class="top-bar"><a href="artistas.html">Artistas</a></li>
            <li class="top-bar"><a href="top.html">Top 20</a></li>
        </ul>
      
    </div>
    <br/> 
    <div>
        <img class="img-slider" src="img/1.jpg" alt="">
        <img class="img-slider" src="img/2.jpeg" alt="">
        <img class="img-slider" src="img/3.jpeg" alt="">
        <img class="img-slider" src="img/4.jpeg" alt="">
        <img class="img-slider" src="img/5.jpeg" alt="">
    </div>
    <br/>
    <img src="img/60's.jpg" id="img-rock-lft" salt="" width="20%" height="10%">
    <div class="thin-div">
        <h2>60's Rock</h2>
        
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam possimus repellat soluta impedit quod ad fugit quas excepturi expedita commodi quae similique, obcaecati ducimus voluptate, aspernatur eius tenetur earum amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime similique non facere asperiores ea unde error officiis assumenda! Maxime nesciunt recusandae aut ab. Molestiae rerum at obcaecati error vitae doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptas quo voluptate hic, vero deserunt! Ipsum consectetur assumenda voluptatem, excepturi atque magni maiores eos inventore rerum expedita aliquam delectus voluptatum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur libero illum repellendus corrupti dolorem maiores doloremque iusto at, minus iste eum provident incidunt, atque pariatur consequuntur, alias officiis quae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quia provident eligendi alias expedita distinctio, hic id ullam doloribus perferendis iusto! Distinctio voluptates qui dolorum ea debitis architecto cum ipsam!. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt ducimus delectus repellendus. Veritatis, nemo quae beatae quod, aliquid molestiae accusamus eaque culpa natus cumque tempore ea illum praesentium repudiandae voluptatibus?</p>
        <br/>
        <h2>70's Rock</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam possimus repellat soluta impedit quod ad fugit quas excepturi expedita commodi quae similique, obcaecati ducimus voluptate, aspernatur eius tenetur earum amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime similique non facere asperiores ea unde error officiis assumenda! Maxime nesciunt recusandae aut ab. Molestiae rerum at obcaecati error vitae doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptas quo voluptate hic, vero deserunt! Ipsum consectetur assumenda voluptatem, excepturi atque magni maiores eos inventore rerum expedita aliquam delectus voluptatum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur libero illum repellendus corrupti dolorem maiores doloremque iusto at, minus iste eum provident incidunt, atque pariatur consequuntur, alias officiis quae sed. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quia provident eligendi alias expedita distinctio, hic id ullam doloribus perferendis iusto! Distinctio voluptates qui dolorum ea debitis architecto cum ipsam!. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt ducimus delectus repellendus. Veritatis, nemo quae beatae quod, aliquid molestiae accusamus eaque culpa natus cumque tempore ea illum praesentium repudiandae voluptatibus?</p>
        <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate consequatur magnam dolor in veniam maiores repudiandae odio, quibusdam officiis quaerat magni, doloremque quam placeat nisi reiciendis error recusandae autem voluptate. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores fugit libero voluptates suscipit accusamus explicabo dolorum, impedit maxime unde rerum saepe earum modi deserunt doloremque odit autem magnam eos harum. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus nam dolores, sequi quaerat possimus numquam id aspernatur, mollitia tenetur voluptatibus blanditiis sunt praesentium debitis eius ipsum consectetur optio beatae repellat!</p>
        
    </div>
    <img src="img/70's.jpg" id="img-rock-rgt" alt="" width="20%" height="5%">

   <script src="js/slider.js"></script>
</body>
</html>

Artista

Code: Select all

	<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Hanalei+Fill" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet"> 
    <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>Artistas</title>
</head>
<body>
    <div class="top-tittle">
        <img src="img/skull.png" height="28" width="28" alt="">
        <h1 class="header">Rock</h1>
    </div>
    
    <div class="top-bar">
        
        <ul class="top-bar">
            <li class="top-bar"><a href="index.html">Home</a></li>
            <li class="top-bar"><a href="artistas.html">Artistas</a></li>
            <li class="top-bar"><a href="top.html">Top 20</a></li>
        </ul>
      
    </div>
    
    <div class="thin-div">
        <h1>Artistas</h1>
        <br/>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae omnis libero vitae ad non quis ea, laboriosam laborum sunt similique eveniet expedita eligendi temporibus autem cupiditate facere nulla iure veniam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem odit in eveniet quisquam totam temporibus qui necessitatibus vel quo earum, quibusdam suscipit labore neque explicabo autem, dolores minima rem eum.</p>
        <br/>
        <br/>
        <h2>QUEEN</h2>
        <iframe width="345" height="250" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint corrupti assumenda tempora non, debitis atque magni. Doloremque, quisquam maiores animi, iste, sapiente sequi dolores temporibus consectetur repudiandae eum cumque at!</p>
        <h2>AC/DC</h2>
        <iframe width="345" height="250" src="https://www.youtube.com/embed/AV5LHy88N14"></iframe>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates aspernatur placeat dolorem harum atque enim molestiae unde repellat ratione voluptas! Dolorum quam facere possimus molestias eius molestiae tenetur quod labore?</p>
        <h2>KISS</h2>
        <iframe width="345" height="250" src="https://www.youtube.com/embed/zlSFmotba2I"></iframe>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem repellendus culpa ad eos voluptate incidunt nobis nostrum minus asperiores fugiat, saepe reprehenderit voluptas possimus aliquam aut quae ex tenetur nisi!</p>
        <h2>SCORPIONS</h2>
        <iframe width="345" height="250" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit quaerat sapiente qui sequi facere harum, amet est suscipit animi, deleniti necessitatibus reiciendis maiores enim natus nobis quis! Non, amet voluptates!</p>
        <h2>GUNS 'N ROSES</h2>
        <iframe width="345" height="250" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium libero saepe, eligendi officiis commodi nemo alias asperiores, ipsa assumenda vitae ad? Facere quod ipsam modi beatae voluptate, porro maiores similique.</p>
    </div>
   
    
</body>
</html>
Top 20

Code: Select all

	<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Domine" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet"> 
    <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>Document</title>
</head>
<body>
    <div class="top-title">
        <img src="img/skull.png" height="28" width="28" alt="">
        <h1 class="header">Rock</h1>
    </div>
    
    <div class="top-bar">
        
        <ul class="top-bar">
            <li class="top-bar"><a href="index.html">Home</a></li>
            <li class="top-bar"><a href="artistas.html">Artistas</a></li>
            <li class="top-bar"><a href="top.html">Top 20</a></li>
        </ul>
      
    </div>
   
    <div class="thin-div-top">
        <h1 id="center">Top 20 canciones</h1>
        <br/>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quae, explicabo aperiam, minus non temporibus autem eveniet facere adipisci quidem quas iure accusamus asperiores? Repellendus voluptates esse fuga similique quaerat. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro voluptate odio numquam. Dignissimos porro impedit obcaecati, adipisci eveniet tempore, distinctio illum ex provident nobis mollitia doloribus, deleniti voluptates quo veniam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo recusandae quod itaque! Ullam praesentium recusandae excepturi voluptatum repudiandae repellat nobis! Quas unde nam numquam in. Consequuntur expedita nesciunt nulla animi!</p>

        <ol class="centered">
            <li>Bohemian Rhapsody - Queen</li>
            <li>Thunderstruck - AC/DC</li>
            <li>Radio gaga - Queen</li>
            <li>Hard to explain - The Strokes</li>
            <li>Knights of Cydonia - Muse</li>
            <li>Bohemian Rhapsody - Queen</li>
            <li>Thunderstruck - AC/DC</li>
            <li>Radio gaga - Queen</li>
            <li>Hard to explain - The Strokes</li>
            <li>Knights of Cydonia - Muse</li>
            <li>Bohemian Rhapsody - Queen</li>
            <li>Thunderstruck - AC/DC</li>
            <li>Radio gaga - Queen</li>
            <li>Hard to explain - The Strokes</li>
            <li>Knights of Cydonia - Muse</li>
            <li>Bohemian Rhapsody - Queen</li>
            <li>Thunderstruck - AC/DC</li>
            <li>Radio gaga - Queen</li>
            <li>Hard to explain - The Strokes</li>
            <li>Knights of Cydonia - Muse</li>

        </ol>
    </div>

</body>
</html>
CSS

Code: Select all

	.top-bar{
    background-color: black;
    font-family: 'Cabin', sans-serif;
    color: aliceblue;
    
}
li.top-bar{
    float: left;
}
ul.top-bar{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
    
}
h1{
    font-family: 'Abril Fatface',cursive;
    
}
h1.header{
    display: inline;
}
li a:hover{
    background-color: blue;
}
li.top-bar a{
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.img-slider {
    display: none;
    width: 60%;
    height: 30%;
    margin-left: auto;
    margin-right: auto;

}

#img-rock-lft{
    float: left;
    margin-top: 15%;
}
h2{
    font-family: 'Hanalei Fill', cursive;
    font-size: xx-large;
}
#img-rock-rgt{
    float: right ;
    margin-top: -30%;
}
div p {
    text-align:justify; 
}
.thin-div{
    margin-left: 25%;
    margin-right: 25%;
}
body{
    background-color: whitesmoke;
}
div .img-container{
    display: inline;
}
p{
    font-family: 'Domine', serif;
}
#center{
    text-align: center;
}
.top-title{
   text-align: left;
}

ol.centered{
    text-align: justify;
    margin-left: 25%;
    margin-right: 25%;
    list-style-type: lower-roman;
}
.thin-div-top{
    margin-left: 25%;
    margin-right: 25%;
    
    
}
div.large{
    margin-right: 75%;
    background-color: blue;
}
JS

Code: Select all

	var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("img-slider");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 3000);
}

WireFrames:
https://imgur.com/a/U0zBVcZ
GIF
https://media.giphy.com/media/9VcI1Dbuu ... /giphy.gif
Last edited by juanjog96 on Fri Aug 10, 2018 11:58 pm, edited 1 time in total.

User avatar
Mariana Mendivil
Posts: 13
Joined: Mon Jan 25, 2016 8:19 am

Re: Wireframe Aplicaciones Móviles

Post by Mariana Mendivil » Fri Aug 10, 2018 11:58 pm

wireframes manuales:
(Para verlos desde imgur https://imgur.com/a/cLPAoCc)
Image
Image
Image

wireframes digitales:
(Para verlos en mayor resolución ir a https://s3.amazonaws.com/assets.mockflo ... 74dc01.png)

Image

Ver demostración en: https://marianamendivil.github.io/apps_moviles/

Repositorio github: https://github.com/marianamendivil/apps_moviles

index.html

Code: Select all

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Piano</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="shorcut icon" type="image/png" href="img/grand-piano.png">
</head>
<body>
    <nav>
        <ul>
            <li><img src="img/piano.png" alt="piano"></li>
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="artist.html">Artists & composers</a></li>
            <li><a href="type.html">Piano types</a></li>
            <li><a href="song.html">Songs</a></li>
            <li><a href="game.html">Games</a></li>
        </ul>
        <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">flaticon</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
    </nav>
    <div class="content">
        <h1 class="center">Piano</h1>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/zucBfXpCA6s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        <div class="flex-container">
            <p>
                The piano is an acoustic, stringed musical instrument invented in Italy by Bartolomeo Cristofori around the year 1700 (the exact year is uncertain), in which the strings are struck by hammers. It is played using a keyboard, which is a row of keys (small levers) that the performer presses down or strikes with the fingers and thumbs of both hands to cause the hammers to strike the strings. The word piano is a shortened form of pianoforte, the Italian term for the early 1700s versions of the instrument, which in turn derives from gravicembalo col piano e forte and fortepiano. The Italian musical terms piano and forte indicate "soft" and "loud" respectively, in this context referring to the variations in volume (i.e., loudness) produced in response to a pianist's touch or pressure on the keys: the greater the velocity of a key press, the greater the force of the hammer hitting the strings, and the louder the sound of the note produced and the stronger the attack. The first fortepianos in the 1700s had a quieter sound and smaller dynamic range.
            </p>
        </div>
        <h2 class="center">History</h2>
        <p>
            The piano was founded on earlier technological innovations in keyboard instruments. Pipe organs have been used since Antiquity, and as such, the development of pipe organs enabled instrument builders to learn about creating keyboard mechanisms for sounding pitches. The first string instruments with struck strings were the hammered dulcimers, which were used since the Middle Ages in Europe. During the Middle Ages, there were several attempts at creating stringed keyboard instruments with struck strings. By the 17th century, the mechanisms of keyboard instruments such as the clavichord and the harpsichord were well developed. In a clavichord, the strings are struck by tangents, while in a harpsichord, they are mechanically plucked by quills when the performer depresses the key. Centuries of work on the mechanism of the harpsichord in particular had shown instrument builders the most effective ways to construct the case, soundboard, bridge, and mechanical action for a keyboard intended to sound strings.
        </p>
        <h2 class="center">Sheets</h2>
        <iframe style="width:80%; height:400px;"src="img/Greensleeves.pdf"></iframe>
        <p>
            A piano score (or piano reduction) is a more or less literal transcription for piano of a piece intended for many performing parts, especially orchestral works; this can include purely instrumental sections within large vocal works (see vocal score immediately below). Such arrangements are made for either piano solo (two hands) or piano duet (one or two pianos, four hands). Extra small staves are sometimes added at certain points in piano scores for two hands to make the presentation more complete, though it is usually impractical or impossible to include them while playing.
            <br><br>
            While piano scores are usually not meant for performance outside of study and pleasure (Franz Liszt's concert transcriptions of Beethoven's symphonies being one group of notable exceptions), ballets get the most practical benefit from piano scores because with one or two pianists they allow the ballet to do many rehearsals at a much lower cost, before an orchestra has to be hired for the final rehearsals. Piano scores can also be used to train beginning conductors, who can conduct a pianist playing a piano reduction of a symphony; this is much less costly than conducting a full orchestra. Piano scores of operas do not include separate staves for the vocal parts, but they may add the sung text and stage directions above the music.</p>
    </div>
</body>
</html> 
main.css

Code: Select all

 body {
    background-image: url("Descargas/");
    margin: 0;
    padding: 0;
}

nav > ul {
	list-style: none;
}

nav {
	border-right: 1px;
	border-top: 0;
	border-left: 0;
	border-bottom: 0;
	border-style: solid;
	border-color: #666666;
	width: 220px;
	height: 100%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	overflow-x: hidden;
	background-color: #EEEEEE;
}

nav > ul > li {
 	padding: 1rem 0;
}

nav > ul > li > img {
	width: 80%;
}

a {
	text-decoration: none;
}

.active {
	/*negrita:true;*/
	font-weight: bold;
}

nav > div {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 220px;
}

.content {
	margin-left: 225px;
	padding-left: 2rem;
	display: flex;
	flex-direction: column;
}

.artist, .type, .song {
	display: flex;
}

.artist {
	padding-left: 2rem; 
}

.song, .artist, .subtitleArtist {
	margin-left: auto;
	margin-right: auto;
}

.artist > img, .type > img {
	order: 1;
	width: 125px;
	height: 125px;
	padding-top: 1.2rem;
}

.artistDescription {
	width: 260px;
}

.artistDescription, .typeDescription {
	order: 2;
	padding-top: 0.5rem;
	padding-left: 5rem;
}

.songDescription {
	order: 1;
	padding-top: 0.5rem;
	padding-left: 1rem;
}

.song > img, .song > iframe {
	order: 2;
	width: 125px;
	height: 125px;
	padding-top: 1.2rem;
	padding-top: 0.5rem;
	padding-left: 4rem;
	margin-left: 0;
    margin-right: 0;
}

.center {
    text-align: center;
}

iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.flex-container {
    display: flex;
    justify-content: center;
}

.manufacturers {
	margin-top: 1rem;
}

.manufacturers > a {
	padding: 0.5rem;
}

.lastI {
	padding-bottom: 1.5rem;
}

.song > iframe {
	padding-right: 64px;
	margin-top: 1.5em;
	width: 200px;
	height: 200px;
}

 
artist.html

Code: Select all

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Artists and composers</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="shorcut icon" type="image/png" href="img/grand-piano.png">
</head>
<body>
	<nav>
		<ul>
			<li><img src="img/piano.png" alt="piano"></li>
			<li><a href="index.html">Home</a></li>
			<li><a href="artist.html" class="active">Artists & composers</a></li>
			<li><a href="type.html">Piano types</a></li>
			<li><a href="song.html">Songs</a></li>
			<li><a href="game.html">Games</a></li>
		</ul>
		<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">flaticon</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
	</nav>
	<div class="content">
		<h1 class="center">Artists & composers</h1>
		<h2 class="subtitleArtist">Baroque</h2>
		<div class="artist">
			<img src="img/bach.jpg">
			<div class="artistDescription">
				<h3>Johann Sebastian Bach</h3>
				<p>Born: 21 March 1685 (Eisenach)
					<br>Died: 28 July 1750 (Leipzig)
				</p>
			</div>
		</div>
		
		<h2 class="subtitleArtist">Classical</h2>
		<div class="artist">
			<img src="img/mozart.jpg">
			<div class="artistDescription">
				<h3>Wolfgang Amadeus Mozart</h3>
				<p>Born: 27 January 1756 (Salzburg)
					<br>Died: 5 December 1791 (Viena)
				</p>
			</div>
		</div>
		
		<div class="artist">
			<img src="img/beethoven.jpg">
			<div class="artistDescription">
				<h3>Ludwing van Beethoven</h3>
				<p>Born: 16 December 1770 (Bonn)
					<br>Died: 26 March 1827 (Viena)
				</p>
			</div>
		</div>
		

		<h2 class="subtitleArtist">Romantic</h2>

		<div class="artist">
			<img src="img/chopin.jpg">
			<div class="artistDescription">
				<h3>Frédéric Chopin</h3>
				<p>Born: 1 March 1810 (Żelazowa Wola)
					<br>Died: 17 October 1849 (París)
				</p>
			</div>
		</div>

		<div class="artist">
			<img src="img/liszt.png">
			<div class="artistDescription">
				<h3>Franz Liszt</h3>
				<p>Born: 22 October 1811 (Raiding)
					<br>Died: 31 July 1886 (Bayreuth)
				</p>
			</div>
		</div>

		<div class="artist">
			<img src="img/brahms.jpg">
			<div class="artistDescription">
				<h3>Johannes Brahms</h3>
				<p>Born: 7 May 1833 (Hamburgo)
					<br>Died: 3 April 1897 (Viena)
				</p>
			</div>
		</div>

		<h2 class="subtitleArtist">Impressionism</h2>
		<div class="artist lastI">
			<img src="img/debussy.jpg">
			<div class="artistDescription">
				<h3>Claude Debussy</h3>
				<p>Born: 22 August 1862 (Saint-Germain-en-Laye)
					<br>Died: 25 March(París)
				</p>
			</div>
		</div>
	</div>
</body>
</html> 
type.html

Code: Select all

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Piano Types</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="shorcut icon" type="image/png" href="img/grand-piano.png">
</head>
<body>
    <nav>
        <ul>
            <li><img src="img/piano.png" alt="piano"></li>
            <li><a href="index.html">Home</a></li>
            <li><a href="artist.html">Artists & composers</a></li>
            <li><a href="type.html" class="active">Piano types</a></li>
            <li><a href="song.html">Songs</a></li>
            <li><a href="game.html">Games</a></li>
        </ul>
        <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">flaticon</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
    </nav>
    <div class="content">
        <h1 class="center">Piano Types</h1>

        <div class="type">
            <img src="img/SteinwayAndSonsGrand.png">
            <div class="typeDescription">
                <h3>Grand</h3>
                <p>
                    In grand pianos the frame and strings are horizontal, with the strings extending away from the keyboard. The action lies beneath the strings, and uses gravity as its means of return to a state of rest. There are many sizes of grand piano. A rough generalization distinguishes the concert grand (between 2.2 and 3 meters [7 ft 3 in–9 ft 10 in]) from the parlor grand, or boudoir grand, (1.7 to 2.2 meters [5 ft 7 in–7 ft 3 in]) and the smaller baby grand (around 1.5 meters [4 ft 11 in]).
                    <br>
                    All else being equal, longer pianos with longer strings have larger, richer sound and lower inharmonicity of the strings. Inharmonicity is the degree to which the frequencies of overtones (known as partials or harmonics) sound sharp relative to whole multiples of the fundamental frequency. This results from the piano's considerable string stiffness; as a struck string decays its harmonics vibrate, not from their termination, but from a point very slightly toward the center (or more flexible part) of the string. The higher the partial, the further sharp it runs. Pianos with shorter and thicker string (i.e., small pianos with short string scales) have more inharmonicity. The greater the inharmonicity, the more the ear perceives it as harshness of tone.
                </p>
            </div>
        </div>

        <div class="type">
            <img src="img/SteinwayAndSonsVertical.jpg">
            <div class="typeDescription">
                <h3>Upright (vertical)</h3>
                <p>
                    Upright pianos, also called vertical pianos, are more compact because the frame and strings are vertical. Upright pianos are generally less expensive than grand pianos. Upright pianos are widely used in churches, community centers, schools, music conservatories and university music programs as rehearsal and practice instruments, and they are popular models for in-home purchase. The hammers move horizontally, and return to their resting position via springs, which are susceptible to degradation. Upright pianos with unusually tall frames and long strings are sometimes called upright grand pianos. Some authors classify modern pianos according to their height and to modifications of the action that are necessary to accommodate the height.
                </p>
                <ul>
                    <li>
                        Studio pianos are around 107 to 114 cm (42–45 in) tall. This is the shortest cabinet that can accommodate a full-sized action located above the keyboard.
                    </li>
                    <li>
                        Console pianos have a compact action (shorter hammers), and are a few inches shorter than studio models.
                    </li>
                    <li>
                        The top of a spinet model barely rises above the keyboard. The action is located below, operated by vertical wires that are attached to the backs of the keys.
                    </li>
                    <li>
                        Anything taller than a studio piano is called an upright.
                    </li>
                </ul>
            </div>
        </div>

        <div class="type">
            <img src="img/digitalPiano.png">
            <div class="typeDescription">
                <h3>Electric, electronic, and digital</h3>
                <p>
                    The first electric pianos from the late 1920s used metal strings with a magnetic pickup, an amplifier and a loudspeaker. The electric pianos that became most popular in pop and rock music in the 1960s and 1970s, such as the Fender Rhodes use metal tines in place of strings and use electromagnetic pickups similar to those on an electric guitar. The resulting electrical, analogue signal can then be amplified with a keyboard amplifier or electronically manipulated with effects units. Electric pianos are rarely used in classical music, where the main usage of them is as inexpensive rehearsal or practice instruments in music schools. However, electric pianos, particularly the Fender Rhodes, became important instruments in 1970s funk and jazz fusion and in some rock music genres.
                    <br>
                    Electronic pianos are non-acoustic; they do not have strings, tines or hammers, but are a type of synthesizer that simulates or imitates piano sounds using oscillators and filters that synthesize the sound of an acoustic piano. They must be connected to a keyboard amplifier and speaker to produce sound (however, some electronic keyboards have a built-in amp and speaker). Alternatively, a person can practice an electronic piano with headphones to avoid disturbing others.
                </p>
            </div>
        </div>

        <div class="type">
            <img src="img/hybridPiano.jpg">
            <div class="typeDescription">
                <h3>Hybrid instruments</h3>
                <p>
                    In the 2000s, some pianos include an acoustic grand piano or upright piano combined with MIDI electronic features. Such a piano can be played acoustically, or the keyboard can be used as a MIDI controller, which can trigger a synthesizer module or music sampler. Some electronic feature-equipped pianos such as the Yamaha Disklavier electronic player piano, introduced in 1987, are outfitted with electronic sensors for recording and electromechanical solenoids for player piano-style playback. Sensors record the movements of the keys, hammers, and pedals during a performance, and the system saves the performance data as a Standard MIDI File (SMF). On playback, the solenoids move the keys and pedals and thus reproduce the original performance. Modern Disklaviers typically include an array of electronic features, such as a built-in tone generator for playing back MIDI accompaniment tracks, speakers, MIDI connectivity that supports communication with computing devices and external MIDI instruments, additional ports for audio and SMPTE I/O, and Internet connectivity. Disklaviers have been manufactured in the form of upright, baby grand, and grand piano styles (including a nine-foot concert grand). Reproducing systems have ranged from relatively simple, playback-only models to professional models that can record performance data at resolutions that exceed the limits of normal MIDI data. The unit mounted under the keyboard of the piano can play MIDI or audio software on its CD or floppy disk drive.
                </p>
            </div>
        </div>

        <div class="manufacturers lastI">
            <a href="https://www.steinway.com/"><button>Steinway & Sons</button></a>
            <a href="https://www.casio.com/products/electronic-musical-instruments"><button>Casio</button></a>
            <a href="https://usa.yamaha.com/products/musical_instruments/pianos/index.html"><button>Yamaha</button></a>            
            <a href="https://www.boesendorfer.com/en"><button>Bösendorfer</button></a>
        </div>
    </div>
</body>
</html> 
song.html

Code: Select all

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Songs</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="shorcut icon" type="image/png" href="img/grand-piano.png">
</head>
<body>
    <nav>
        <ul>
            <li><img src="img/piano.png" alt="piano"></li>
            <li><a href="index.html">Home</a></li>
            <li><a href="artist.html">Artists & composers</a></li>
            <li><a href="type.html">Piano types</a></li>
            <li><a href="song.html" class="active">Songs</a></li>
            <li><a href="game.html">Games</a></li>
        </ul>
        <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">flaticon</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
    </nav>
    <div class="content">
        <h1 class="center">Songs</h1>

        <div class="song">
            <div class="songDescription">
                <h3>Clair de Lune (1890)</h3>
                <p>
                    Claude Debussy 
                    <br><br>
                    The Suite bergamasque (French pronunciation: ​[sɥit bɛʁɡamask]) is one of the most famous piano suites by Claude Debussy. It was first composed by Debussy around 1890, at the age of 28, but was significantly revised just before its publication in 1905.
                    The third and most famous movement of Suite bergamasque is "Clair de lune", in D♭ major. Its name comes from Verlaine's poem Clair de lune, "moonlight" in French. It is written in 9/8 meter, marked andante très expressif, and to be played mostly pianissimo.
                </p> 
            </div>
            <iframe width="125" height="125" src="https://www.youtube.com/embed/4fvo_iOuSck" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>

        <div class="song">
            <div class="songDescription">
                <h3>La campanella (1851)</h3>
                <p>
                    Franz Liszt
                    <br><br>
                    "La campanella" ("The little bell" in Italian) is the nickname given to the third of Franz Liszt's six Grandes études de Paganini ("Grand Paganini Études"), S. 141 (1851). It is in the key of G-sharp minor. This piece is a revision of an earlier version from 1838, the Études d'exécution transcendente d'après Paganini, S. 140. Its melody comes from the final movement of Niccolò Paganini's Violin Concerto No. 2 in B minor, where the tune was reinforced metaphorically by a 'little handbell'. This is portrayed by the top note jumps that need to be played within the timeframe of a 16th note.                    
                </p>
            </div>
            <iframe width="125" height="125" src="https://www.youtube.com/embed/MD6xMyuZls0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>

        <div class="song">
            <div class="songDescription">
                <h3>Nocturne op.9 No.2 (1830)</h3>
                <p>
                    Frédéric Chopin
                    <br><br>
                    "Air on the G String" is August Wilhelmj's arrangement of the second movement in Johann Sebastian Bach's Orchestral Suite No. 3 in D major, BWV 1068.

                    The arrangement differs from the original in that the part of the first violins is transposed down so that it can be played entirely on a violin's lowest string, i.e., the G string. It is played by a single violin (instead of by the first violins as a group).
                </p>
            </div>
            <iframe width="125" height="125" src="https://www.youtube.com/embed/tV5U8kVYS88" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>

        <div class="song">
                <div class="songDescription">
                    <h3>Arabesque No.1 (1888)</h3>
                    <p>
                        Claude Debussy
                        <br><br>
                        This arabesque is in the key of E major. The piece begins with parallelism of triads in first inversion, a composition technique very much used by Debussy and other Impressionists which traces back to the tradition of fauxbourdon. It leads into a larger section which begins with a left hand arpeggio in E major and a descending right hand E major pentatonic progression.
                    </p>
                </div>
                <iframe width="125" height="125" src="https://www.youtube.com/embed/0tsRu5_pmVo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>

            <div class="song">
                <div class="songDescription">
                    <h3>Ballade No. 1 in G minor, Op. 23 (1831)</h3>
                    <p>
                        Frédéric Chopin
                        <br><br>
                        Made during Chopin's eight-month stay in Vienna. It was completed in 1835 after his move to Paris, where he dedicated it to Baron Nathaniel von Stockhausen, the Hanoverian ambassador to France. In 1836 Robert Schumann commented that, "I received a new Ballade from Chopin. It seems to be a work closest to his genius (although not the most ingenious) and I told him that I like it best of all his compositions. After quite a lengthy silence he replied with emphasis, 'I am happy to hear this since I too like it most and hold it dearest.'"
                    </p>
                </div>
                <iframe width="125" height="125" src="https://www.youtube.com/embed/bvtdjIIcgWQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>

            <div class="song">
                <div class="songDescription">
                    <h3>Hungarian Rhapsody No. 2 (1847)</h3>
                    <p>
                        Franz Liszt
                        <br><br>
                        It's the second in a set of 19 Hungarian Rhapsodies by composer Franz Liszt, and is by far the most famous of the set.
                        <br>
                        In both the original piano solo form and in the orchestrated version this composition has enjoyed widespread use in animated cartoons. Its themes have also served as the basis of several popular songs. 
                    </p>
                </div>
                <iframe width="125" height="125" src="https://www.youtube.com/embed/LdH1hSWGFGU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>

            <div class="song">
                <div class="songDescription">
                    <h3>Air on the G String (1717)</h3>
                    <p>
                        Johann Sebastian Bach
                        <br><br>
                        "Air on the G String" is August Wilhelmj's arrangement of the second movement in Johann Sebastian Bach's Orchestral Suite No. 3 in D major, BWV 1068.
                        <br>
                        The arrangement differs from the original in that the part of the first violins is transposed down so that it can be played entirely on a violin's lowest string, i.e., the G string. It is played by a single violin (instead of by the first violins as a group). 
                    </p>
                </div>
                <iframe width="125" height="125" src="https://www.youtube.com/embed/vNkIj_BhHvY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>

            <div class="song lastI">
                <div class="songDescription">
                    <h3>Étude Op. 25, No. 11 (1836)</h3>
                    <p>
                        Frédéric Chopin 
                        <br><br>
                        It was first published together with all études of Opus 25 in 1837, in France, Germany, and England. The first French edition indicates a common time time signature, but the manuscript and the first German edition both feature cut time. The first four bars that characterize the melody were added just before publication at the advice of Charles A. Hoffmann, a friend.
                    </p>
                </div>
                <iframe width="125" height="125" src="https://www.youtube.com/embed/tx6-Z0nsWnw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
    </div>
</body>
</html> 
game.html

Code: Select all

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Games</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="shorcut icon" type="image/png" href="img/grand-piano.png">
</head>
<body>
    <nav>
        <ul>
            <li><img src="img/piano.png" alt="piano"></li>
            <li><a href="index.html">Home</a></li>
            <li><a href="artist.html">Artists & composers</a></li>
            <li><a href="type.html">Piano types</a></li>
            <li><a href="song.html">Songs</a></li>
            <li><a href="game.html" class="active">Games</a></li>
        </ul>
        <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">flaticon</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
    </nav>
    <div class="content">
        <h1 class="center">Games</h1>
        <div class="artist">
            <img src="img/yousician.png">
            <div class="artistDescription">
                <a href="https://yousician.com/"><h3>Yousician</h3></a>
                <p>
                    YOUSICIAN - the fast, fun way to learn, play and master the Piano, Guitar, Bass or Ukulele. Enjoy thousands of songs on your REAL INSTRUMENT! 
                    (supports acoustic and electric instruments)
                    -------------------------
                    Yousician is your personal music tutor for the digital age. Learn at your own pace, whenever and wherever you want. The app listens to you play and gives instant feedback on your accuracy and timing. Our curriculum, designed by expert music teachers, will help musicians of all levels improve, from complete beginners to professionals.
                </p>
            </div>
        </div>
        
        <div class="artist">
            <img src="img/perfectEar.png">
            <div class="artistDescription">
                <a href="https://play.google.com/store/apps/details?id=com.evilduck.musiciankit&hl=en"><h3>Perfect Ear - Ear Trainer</h3></a>
                <p>
                    Having a well developed aural skills and sense of rhythm is essential for every musician. Whether you want to improvise, figure out melodies by ear, recognize chord progressions or simply be able to tune your guitar without a tuner having a good understanding of basics, such as intervals, scales and chords is crucial.
                    Perfect Ear provides you with high quality, unique ear training, rhythm training and solfège capabilities. It doesn’t matter if you are a beginner or a professional - you will find something that will make you a better musician. Across the globe music teachers recommend Perfect Ear to their students every day.
                </p>
            </div>
        </div>
        
        <div class="artist">
            <img src="img/completeEar.png">
            <div class="artistDescription">
                <a href="http://www.completeeartrainer.com/en/"><h3>Complete Ear Trainer</h3></a>
                <p>
                   The ultimate ear training app for musicians. Develop your relative pitch to the full by improving your aural skills and your music theory knowledge. This will better many aspects of your life as a musician, be it regarding improvisation, composition, arrangement, interpretation, singing, or playing in a band. Designed like a video game and with strong pedagogical concepts in mind, this app will make you truly master each interval, chord, scale, etc. before taking you to the next one.
                </p>
            </div>
        </div>

        <div class="artist">
            <img src="img/simplyPiano.jpg">
            <div class="artistDescription">
                <a href="https://www.joytunes.com/simply-piano"><h3>Simply Piano</h3></a>
                <p>
                    Simply Piano is a fast and fun way to learn piano, from beginner to pro. Works with any piano or keyboard. Chosen as one of Google Play's Best Apps of 2017.
                    No piano or keyboard? Try the Touch Courses with a beautiful touch screen piano to turn your device into a virtual piano.
                    Simply Piano is developed by JoyTunes, creators of award-winning apps Piano Maestro and Piano Dust Buster. The apps are used by tens of thousands of music teachers worldwide with over 1 million songs learned every week. JoyTunes are experts in creating educational and fun music apps for learning piano quickly and easily.
                </p>
            </div>
        </div>

        <div class="artist lastI">
            <img src="img/pianoTiles.png">
            <div class="artistDescription">
                <a href="https://play.google.com/store/apps/details?id=com.cmplay.tiles2&hl=en"><h3>Piano Tiles</h3></a>
                <p>
                    The hit of the world loved by 900 millions of players, Piano Tiles 2™ is having its 2nd birthday! During these 2 years, Piano Tiles 2™ with its simplicity, thrill-seeking and challenge-taking features, is always in the top ranks. Come to take the challenge! 
                    Don't tap the white tiles! Tap the black tiles according to the melody and don't miss any tile! Concentrate yourself and maximize your reaction! 
                </p>
            </div>
        </div>

    </div>
</body>
</html> 
Last edited by Mariana Mendivil on Sun Aug 12, 2018 12:32 am, edited 1 time in total.

User avatar
juanrivera
Posts: 31
Joined: Wed Jan 25, 2017 9:06 pm

Re: Wireframe Aplicaciones Móviles

Post by juanrivera » Sat Aug 11, 2018 3:22 pm

Wireframes Digitales
Image
Image
Image
gif de la página

Image

code html y css

Code: Select all

<!Doctype html>
<html lang="es">
    <head>
       <link rel="stylesheet" href="css/estilos.css">
       <link rel="stylesheet" href="css/font.css">
       <link rel="stylesheet" href="css/estilos_artistas.css">
        <title>Artistas</title>
         <link rel="icon" href="img/xxx.ico"> 
    </head>
    <body>
        <div class="main">
         <header>
           <center>  <nav class="navegacion">
                 <ul class="menu">
                     <li><a href="home.html">Home</a></li>
                     <li><a href="lo_mas_sonado.html">Lo mas Sonado</a></li>
                     <li><a href="artistas.html">Artistas</a></li>
                 </ul>
             </nav>
             </center>
         </header>
         <br>
         
         <center>
         <h1 class="titulo">LOS ARTISTAS MAS REPRESENTATIVOS DEL ROCK</h1>
         <br>
         <br>
         </center>
         <div id="body">
           <center>
            <table>
                <tr>
                    <td><div class="artista1" align="middle">
                 <img src="img/u2.jpg" width="300px" height="200px">
                 <h1>U2</h1>
                 <p class="caja1">  Es una banda de rock originaria de Dublín (Irlanda), formada en 1976 por Bono (voz y guitarra), The Edge (guitarra, teclado y voz), Adam Clayton (bajo), y Larry Mullen Jr. (batería). El sonido inicial de U2 tenía sus raíces en el FASOpost-punk, pero posteriormente irán incorporando a su música elementos de otros géneros: "Su cancionero es extenso y está repleto de variaciones: desde el rock más clásico hasta el pop más redondo, pasando por el coqueteo con la electrónica o los homenajes al góspel" </p>
             </div></td>
                    <td><div class="artista2" align="middle">
                 <img src="img/queen.jpg" width="300px" height="200px" >
                 <h1>QUEEN</h1>
                 <p class="caja1"> es una banda británica de rock formada en 1970 en Londres por el cantante Freddie Mercury, el guitarrista Brian May, el baterista Roger Taylor y el bajista John Deacon. Si bien el grupo ha presentado bajas de dos de sus miembros (Mercury, fallecido en 1991, y Deacon, retirado en 1997), los integrantes restantes, May y Taylor, continúan trabajando bajo el nombre Queen, por lo que la banda aún es considerada activa</p>
             </div></td>
                </tr>
                <tr>
                    <td><div class="artista3" align="middle">
                 <img src="img/beatles.jpg" width="300px" height="200px" >
                 <h1>THE BEATLES</h1>
                 <p class="caja1"> fue una banda de pop/rock inglesa activa durante la década de 1960, y reconocida como la más exitosa comercialmente y la más alabada por la crítica en la historia de la música popular.Formada en Liverpool, estuvo constituida desde 1962 por John Lennon (guitarra rítmica, vocalista), Paul McCartney (bajo, vocalista), George Harrison (primera guitarra, vocalista) y Ringo Starr (batería, vocalista). Enraizada en el skiffle y el rock and roll de los años 1950</p>
             </div></td>
                  
                   
                    <td><div class="artista4" align="middle">
                 <img src="img/guns.jpg" width="300px" height="200px" >
                 <h1>GUNS N' ROSES</h1>
                 <p class="caja1"> es una banda estadounidense de hard rock formada en Hollywood (Los Ángeles, California) en 1985. El grupo fue fundado por Axl Rose y el guitarrista rítmico Izzy Stradlin.7​

                 La formación actual cuenta con el vocalista Axl Rose, el guitarrista rítmico Richard Fortus, los tecladistas Dizzy Reed y Melissa Reese, el baterista Frank Ferrer, el bajista Duff McKagan y el guitarrista líder Slash, estos dos últimos, considerados miembros clásicos de la agrupación, retomaron su lugar en la banda después de 23 años.</p>
             </div></td>
                </tr>
                <tr>
                    <td><div class="artista5" align="middle">
                 <img src="img/pink.jpg" width="300px" height="200px" >
                 <h1>PINK FLOYD</h1>
                 <p class="caja1">  fue una banda de rock británica, considerada un icono cultural del siglo xx y una de las bandas más influyentes en la historia de la música, que obtuvo gran popularidad gracias a su música psicodélica que evolucionó hacia el rock progresivo y rock sinfónico con el paso del tiempo. Es conocida por sus canciones de alto contenido filosófico, la experimentación sónica, las innovadoras portadas de sus discos y sus elaborados espectáculos en vivo. Sus ventas sobrepasan los 300 millones de álbumes vendidos en todo el mundo 97,5 millones de ellos solamente en los Estados Unidos</p>
             </div></td>
                    <td><div class="artista6" align="middle">
                 <img src="img/rolling.png" width="300px" height="200px" >
                 <h1>THE ROLLING STONES</h1>
                 <p class="caja1"> es una banda británica de rock originaria de Londres. La banda se fundó en abril de 19622​ por Brian Jones, Mick Jagger, Keith Richards, Bill Wyman, Ian Stewart y Charlie Watts.2​ Brian Jones fue despedido en junio de 1969, falleciendo tres semanas después, siendo reemplazado por el guitarrista Mick Taylor, que dejaría el grupo en 1975 y sería a su vez reemplazado por Ron Wood. Con el retiro de Bill Wyman en 1993 se incluyó al bajista Darryl Jones que, aunque toca con la banda desde la grabación del álbum Voodoo Lounge en 1994, no es un miembro oficial.</p>
             </div></td>
                </tr>
            </table>
            </center>
        
            </div>         
     </div>
     <div class="playlist">
           <h2>Escuchar Musica en Vivo</h2>
            <table>
            <tr>
             <td><audio autoplay controls>
                <source src="audio/U2-Pride%20(In%20the%20Name%20of%20Love)%20lyrics.mp3" type="" />
            </audio></td>
            
            </tr>
            
            </table>
         </div>
    
    </body>
    
    </html>

Code: Select all

<!Doctype html>
<html lang="es">
    <head>
       <link rel="stylesheet" href="css/estilos.css">
       <link rel="stylesheet" href="css/font.css">
       
        <title>Home</title>
          <link rel="icon" href="img/xxx.ico">
    </head>
    <body>
        <div class="main">
         <header>
           <center>  <nav class="navegacion">
                 <ul class="menu">
                     <li><a href="home.html">Home</a></li>
                     <li><a href="lo_mas_sonado.html">Lo mas Sonado</a></li>
                     <li><a href="artistas.html">Artistas</a></li>
                 </ul>
             </nav>
             </center>
         </header>
         <br>
         <center>
         <h1 class="titulo">Clasicos del rock</h1>
         </center>
         
         <div class="contenedor" >
           <center>
           <br>
           <div class="imagen_inicio">
               <img src="img/rock.jpg" width="500" >
               
           </div>
            
            <br>
            <h1><p><br>
               ACERCA DEL ROCK 
            </p></h1>
            <div class="caja1">
            <P align="justify" >
                El Rock, es un género musical que se caracteriza por los significados que contienen las letras de las músicas que lo integran. Mas en él, se pueden expresar un sinfín de cosas, entre ellos sentimientos, felicidad o tristeza, recuerdos, incluso la filosofía se adueña también de este ámbito con algunos grupos.
            <p>
                Este género musical nace en pleno siglo XX. El mismo deriva del “Rock and Roll” además de otros estilos de músicas, entre los que se puede citar, al country, el góspel, el jazz y el blues, principalmente del último nombrado ya que es un estilo muy rápido.
                 <br>
                <br>
                <br>
            </p>
                Los instrumentos que forman parte del rock, son por la mayoría de los casos, la batería, el bajo, la guitarra y en algunas ocasiones lo suelen hacer también los teclados o pianos. El Rock, con el correr de las décadas ha sufrido combinaciones con otros géneros como los anteriormente citados.
                
            <p>
               
                Dichas fusiones daban resultados a distintos estilos, así el rock + el folk, resultaba el folk rock; otro de los tantos casos es la suma del blues y el jazz con el rock derivando en blues rock y jazz-rock, respectivamente. De esta manera, la evolución de este estilo evoluciono y se divido en varios subgéneros, entre los más destacados el Hard Rock, el Rock Alternativo, el Trash Metal en los años 1980 y, en 1990 nace el Grunge.
                <br>
                 <br>
                <br>
                <br>
            </p>
                Con esta historia en las espaldas pero sin tantos detalles, a los cuales vamos a ahondar, el rock no sería nada sin sus estrellas. Estas comenzaban a brillar en el año 1954, donde el joven Elvis Presley llega a grabar una canción considerada – según la revista Rolling Stone – la primera dentro del Rock and Roll, de la misma manera este cantante iniciaba su camino dentro del ámbito musical por el que es recordado hasta hoy día.
                <br>
                <br>
                <br>
                
              <p>  
                En 1960, el género rockero va fortaleciéndose con apariciones de grupos como The Beatles, los Rolling Stones, The Who y otros grupos, esta ola fue conocida como la invasión británica. También, a estas agrupaciones se unen Bob Dylan, Jimi Hendrix, Eric Clapton, Led Zeppelin entre otros que son hoy en dia grupos bastante escuchados entre la comunidad que gusta de estos artistas y estilo de música; así con más grupos sumergidos al género terminaba la década con los subgéneros rock psicodélico y rock progresivo y se iniciaban los ‘70.
            </p>
            </P>
            </div>
            <br>
            
            <br>
            <br>
              </center>
         </div>
         <br>
         <br>
         <div class="playlist">
           <h2>Escuchar Musica en Vivo</h2>
            <table>
            <tr>
             <td><audio autoplay controls>
                <source src="audio/The_Rolling_Stones_-_Paint_It__Black_(Official_Lyric_Video).mp3" type="" />
            </audio></td>
            
            </tr>
            
            </table>
         </div>
         <div class="redes_sociales" align="center">
               
                <h2>Siguenos en nuestras redes sociales</h2>
                <br>
                <table>
                    <tr>
                        <td><a href="https://www.facebook.com/jpablo.rivera.9">
                            <img width="50px" height="50px" src="img/facebook.ico">
                        </a></td>
                        <td><a href="https://twitter.com/login?lang=es">
                           <img width="50px" height="50px" src="img/twitter.ico">
                        </a>
                        </td>
                        <td><a href="https://www.instagram.com/jprivera96/?hl=es-la">
                           <img width="50px" height="50px" src="img/instagram.png">
                            
                        </a>
                            
                        </td>
                    </tr>
                    
                </table>
                
            </div>
         
     </div> 
     
    
    </body>
    </html>

Code: Select all

<!Doctype html>
<html lang="es">
    <head>
       <link rel="stylesheet" href="css/estilos.css">
       <link rel="stylesheet" href="css/font.css">
       <link rel="stylesheet" href="css/estilos_lo_mas_sonado.css">
        <title>lo mas sonado</title>
         <link rel="icon" href="img/xxx.ico">
          
    </head>
    <body>
        <div class="main">
         <header>
           <center>  <nav class="navegacion">
                 <ul class="menu">
                     <li><a href="home.html">Home</a></li>
                     <li><a href="lo_mas_sonado.html">Lo mas Sonado</a></li>
                     <li><a href="artistas.html">Artistas</a></li>
                 </ul>
             </nav>
             </center>
         </header>
         <br>
         <center>
         <h1 class="titulo">Top 6 de las mejores canciones del Rock</h1>
         </center>
         <div>
            <center>
            <br>
             <table>
                 <tr>
                     <td><div class="u2"><iframe width="200" height="200" src="https://www.youtube-nocookie.com/embed/XC3ahd6Di3M?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></td>
                     <td><h1>U2</h1>
                         <p class="texto"> es una canción de la banda de rock irlandesa U2 . Fue escrito para honrar a Nelson Mandela y está incluido en la película biográfica Mandela: Long Walk to Freedom . La canción recibió un lanzamiento de vinilo de 10 pulgadas en el Record Store Day , [3] 29 de noviembre de 2013, menos de una semana antes de la muerte de Mandela .</p>
                     </td>
                 </tr>
                 <tr>
                     <td><div class="queen"><iframe width="200" height="200" src="https://www.youtube.com/embed/-tJYN-eG1zk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></td>
                     <td><h1>QUEEN</h1>
                         <p class="texto"> Uno de los conciertos de Queen inspiró al guitarrista Brian May para escribir esta canción. Cuando el grupo abandonó el escenario, la multitud empezó a cantar 'You’ll Never Walk Alone' (himno del equipo de fútbol de Liverpool), y Queen se sintieron completamente abrumados. A la mañana siguiente May se despertó con la idea para la canción 'We Will Rock You', que es en gran medida a capella con acompañamiento de pisadas y palmadas, cosas que la multitud puede hacer además de cantar. .</p></td>
                 </tr>
                 <tr>
                     <td><div class="beatles"><iframe width="200" height="200" src="https://www.youtube-nocookie.com/embed/2Q_ZzBGPdqE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></td>
                     <td><h1>THE BEATLES</h1>
                         <p class="texto"> Lennon había vuelto el rostro al folk que había teñido otros momentos de su carrera y que en sus dos últimos trabajos se había visto desplazado por una vena mucho más rock y que tan buenos resultados les había deparado. Sin embargo, la influencia de Bob Dylan se notaría a lo largo de los catorce temas que compusieron Help! y que abrían con la canción homónima, compuesta por él como un canto de desesperación ante la increíble reacción masiva y a nivel mundial que The Beatles habían recibido en los últimos años. El cansancio iba pesando en la banda, y John vio en la composición la mejor manera de compaginar su desahogo con sus deberes como cerebro musical. .</p></td>
                 </tr>
                 <tr>
                     <td><div class="guns"><iframe width="200" height="200" src="https://www.youtube-nocookie.com/embed/1w7OgIMMRc4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></td>
                     <td><h1>GUNS N´ROSES</h1>
                         <p class="texto"> La canción formó parte del primer álbum de Guns N’ Roses, ‘Appetite for Destruction’. Este disco se publicó el 21 de julio de 1987 y vendió millones de copias alrededor del mundo.

                        Con respecto a la composición del tema, la letra estuvo a cargo del vocalista de la banda, Axl Rose, quien se inspiró en su novia de aquel entonces, Erin Everly.

                        Una parte de la canción que es muy recordada por los fans del grupo es el riff que hizo Slash. El guitarrista contó en una entrevista a un medio internacional que durante un ensayo realizó el riff a modo de broma; sin embargo, Axl decidió que fuera parte del tema. .</p></td>
                 </tr>
                 <tr>
                     <td><div class="pink"><iframe width="200" height="200" src="https://www.youtube-nocookie.com/embed/YR5ApYxkU-U?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></td>
                     <td><h1>PINK FLOYD</h1>
                         <p class="texto"> Consiguió ser el número uno en las listas de Estados Unidos y Reino Unido. “Another Brick in the Wall”,  de Pink Floyd, pertenece al famoso álbum “The Wall”, lanzado el 30 de noviembre de 1979. Canción clave de un disco irrepetible. Subdividida en tres partes en el disco,   fue escrita por el bajista y principal compositor de la banda, Roger Waters. Pink Floyd  marcó la historia, tanto por sus innovaciones en el rock progresivo y psicodélico, como por sus letras e intenciones críticas hacia el sistema. .</p></td>
                 </tr>
                 <tr>
                     <td><div class="rolling"><iframe width="200" height="200" src="https://www.youtube-nocookie.com/embed/O4irXQhgMqg?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></td>
                     <td><h1>THE ROLLING STONES</h1>
                     <p class="texto">  busca describir la desolación y la depresión a través del uso de metáforas basadas en los colores. Inicialmente, «Paint It Black» fue escrita con una estructura pop estándar, comparada humorísticamente por Mick Jagger con las "Canciones de bodas judías".8​ La canción establece la escena de una persona triste en un funeral, similar en términos de un número de blues o folk. A menudo se afirma que Jagger se inspiró en el libro del novelista irlandés James Joyce de 1922, Ulises, tomando el extracto, "I have to turn my head until my darkness goes" (Tengo que girar la cabeza hasta que mi oscuridad se vaya), refiriéndose al tema de la novela de una visión mundial de desesperación y desolación.6​

                        La canción en sí llegó a buen término cuando el multiinstrumentista de la banda, Brian Jones, se interesó por la música marroquí. Fue su primera canción que contó con un sitar instrumental. La experimentación con el sonido funcionó tan bien que la canción fue un éxito. «Paint It Black» llegó en un período crucial en la historia de The Rolling Stones, una época en que la colaboración entre Mick Jagger y Keith Richards se consolidó como el principal motor creativo de la banda .</p></td>
                 </tr>
                 
             </table>
             </center>
         </div>
         <br>
         <div class="redes_sociales" align="right">
               
                <h2>Siguenos en nuestras redes sociales</h2>
                <br>
                <table>
                    <tr>
                        <td><a href="https://www.facebook.com/jpablo.rivera.9">
                            <img width="50px" height="50px" src="img/facebook.ico">
                        </a></td>
                        <td><a href="https://twitter.com/login?lang=es">
                           <img width="50px" height="50px" src="img/twitter.ico">
                        </a>
                        </td>
                        <td><a href="https://www.instagram.com/jprivera96/?hl=es-la">
                           <img width="50px" height="50px" src="img/instagram.png">
                            
                        </a>
                            
                        </td>
                    </tr>
                    
                </table>
                
            </div>
         
     </div> 
     
    
    </body>
    </html>

Code: Select all

.artista1:hover{
    filter: grayscale(80%);
    font-style: italic;
    
}
.artista2:hover{
    filter: grayscale(80%);
    font-style:oblique;
    
}

.artista2:hover{filter: sepia(60%);}

.artista3:hover{filter: sepia(60%);}

.artista4:hover{filter: sepia(60%);}

.artista5:hover{filter: grayscale(80%);}

.artista6:hover{filter: grayscale(80%);}

html{
    height: 1200px;   
    background-color: #F6E3CE;
}
.caja1{
    
    width: 300px;
    height: 300px;
    word-break: break-all;
    hyphens: auto;
}
table#space{
    border-collapse: separate;
    border-spacing: 10px 5px;
}
h1:hover {
    
    color: yellowgreen;
    transition: all .3s;
    
}
.body{
    float: right;
}
.playlist{
    
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 32%;
    max-width: 1000px;
    
}

Code: Select all

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    
}

.navegacion{
    width: 1000px;
    margin: 30px auto;
    background: black;
}
.navegacion ul{
    list-style: none;
    
}
.menu >li{
    position: relative;
    display: inline-block;
}
.menu > li > a{
    display: block;
    padding: 15px 20px;
    color: brown;
    font-family: fantasy;
    text-decoration: none;
    
}
.menu li a:hover{
    color: yellowgreen;
    transition: all .3s;
}

.titulo:hover{
    width: 1000px;
    margin: 20px;
    
    color: red;
    transition: all .5s;
}
.imagen_inicio:hover{
    filter: blur(5px);
    
}

.main{
    height: 1500px;   
    background-color: #F6E3CE;
}
.playlist{
    float: left;
}
.redes_sociales{
    float: right;
}
.caja1{
    background-color: #F6E3CE;
    width: 500px;
    height: 750px;
    word-break: break-all;
    hyphens: auto;
}
.playlist{
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 33%;
    max-width: 1000px;
    
}

Code: Select all

html{
    height: 1200px;   
    background-color: #F6E3CE;
}
.redes_sociales{
    float: none
}
.texto{
    
    width: 800px;
    height: 180px;
    word-break: break-all;
    hyphens: auto;
}
h1:hover {
    
    color: yellowgreen;
    transition: all .3s;
    
}
wireframe manuales
Image
Image

Juanl123
Posts: 28
Joined: Tue Jan 17, 2017 6:57 am

Re: Wireframe Aplicaciones Móviles

Post by Juanl123 » Sun Aug 12, 2018 11:44 am

Desarollo pagina web html y css - Música

Wiframe Manual

Image

Wiframe Digital

Image

Codigo

Index

Code: Select all

<!DOCTYPE html> 
<html>

	<head>

		<title>Música</title>
		<link rel="stylesheet" type="text/css" href="css/estilo.css">
		<meta name="tipo_contenido"  content="text/html;" http-equiv="content-type" charset="utf-8">

	</head>



	<body bgcolor="#d1d1d1">

		<div id="principal"> 
		<header>

			<div id="logo"> 
				<center><h3>MÚSICA</h3></center>
				<center><img src="img/logo.jpg" width="170" height="80"></center>
			</div>

			<nav class="menu"> 

				<ul>
					<li> <a href="index.html">Inicio</a></li>
					<li> <a href="artistas.html">Artistas</a></li>
					<li> <a href="top.html">Top 10</a></li>


				</ul>

			</nav>

		
		</header>
		<br>
		
		<br>
		<center> <p ALIGN="justify" class="into" > 
		Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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></center>
	<br>
	<br>

	<section id="slide"> 
		<center> <img src="img/micro.jpg" width="860" height="450"></center>
	</section>
	<br>

		<center> <p ALIGN="justify" class="into"> 
		Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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></center>

	<br>
	<br>
	<br>

		<div id="imagenes">

			<div id="izq"> <img src="img/colores.jpg" width="290" height="250"> </div>
			<div id="cen"> <img src="img/notas.jpg" width="290" height="250"> </div>
			<div id="der"> <img src="img/audif.jpg" width="290" height="250"> </div>

		</div>

		<br>
		<br>

		<center><div id="abajo"> 
			<nav class="abajo">

			<ul>
				<li> <a href="index.html">Inicio</a></li> 
	 			<li> <a href="artistas.html">Siguiente</a></li> 
			</ul>

		</nav></div></center>
		

	</div>	

	</body>

</html>
Artistas

Code: Select all

<!DOCTYPE html> 
<html>

	<head>

		<title>Artistas</title>
		<link rel="stylesheet" type="text/css" href="css/estiloartistas.css">
		<meta name="tipo_contenido"  content="text/html;" http-equiv="content-type" charset="utf-8">

	</head>



	<body bgcolor="#d1d1d1">

		<div id="principal"> 
		<header>

			<div id="logo"> 
				<center><h3>ARTISTAS</h3></center>
				<center><img src="img/logo.jpg" width="170" height="80"></center>
			</div>

			<nav class="menu"> 

				<ul>
					<li> <a href="index.html">Inicio</a></li>
					<li> <a href="artistas.html">Artistas</a></li>
					<li> <a href="top.html">Top 10</a></li>


				</ul>

			</nav>

		
		</header>
		<br>
		
		<br>
		<center> <p ALIGN="justify" > Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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></center>
	<br>
	<br>
	<br>
	
		<div id="artistas">

			<div id="foto"> <img src="img/carlosv.jpg" width="300" height="280"> </div>
			
			<div id="desc"> <P ALIGN="justify"> <h2>1. Carlos Vives</h2> Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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>

		<br>

		<div id="foto"> <img src="img/romeo.jpg" width="300" height="280"> </div>
			
			<div id="desc"> <P ALIGN="justify"> <h2>2. Romeo Santos</h2> Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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>

			<br>

			<div id="foto2"> <img src="img/shakira.jpg" width="300" height="280"> </div>
			
			<div id="desc2"> <P ALIGN="justify"> <h2 ALIGN="right">3. Shakira Mebarak</h2> Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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>

		<br>
		<div id="foto2"> <img src="img/jbalvin.jpg" width="300" height="280"> </div>
			
			<div id="desc2"> <P ALIGN="justify"> <h2 ALIGN="right">4. Jose Balvin</h2> Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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>

		<br>

		
		<center><div id="abajo"> 
			<nav class="abajo">

			<ul>
				<li> <a href="index.html">Inicio</a></li> 
	 			<li> <a href="top.html">Siguiente</a></li> 
			</ul>

		</nav></div></center>
		

	</div>	

	</body>

</html>
Top 10

Code: Select all

<!DOCTYPE html> 
<html>

	<head>

		<title>Top 10</title>
		<link rel="stylesheet" type="text/css" href="css/estiloartistas.css">
		<meta name="tipo_contenido"  content="text/html;" http-equiv="content-type" charset="utf-8">

	</head>



	<body bgcolor="#d1d1d1">

		<div id="principal"> 
		<header>

			<div id="logo"> 
				<center><h3>CANCIONES TOP</h3></center>
				<center><img src="img/logo.jpg" width="170" height="80"></center>
			</div>

			<nav class="menu"> 

				<ul>
					<li> <a href="index.html">Inicio</a></li>
					<li> <a href="artistas.html">Artistas</a></li>
					<li> <a href="top.html">Top 10</a></li>


				</ul>

			</nav>

		
		</header>
		<br>
		<br>
		
		<center><h1> Top 10 - Canciones mas populares</h1></center>

			<br>
			<br>

		<p ALIGN="justify" > 
		Lorem ipsum dolor sit amet, consectetur adipisicing 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>

		<br>
		<br>

		<center><h2> #1</h2></center> <br>

		<center><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> </center>
		<br>

		<div id="video">
		<center><iframe width="560" height="315" src="https://www.youtube.com/embed/3J959ebhrmI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center>

		</div>

		<br>
		<br>

		<center><h2> #2</h2></center> 	<br>

		<center><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></center> 	<br>

		<div id="video">
			<center><iframe width="560" height="315" src="https://www.youtube.com/embed/__LU8E6dUsI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center> 

		</div>



	<br>	
	<br>

<center><h2> #3</h2></center> 	<br>

		<center><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></center> 	<br>

		<div id="video">
			<center><iframe width="560" height="315" src="https://www.youtube.com/embed/4QPU1VpPn2s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center> 

		</div>



	<br>	
	<br>

	<center><h2> #4</h2></center> 	<br>

		<center><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></center> 	<br>

		<div id="video">
			<center><iframe width="560" height="315" src="https://www.youtube.com/embed/y36eb6MG6Jw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center> 

		</div>



	<br>	
	<br>





















		
		<center><div id="abajo"> 
			<nav class="abajo">

			<ul>
				<li> <a href="index.html">Inicio</a></li> 
	 			<li> <a href="top.html">Siguiente</a></li> 
			</ul>

		</nav></div></center>
		

	</div>	

	</body>

</html>
CSS

css Index

Code: Select all


#principal{
	width: 900px;
	height: 1400px;
	margin: auto;
}

header {
	width: 900px;
	height: 130px;
}

#logo{
	width: 200px;
	right: 100px;
	
	margin: auto;
	margin-left: 10px;
	margin-top: 10px;
	float:left;

}

.menu{
	width: 230px;
	height: 40px;
	border: 1px solid #ccc;
	float: left;
	margin-top: 80px;
	margin-left: 100px;
	background: #d1d1d1;
	font-style : italic;

}

.menu ul{}

.menu ul li{
	list-style: none;
	float: left;
}

.menu ul li a {
	text-decoration: none;
	padding: 10px 15px; 
	color: #fe4a23;
	float: left;
	color: #c30f0f;
}

.menu ul li a:hover{
	background: #a7a7a7;
	color:#c30f0f;
	transition: background 1s, color 1s;
}


p{
	margin-left: 10px;
	margin-right: 10px;
	font-style : bold;
	font-size: 20px;
}


*{
	margin: 0px;
	padding: 0px;
}

#imagenes{
	margin: auto;
	width: 900px;
	height: 250px;
	
}


#izq{
	width: 270px;
	height: 250px;
	float: left;
	margin: auto;
	margin-right: 25px;
	margin-left: 5px;
}

#cen{
	width: 270px;
	height: 250px;
	float: left;
	margin: auto;
	margin-right: 25px;
	margin-left: 5px;
}

#der{
	width: 250px;
	height: 250px;
	float: left;
	margin: auto;
	margin-right: 5px;
	margin-left: 5px;
}

.abajo{
	margin: auto;
	width: 164px;
	height: 40px;
	border: 1px solid #ccc;
	font-style : italic;
	
}


.abajo ul{}

.abajo ul li{
	list-style: none;
	float: left;
}

.abajo ul li a {
	text-decoration: none;
	padding: 10px 15px; 
	color: #fe4a23;
	float: left;
	color: #c30f0f;
}

.abajo ul li a:hover{
	background: #a7a7a7;
	color:#c30f0f;
	transition: background 1s, color 1s;
	
}

#abajo{
	margin: auto;
	margin-left: 10px;
	
	
}
css artistas

Code: Select all

#principal{
	width: 900px;
	height: 1600px;
	margin: auto;
}

header {
	width: 900px;
	height: 130px;
}

#logo{
	width: 200px;
	right: 100px;
	
	margin: auto;
	margin-left: 10px;
	margin-top: 10px;
	float:left;

}

.menu{
	width: 230px;
	height: 40px;
	border: 1px solid #ccc;
	float: left;
	margin-top: 80px;
	margin-left: 100px;
	background: #d1d1d1;
	font-style : italic;

}

.menu ul{}

.menu ul li{
	list-style: none;
	float: left;
}

.menu ul li a {
	text-decoration: none;
	padding: 10px 15px; 
	color: #fe4a23;
	float: left;
	color: #c30f0f;
}

.menu ul li a:hover{
	background: #a7a7a7;
	color:#c30f0f;
	transition: background 1s, color 1s;
}


p{
	margin-left: 10px;
	margin-right: 10px;
	font-style : bold;
	font-size: 20px;
}


*{
	margin: 0px;
	padding: 0px;
}

#artistas{
	margin: auto;
	width: 900px;
	height: 250px;
	
}


#foto{
	width: 270px;
	height: 250px;
	float: left;
	margin: auto;
	margin-right: 25px;
	margin-left: 10px;
}

#desc{
	width: 550px;
	height: 300px;
	float: left;
	margin: auto;
	margin-left: 30px;
	margin-top: 10px;
	text-align: justify;


}

#foto2{
	width: 270px;
	height: 250px;
	float: right;
	margin: auto;
	margin-right: 25px;
	margin-left: 10px;
}

#desc2{
	width: 550px;
	height: 300px;
	float: right;
	margin: auto;
	margin-left: 30px;
	margin-top: 10px;
	text-align: justify;


}

.abajo{
	margin: auto;
	width: 164px;
	height: 40px;
	border: 1px solid #ccc;
	font-style : italic;
	
}


.abajo ul{}

.abajo ul li{
	list-style: none;
	float: left;
}

.abajo ul li a {
	text-decoration: none;
	padding: 10px 15px; 
	color: #fe4a23;
	float: left;
	color: #c30f0f;
}

.abajo ul li a:hover{
	background: #a7a7a7;
	color:#c30f0f;
	transition: background 1s, color 1s;
	
}

#abajo{
	margin: auto;
	margin-left: 10px;
	
	
}
css top

Code: Select all

#principal{
	width: 900px;
	height: 1600px;
	margin: auto;
}

header {
	width: 900px;
	height: 130px;
}

#logo{
	width: 200px;
	right: 100px;
	
	margin: auto;
	margin-left: 10px;
	margin-top: 10px;
	float:left;

}

.menu{
	width: 230px;
	height: 40px;
	border: 1px solid #ccc;
	float: left;
	margin-top: 80px;
	margin-left: 100px;
	background: #d1d1d1;
	font-style : italic;

}

.menu ul{}

.menu ul li{
	list-style: none;
	float: left;
}

.menu ul li a {
	text-decoration: none;
	padding: 10px 15px; 
	color: #fe4a23;
	float: left;
	color: #c30f0f;
}

.menu ul li a:hover{
	background: #a7a7a7;
	color:#c30f0f;
	transition: background 1s, color 1s;
}


p{
	margin-left: 10px;
	margin-right: 10px;
	font-style : bold;
	font-size: 20px;
}


*{
	margin: 0px;
	padding: 0px;
}

#top{
	margin: auto;
	width: 900px;
	height: 250px;
	
}


#video{
	margin: auto;
	width: 500px;
	height: 350px;
	border: 10px color #000;
	
}

.abajo{
	margin: auto;
	width: 164px;
	height: 40px;
	border: 1px solid #ccc;
	font-style : italic;
	
}


.abajo ul{}

.abajo ul li{
	list-style: none;
	float: left;
}

.abajo ul li a {
	text-decoration: none;
	padding: 10px 15px; 
	color: #fe4a23;
	float: left;
	color: #c30f0f;
}

.abajo ul li a:hover{
	background: #a7a7a7;
	color:#c30f0f;
	transition: background 1s, color 1s;
	
}

#abajo{
	margin: auto;
	margin-left: 10px;
	
	
}
GIF de visualizacion de la Página

Image

User avatar
freydell
Posts: 22
Joined: Wed Jan 24, 2018 9:58 am

Re: Wireframe Aplicaciones Móviles

Post by freydell » Sun Aug 12, 2018 1:07 pm

Image
Image

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <title> Musica </title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        <ul id=”button”>
            <li><a href="musica.html">Musica</a></li>
            <li><a href="artistas.html">Artistas</a></li>
            <li><a href="top10.html">Top 10</a></li>
        </ul>
        <br>
        <div class="centrado">
            <h1 class="centrado">MUSICA</h1>
            <br>
            <p >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis sequi facere unde. Accusamus iure quos sint blanditiis eius. Libero eius sapiente totam eveniet fuga dolorum ipsa modi minus harum numquam. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet veritatis iste rerum. Consequuntur error eaque tempora, explicabo eligendi fugiat, quibusdam sapiente laboriosam sit temporibus doloribus velit voluptates dolores repellendus ipsam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quis officia, incidunt soluta tempora aperiam impedit enim. Numquam explicabo non vero distinctio hic in repudiandae voluptatem, quaerat aspernatur molestias ea?</p>
            <br>
            <img src="img/musica.jpg" alt="" aling="center">
            <br>    
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam odio natus qui dolor at itaque perferendis, necessitatibus in soluta esse eius unde praesentium rem dolores veniam aperiam repudiandae id eaque Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, doloremque molestiae velit qui culpa alias ipsam blanditiis, magnam sit amet distinctio ad optio sint soluta repellat doloribus adipisci quis. Necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde doloribus rem, adipisci in id modi voluptate animi cum distinctio nulla, odio assumenda dolor minus laudantium nesciunt non explicabo ad ab!</p>
            <img style="float: center;" src="img/image3.png" />
            <img style="float: center;" src="img/image4.jpg" />
        </div>
       
    </body>
   
</html>

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <title> Artistas</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        <ul id=”button”>
            <li><a href="musica.html">Musica</a></li>
            <li><a href="artistas.html">Artistas</a></li>
            <li><a href="top10.html">Top 10</a></li>
        </ul>
        <br>
        <h1 aling="center">Artistas</h1>
        <br>
        <div><img style="float: left;" src="img/artista3.jpg" /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis minima dignissimos amet quia suscipit sunt, itaque eveniet tempore repellat, enim eaque temporibus ut totam aspernatur quibusdam. Veniam voluptate sit repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit facilis atque enim, iure error illum harum soluta earum molestias incidunt est magni vero quam minus rerum, cum tempore ipsum. </div>
        <br> <br> <br>
        <div><img style="float: left;" src="img/artista4.jpg" /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis minima dignissimos amet quia suscipit sunt, itaque eveniet tempore repellat, enim eaque temporibus ut totam aspernatur quibusdam. Veniam voluptate sit repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit facilis atque enim, iure error illum harum soluta earum molestias incidunt est magni vero quam minus rerum, cum tempore ipsum. </div>
        <br> <br> <br>
        <div><img style="float: left;" src="img/artista5.jpg" /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis minima dignissimos amet quia suscipit sunt, itaque eveniet tempore repellat, enim eaque temporibus ut totam aspernatur quibusdam. Veniam voluptate sit repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit facilis atque enim, iure error illum harum soluta earum molestias incidunt est magni vero quam minus rerum, cum tempore ipsum. </div>
        <br> <br> <br>
        <div><img style="float: left;" src="img/artista6.jpg" /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis minima dignissimos amet quia suscipit sunt, itaque eveniet tempore repellat, enim eaque temporibus ut totam aspernatur quibusdam. Veniam voluptate sit repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit facilis atque enim, iure error illum harum soluta earum molestias incidunt est magni vero quam minus rerum, cum tempore ipsum. </div>
        <br> <br> <br>
        <div><img style="float: left;" src="img/artista7.jpg" /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis minima dignissimos amet quia suscipit sunt, itaque eveniet tempore repellat, enim eaque temporibus ut totam aspernatur quibusdam. Veniam voluptate sit repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui odit facilis atque enim, iure error illum harum soluta earum molestias incidunt est magni vero quam minus rerum, cum tempore ipsum. </div>

    </body>
   
</html>

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <title> Top10 </title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        <ul id=”button”>
            <li><a href="musica.html">Musica</a></li>
            <li><a href="artistas.html">Artistas</a></li>
            <li><a href="top10.html">Top 10</a></li>
        </ul>
        <br>
        <div class="centrado">
            <h1 aling="center">Top 10</h1>
            <br>
            <h3>1. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem, temporibus obcaecati quis magni repellat cupiditate porro ratione maxime ipsum eum, facere voluptas fugit nihil nemo dolor omnis ab voluptatum ducimus. </h3>
            <iframe width="560" height="315" 
            src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1"  
            allowfullscreen></iframe>
            <br>
            <h3>2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, ut iste. Tempore, ea sapiente? Id, doloremque asperiores illum cumque libero pariatur velit maxime eligendi tempore veritatis, modi hic incidunt consequuntur. </h3>
            <iframe width="560" height="315" 
            src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1"  
            allowfullscreen></iframe>
            <br>
            <h3>3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quo pariatur hic non nostrum dignissimos, atque veritatis debitis possimus magni. Laboriosam non iure labore minus doloremque corrupti nihil quo voluptatum.</h3>
            <iframe width="560" height="315" 
            src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1"  
            allowfullscreen></iframe>
            <br>
            <h3>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet id veritatis, dolorem nobis animi, in saepe unde aut ea eius natus laborum obcaecati sunt ducimus nihil sit quam ratione delectus?</h3>
            <iframe width="560" height="315" 
            src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1"  
            allowfullscreen></iframe>
            <br>
            <h3>5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, laboriosam autem! Ullam temporibus vel ab optio minima deleniti quo ducimus impedit ad consequatur sapiente voluptatum animi perferendis esse, ipsum amet!</h3>
            <iframe width="560" height="315" 
            src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1"  
            allowfullscreen></iframe>
            <br>
        </div>
    </body>
   
</html>
Image
Simon Freydell - Gestion de la calidad

Post Reply