Cursos Empresas Blog Live Conf Eventos Precios

0:0017:38

Sistema de autenticación

Curso de Aplicaciones en Tiempo Real con Socket.io

Clase 23 de 26

Clase 23 / 26

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background: #43a8f0;
    color: #fff;
    padding: 7px;
}

.button-container {
    display: flex;
    justify-content: center;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}

.btn:focus {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}

.btn:active {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
}

.primary {
    --btn-color: #fff;
    --btn-bg: #43a8f0;
    --btn-border-color: #43a8f0;
    --btn-hover-color: #fff;
    --btn-hover-bg: #116bf0;
    --btn-hover-border-color: #0a58ca;
    --btn-focus-shadow-rgb: 49,132,253;
    --btn-active-color: #fff;
    --btn-active-bg: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #0d6efd;
    --btn-disabled-border-color: #0d6efd;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group input {
    border: 1px solid #ccc;
    outline: none;
    padding: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.card {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
    border-radius: 3px;
    background: #fff;
}

main {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

main form {
    width: 50%;
    padding: 20px;
}

main form .input-group label {
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
}

main form .button-container {
    margin-top: 10px;
} 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

header {
    background: #43a8f0;
    color: #fff;
    padding: 7px;
}

.button-container {
    display: flex;
    justify-content: center;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
}

.btn:focus {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--btn-focus-shadow-rgb), .5);
}

.btn:active {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
}

.primary {
    --btn-color: #fff;
    --btn-bg: #43a8f0;
    --btn-border-color: #43a8f0;
    --btn-hover-color: #fff;
    --btn-hover-bg: #116bf0;
    --btn-hover-border-color: #0a58ca;
    --btn-focus-shadow-rgb: 49,132,253;
    --btn-active-color: #fff;
    --btn-active-bg: #0a58ca;
    --btn-active-border-color: #0a53be;
    --btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --btn-disabled-color: #fff;
    --btn-disabled-bg: #0d6efd;
    --btn-disabled-border-color: #0d6efd;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group input {
    border: 1px solid #ccc;
    outline: none;
    padding: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.card {
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 2px 4px 0 rgb(0 0 0 / 12%);
    border-radius: 3px;
    background: #fff;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #5865F2;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto Condensed', sans-serif;
}

.register_box {
    background: #313338;
    max-width: 700px;
    width: 600px;
    min-width: 380px;
    height: auto;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    padding-bottom: 40px;
}

.h1_discord {
    color: #ffff;
    font-size: 28px;
    text-align: center;
    margin-bottom: 5px;
}

.h3_discord {
    margin: 5px;
    color: #80848E;
    font-size: 18px;
    text-align: center;
}
.input_box{
    margin-top: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: transparent;
    width: 350px;
    gap: 10px;
}
.label_discord{
    text-transform: uppercase;
    font-weight: 600;
    color: #80848E;
}
.label_discord span{
    color: red;
}
.input_discord{
    border: none;
    outline: none;
    height: 30px;
    border-radius: 2px;
    background: #1E1F22;
    color: #80848E;
    font-size: 16px;
    padding: 10px;
}
.btn_discord{
    margin-top: 10px;
    color: #ffff;
    font-size: 16px;
    outline: none;
    border: none;
    height: 50px;
    border-radius: 5px;
    background: #5865F2;
    cursor: pointer;
}

 <main class="register_box">
        <h1 class="h1_discord">¡Hola de nuevo!</h2>
        <p  class="h3_discord">!Nos alegramos mucho de volver a verte!</p>
        <form method="post">
            <section class="input_box">
                <label for="usernameInput" class="label_discord">nombre de usuario <span>*</span></label>
                <input type="text" id="usernameInput" name="username" class="input_discord">        
                <button type="button" class="btn_discord">Entrar</button>
            </section>

        </form>
    </main>

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #5865F2;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto Condensed', sans-serif;
}

.register_box {
    background: #313338;
    max-width: 700px;
    width: 600px;
    min-width: 380px;
    height: auto;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    padding-bottom: 40px;
}

.h1_discord {
    color: #ffff;
    font-size: 28px;
    text-align: center;
    margin-bottom: 5px;
}

.h3_discord {
    margin: 5px;
    color: #80848E;
    font-size: 18px;
    text-align: center;
}
.input_box{
    margin-top: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: transparent;
    width: 350px;
    gap: 10px;
}
.label_discord{
    text-transform: uppercase;
    font-weight: 600;
    color: #80848E;
}
.label_discord span{
    color: red;
}
.input_discord{
    border: none;
    outline: none;
    height: 30px;
    border-radius: 2px;
    background: #1E1F22;
    color: #80848E;
    font-size: 16px;
    padding: 10px;
}
.btn_discord{
    margin-top: 10px;
    color: #ffff;
    font-size: 16px;
    outline: none;
    border: none;
    height: 50px;
    border-radius: 5px;
    background: #5865F2;
    cursor: pointer;
}

 <main class="register_box">
        <h1 class="h1_discord">¡Hola de nuevo!</h2>
        <p  class="h3_discord">!Nos alegramos mucho de volver a verte!</p>
        <form method="post">
            <section class="input_box">
                <label for="usernameInput" class="label_discord">nombre de usuario <span>*</span></label>
                <input type="text" id="usernameInput" name="username" class="input_discord">        
                <button type="button" class="btn_discord">Entrar</button>
            </section>

        </form>
    </main>

Comentarios (6)6 comentarios

Yeison David Sanabria Ascanio

Hace 4 años

Style.css

Register.css

Francisco Carranza

Hace 3 años

Jose Ever Muñoz Muñoz

Hace 2 años

ta chido

Fredy Max Chavez Loyola

Por aquí dejo mi diseño final

you are an artist

julian trejos

yo: Bro estoy usando tus estilos.

mi Bro: no son mis estilos

Iván Roberto Rivas Celeita

este curso debe llamarse "aterrizada en express basico y middleware"

Sistema de autenticación

Progreso del curso

Fundamentos de Socket.io

Socket.io en la práctica

Herramientas extra

Proyecto WebChat

Cierre