Ejercicio de composición y diagramación

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

danielasalazar
Posts: 3
Joined: Mon Jan 16, 2017 2:30 pm

Re: Ejercicio de composición y diagramación

Post by danielasalazar » Sat Mar 04, 2017 6:45 pm

Ejercicio de Composición

HTML

Code: Select all

<!DOCTYPE html>
<html>
<head>

     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="css/main.css">

	<title></title>
</head>

<body>

<div id="parrafo1"> 
  <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 id="parrafo2"> 
  <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 id="parrafo3"> 
  <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 id="parrafo4"> 
  <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 id="parrafo5"> 
  <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 id="parrafo6"> 
  <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 id="parrafo7"> 
  <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 id="parrafo8"> 
  <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 id="parrafo9"> 
  <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 id="parrafo10"> 
  <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 class="redes1">
	<img src="img/facebook.png">
	<img src="img/instagram.png">
	<img src="img/twitter.png">
</div>

<div class="redes2">
	<img src="img/facebook.png">
	<img src="img/instagram.png">
	<img src="img/twitter.png">
</div>

<div class="redes3">
	<img src="img/facebook.png">
	<img src="img/instagram.png">
	<img src="img/twitter.png">
</div>

<div class="redes4">
	<img src="img/facebook.png">
	<img src="img/instagram.png">
	<img src="img/twitter.png">
</div>

<div class="redes5">
	<img src="img/facebook.png">
	<img src="img/instagram.png">
	<img src="img/twitter.png">
</div>

<div class="redes6">
	<img src="img/facebook.png">
	<img src="img/instagram.png">
	<img src="img/twitter.png">
</div>

<div class="redes7">
	<img src="img/facebook.png">
	<img src="img/instagram.png">
	<img src="img/twitter.png">
</div>

<div class="redes8">
	<img src="img/facebook.png">
	<img src="img/instagram.png">
	<img src="img/twitter.png">
</div>

</body>
</html>
CSS

Code: Select all

body {background-color: ; text-align: center;}

#parrafo1 {background-color: #ffaadd; width: 800px; height: 120px; margin-top: 20px; text-align: justify;
	border-radius: 0px 0px 0px 0px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;

}

#parrafo2{background-color: #eeaaff; width: 500px; height: 185px; margin-top: 20px; text-align: justify;
	border-radius: 0px 20px 0px 20px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;


}

#parrafo3{background-color: #ff00dd; width: 100px; height: 1120px; margin-top: 20px; text-align: justify;
	border-radius: 0px 30px 30px 0px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;


}

#parrafo4{background-color: #0000ff; width: 330px; height: 260px; margin-top: 20px; text-align: justify;
	border-radius: 25px 0px 0px 25px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;


}

#parrafo5{background-color: #ffffbb; width: 430px; height: 200px; margin-top: 20px; text-align: justify;
	border-radius: 40px 0px 20px 0px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;


}

#parrafo6{background-color: #eeaa00; width: 200px; height: 460px; margin-top: 20px; text-align: justify;
	border-radius: 35px 20px 40px 10px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;

 
}

#parrafo7{background-color: #ccffdd; width: 500px; height: 180px; margin-top: 20px; text-align: justify;
	border-radius: 50px 50px 50px 50px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;


}

#parrafo8{background-color: #ffddee; width: 600px; height: 160px; margin-top: 20px; text-align: justify;
	border-radius: 10px 20px 0px 0px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;


}

#parrafo9{background-color: #bb00ff; width: 350px; height: 240px; margin-top: 20px; text-align: justify;
	border-radius: 30px 30px 40px 40px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;


}

#parrafo10{background-color: #00dd00; width: 800px; height: 120px; margin-top: 20px; margin-bottom: 20px; text-align: justify;
	border-radius: 0px 0px 0px 0px; margin-left: auto; margin-right: auto;
	padding-right: 20px; padding-left: 20px; padding-top: 20px;


}

.redes1 {position: fixed; right: 0px; top: 0px; width: 200px;
height: 60px; background-color: #000000; border-radius: 0px 0px 10px 10px; text-align: center;

}

.redes2 {position: fixed; left: 0px; top: 0px; width: 200px;
height: 60px; background-color: #000000; border-radius: 0px 0px 10px 10px; text-align: center;


}

.redes3 /*central izquierdo*/ {position: fixed; left: 0px; top: 50%; margin-top: -30px; width: 200px;
height: 60px; background-color: #000000; border-radius: 0px 10px 10px 0px; text-align: center;

}

.redes4 /*central derecho*/ {position: fixed; right: 0px; top: 50%; margin-top: -30px; width: 200px;
height: 60px; background-color: #000000; border-radius: 10px 0px 0px 10px; text-align: center;

}

.redes5 {position: fixed; right: 0px; bottom: 0px; width: 200px;
height: 60px; background-color: #000000; border-radius: 10px 10px 0px 0px; text-align: center;

}

.redes6 {position: fixed; left: 0px; bottom: 0px; width: 200px;
height: 60px; background-color: #000000; border-radius: 10px 10px 0px 0px; text-align: center;

}

.redes7 /*central arriba*/ {position: fixed; right: 50%; margin-right: -100px; top: 0px; width: 200px;
height: 60px; background-color: #000000; border-radius: 0px 0px 10px 10px; text-align: center;

}

.redes8 /*central abajo*/ {position: fixed; right: 50%; margin-right: -100px; bottom: 0px; width: 200px;
height: 60px; background-color: #000000; border-radius: 10px 10px 0px 0px; text-align: center;

}

.redes1 img{margin-top: 20px;}
.redes2 img{margin-top: 20px;}
.redes3 img{margin-top: 20px;}
.redes4 img{margin-top: 20px;}
.redes5 img{margin-top: 20px;}
.redes6 img{margin-top: 20px;}
.redes7 img{margin-top: 20px;}
.redes8 img{margin-top: 20px;}
Landing Page

Wireframe Manual

Image

Wireframe Digital

Image

Code: Select all

  HTML
 
 <!DOCTYPE html>
<html>
<head>

     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="css/main.css">
     
	<title></title>
</head>

<body>

<div id="logo">
<img src="img/menu.jpg">
</div>

<div id="menu">
   <div id="inicio"> <h2> <a href="#">INICIO</a> </h2> </div>
   <div id="servicios"> <h2> <a href="#promesa">SERVICIOS</a> </h2> </div>
   <div id="colas"> <h2> <a href="#juego">COLAS FELICES</a> </h2> </div>
   <div id="contacto"> <h2> <a href="#conta">CONTACTO</a> </h2> </div>
</div>

<div id="registro">
  <div id="tagline"> <h3>Cuando tu perro oye ¡canho!<h3> </div> 
  <div id="perrofeliz"> <img src="img/registro.png"> </div> 
  <div id="promesa">  <p>¡Regístrate y recibe dos días gratis de alojamiento para tu hijo perruno!</p> </div> 
  <div id="boton"><h2> <a href="#">REGISTRARSE</a> </h2> </div>
</div>

<div id="servi">
  <div id="franja"></div> 
  <div id="serv"> <h1>SERVICIOS</h1></div>
  <div id="bloque"> 
  <p> - Transporte.</p>
  <p> - Peluquería.</p>
  <p>- Alimentación.</p>
  <p>- Recreación.</p>
  <p>- Habitación privada.</p>
  <p>- Mucho amor.</p></div>
  <div id="juego"><img src="img/servi.png"></div>
</div>

<div id="coli">
  <div id="feliz"> <h1>COLITAS FELICES </h1></div>
  <div id="perritos"> <img src="img/feliz.png"></div>
  <div id="lorenzo"> <p> Lorenzo 4 años </p></div>
  <div id="chocolate"> <p> Chocolate 2 años </p></div>
  <div id="sandia"> <p> Sandía 8 años </p></div>
</div>

<div id="conta">
  <div id="informa"> <h1> CONTACTO </h1></div>
  <div id="info"> <p> Calle 5 sur #30 - 45   *   3112567   *   canho@gmail.com </p></div>
  <div id="facebook"> <a href="#conta"> <img src="img/facebook.png"></a> </div>
  <div id="instagram"> <a href="#conta"> <img src="img/instagram.png"></a> </div>
  <div id="twitter"> <a href="#conta"> <img src="img/twitter.png"></a> </div>
</div>

</body>
</html> 

Code: Select all

 MAIN CSS


body {background-color: #e6ecdf; }


#logo {
	position: fixed;
	 top: 0px;
	 width: 950px;
	 height: 220px;
	 left:50%;
	 margin-left: -475px ;
	 z-index: 5;
}

a {color: white;}

a:hover {color: #69a6dc;}


#menu { position: fixed; 
	    top: 180px; 
	    width: 950px; 
	    height: 40px; 
	    left: 50%; 
	    margin-left: -475px;
        background-color: #69a6dc; 
        text-align: center; 
        z-index: 6;}

      #inicio { background-color: #446eb3;
		width: 168px;
		height: 40px;
		border-radius: 10px 10px 10px 10px;
		position: absolute;
		top:0px;
		left: 5px;
		line-height: 38px;}

      #servicios{background-color: #446eb3;
        width: 168px; 
        height: 40px; 
        border-radius: 10px 10px 10px 10px; 
        position: absolute; 
        top: 0px; 
        left: 270px;
        line-height: 38px;}


      #colas{background-color: #446eb3; 
      	width: 168px; 
      	height: 40px; 
      	border-radius: 10px 10px 10px 10px; 
        position: absolute; 
        top: 0px; 
        left: 525px;
        line-height: 38px;}


      #contacto{background-color: #446eb3; 
      	width: 168px; 
      	height: 40px; 
      	border-radius: 10px 10px 10px 10px;
        position: absolute; 
        top: 0px; 
        right: 5px;
        line-height: 38px;}

#registro {width: 950px; 
	       height: 355px; 
	       margin-left: auto; 
	       margin-right: auto; 
           position: relative; 
           top: 220px; }
      
      #tagline {position: absolute; 
      	top: 43px; 
      	left: 24px;}

      #perrofeliz {position: absolute; 
      	top: 76px; 
      	left: 0px;}

      #promesa {position: absolute; 
      	top: 76px; 
      	right: 60px; 
      	width: 230px; 
      	height: 128px;
        text-align: center;}

      #boton {position: absolute; 
      	top: 240px; 
      	right: 50px; 
      	width: 260px; 
      	height: 50px; 
      	background-color: #69a6dc;
      	border-radius: 10px 10px 10px 10px;
        text-align: center;
        line-height: 40px;}

#servi {width: 950px; 
	    height: 420px; 
	    margin-left: auto; 
	    margin-right: auto; 
        position: relative; 
        top: 200px; }

      #franja {position: absolute; 
      	top: 0px; 
      	width: 950px; 
      	height: 50px; left: 0px;
        background-color: #446eb3;}    

      #serv {position: absolute; 
      	top: 3px; 
      	left: 24px; 
      	color: #FFFFFF;
        line-height: 38px;}

      #bloque {position: absolute; 
      	top: 100px; 
      	left: 24px; 
      	width: 300px; 
      	height: 240px;}

      #juego {position: absolute; 
      	bottom: 0px; 
      	right: 0px;}

#coli {width: 950px; 
	height: 400px; 
	position: relative; 
	top: 200px; 
	background-color:#69a6dc; 
	margin-left: auto;
	margin-right: auto;}

      #feliz {position: absolute; 
      	top:3px; 
      	left: 24px; 
      	color: #FFFFFF;}
      
      #perritos {position: absolute; 
      	top: 40px; 
      	margin-top: auto; 
      	margin-right: auto; }

      #lorenzo {position: absolute; 
      	top: 320px; 
      	left: 160px; 
      	text-align: center; 
        color: #FFFFFF;
        width: 70px;}

      #chocolate {position: absolute; 
      	top: 320px; 
      	left:50%; 
      	margin-left: -35px; 
      	text-align: center; 
      color: #FFFFFF; 
      width: 70px;}

      #sandia {position: absolute; 
      	top: 320px; 
      	right: 160px; 
      	text-align: 
      	center; 
        color: #FFFFFF; 
        width: 70px;}

#conta {width: 950px;
	   height: 100px;
	   position: relative; 
	   top:200px;
	   margin-left: auto;
	   margin-right: auto;}     

	  #informa {position: absolute; 
	  top:3px;
	  color: #446eb3;
	  left: 24px;} 

	  #info { position: absolute;
	    top: 50px;
	    left: 24px; }    

      #facebook { position: absolute;
        bottom: 19px;
        right: 215px;}

      #instagram {position: absolute;
        bottom: 19px;
        right: 120px}

      #twitter {position: absolute;
        bottom: 19px;
        right: 24px;}

@font-face {
  font-family: 'Black Jack';
  src: url('../fonts/blackjack/BlackJack.eot');
  src: url('../fonts/blackjack/BlackJack.eot?#iefix') format('embedded-opentype'),
    url('../fonts/blackjack/BlackJack.woff2') format('woff2'),
    url('../fonts/blackjack/BlackJack.woff') format('woff'),
    url('../fonts/blackjack/BlackJack.ttf') format('truetype'),
    url('../fonts/blackjack/BlackJack.svg#BlackJack') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/quicksand/Quicksand-Bold.eot');
  src: url('../fonts/quicksand/Quicksand-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/quicksand/Quicksand-Bold.woff2') format('woff2'),
    url('../fonts/quicksand/Quicksand-Bold.woff') format('woff'),
    url('../fonts/quicksand/Quicksand-Bold.ttf') format('truetype'),
    url('../fonts/quicksand/Quicksand-Bold.svg#Quicksand-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/sourcesans/SourceSansPro-Bold.eot');
  src: url('../fonts/sourcesans/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/sourcesans/SourceSansPro-Bold.woff2') format('woff2'),
    url('../fonts/sourcesans/SourceSansPro-Bold.woff') format('woff'),
    url('../fonts/sourcesans/SourceSansPro-Bold.ttf') format('truetype'),
    url('../fonts/sourcesans/SourceSansPro-Bold.svg#SourceSansPro-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/sourcesans/SourceSansPro-Light.eot');
  src: url('../fonts/sourcesans/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/sourcesans/SourceSansPro-Light.woff2') format('woff2'),
    url('../fonts/sourcesans/SourceSansPro-Light.woff') format('woff'),
    url('../fonts/sourcesans/SourceSansPro-Light.ttf') format('truetype'),
    url('../fonts/sourcesans/SourceSansPro-Light.svg#SourceSansPro-Light') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/sourcesans/SourceSansPro-Regular.eot');
  src: url('../fonts/sourcesans/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/sourcesans/SourceSansPro-Regular.woff2') format('woff2'),
    url('../fonts/sourcesans/SourceSansPro-Regular.woff') format('woff'),
    url('../fonts/sourcesans/SourceSansPro-Regular.ttf') format('truetype'),
    url('../fonts/sourcesans/SourceSansPro-Regular.svg#SourceSansPro-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}


p{ font-family: Source Sans Pro;
    font-weight: normal;
    font-size: 20px;}

  h2 { font-family: Quicksand;
  font-size: 15px;
  line-height: 6px; }

  h1 { font-family: Source Sans Pro;
  font-weight: bold;
  font-size: 30px; 
  line-height: 6px;}

  h3 { font-family: Source Sans Pro ;
       font-size: 35px;
       font-weight: bold;
       line-height: 1px;
       color: #69a6dc
     }
Image

User avatar
Juan Camilo Rios
Posts: 3
Joined: Mon Jan 16, 2017 2:20 pm

Re: Ejercicio de composición y diagramación

Post by Juan Camilo Rios » Wed Mar 29, 2017 2:32 am

Wireframe manual :geek:

Image

Wireframe digital :ugeek:

Image

:?: gif (?)

Image

:arrow: html

Code: Select all

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<head>
    <title>Omega</title>
<style>
body, html {
    height: 100%;
    margin: 0;
}
.bg {
    background-image: url('img/foto.jpg');
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

</style>
</head>
<body>
<div class="bg">
    <div class="tex animated bounceInLeft">
    <h1>SEAMASTER 300 MASTER CO-AXIAL</h1>
    <p class="relleno">En 1957, OMEGA lanzó el Seamaster 300 original, un reloj diseñado específicamente para buceadores y profesionales que trabajaban bajo el agua. Más de medio siglo después, vuelve absolutamente actualizado y mejorado, preparado para equipar a una nueva generación de aventureros, en tierra y en los océanos.</p>
    </div>

    <div class="animated fadeIn">
    <a class="compra" href="https://www.omegawatches.com/es/watches/seamaster/seamaster-300/seamaster-300/product/"> COMPRAR </a>
    </div>
</div>


</body>
</html>
:arrow: css

Code: Select all

.tex{
    position: absolute;
    color: white;
    left: 250px;
    top: 400px;
    padding: 30px;
}

h1{
    color:#C40D31;
    font-family: 'pier_sansblack';
    font-size: 40px;
}

.relleno{
    font-family: 'pier_sanslight';
    font-size: 20px;
    color: white;
    text-align: justify-all;
    width: 570px;
    position: absolute;
}

.compra{
    font-family: 'pier_sansblack';
    text-decoration: none;
    background-color: #C40D31;
    color: white;
    padding: 10px;
    border-radius: 10px;
    width: 100px;
    text-align: center;
    position: absolute;
    top:740px;
    left: 492px;


}

a:hover{
    font-family: 'pier_sansblack';
    color:black;
}

@font-face {
    font-family: 'pier_sansblack_italic';
    src: url('../fonts/PierSans/piersans-blackitalic-webfont.woff2') format('woff2'),
         url('../fonts/PierSans/piersans-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'pier_sansbold_italic';
    src: url('../fonts/PierSans/piersans-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/PierSans/piersans-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'pier_sansitalic';
    src: url('../fonts/PierSans/piersans-italic-webfont.woff2') format('woff2'),
         url('../fonts/PierSans/piersans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'pier_sanslight_italic';
    src: url('../fonts/PierSans/piersans-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/PierSans/piersans-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'pier_sansmedium_italic';
    src: url('../fonts/PierSans/piersans-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/PierSans/piersans-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'pier_sansblack';
    src: url('../fonts/PierSans/piersans-black-webfont.woff2') format('woff2'),
         url('../fonts/PierSans/piersans-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'pier_sansbold';
    src: url('../fonts/PierSans/piersans-bold-webfont.woff2') format('woff2'),
         url('piersans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'pier_sanslight';
    src: url('../fonts/PierSans/piersans-light-webfont.woff2') format('woff2'),
         url('../fonts/PierSans/piersans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'pier_sansmedium';
    src: url('../fonts/PierSans/piersans-medium-webfont.woff2') format('woff2'),
         url('../fonts/PierSans/piersans-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'pier_sansregular';
    src: url('../fonts/PierSans/piersans-regular-webfont.woff2') format('woff2'),
         url('../fonts/PierSans/piersans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

User avatar
daniel.mg
Posts: 3
Joined: Mon Jan 16, 2017 2:19 pm

Re: Ejercicio de composición y diagramación

Post by daniel.mg » Wed Mar 29, 2017 8:03 am

Wireframe Manual de la Página:
Image

Wireframe Digital de la Página:
Image

Gif de la Página:
Image

Código HTML de la Página:

Code: Select all

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">

<head>
	<title>cachucha</title>
</head>
<body>

<div class="logo animated rollIn">
	<strong>
	Pintura a <br> prueba de <br> ineptos
	</strong>
</div>

<div class="cuadro animated fadeIn">
    <div class="texto">	
    
       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. <br><br> 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.

        <a class="animated bounceInUp" href="http://www.google.com"><strong>Descargar el kit </strong> </a>
    </div>
</div>

<div class="footer animated bounceInUp">- ░░░░░ -
</div>

</body>
</html>
Código CSS de la Página:

Code: Select all

body, div{
	padding: 0;margin: 0;
}

@font-face { font-family: Bebas; src: url('../fonts/BebasNeue.otf'); } 
@font-face { font-family: popo; src: url('../fonts/Albondigas.ttf'); } 

.cuadro{
	box-shadow: 5px 0px 40px black;
	top: 0px;
	z-index: 5;
	transform: skew(2deg);
	position: fixed;
	right: 50%;
	margin-right: -200px;
	text-align:center;
	width: 400px;
	height: 100%;
	background-color: white;
}

.logo{
	width: 200px;
	margin-right: -100px;
	font-family: "popo";
	font-size: 5em;
	z-index: 10;
	position: fixed;
	right: 50%;
	top: 7%;
	text-align: center;
	line-height: 0.5em;
	color: grey;
}

body{
	background-image: url(../img/fondo.jpg);
	background-position: center fixed;
	height: 1760px;
}
.footer{
	background-color: white;
	text-align: center;
	position: fixed;
	z-index: 6;
	height: 47px;
	bottom: -30px;
	width: 100%;
	}

.texto{
	font-family: sans-serif;
	position: fixed;
	width: 250px;
	left: 50%;
	margin-left: -125px;
	top: 30%;
}

a {
	text-align: center;
	border-radius: 20px;
	width: 400px;
	padding: 20px;
	background-color: #84FF72;
	text-transform: uppercase;
	position: absolute;
	color: #FF2221;
	right: 50%;
	bottom: -85px;
	margin-right: -225px;
	z-index: 40;
	text-decoration: none;
}

a:hover{
	color: black;

}
Enlace a la Página:
http://www.kadejo.com/tareas/tarea_03/index.html

Post Reply