CODIGO WIREFRAME

En esta sección se resolverán dudas relacionadas con la creación de una aplicación móvil, se tendrá en cuenta, el diseño, la innovación, las metodologías de desarrollo, los procesos, los lenguajes y los tipos de aplicaciones que existen.

Moderator: julianmartinez16

Post Reply
Daniela salazar
Posts: 1
Joined: Fri Aug 10, 2018 4:28 pm

CODIGO WIREFRAME

Post by Daniela salazar » Fri Aug 10, 2018 6:37 pm

Code: Select all

#principal{
	width: 1000px;
	height: 3090px;
	border: 1px solid #000;
	margin: auto;

}
header{
	width: 1000px;
	height: 100px;
	border: 1px solid #000;

}

#logo{
	width: 200px;
	height: 100px;
	border: 1px solid #000;
	float: left;


}
.menu{
	width:  500px;
	height: 40px;
	border: 1px solid #ccc;
	float: right;
	margin-top: 40px;

	

}
.menu ul{}
.menu ul li{
	list-style: none;
	float: right;
}
.menu ul li a{
	text-decoration: none;
	padding: 10px 15px;
	border: 0px solid #ccc;
	


}
#slide{
	margin-top: 40px;
	width: 900px;
	height: 250px;
}

#video, video{
	margin: 0;
	padding-top: 20px;
	width: 350px;
	height: 200px;
}





Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>MUSIC WEB</title>
	<link rel="stylesheet" type="text/css" href="css/estilo.css">
	</head>
	<body background="img/fondo14.jpg">
		<div id="principal">
		<header>
			<div id="logo">
				<h2>MUSIC WEB</h2>
				<p>Enterate con un click </p>
			</div>
			<nav class="menu">
				
               <a href="index.html"><img src="img/inicio.png"> </a>
                <a href="top.html"><img src="img/top.png"> </a>
                <a href="generos.html"><img src="img/gene1.png"> </a> <a href="artistas.html"><img src="img/artistas.png"></a>
                
				

				
				
			
			 
				
				
				</nav>
			
		</header>
		<section id="slide">
			<img src="img/indice.png" width="1000" height="1000">
			
		
	
		</section>
		
	</div>
	

	</body>
	</html>


Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title> </title>
	<link rel="stylesheet" type="text/css" href="css/estilo.css">
	</head>
	<body background="img/fondo14.jpg">
		<div id="principal">
		<header>
			<div id="logo">
				<h2>TOP 10</h2>
				<p>Las mejores canciones </p>
			</div>
			<nav class="menu">
				
               <a href="index.html"><img src="img/inicio.png"> </a>
                <a href="top.html"><img src="img/top.png"> </a>
                <a href="generos.html"><img src="img/gene1.png"> </a>
                <a href="artistas.html"><img src="img/artistas.png"></a>
				

				
				
			
			 
				
				
				</nav>
			
		</header>
		
			<div class="row">
		<div class="four">
			
			<p>#1 HAVANA - CAMILA CABELLO </p> <img src="img/camila.png" width="100" height="90">
			<p>#2 MI CAMA - KAROL G</p><img src="img/karol.png" width="100" height="90">
			<p>#3 FAKE LOVE - DRAKE</p><img src="img/drake.png" width="100" height="90">
			<p>#4 ONE KISS - DUA LIPA</p><img src="img/dua.png" width="100" height="90">
			<p>#5 BACK TO YOU - SELENA GOMEZ</p><img src="img/selena.png" width="100" height="90">
			<p>#6 NO BRAINER - DJ KHALED</p><img src="img/brainer.png" width="100" height="90">
			<p>#7 GIRLS LIKE YOU - MAROON 5</p><img src="img/marron.png" width="100" height="90">
			<p>#8 NERVOUS - SHAWN MENDES</p><img src="img/shaw.png" width="100" height="90">
			<p>#9 NO TEARS LEFT TO CRY - ARIANA GRANDE</p><img src="img/ariana.png" width="100" height="90">
			<p>#10 PRAY - SAM SMITH</p><img src="img/sam.png" width="100" height="90">
				
		</div>
		
	</div>
		
	</div>
	

	</body>
	</html>



Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title> </title>
	<style type="text/css">
    #contenedor{
    	
    }
    #izquierda{
    	float: left;
    	padding: 10px;
        width: 300px;
    	margin: 40px;
    	
    }
    #derecha{
    	float: left;
    	padding: 10px;
        width: 300px;
    	margin: 40px;
    	
    }
  

	</style>
	<link rel="stylesheet" type="text/css" href="css/estilo.css">
	</head>
	<body background="img/fondo14.jpg">
		<div id="principal">
		<header>
			<div id="logo">
				<h2>GENEROS</h2>
				<p>Los favoritos</p>
			</div>
			<nav class="menu">
				
                <a href="index.html"><img src="img/inicio.png"> </a>
                <a href="top.html"><img src="img/top.png"> </a>
                <a href="generos.html"><img src="img/gene1.png"> </a>
                <a href="artistas.html"><img src="img/artistas.png"></a>
                
				

				
				
			
			 
				
				
				</nav>
			
		</header>
		<section id="slide">
			<img src="img/music.png" width="1000" height="300">
			<div class="row">
					<div class="four">
			<h2> LISTA DE GENEROS </h2>
			<p>POP ROCK - MAROON 5</p><img src="img/marron.png" width="100" height="90">
			<p>ROCK- QUEEN</p><img src="img/queen.png" width="100" height="90">
			<p>SALSA - GRUPO NICHE</p><img src="img/niche.png" width="100" height="90">
			<p>VALLENATO - SILVESTRE DANGOND</p><img src="img/silvestre.png" width="100" height="90">
			<p>OPERA- LUCIANO PAVAROTTI</p><img src="img/luciano.png" width="100" height="90">
			<p>JAZZ- DMITRI SHOSTAKOVICH</p><img src="img/dmitri.png" width="100" height="90">
			<p>POP-CAMILA CABELLO </p> <img src="img/camila.png" width="100" height="90">
			<p>REGGAETON-KAROL G</p><img src="img/karol.png" width="100" height="90">
			<p>HIP HOP- DRAKE</p><img src="img/drake.png" width="100" height="90">
			<p>POP - DUA LIPA</p><img src="img/dua.png" width="100" height="90">
			<p>ELECTRO POP - SELENA GOMEZ</p><img src="img/selena.png" width="100" height="90">
			<p>HIP HOP - DJ KHALED</p><img src="img/brainer.png" width="100" height="90">
			
				
		</div>
		
		<div class="four">
			<h2> LO ULTIMO </h2>
			<div id="contenedor">  
			<div id="izquierda"> 
				
              
              <p> YEARS AND YEARS</p>
              <video controls preload autoplay>
              	<source src="video/video3.mp4" type="video/mp4">


              </video>

             

			</div>
				<div id="derecha"> 
				<P> ADDICTED</P>
              <video controls preload autoplay>
              	<source src="video/video4.mp4" type="video/mp4">

              </video>

             

			</div>
				<div id="izquierda"> 
				<P> TO LOVE HABITS</P>
              <video controls preload autoplay>
              	<source src="video/video5.mp4" type="video/mp4">

              </video>

             

			</div>
				<div id="derecha"> 
				<P>JUST FOR LIFE</P>
              <video controls preload autoplay>
              	<source src="video/video6.mp4" type="video/mp4">

              </video>

             

			</div>

			
			</div>
		</div>
		
	</div>
		</section>
	</div>
	

	</body>
	</html>





Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title> </title>
	<link rel="stylesheet" type="text/css" href="css/estilo.css">
	</head>
	<body background="img/fondo14.jpg">
		<div id="principal">
		<header>
			<div id="logo">
				<h2>ARTISTAS</h2>
				
			</div>
			<nav class="menu">
				
               
                <a href="index.html"><img src="img/inicio.png"> </a>
                <a href="index.html"><img src="img/top.png"> </a>
                <a href="index.html"><img src="img/gene1.png"> </a>
                <a href="index.html"><img src="img/artistas.png"></a>
                
                
				

				
				
			
			 
				
				
				</nav>
			</header>
		<section id="slide">
			<img src="img/piano.jpg" width="1000" height="300">
			<div class="row">
		<div class="four">
			<h2> LISTA DE CANTANTES </h2>
			<p>QUEEN</p><img src="img/queen.png" width="100" height="90">
			<p>GRUPO NICHE</p><img src="img/niche.png" width="100" height="90">
			<p>KAROL G</p><img src="img/karol.png" width="100" height="90">
			<p>DRAKE</p><img src="img/drake.png" width="100" height="90">
			<p>DUA LIPA</p><img src="img/dua.png" width="100" height="90">
			<p>SILVESTRE DANGOND</p><img src="img/silvestre.png" width="100" height="90">
            <p>LUCIANO PAVAROTTI</p><img src="img/luciano.png" width="100" height="90">
			<p>DMITRI SHOSTAKOVICH</p><img src="img/dmitri.png" width="100" height="90">
			<p>CAMILA CABELLO </p> <img src="img/camila.png" width="100" height="90">
			<p>SELENA GOMEZ</p><img src="img/selena.png" width="100" height="90">
			<p> MAROON 5</p><img src="img/marron.png" width="100" height="90">
			<p>DJ KHALED</p><img src="img/brainer.png" width="100" height="90">
			
				
		</div>
		
	</div>
			
		<div class="four">
			<h2> PROXIMOS EVENTOS </h2>
			<p>
           <img src="img/eventos.png" width="1000" height="390">
			</p>
		</div>
	</div>
		</section>
	</div>
	

	</body>
	</html>






Post Reply