Trabajo

---- html-------
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estiloPagina.css">
<title>Prueba Basica HTML5</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="contenedor">
<header>
<img src = "Imagenes/logoPagina.png" alt = "Este es el Logo" />
<h1>EJERCICIO DE PROGRAMACION WEB</h1>
</header>
<nav>
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">ARTICULOS</a></li>
<li><a href="#">REGISTRATE</a></li>

<li><a href="#">INICIAR SESION</a></li>
</ul>
</nav>
<section id="content">
<h1>Este es un SECTION</h1>
<article>
<h2>Este es un ARTICLE</h2>
<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>
<br>
<a class="button pequeno azul"
href="file:///C:/Users/usuario/Desktop/planDeMejoramiento/Pagina.html"><span>Inicio</spa
n></a>
</article>
<article>
sed do eiusmod
ad minim veniam,
commodo

velit esse
cupidatat non
laborum.</p>
<br>
n></a>
</article>
<article>
sed do eiusmod
ad minim veniam,
commodo
velit esse
cupidatat non
laborum.</p>
<br>
n></a>

<br>
<br>
</article>
</section>
<section id="Formulario">
<form id="Registro">
<h1>Registro</h1>
<br>
<label>Nombre</label>
<input id="Nombre" name="Nombre" type="text"
placeholder="Julanito Mendez" required="Nombre"></input>
<br>
<label>Usuario</label>
<input id="Usuario" name="Usuario" type="text"
placeholder="Sultan123" required></input>
<br>
<label>Correo Electronico</label>
<input id="Correo Electronico" name="Correo"
type="email" placeholder="Julanito-Mendez@misena.edu.co" required></input>
<br>
<label>Contraseña</label>
<input id="Contraseña" name="Contraseña"
type="password" required></input>
<br>
<label>Confirmar Contraseña</label>

<input id="Confirmar Contraseña"
name="Confirmar" type="password" placeholder="........" required></input>

<br>
href="#"><span>Registrate En El SENA</span></a>
</form>
<div id="conten">
<a href="#" class="btnAzul">Da Click</a>
</div>
</section>
<footer>
<img src = "Imagenes/piePagina.png" alt = "Este es el Logo" />
<p>Realizado Por Daniela-Garcia ADSI 2013</p>
</footer>
</div>
</body>
</html>

-----------------CSS·---------------------
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {

display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Comienzo De La Pagina*/
body{
background-color: #778899;/*esto es lo que le da color fuera del div contenedor*/
}
div.contenedor

/*padding: 0;
margin: 0 auto;
width: 85%;
height: 100%;
overflow: hidden;
background: rgba(204,204,204,.4);
border-radius: 5px 5px 10px 10px;
-webkit-box-shadow:0px 0px 0px 1px rgba(255,255,255,0.4),0px 0px 15px
rgba(204,204,204,0.5);
-moz-box.box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 15px
rgba(204,204,204,0.5);
box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.4), 0px 0px 15px
rgba(204,204,204,0.5);*/
{
margin-left: auto;
margin-right: auto;
width: 50%;
min-width: 350px;
}
header, nav, section, footer, article{
border-radius: 10px;
padding: 15px;
border: solid 2px black;
}
header{

height: 100px;
width: 93%;
float: center;
background-color: #DCDCDC;/*Esto es para que le de fondo debajo de los
menu*/
overflow: hidden;
/*margin-bottom: 5px;Esto es para dar distanca entre en header y el nav*/
}
header h1{
text-align: center;
}
header img{
margin-bottom: 5px;
float: center;
height: 84px;
}
footer img{
/*margin-bottom: 10px;*/
height: 80px;
}
footer h1{
text-align: right;

}
nav{
width: 93%;/*Esto es lo que le da en ancho del nav*/
float: left;
menu*/
/*margin-left: 2px*/
/*nav*/
}
section{
menu*/
}
/*Estilo de formulario*/
/* NAVEGACION */
/*Aqui debe Cambiar el color de la letra*/
li a{
display: inline-block;
font-size: 1,1em;
font-family: sans-serif;
color: #000000;/*Esto Es Para Darle Color A Las Letras*/
margin-left: 0px;/*Esto Es Para Darle A La margenes A Los Menus*/
margin-top: 0px;/*Esto Es Para Darle La Altura A Los Botones Del Menu*/
width: 100%;/*Esto Es Para la Anchura De Los Botnes Del Menu*/

padding: 5px 0px;/*Esto hace la altura de los menu y la anchura del menu*/
text-decoration: none;/*Esto hace que se le quite la linea de abajo a los texto*/
margin-bottom: 0px;/*Esto son la altura de donde estan los menu*/
/*fondo con gradiente*/
/*background: -moz-linear-gradient(center top, #FF256A 0%, #a5c956 100%) repeat scroll 0
0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e),
color-stop(100%, #DE02E8));
/*borde redondeado en esquinas opuestas*/
/*-moz-border-radius:20px 0 20px 0;
-webkit-border-radius:20px 0 20px 0;
/*sombreados*/
/*text-shadow:1px 1px 1px #e1fea6;
-moz-box-shadow: 0px 6px 0 #819f45;
-webkit-box-shadow: 0px 6px 0 #FF0DFF;*/
/*
Retardo apreciable a las transiciones de los botones
*/
-webkit-transition-property: all;/*La transición se aplique a todos los elementos que
cambien (transition-property:all).*/
-webkit-transition-duration: 2s;/*La transición dure 300 milisegundos (transition-duration:
300ms). */
-webkit-transition-timing-function: ease;/*La transición se produzca de forma rapida pero
lenta al final (transition-timing-function: ease-out). */

-webkit-transition-delay: 0.5s;/*La transición se produzca con un retardo de 20ms tras pasar
el ratón por encima (transition-delay:20ms). */
}
li{
text-align: center;
background-color: #008080;/*Este Es El Color De Los Menus*/
margin-bottom: 2px;/*Esto hace Que Los Menus Tenga Una Distancia*/
}
li a:hover{
/*Cambiar bordes en esquinas opuestas*/
/*-moz-border-radius:0 20px 0 20px;
-webkit-border-radius: 0 20px 0 20px;
/*Cambiar colores de fondo y sombra*/
background: -moz-linear-gradient(center top, #fc7323 0%, #B63EFF 100%)
repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom,
color-stop(100%,#fc7323), color-stop(100%,#fc7323));/*Esto hace el primer
codigo le da sobra al menu al momento de pasar el mouse y el segundo le da total color al
menu cueando le pasa el mouse*/
-moz-box-shadow: 0px 6px 0 #B63EFF;
-webkit-box-shadow: 0px 0px 0 #fc7323;/*Esto Es Lo Que Le da El Borde De
Abajo A Los Menus*/
}

/*------------------
/*li a:active{
/*efecto de movimiento*/
/*position: relative;
top: 3px;
/*efecto de undimiento*/
/*-moz-box-shadow: 0px 3px 0 #336666;
-webkit-box-shadow:0px 3px 0 #E80283;
/*invertir degradado*/
/*background: -moz-linear-gradient(center top, #FF4718 0%, #FF4718 100%)
color-stop(0%,#009966), color-stop(100%, #FF2592));
}
/*boton de inicio*/
/*Estilo del formulario de css3*/

p:first-letter {
display: block;
margin: 1px 0 0 1px;
float: left;
color: #fc7323;
font-size: 40px;
font-family: Georgia;
}
button active {
/*Cambiar colores de fondo y sombra*/
background: -moz-linear-gradient(center top, #fc7323 0%, #B63EFF 100%)
color-stop(100%,#fc7323), color-stop(100%,#fc7323));/*Esto hace el primer
codigo le da sobra al menu al momento de pasar el mouse y el segundo le da total color al
menu cueando le pasa el mouse*/
-moz-box-shadow: 0px 6px 0 #B63EFF;
-webkit-box-shadow: 0px 0px 0 #fc7323;/*Esto Es Lo Que Le da El Borde De
Abajo A Los Menus*/
}
button .disabled{
text-align: center;
background-color: #008080;/*Este Es El Color De Los Menus*/

margin-bottom: 2px;/*Esto hace Que Los Menus Tenga Una Distancia*/
}
/*css3 del boton*/
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #050505;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#ebebeb 50%,
#dbdbdb 50%,
#b5b5b5);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
color-stop(0.50, #ebebeb),
color-stop(0.50, #dbdbdb),
to(#b5b5b5));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #949494;
-moz-box-shadow:

0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,1);
}
button active{
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed),
color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',
endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;

border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf),
color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',
endColorstr='#ededed');
background-color:#dfdfdf;
}.classname:active {
position:relative;
top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
}
/*efecto del boton numero 5*/
.button, .button span {

display: inline-block;
border-radius: 4px;
}
.button {
white-space: nowrap;
line-height:1em;
position:relative;
outline: none;
overflow: visible;
cursor: pointer;
border: rgba(0, 0, 0, .2) 1px solid;
border-bottom:rgba(0, 0, 0, .4) 1px solid;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
center top,
rgba(255, 255, 255, .1) 0%,
rgba(0, 0, 0, .1) 100%
);
linear,
center bottom,

center top,
from(rgba(0, 0, 0, .1)),
to(rgba(255, 255, 255, .1))
);
-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;
margin-bottom:10px;
}
.button.full, .button.full span {
display: block;
}
.button:hover, .button.hover {
center top,
rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .1) 100%
);
linear,
center bottom,
center top,
from(rgba(255, 255, 255, .1)),
to(rgba(255, 255, 255, .2))
);
}

.button:active, .button.active {
top:1px;
}
.button span {
position: relative;
color:#fff;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
border-top: rgba(255, 255, 255, .2) 1px solid;
padding:0.6em 1.3em;
line-height:1em;
text-align:center;
}
button .disabled{
.button {
line-height:1em;
position:relative;
outline: none;
overflow: visible;
cursor: pointer;
border: rgba(0, 0, 0, .2) 1px solid;
border-bottom:rgba(0, 0, 0, .4) 1px solid;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

box-shadow: 0 1px 2px rgba(0,0,0,.2);
center top,
rgba(255, 255, 255, .1) 0%,
rgba(0, 0, 0, .1) 100%
);
linear,
center bottom,
center top,
from(rgba(0, 0, 0, .1)),
to(rgba(255, 255, 255, .1))
);
-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;
margin-bottom:10px;
}
.button.full, .button.full span {
display: block;
}
.button:hover, .button.hover {
center top,
rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .1) 100%

);
linear,
center bottom,
center top,
from(rgba(255, 255, 255, .1)),
to(rgba(255, 255, 255, .2))
);
}
.button:active, .button.active {
top:1px;
}
.button span {
position: relative;
color:#fff;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
border-top: rgba(255, 255, 255, .2) 1px solid;
padding:0.6em 1.3em;
line-height:1em;
text-align:center;
}
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;

color: #050505;
padding: 5px 10px;
top,
#ffffff 0%,
#ebebeb 50%,
#b5b5b5);
linear, left top, left bottom,
from(#ffffff),
color-stop(0.50, #ebebeb),
to(#b5b5b5));
-moz-box-shadow:
0px 0px 1px rgba(000,000,000,0.3),
-webkit-box-shadow:
0px 0px 1px rgba(000,000,000,0.3),
box-shadow:
0px 0px 1px rgba(000,000,000,0.3),
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),

0px 1px 0px rgba(255,255,255,1);
}

Trabajo

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

En vedette

En vedette (8)

Trabajo