├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # he4rtlabs-challenges-03-resolution 2 | Um desafio para iniciantes Frontend, com o objetivo de criar dois formulários em que a transição entre eles seja feita de forma suave. 3 | 4 | Projeto 003 - Formulário Único 5 | 6 | Criar dois formulários em que a transição entre eles seja feita de forma suave. 7 | 8 | Sobre Participação do Challenges-03 Da He4rt. 9 | 10 | Créditos https://github.com/he4rtlabs/he4rtlabs-challenges-03 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formulário de Login e Registro com HTML5 e CSS3 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 |
20 |

Quartel General

21 |

22 | 23 | 24 |

25 | 26 |

27 | 28 | 29 |

30 | 31 |

32 | 33 | 34 | 35 |

36 | 37 |

38 | 39 |

40 | 41 |

42 | Ainda não tem conta? 43 | Cadastre-se 44 |

45 |
46 |
47 | 48 | 49 |
50 |
51 |

Cadastro no QG

52 | 53 |

54 | 55 | 56 |

57 | 58 |

59 | 60 | 61 |

62 | 63 |

64 | 65 | 66 |

67 | 68 |

69 | 70 |

71 | 72 |

73 | Já tem conta? 74 | Ir para Login 75 |

76 | 77 | 78 | 79 |
80 |
81 |
82 |
83 | 84 | 85 | 86 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* CSS reset */ 2 | 3 | *, 4 | *:before, 5 | *:after { 6 | margin: 0; 7 | padding: 0; 8 | font-family: Arial, sans-serif; 9 | } 10 | 11 | html, 12 | body { 13 | width: 100%; 14 | height: 100%; 15 | min-height: 100%; 16 | background: rgb(58, 34, 94); 17 | background: linear-gradient(180deg, rgba(58, 34, 94, 1) 0%, rgba(110, 85, 150, 1) 50%, rgba(165, 144, 195, 1) 100%); 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | font-family: 'Shadows Into Light', cursive; 22 | font-size: 100%; 23 | } 24 | 25 | 26 | /* remove a linha dos links */ 27 | 28 | a { 29 | text-decoration: none; 30 | } 31 | 32 | 33 | /* esconde as ancoras da tela */ 34 | 35 | a.links { 36 | display: none; 37 | } 38 | 39 | .content { 40 | width: 500px; 41 | min-height: 560px; 42 | margin: 0px auto; 43 | position: relative; 44 | } 45 | 46 | h1 { 47 | font-size: 48px; 48 | color: #5D9900; 49 | padding: 2px 0 10px 0; 50 | font-family: Arial, sans-serif; 51 | font-weight: bold; 52 | text-align: center; 53 | padding-bottom: 30px; 54 | } 55 | 56 | h1:after { 57 | content: ' '; 58 | display: block; 59 | width: 100%; 60 | height: 2px; 61 | margin-top: 10px; 62 | background: -webkit-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(93, 153, 0, 0.8) 20%, rgba(93, 153, 0, 1) 53%, rgba(93, 153, 0, 0.8) 79%, rgba(93, 153, 0, 0) 100%); 63 | background: linear-gradient(left, rgba(93, 153, 0, 0) 0%, rgba(93, 153, 0, 0) 20%, rgba(93, 153, 0, 0) 53%, rgba(93, 153, 0, 0) 79%, rgba(93, 153, 0, 0) 100%); 64 | } 65 | 66 | p { 67 | margin-bottom: 15px; 68 | } 69 | 70 | .content p:first-child { 71 | margin: 0px; 72 | } 73 | 74 | label { 75 | color: #5D9900; 76 | position: relative; 77 | } 78 | 79 | 80 | /* placeholder */ 81 | 82 | ::-webkit-input-placeholder { 83 | color: #405c; 84 | font-style: italic; 85 | } 86 | 87 | input:-moz-placeholder, 88 | textarea:-moz-placeholder { 89 | color: #7A0099; 90 | font-style: italic; 91 | } 92 | 93 | input { 94 | outline: none; 95 | } 96 | 97 | 98 | /*estilo dos input, menos o checkbox */ 99 | 100 | input:not([type="checkbox"]) { 101 | width: 95%; 102 | margin-top: 4px; 103 | padding: 10px; 104 | border: 1px solid #3a225e; 105 | -webkit-border-radius: 60px; 106 | border-radius: 60px; 107 | -webkit-box-shadow: 0px 1px 4px 0px rgba(93, 153, 0, 0.8) inset; 108 | box-shadow: 0px 1px 4px 0px rgba(93, 153, 0, 0.8) inset; 109 | -webkit-transition: all 0.2s linear; 110 | transition: all 0.2s linear; 111 | } 112 | 113 | 114 | /*estilo do botão submit */ 115 | 116 | input[type="submit"] { 117 | width: 50%!important; 118 | cursor: pointer; 119 | background: rgb(100, 85, 150, 100); 120 | padding: 8px 5px; 121 | color: #fff; 122 | font-size: 20px; 123 | border: 1px solid #6e5596; 124 | margin-bottom: 10px; 125 | text-shadow: 0 1px 1px #3a225e; 126 | -webkit-border-radius: 5px; 127 | border-radius: 20px; 128 | transition: all 0.2s linear; 129 | } 130 | 131 | 132 | /*estilo do botão submit no hover */ 133 | 134 | input[type="submit"]:hover { 135 | background: #3a225e; 136 | } 137 | 138 | .link { 139 | position: absolute; 140 | background: #5D991130; 141 | color: #5D9900; 142 | left: 0px; 143 | height: 20px; 144 | width: 440px; 145 | padding: 17px 30px 20px 30px; 146 | font-size: 16px; 147 | text-align: right; 148 | border-top: 1px solid #6e5596; 149 | -webkit-border-radius: 0 0 5px 5px; 150 | border-radius: 0 0 60px 60px; 151 | } 152 | 153 | .link a { 154 | font-weight: bold; 155 | background: #f7f8f1; 156 | padding: 6px; 157 | color: rgba(58, 34, 94, 1) 100%); 158 | margin-left: 10px; 159 | border: 1px solid #42570c; 160 | -webkit-border-radius: 4px; 161 | border-radius: 20px; 162 | -webkit-transition: all 0.4s linear; 163 | transition: all 0.4s linear; 164 | } 165 | 166 | .link a:hover { 167 | color: #5D9900; 168 | background: #f7f7f7; 169 | border: 1px solid #5D9900; 170 | } 171 | 172 | #cadastro, 173 | #login { 174 | position: absolute; 175 | top: 0px; 176 | width: 88%; 177 | padding: 18px 6% 60px 6%; 178 | margin: 0 0 35px 0; 179 | background: rgb(66, 87, 12); 180 | background: radial-gradient(circle, rgba(66, 87, 12, 1) 0%, rgba(58, 34, 94, 1) 100%); 181 | border: 1px solid rgba(58, 34, 94, 1) 100%); 182 | -webkit-box-shadow: 0px 1px 4px 0px rgba(93, 153, 0, 0.8) inset; 183 | box-shadow: 0px 1px 4px 0px rgba(93, 153, 0, 0.8) inset; 184 | -webkit-box-shadow: 60px; 185 | border-radius: 60px; 186 | -webkit-animation-duration: 0.5s; 187 | -webkit-animation-timing-function: ease; 188 | -webkit-animation-fill-mode: both; 189 | animation-duration: 0.5s; 190 | animation-timing-function: ease; 191 | animation-fill-mode: both; 192 | } 193 | 194 | 195 | /* Efeito ao clicar no botão ( Ir para Login ) */ 196 | 197 | #paracadastro:target~.content #cadastro, 198 | #paralogin:target~.content #login { 199 | z-index: 2; 200 | -webkit-animation-name: fadeInLeft; 201 | animation-name: fadeInLeft; 202 | -webkit-animation-delay: .1s; 203 | animation-delay: .1s; 204 | } 205 | 206 | 207 | /* Efeito ao clicar no botão ( Cadastre-se ) */ 208 | 209 | #registro:target~.content #login, 210 | #paralogin:target~.content #cadastro { 211 | -webkit-animation-name: fadeOutLeft; 212 | animation-name: fadeOutLeft; 213 | } 214 | 215 | 216 | /*fadeInLeft*/ 217 | 218 | @-webkit-keyframes fadeInLeft { 219 | 0% { 220 | opacity: 0; 221 | -webkit-transform: translateX(-20px); 222 | } 223 | 100% { 224 | opacity: 1; 225 | -webkit-transform: translateX(0); 226 | } 227 | } 228 | 229 | @keyframes fadeInLeft { 230 | 0% { 231 | opacity: 0; 232 | transform: translateX(-20px); 233 | } 234 | 100% { 235 | opacity: 1; 236 | transform: translateX(0); 237 | } 238 | } 239 | 240 | 241 | /*fadeOutLeft*/ 242 | 243 | @-webkit-keyframes fadeOutLeft { 244 | 0% { 245 | opacity: 1; 246 | -webkit-transform: translateX(0); 247 | } 248 | 100% { 249 | opacity: 0; 250 | -webkit-transform: translateX(-20px); 251 | } 252 | } 253 | 254 | @keyframes fadeOutLeft { 255 | 0% { 256 | opacity: 1; 257 | transform: translateX(0); 258 | } 259 | 100% { 260 | opacity: 0; 261 | transform: translateX(-20px); 262 | } 263 | } --------------------------------------------------------------------------------