Proyecto Final
Enlace
Compañero de equipo Fernando Alvarado Barrón
MAQUETACION
Imagenes para llenar un formulario de registros
CODIGO CSS
html{
background: ##e0ebe8;
background-image: url("img1.png"),
url("img2.png");
background-repeat: repeat-x, repeat;
}
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;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
display:
block;
}
body {
font:
12px/18px Arial, sans-serif;
width:
100%;
}
.wrapper {
width:
1000px;
margin:
0 auto;
}
/* Header
-----------------------------------------------------------------------------*/
.header {
height:
150px;
background: #d2ff52; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter'
to 'none' */
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QyZmY1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5MWU4NDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left
bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842)); /* Chrome,Safari4+
*/
background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* IE10+ */
background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-8 */
-webkit-border-radius: 40px;
border-radius: 40px;
border: 5px solid #aaaaaa;
-webkit-animation:
25s header 1;
}
.header h1 {
color: white;
font:
40px Tahoma, Helvetica, Arial, Sans-Serif;
float:left;
left:500px;
text-shadow: -5px -5px 5px #aaa;
margin-top:
70px;
font-size:3.5rem;
}
.header img{
position:
relative;
float:left;
left:5px;
top:-25px;
padding:10px;
}
@-webkit-keyframes header {
25%, 75% {
opacity:
0;
}
50% {
opacity:
1;
}
}
/* Middle
-----------------------------------------------------------------------------*/
.middle {
width:
100%;
position:
relative;
}
.middle:after {
display:
table;
clear:
both;
content: '';
}
.container {
width:
100%;
float:
left;
overflow:
hidden;
}
.content {
padding:
0 270px 0 0;
}
#tabs{
height: 500px;
width: 100%;
}
/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
float:
left;
width:
250px;
height:
500px;
margin-left:
-250px;
position:
relative;
color:white;
text-align:justify;
font-size:1rem;
background:
#ff670f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter'
to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjcwZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY3MGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ff670f 0%, #ff670f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left
bottom, color-stop(0%,#ff670f), color-stop(100%,#ff670f)); /* Chrome,Safari4+
*/
background: -webkit-linear-gradient(top, #ff670f 0%,#ff670f 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff670f 0%,#ff670f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff670f 0%,#ff670f 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff670f 0%,#ff670f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ff670f', endColorstr='#ff670f',GradientType=0 ); /* IE6-8 */
-webkit-border-radius: 40px;
border-radius: 40px;
}
/* Footer
-----------------------------------------------------------------------------*/
.footer {
height:
150px;
font-size:0.8rem;
color:white;
background: #4096ee; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter'
to 'none' */
background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwOTZlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDk2ZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left
bottom, color-stop(0%,#4096ee), color-stop(100%,#4096ee)); /* Chrome,Safari4+
*/
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-8 */
border: 1px solid #aaaaaa;
}
Codigo de Formulario para inscribirse
<form name="Formulario1" action="ins.php" method="POST" >
<label style="color:black " >Nombre</label><br>
<input type="text" id="nombre" name="nombre" required> <br>
<label style="color:black " >Contrasena</label><br>
<input type="text" id="contrasena " name="contrasena" maxlength="6" required><br>
<label style="color:black " >Email</label><br>
<input type="text" id="email" name="email" required> <br><br><br>
<input type="submit" id="enviar" name="enviar" value="Registrar" >
</form>
-------------------------------------------------------------------------------------
Codigo para desinscribirse
<form name="Formulario2" action="eliminar.php" method="POST" >
<p>Para darse de baja de MexicoPapel Solo escriba su Email que Utilizo para registrarse ..... No olvide Contestar nuestra encuesta </p><br/>
<input type="text" id="email" name="email" placeholder="ejemplo@email.com" size="50" required><br/><br/>
<input type="submit" name="Enviar" id="Enviar" value="Enviar">
</form>
---------------------------------------------------------------------------------------------
Usuario
GMAIL : fertorre92@gmail.com
Contraseña: milibroesproverbios
--------------------------------------------------------------------------------------------
LINK PROYECTO FINAL:
