├── README.md ├── [PASSO-A-PASSO]Criando-Um-Formulário-De-Cadastro-RESPONSIVO-HTML-E-CSS.png ├── background.png ├── img-formulario.png ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Formulario-de-cadastro-responsivo-com-html-e-css 2 | Neste repositório eu fiz um formulário de cadastro responsivo e bonito usando html e css. 3 | 4 | Olá Amigos, neste vídeo você vai aprender a como criar um formulário de cadastro responsivo usando html e css será uma página de cadastro responsiva com html e css muito simples com objectivo de melhorar os seu conhecimentos no desenvolvimento web front-end!. Bora aprender como criar esta tela de cadastro/pagina de cadastro com html5 e css3. 5 | 6 | Para aprender a montar a um formulário de cadastro responsivo que é muito fundamental para um desenvolvedor front-end ou também back-end nós vamos utilizar muitas tag principalmente as tags usadas para criar formulários, tela de login ou qualquer outros tipos de formulario, nós vamos usar muito flexbox tanto para o design e também para a responsividade. 7 | 8 | ## [🛠Assistir](https://youtu.be/Y6jNn0K-4c8) 9 | ## [⚠Me Ajude](https://www.youtube.com/channel/UCxKIsX5OXyyNWVmomuDc-LA?sub_confirmation=1) 10 | # Preview 11 | ![[PASSO-A-PASSO]Criando-Um-Formulário-De-Cadastro-RESPONSIVO-HTML-E-CSS](/[PASSO-A-PASSO]Criando-Um-Formulário-De-Cadastro-RESPONSIVO-HTML-E-CSS.png) 12 | -------------------------------------------------------------------------------- /[PASSO-A-PASSO]Criando-Um-Formulário-De-Cadastro-RESPONSIVO-HTML-E-CSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusmanuel/Formulario-de-cadastro-responsivo-com-html-e-css/f1726b131c523d5c3cf13a9fd570e5779276731b/[PASSO-A-PASSO]Criando-Um-Formulário-De-Cadastro-RESPONSIVO-HTML-E-CSS.png -------------------------------------------------------------------------------- /background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusmanuel/Formulario-de-cadastro-responsivo-com-html-e-css/f1726b131c523d5c3cf13a9fd570e5779276731b/background.png -------------------------------------------------------------------------------- /img-formulario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusmanuel/Formulario-de-cadastro-responsivo-com-html-e-css/f1726b131c523d5c3cf13a9fd570e5779276731b/img-formulario.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Formulario responsivo com html e css 10 | 11 | 12 | 13 |
14 |
15 | 16 |
17 |
18 |

Criar Conta

19 |

Já é um membro? Login

20 |
21 |
22 | 23 | 24 |
25 | 26 |
27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 |
40 | 41 |
42 | 43 | 44 |
45 | 46 |
47 | 48 |
49 | 50 |
51 |
52 |
53 | 54 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap'); 2 | *{ 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | body{ 9 | background-image: url(background.png); 10 | background-position: center; 11 | background-repeat: no-repeat; 12 | background-size: cover; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | padding: 20px; 17 | min-height: 100vh; 18 | } 19 | .w50{ 20 | width: 50%; 21 | float: left; 22 | padding-right: 15px; 23 | } 24 | .box{ 25 | display: flex; 26 | width: 930px; 27 | } 28 | .img-box{ 29 | background-color: rgba(255, 255, 255, 0.5); 30 | width: 50%; 31 | display: flex; 32 | align-items: center; 33 | padding: 20px; 34 | border-radius: 20px 0 0 20px; 35 | } 36 | .img-box img{ 37 | width: 100%; 38 | } 39 | .form-box{ 40 | background-color: rgba(255, 255, 255, 0.4); 41 | backdrop-filter: blur(40px); 42 | padding: 30px 40px; 43 | width: 50%; 44 | border-radius: 0 20px 20px 0; 45 | } 46 | .form-box h2{ 47 | font-size: 30px; 48 | } 49 | .form-box p{ 50 | font-weight: bold; 51 | color: #3D3D3D; 52 | } 53 | .form-box p a{ 54 | color: #FF008A; 55 | text-decoration: none; 56 | } 57 | .form-box form{ 58 | margin: 20px 0; 59 | } 60 | form .input-group{ 61 | margin-bottom: 15px; 62 | } 63 | form .input-group label{ 64 | color: #3D3D3D; 65 | font-weight: bold; 66 | display: block; 67 | margin-bottom: 5px; 68 | } 69 | form .input-group input{ 70 | width: 100%; 71 | height: 47px; 72 | background-color: rgba(255, 255, 255, 0.32); 73 | border-radius: 20px; 74 | outline: none; 75 | border: 2px solid transparent; 76 | padding: 15px; 77 | font-size: 15px; 78 | color: #616161; 79 | transition: all 0.4s ease; 80 | } 81 | form .input-group input:focus{ 82 | border-color: #ff008869; 83 | } 84 | form .input-group button{ 85 | width: 100%; 86 | height: 47px; 87 | background: #FF008A; 88 | border-radius: 20px; 89 | outline: none; 90 | border: none; 91 | margin-top: 15px; 92 | color: white; 93 | cursor: pointer; 94 | font-size: 16px; 95 | } 96 | @media (max-width:930px) { 97 | .img-box{ 98 | display: none; 99 | } 100 | .box{ 101 | width: 700px; 102 | } 103 | .form-box{ 104 | width: 100%; 105 | border-radius: 20px; 106 | } 107 | } 108 | @media (max-width:500px) { 109 | .w50{ 110 | width: 100%; 111 | padding: 0; 112 | } 113 | } --------------------------------------------------------------------------------