Facebook

├── .vscode └── settings.json ├── css └── estilos.css ├── img ├── apple.svg ├── facebook.svg ├── google-icon.svg └── illustration.svg └── index.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /css/estilos.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | 7 | body{ 8 | font-family: 'Raleway', sans-serif; 9 | min-height: 600px; 10 | padding: 80px 0; 11 | background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%); 12 | background-color: #a3bded; 13 | background-repeat: no-repeat; 14 | 15 | display: flex; 16 | } 17 | 18 | .main{ 19 | margin: auto; 20 | width: 90%; 21 | max-width: 1000px; 22 | background-image: linear-gradient(to left, rgba(255, 255, 255, 0.472), rgba(255, 255, 255, 0.365)); 23 | overflow: hidden; 24 | padding: .7em; 25 | border-radius: 1em; 26 | 27 | display: grid; 28 | grid-auto-rows: max-content; 29 | grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); 30 | gap: .6em; 31 | 32 | animation: mostrar 1.5s ease-in-out; 33 | } 34 | 35 | @keyframes mostrar { 36 | 0%{ 37 | opacity: 0; 38 | } 39 | 40 | 100%{ 41 | opacity: 1; 42 | } 43 | } 44 | 45 | .main__figure{ 46 | overflow: hidden; 47 | border-radius: 1em; 48 | background-color: #D798F8; 49 | display: flex; 50 | } 51 | 52 | .main__img{ 53 | margin: auto; 54 | width: 80%; 55 | max-width: 60vw; 56 | } 57 | 58 | .main__contact{ 59 | display: flex; 60 | flex-direction: column; 61 | justify-content: center; 62 | gap: 1.5em; 63 | padding: 3em .7em; 64 | text-align: center; 65 | } 66 | 67 | .main__form{ 68 | display: grid; 69 | justify-items: center; 70 | gap: 1.5em; 71 | } 72 | 73 | .main__input{ 74 | width: 80%; 75 | max-width: 500px; 76 | outline: none; 77 | border: none; 78 | padding: 1em; 79 | font: inherit; 80 | border-radius: .6em; 81 | } 82 | 83 | .main__input--send{ 84 | background-color: #DC3F31; 85 | color: #fff; 86 | font-weight: 600; 87 | } 88 | 89 | .main__title{ 90 | font-size: 2.3rem; 91 | } 92 | 93 | .main__paragraph{ 94 | margin: .3em 0; 95 | } 96 | 97 | 98 | .main__social{ 99 | display: grid; 100 | grid-auto-flow: column; 101 | justify-content: center; 102 | grid-auto-columns: max-content; 103 | gap: 1em; 104 | } 105 | 106 | .main__link{ 107 | border: 1px solid #fff; 108 | border-radius: 10px; 109 | padding: .6em 1.5em; 110 | } 111 | 112 | .main__link:hover{ 113 | background-color: #fff; 114 | } 115 | 116 | .main__icon{ 117 | width: 30px; 118 | height: 30px; 119 | } 120 | -------------------------------------------------------------------------------- /img/apple.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 9 | -------------------------------------------------------------------------------- /img/google-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/illustration.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Formulario 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

20 | 21 |

22 |