AVANCE DEL PROYECTO

Jonathan Zurita

INTERFAZ DEL PROYECTO

Diseño de las divisiones de la página web

CODIGO DE DISEÑO

Cabecera

Barra de navegación Barra de herramientas

Contenido

Pie de pagina
Código

<style>

*{

box-sizing: border-box;

body {

padding: 10px;

background: #f1f1f1;

/* Header/Blog Title */

.header {

padding: 30px;

text-align: center;

background: white;

.header h1 {

font-size: 50px;

/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

}
/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

/* Create two unequal columns that floats next to each other */

/* Left column */

.leftcolumn {

float: left;

width: 75%;

/* Right column */

.rightcolumn {

float: left;

width: 25%;

background-color: #f1f1f1;
 padding-left: 20px;

/* Fake image */

.fakeimg {

background-color: #aaa;

width: 100%;

padding: 20px;

article {

float: left;

padding: 20px;

width: 70%;

background-color: #f1f1f1;

height: 300px; /* only for demonstration, should be removed */

/* Add a card effect for articles */

.card {

background-color: white;

padding: 100px;

margin-top: 20px;

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;
}

nav {

float: right;

width: 30%;

height: 300px; /* only for demonstration, should be removed */

background: #ccc;

padding: 20px;

/* Style the list inside the menu */

nav ul {

list-style-type: none;

padding: 0;

article {

float: left;

padding: 20px;

width: 70%;

background-color: #f1f1f1;

height: 300px; /* only for demonstration, should be removed */

/* Clear floats after the columns */

section:after {

content: "";

display: table;

clear: both;

}
/* Footer */

.footer {

padding: 20px;

text-align: center;

background: #ddd;

margin-top: 20px;

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on
top of each other instead of next to each other */

@media screen and (max-width: 800px) {

.leftcolumn, .rightcolumn {

width: 100%;

padding: 0;

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on
top of each other instead of next to each other */

@media screen and (max-width: 400px) {

.topnav a {

float: none;

width: 100%;

</style>
BARRA DE NAVEGACION

</style>

<style type="text/css">

*{

margin:0px;

padding:0px;

#header {

margin:auto;

width:500px;

font-family:Arial, Helvetica, sans-serif;

ul, ol {

list-style:none;

.nav > li {

float:left;
}

.nav li a {

background-color:#000;

color:#fff;

text-decoration:none;

padding:10px 12px;

display:block;

.nav li a:hover {

background-color:#434343;

.nav li ul {

display:none;

position:absolute;

min-width:140px;

.nav li:hover > ul {

display:block;

.nav li ul li {

position:relative;

.nav li ul li ul {
 right:-140px;

top:0px;

</style>

BARRA DE MENU

CODIGO

<style type="text/css">

*{

margin:0px;

padding:0px;
 font-family: Helvetica Neue;

/*titulo*/

div#titulo{

width:100%;

margin-top:100px;

p#header{

text-align: center;

font-size: 2.5em;

color:#9a9a9a;

p#subheader{

text-align: center;

color:#cecece;

margin-top:20px;

font-size: 1.3em;

header{

margin:100px auto;

width:1200px;

height:230px;

background-color: red;

}
div.contenedor{

width: 350px;

height: 120px;

float:left;

-webkit-transition: height .4s;

div#uno{

background-color: rgb(208,101,3);

div#dos{

background-color: rgb(233,147,26);

div#tres{

background-color: rgb(22,145,190);

div#cuatro{

background-color: rgb(22,107,162);

div#cinco{

background-color: rgb(27,54,71);

div#seis{
 background-color: rgb(21,40,54);

img.icon{

display: block;

margin:20px auto;

background-color: rgba(255,255,255,.15);

width:40px;

padding:20px;

-webkit-border-radius: 30%;

-webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);

-webkit-transition:box-shadow .4s;

p.texto{

font-size: 1.2em;

color:white;

text-align: center;

padding-top:10px;

opacity: .6;

-webkit-transition: padding-top .4s;

div.contenedor:hover{

height:150px;

div.contenedor:hover p.texto{

padding-top: 30px;
 opacity: 1;

div.contenedor:hover img.icon{

-webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,.6);

</style>

CODIGO HTML DE LA PAGINA

</head>

<body>

<div class="header">

<h1>PSeInt Web </h1>

<p>Aprende a Programar.</p>

</div>

<div class="topnav">

<ul class="nav">

<li><a href="">Inicio</a></li>

<li><a href="">Acerca de</a>

<ul>
 <li><a href="">Submenu1</a></li>

<li><a href="">Submenu2</a></li>

<li><a href="">Submenu3</a></li>

<li><a href="">Submenu4</a></li>

</ul>

</li>

<li><a href="">Contacto</a></li>

</ul>

</div>

<div class="row">

<div class="leftcolumn">

<div class="card">

</div>

</div>

<div class="rightcolumn">

<div class="contenedor" id="uno">

<CENTER><img src="https://image.flaticon.com/icons/png/512/30/30766.png"
width="50" height="50" ></CENTER>

<p class="texto">Escribir</p>

</div>

<div class="contenedor" id="dos">

<CENTER><img
src="http://cdn.onlinewebfonts.com/svg/img_448895.png" width="50" height="50" ></CENTER>
 <p class="texto">Leer</p>

</div>

<div class="contenedor" id="tres">

<CENTER><img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcR_SeQzcbxyr8zz-
kq_9gdenRi6kLILC2u6piybtQyhW7KB_Wo4" width="90" height="60" ></CENTER>

<p class="texto">Asignar</p>

</div>

<div class="contenedor" id="cuatro">

<CENTER><img src="http://www.monografias.com/trabajos60/diagrama-
flujo-datos/Image26492.gif" width="70" height="70" ></CENTER>

<p class="texto">Si-Entonces</p>

</div>

<div class="contenedor" id="cinco">

<CENTER><img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRpbUGgBTTocQ2gGYfrIGGlEMHv0p_qoI3CtvnklZHXV5L7y
CQE" width="80" height="50" ></CENTER>

<p class="texto">Segun</p>

</div>

<div class="contenedor" id="seis">

<CENTER><img
src="https://www.monografias.com/trabajos70/introduccion-diagrama-flujo/image021.jpg"
width="80" height="80" ></CENTER>

<p class="texto">Mientras</p>

</div>

<div class="contenedor" id="tres">

 <CENTER><img
src="https://www.monografias.com/trabajos12/alflu/Image5972.gif" width="80" height="80"
></CENTER>

<p class="texto">Repetir</p>

</div>

</div>

</div>

<div class="footer">

<h2>"Si se puede Imaginar se puede Programar."</h2>

</div>

</body>

</html>