Índice
Reputación plata
Reputación Oro
Ejemplo del Formulario ya terminado:
[Tienes que estar registrado y conectado para ver este vínculo]
1.-Creamos carpeta de imagenes y de Css.
2.-Creamos un archivo html y ponemos su estructura.
3.-Mandamos a llamar el css con la etiqueta link y colocamos en body un fondo e igual lo mandamos a llamar desde su carpeta.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body background="images/bg.jpg">
</body>
</html>
4.- En body crearemos un div para el formulario, aqui le pondemos diseño por lo cual debemos colocar antes de cerrar una etiqueta la palabra class y asignarle un nombre
<div class="container">
<img src="images/man.png">
<form>
<div class="form-input">
<input type="text" placeholder="Ingresa tu Usuario">
</div>
<div class="form-input">
<input type="password" placeholder="Ingresa tu Contraseña">
</div>
<input type="submit" name="enviar" value="Iniciar Secion" class="btn-login">
</form>
</div>
5.-En mi caso quiero poner un texto el cual cambie de palabras cada determinados segundos por lo cual ponder lo siguiente antes de cerrar el body
<div class="contenedor">
<p>Bienvenido aqui podrás </p>
<ul>
<li>descargar archivos</li>
<li>subir archivos</li>
<li>compartir archivos</li>
</ul>
</div>
6.-Bien ahora vamos al css, aqui asignas propiedades a las etiquetas anteriores mediante el nombre asignado en class.
*{
margin: 0;
padding: 0;
}
body{
margin: 0 auto;
background-repeat: no-repeat;
background-size: 100% 720px;
}
.container {
width: 400px;
height: 330px;
text-align: center;
background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
margin: 0 auto;
margin-top: 160px;
border-bottom: 4px solid #ffffcc;
}
.container img {
width: 160px;
height: 160px;
margin-top: -70px;
margin-bottom: 30px;
}
input[type="text"],input[type="password"]{
height: 45px;
width: 300px;
font-size: 18px;
margin-bottom: 20px;
background-color: #fff;
padding-left: 30px;
}
.btn-login {
padding: 15px 25px;
color: #fff;
cursor: pointer;
border-radius: 4px;
border: none;
background-color: #3366ff;
border-bottom: 4px solid #003399;
}
.contenedor{
margin-top: 40px;
margin-left: 24%;
display: flex;
width: 700px;
height: 44px;
color: #fff;
font-size: 40px;
line-height: 40px;
overflow: hidden;
}
.contenedor ul {
list-style: none;
padding-left: 10px;
animation: cambiar 7s infinite;
}
.contenedor ul, p {
margin: 0;
}
@keyframes cambiar {
0% { margin-top: 0; }
20% { margin-top: 0; }
25% { margin-top: -40px; }
50% { margin-top: -40px; }
55% { margin-top: -80px; }
80% { margin-top: -80px; }
85% { margin-top: -40px; }
95% { margin-top: -40px; }
100% { margin-top: 0; }
}
Imagenes utilizadas
[img][Tienes que estar registrado y conectado para ver este vínculo]
[img][Tienes que estar registrado y conectado para ver este vínculo]
[Tienes que estar registrado y conectado para ver este vínculo]
1.-Creamos carpeta de imagenes y de Css.
2.-Creamos un archivo html y ponemos su estructura.
3.-Mandamos a llamar el css con la etiqueta link y colocamos en body un fondo e igual lo mandamos a llamar desde su carpeta.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body background="images/bg.jpg">
</body>
</html>
4.- En body crearemos un div para el formulario, aqui le pondemos diseño por lo cual debemos colocar antes de cerrar una etiqueta la palabra class y asignarle un nombre
<div class="container">
<img src="images/man.png">
<form>
<div class="form-input">
<input type="text" placeholder="Ingresa tu Usuario">
</div>
<div class="form-input">
<input type="password" placeholder="Ingresa tu Contraseña">
</div>
<input type="submit" name="enviar" value="Iniciar Secion" class="btn-login">
</form>
</div>
5.-En mi caso quiero poner un texto el cual cambie de palabras cada determinados segundos por lo cual ponder lo siguiente antes de cerrar el body
<div class="contenedor">
<p>Bienvenido aqui podrás </p>
<ul>
<li>descargar archivos</li>
<li>subir archivos</li>
<li>compartir archivos</li>
</ul>
</div>
6.-Bien ahora vamos al css, aqui asignas propiedades a las etiquetas anteriores mediante el nombre asignado en class.
*{
margin: 0;
padding: 0;
}
body{
margin: 0 auto;
background-repeat: no-repeat;
background-size: 100% 720px;
}
.container {
width: 400px;
height: 330px;
text-align: center;
background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
margin: 0 auto;
margin-top: 160px;
border-bottom: 4px solid #ffffcc;
}
.container img {
width: 160px;
height: 160px;
margin-top: -70px;
margin-bottom: 30px;
}
input[type="text"],input[type="password"]{
height: 45px;
width: 300px;
font-size: 18px;
margin-bottom: 20px;
background-color: #fff;
padding-left: 30px;
}
.btn-login {
padding: 15px 25px;
color: #fff;
cursor: pointer;
border-radius: 4px;
border: none;
background-color: #3366ff;
border-bottom: 4px solid #003399;
}
.contenedor{
margin-top: 40px;
margin-left: 24%;
display: flex;
width: 700px;
height: 44px;
color: #fff;
font-size: 40px;
line-height: 40px;
overflow: hidden;
}
.contenedor ul {
list-style: none;
padding-left: 10px;
animation: cambiar 7s infinite;
}
.contenedor ul, p {
margin: 0;
}
@keyframes cambiar {
0% { margin-top: 0; }
20% { margin-top: 0; }
25% { margin-top: -40px; }
50% { margin-top: -40px; }
55% { margin-top: -80px; }
80% { margin-top: -80px; }
85% { margin-top: -40px; }
95% { margin-top: -40px; }
100% { margin-top: 0; }
}
Imagenes utilizadas
[img][Tienes que estar registrado y conectado para ver este vínculo]
[img][Tienes que estar registrado y conectado para ver este vínculo]
