├── README.md ├── img └── 3.jpg ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Formulario dinámico de registro y login || HTML CSS JAVASCRIPT 2 | ### Video del tutorial: [https://youtu.be/XwXF_m_LBMs](https://youtu.be/XwXF_m_LBMs) 3 | 4 | ![formulario-dinamico](https://user-images.githubusercontent.com/85034795/147512236-80fe2b7d-81cb-4b18-82f3-1341b0f74953.png) 5 | -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DaniCodex/Formulario-dinamico-HTML-CSS-JS/a43fcec77e12f80f5e37b7a693a6587c1d283eba/img/3.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Bienvenido a mi Formulario 14 | 15 | 16 | 17 |
18 |
19 |
20 |

Bienvenido a DaniCodex

21 |

Si ya tienes una cuenta por favor inicia sesion aqui

22 | 23 |
24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 |

Crear una cuenta gratis

39 | 40 | 41 | 42 | 43 |
44 |
45 |
46 |
47 | 48 |
49 |
50 | 51 |
52 |
53 | 54 |
55 |
56 | 57 |
58 |
59 |

¿Aun no tienes una cuenta?

60 | 61 | 62 | 63 |
64 |
65 |
66 |

Bienvenido de nuevo

67 |

Si aun no tienes una cuenta por favor registrese aqui

68 | 69 |
70 |
71 |
72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const $btnSignIn= document.querySelector('.sign-in-btn'), 2 | $btnSignUp = document.querySelector('.sign-up-btn'), 3 | $signUp = document.querySelector('.sign-up'), 4 | $signIn = document.querySelector('.sign-in'); 5 | 6 | document.addEventListener('click', e => { 7 | if (e.target === $btnSignIn || e.target === $btnSignUp) { 8 | $signIn.classList.toggle('active'); 9 | $signUp.classList.toggle('active') 10 | } 11 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Roboto', sans-serif; 6 | } 7 | 8 | body { 9 | height: 100vh; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | background-image: url(img/3.jpg); 14 | background-position: center; 15 | background-repeat: no-repeat; 16 | background-size: cover; 17 | color: #fff; 18 | } 19 | 20 | .container-form { 21 | width: 90%; 22 | height: 90vh; 23 | display: flex; 24 | justify-content: space-around; 25 | transition: all .5s ease-out; 26 | } 27 | 28 | .welcome-back { 29 | display: flex; 30 | align-items: center; 31 | text-align: center; 32 | } 33 | 34 | .message { 35 | padding: 1rem; 36 | } 37 | 38 | .message h2 { 39 | font-size: 1.7rem; 40 | padding: 1rem 0; 41 | } 42 | 43 | .message button { 44 | padding: 1rem; 45 | font-weight: 400; 46 | background-color: #4a4aee; 47 | border-radius: 2rem; 48 | border: none; 49 | outline: none; 50 | cursor: pointer; 51 | font-size: .9rem; 52 | margin-top: 2rem; 53 | transition: all .3s ease-in; 54 | color: #fff; 55 | } 56 | 57 | .message button:hover { 58 | background-color: #6464f8; 59 | } 60 | 61 | .formulario { 62 | width: 400px; 63 | padding: 1rem; 64 | margin: 2rem; 65 | background-color: rgb(51, 51, 51, 0.602); 66 | text-align: center; 67 | } 68 | 69 | .create-account { 70 | padding: 2.7rem 0; 71 | font-size: 1.7rem; 72 | } 73 | 74 | .iconos { 75 | width: 200px; 76 | display: flex; 77 | justify-content: space-around; 78 | margin: auto; 79 | } 80 | 81 | .border-icon { 82 | height: 20px; 83 | width: 20px; 84 | display: flex; 85 | align-items: center; 86 | justify-content: center; 87 | padding: 1.5rem; 88 | border: solid thin white; 89 | border-radius: 50%; 90 | font-size: 1.5rem; 91 | transition: all .3s ease-in; 92 | } 93 | 94 | .border-icon:hover { 95 | background-color: #4a4aee; 96 | cursor: pointer; 97 | } 98 | 99 | .cuenta-gratis { 100 | padding: 2rem 0; 101 | } 102 | 103 | .formulario input { 104 | width: 70%; 105 | display: block; 106 | margin: auto; 107 | margin-bottom: 2rem; 108 | background-color: transparent; 109 | border: none; 110 | border-bottom: white thin solid; 111 | text-align: center; 112 | outline: none; 113 | padding: .2rem 0; 114 | font-size: .9rem; 115 | color: white; 116 | } 117 | 118 | .formulario input[type="button"] { 119 | width: 60%; 120 | margin: auto; 121 | border: solid thin white; 122 | padding: .7rem; 123 | border-radius: 2rem; 124 | background-color: white; 125 | font-weight: 600; 126 | margin-top: 3rem; 127 | font-size: .8rem; 128 | cursor: pointer; 129 | color: #222; 130 | } 131 | 132 | .sign-in { 133 | position: absolute; 134 | opacity: 0; 135 | visibility: hidden; 136 | } 137 | 138 | .sign-in.active { 139 | opacity: 1; 140 | visibility: visible; 141 | } 142 | 143 | .sign-up.active { 144 | opacity: 0; 145 | visibility: hidden; 146 | } 147 | --------------------------------------------------------------------------------