*SP UNIVERSO*, tiene como prop贸sito explicar paso a paso como construir un *formulario*, que se adapta a cualquier tipo de dispositivo, los datos llegan a un servidor de *correo*, como valor agregado se crea el acceso a *Redes Sociales*, las cuales est谩n completamente funcionales.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario</title>
<link rel="stylesheet" href="estilos.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div class="form-content">
<h2>Formulario de Registro</h2>
<form action="https://formsubmit.co/sp.universo2023@gmail.com" method="POST">
<label for="Nombre">Nombre</label>
<input type="text" name="Nombre" placeholder="Ingrese Nombre" id="Nombre">
<label for="Apellido">Apellido</label>
<input type="text" name="apellido" placeholder="Ingrese Apellido" id="apellido">
<label for="Correo">Correo El茅ctonico</label>
<input type="Correo" name="Correo" placeholder="Ingrese su Correo" id="Correo">
<label for="contrase帽a">Contrase帽a</label>
<input class="form-input" type="Contrase帽a" placeholder="Ingrese su contrase帽a" id="pwd" name="Contrase帽a">
<label for="subject">Asunto</label>
<input type="text" name="subject" id="subject">
<label for="Comentarios">Comentarios</label>
<textarea name="Comentarios" id="Comentarios" cols="10" rows="5"></textarea>
<input class="btn" type="submit" value="Env铆ar">
<input type="hidden" name="_next" value="http://127.0.0.1:5501/">
<input type="hidden" name="_captcha" value="false">
</form>
<section class="social">
<p>Redes Sociales</p>
<div class="links">
<a href="https://facebook.com">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com">
<i class="fab fa-twitter"></i>
</a>
</div>
</section>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: linear-gradient(-225deg, #08f9b1 0%, #f10cc4 100%);
font-family: "vibur", cursive;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.form-content {
background: url(img/MONTA脩A.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px;
width: 1000px;
border-radius: 25px;
}
.form-content h2 {
color: #f4f6f9;
font-size: 60px;
margin-bottom: 30px;
}
form{
display: flex;
flex-direction: column;
width: 100x;
}
label {
font-size: 30px;
color: white;
margin-bottom: 10px;
}
input, textarea {
padding: 17px 14px;
background-color: white;
border: 0;
font-size: 25px;
color: black;
margin-bottom: 20px;
border-radius: 10px;
}
:focus {
outline: 1px solid aqua;
}
.btn{
background-color: aqua;
width: 150px;
align-self: flex-end;
cursor: pointer;
}
.btn:hover {
background-color: rgb(119, 119, 126);
}
/*responsive*/
@media(max-width:991px) {
body {
padding: 30px;
}
.form-content {
width: 100%;
}
form {
width: 100%;
}
}
/* Follow */
.social {
margin: 50px;
}
.social p {
text-align: center;
font-size: 70px;
color: rgb(10, 9, 9);
margin: 10px;
}
.links {
display: flex;
align-items: center;
justify-content: center;
}
.links a {
margin: 0 30px;
}
.links a i {
font-size: 7rem;
color: white;
}
0 comments:
Publicar un comentario