├── nota.png ├── preview.gif ├── images ├── paper-raw.jpg ├── paper-edited.jpg ├── paper-edited.png ├── paper-optmized.png ├── trybewarts-header-logo.svg ├── favicon.svg └── trybewarts.svg ├── .gitignore ├── README.md ├── script.js ├── style.css.map ├── index.html ├── style.scss └── style.css /nota.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphaelalmeidamartins/trybewarts/HEAD/nota.png -------------------------------------------------------------------------------- /preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphaelalmeidamartins/trybewarts/HEAD/preview.gif -------------------------------------------------------------------------------- /images/paper-raw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphaelalmeidamartins/trybewarts/HEAD/images/paper-raw.jpg -------------------------------------------------------------------------------- /images/paper-edited.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphaelalmeidamartins/trybewarts/HEAD/images/paper-edited.jpg -------------------------------------------------------------------------------- /images/paper-edited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphaelalmeidamartins/trybewarts/HEAD/images/paper-edited.png -------------------------------------------------------------------------------- /images/paper-optmized.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphaelalmeidamartins/trybewarts/HEAD/images/paper-optmized.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode 3 | # Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode 4 | 5 | ### VisualStudioCode ### 6 | .vscode/* 7 | !.vscode/settings.json 8 | !.vscode/tasks.json 9 | !.vscode/launch.json 10 | !.vscode/extensions.json 11 | *.code-workspace 12 | 13 | # Local History for Visual Studio Code 14 | .history/ 15 | 16 | ### VisualStudioCode Patch ### 17 | # Ignore all local history of files 18 | .history 19 | .ionide 20 | 21 | # Support for Project snippet scope 22 | !.vscode/*.code-snippets 23 | 24 | # End of https://www.toptal.com/developers/gitignore/api/visualstudiocode 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :sparkles: Trybewarts :sparkles: 2 | 3 | ![Prévia da página - Preview of the page](./preview.gif) 4 | 5 | ## :page_with_curl: About/Sobre 6 | 7 |
8 | :us: English
9 | 10 | Project of HTML, CSS, and JavaScript developed by me ([Raphael Martins](https://www.linkedin.com/in/raphaelameidamartins/)) and [Bruna Cardoso](https://www.linkedin.com/in/bruna-cardoso-38536916b/) at the end of Unit 6 ([Principles of Web Development Module](https://github.com/raphaelalmeidamartins/trybe_exercicios/tree/main/1_fundamentos-do-desv-web)) of [Trybe](https://www.betrybe.com)'s Web Development course. I was approved with 100% of the mandatory and optional requirements met. 11 | 12 | We developed a responsive web page with forms. 13 | 14 | [Click here](https://raphaelalmeidamartins.github.io/trybewarts/) to check out the final version of the project on your browser. 15 |
16 |
17 | 18 |
19 | :brazil: Português
20 | 21 | Projeto de HTML, CSS e JavaScript desenvolvido por mim ([Raphael Martins](https://www.linkedin.com/in/raphaelameidamartins/)) e [Bruna Cardoso](https://www.linkedin.com/in/bruna-cardoso-38536916b/) ao final do Bloco 6 ([Módulo Fundamentos do Desenvolvimento Web](https://github.com/raphaelalmeidamartins/trybe_exercicios/tree/main/1_fundamentos-do-desv-web)) do curso da Trybe. Fomos aprovado com 100% dos requisitos obrigatórios e opcionais atingidos. 22 | 23 | Tivemos que desenvolver uma página responsiva com um formulário HTML. 24 | 25 | [Clique aqui](https://raphaelalmeidamartins.github.io/trybewarts/) para conferir a versão final do projeto no seu navegador. 26 |
27 |
28 | 29 | ## :man_technologist: Developed Skills/Habilidades Desenvolvidas 30 | 31 |
32 | :us: English
33 | 34 | * Develop a form with HTML and CSS 35 | * Work in pairs 36 | * Use CSS to implement a responsive layout 37 |
38 |
39 | 40 |
41 | :brazil: Português
42 | 43 | * Desenvolver um formulário com HTML e CSS 44 | * Trabalhar em dupla 45 | * Usar CSS para implementar um layout responsivo 46 |
47 |
48 | 49 | ## :hammer_and_wrench: Tools/Ferramentas 50 | 51 | * HTML5 52 | * CSS3 53 | * JavaScript ES6+ 54 | 55 | ## :memo: Methodologies/Metodologias 56 | 57 | * Mobile First 58 | * Pair programming 59 | 60 | ## :trophy: Grade/Nota 61 | 62 | ![My grade of the project - Minha nota no projeto](./nota.png) 63 | 64 | ### :copyright: Copyright disclaimer/Aviso de direitos autorais 65 | 66 |
67 | :us: English
68 | 69 | We developed this project for learning purposes, all the code and documentation texts in Portuguese and English are our authorship, and the rights belong exclusively to us. It is allowed to download or clone the repository for study purposes. However, it is not allowed to publish full or partial copies. This disclaimer does not cover libraries and dependencies, which are subject to their respective licenses. It does not cover the Trybewarts logo, either. 70 |
71 |
72 | 73 |
74 | :brazil: Português
75 | 76 | Desenvolvemos esse projeto para propósitos de aprendizagem, todo o código e documentação são de nossa autoria e os direitos pertencem exclusivamente a nós. É permitido baixar ou clonar o repositório para fins de estudo. Contudo, não é permitido publicar cópias totais ou parciais. Este aviso não cobre bibliotecas e dependências, estas estão sujeitas a suas respectivas licenças. 77 |
78 |
79 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const inputEmail = document.getElementById('login-email'); 2 | const inputPassword = document.getElementById('login-password'); 3 | const inputButton = document.getElementById('login-button'); 4 | const submitButton = document.getElementById('submit-btn'); 5 | const agreementCheckbox = document.getElementById('agreement'); 6 | const textarea = document.getElementById('textarea'); 7 | const counter = document.getElementById('counter'); 8 | 9 | inputButton.addEventListener('click', (event) => { 10 | event.preventDefault(); 11 | if (inputEmail.value === 'tryber@teste.com' && inputPassword.value === '123456') { 12 | alert('Olá, Tryber!'); 13 | } else { 14 | alert('Email ou senha inválidos.'); 15 | } 16 | }); 17 | 18 | function disableButton() { 19 | if (agreementCheckbox.checked) { 20 | submitButton.disabled = false; 21 | } else { 22 | submitButton.disabled = true; 23 | } 24 | } 25 | 26 | agreementCheckbox.addEventListener('click', disableButton); 27 | 28 | function countCharacters() { 29 | counter.innerHTML = 500 - textarea.value.length; 30 | } 31 | 32 | textarea.addEventListener('keyup', countCharacters); 33 | 34 | function fullName() { 35 | const formName = document.getElementById('input-name'); 36 | const formLastName = document.getElementById('input-lastname'); 37 | const paragraph = document.createElement('p'); 38 | paragraph.innerHTML = `Nome: ${formName.value} ${formLastName.value}`; 39 | return paragraph; 40 | } 41 | 42 | function emailAddress() { 43 | const formEmail = document.getElementById('input-email'); 44 | const paragraph = document.createElement('p'); 45 | paragraph.innerHTML = `Email: ${formEmail.value}`; 46 | return paragraph; 47 | } 48 | 49 | function whichHouse() { 50 | const formHouse = document.getElementById('house'); 51 | const paragraph = document.createElement('p'); 52 | paragraph.innerHTML = `Casa: ${formHouse.value}`; 53 | return paragraph; 54 | } 55 | 56 | function whichFamily() { 57 | const formFamilies = document.querySelectorAll('input[type="radio"][name="family"]'); 58 | const paragraph = document.createElement('p'); 59 | let string = ''; 60 | formFamilies.forEach((family) => { 61 | if (family.checked) { 62 | string = family.parentElement.innerText; 63 | } 64 | }); 65 | paragraph.innerHTML = `Família: ${string}`; 66 | return paragraph; 67 | } 68 | 69 | function whichTechnologies() { 70 | const formTechnologies = document.querySelectorAll('input[type="checkbox"][name="technologies"]'); 71 | const paragraph = document.createElement('p'); 72 | let string = ''; 73 | formTechnologies.forEach((subject) => { 74 | if (subject.checked) { 75 | string += ` ${subject.parentElement.innerText},`; 76 | } 77 | }); 78 | string = string.substring(0, string.length - 1); 79 | paragraph.innerHTML = `Matérias:${string}`; 80 | return paragraph; 81 | } 82 | 83 | function whichRate() { 84 | const formRates = document.querySelectorAll('input[type="radio"][name="rate"]'); 85 | const paragraph = document.createElement('p'); 86 | let string = ''; 87 | formRates.forEach((rate) => { 88 | if (rate.checked) { 89 | string = rate.parentElement.innerText; 90 | } 91 | }); 92 | paragraph.innerHTML = `Avaliação: ${string}`; 93 | return paragraph; 94 | } 95 | 96 | function userComment() { 97 | const formTextArea = document.getElementById('textarea'); 98 | const paragraph = document.createElement('p'); 99 | paragraph.innerHTML = `Observações: ${formTextArea.value}`; 100 | return paragraph; 101 | } 102 | 103 | function printUserData(event) { 104 | event.preventDefault(); 105 | const letterDiv = document.getElementById('letter-container'); 106 | const printDiv = document.getElementById('user-information'); 107 | printDiv.innerHTML = ''; 108 | const formInputs = document.getElementById('container-form'); 109 | formInputs.style.display = 'none'; 110 | letterDiv.style.display = 'block'; 111 | printDiv.appendChild(fullName()); 112 | printDiv.appendChild(emailAddress()); 113 | printDiv.appendChild(whichHouse()); 114 | printDiv.appendChild(whichFamily()); 115 | printDiv.appendChild(whichTechnologies()); 116 | printDiv.appendChild(whichRate()); 117 | printDiv.appendChild(userComment()); 118 | } 119 | 120 | submitButton.addEventListener('click', printUserData); 121 | 122 | window.onload = () => { 123 | disableButton(); 124 | countCharacters(); 125 | }; 126 | -------------------------------------------------------------------------------- /style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /images/trybewarts-header-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 24 | 25 | 27 | image/svg+xml 28 | 30 | 31 | 32 | 33 | 34 | 36 | 63 | 69 | 72 | 82 | T 92 | 93 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Trybewarts 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |

Trybewarts

17 | 22 |
23 |
24 |
25 |
26 |

Formulário de Avaliação

27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 40 |
41 |
42 |
43 |
44 |
45 |
46 | 47 | 48 | 49 | 50 |
51 |
52 | 53 |
54 |
55 | 56 | 57 | 58 |
59 |
60 | 61 | 62 | 63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | 83 |
84 |
85 |
86 | 87 | 88 | 89 |
90 |
91 |
92 |
93 |
94 | 95 | 96 |
97 |
98 |
99 |
100 | Carta 101 |
102 |
103 |
104 |
105 | 106 |
107 | 108 |
109 | 110 | 111 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap'); 2 | 3 | @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap'); 4 | 5 | @import url('https://fonts.googleapis.com/css2?family=Moon+Dance&display=swap'); 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | border: 0; 11 | box-sizing: border-box; 12 | font-family: Lora, serif; 13 | } 14 | 15 | body { 16 | background-color: rgb(50, 53, 61); 17 | } 18 | 19 | #page-container { 20 | position: relative; 21 | min-height: 100vh; 22 | padding-bottom: 60px; 23 | } 24 | 25 | .header { 26 | display: flex; 27 | width: 100%; 28 | background-color: rgb(50, 167, 145); 29 | justify-content: space-between; 30 | align-items: center; 31 | height: 60px; 32 | padding: 10px; 33 | color: white; 34 | } 35 | 36 | #trybewarts-header-title { 37 | font-family: MedievalSharp, cursive; 38 | } 39 | 40 | .trybewarts-header-logo { 41 | height: 100%; 42 | } 43 | 44 | .trybewarts-login { 45 | display: flex; 46 | } 47 | 48 | input { 49 | border: 1px solid rgb(50, 167, 145); 50 | border-radius: 7px; 51 | padding: 10px; 52 | } 53 | 54 | select { 55 | background-color: rgb(136, 233, 215); 56 | border-radius: 7px; 57 | padding: 10px 5px; 58 | } 59 | 60 | main { 61 | display: flex; 62 | justify-content: space-evenly; 63 | max-width: 1300px; 64 | margin: 0 auto; 65 | } 66 | 67 | #evaluation-form { 68 | display: flex; 69 | width: 675px; 70 | flex-direction: column; 71 | justify-content: center; 72 | align-items: center; 73 | padding: 40px; 74 | color: white; 75 | } 76 | 77 | #evaluation-form h1 { 78 | font-size: 40px; 79 | margin-bottom: 20px; 80 | } 81 | 82 | #trybewarts-forms-logo { 83 | height: 500px; 84 | margin: auto 0; 85 | } 86 | 87 | hr { 88 | border: 1px solid rgb(50, 167, 145); 89 | margin: 25px 0; 90 | } 91 | 92 | .line-form { 93 | display: flex; 94 | } 95 | 96 | .line-form * { 97 | flex-grow: 1; 98 | } 99 | 100 | .technologies-form { 101 | flex-wrap: wrap; 102 | } 103 | 104 | .group { 105 | display: flex; 106 | width: 100%; 107 | justify-content: flex-start; 108 | } 109 | 110 | .group label { 111 | width: 50px; 112 | } 113 | 114 | .subject , #agreement { 115 | margin-right: 10px; 116 | } 117 | 118 | .column-form { 119 | flex-grow: 1; 120 | display: flex; 121 | flex-direction: column; 122 | } 123 | 124 | .column-form * { 125 | padding: 0 0 10px; 126 | } 127 | 128 | input , textarea , select { 129 | font-size: 1rem; 130 | } 131 | 132 | .family-form { 133 | width: 50%; 134 | } 135 | 136 | .family-form input { 137 | margin-right: 10px; 138 | } 139 | 140 | button { 141 | background-color: indigo; 142 | color: white; 143 | cursor: pointer; 144 | } 145 | 146 | .feedback-form label { 147 | display: flex; 148 | flex-direction: column; 149 | align-items: center; 150 | } 151 | 152 | #label-rate { 153 | flex-direction: row; 154 | align-items: flex-start; 155 | } 156 | 157 | #label-family , #label-content , #label-rate , #label-textarea { 158 | font-weight: 600; 159 | font-size: 1.2rem; 160 | } 161 | 162 | #label-family , #label-content , #label-rate { 163 | margin-bottom: 10px; 164 | } 165 | 166 | .feedback-form input { 167 | margin-bottom: 10px; 168 | } 169 | 170 | #textarea { 171 | padding: 10px; 172 | width: 100%; 173 | border-radius: 7px; 174 | resize: none; 175 | border: 1px solid rgb(50, 167, 145); 176 | } 177 | 178 | #counter { 179 | align-self: flex-end; 180 | } 181 | 182 | #submit-btn { 183 | border-radius: 5px; 184 | margin-top: 10px; 185 | padding: 10px; 186 | } 187 | 188 | #submit-btn:disabled { 189 | background-color: rgb(160, 160, 160); 190 | cursor: not-allowed; 191 | } 192 | 193 | #letter-container { 194 | display: none; 195 | } 196 | 197 | #letter { 198 | display: none; 199 | } 200 | 201 | #user-information { 202 | width: 100%; 203 | height: fit-content; 204 | padding: 10px; 205 | word-wrap: break-word; 206 | } 207 | 208 | #user-information p { 209 | line-height: 40px; 210 | } 211 | 212 | footer { 213 | display: flex; 214 | position: absolute; 215 | bottom: 0; 216 | width: 100%; 217 | justify-content: center; 218 | background-color: rgb(60, 64, 74); 219 | color: white; 220 | padding: 20px; 221 | } 222 | 223 | @media screen and ( max-width : 636px ) { 224 | 225 | #trybewarts-header-title { 226 | flex-grow: 1; 227 | } 228 | 229 | .trybewarts-header-logo { 230 | flex-grow: 1; 231 | } 232 | 233 | .trybewarts-login { 234 | display: none; 235 | } 236 | 237 | main { 238 | flex-direction: column; 239 | align-items: center; 240 | } 241 | 242 | #evaluation-form { 243 | width: 100%; 244 | } 245 | 246 | #evaluation-form h1 { 247 | font-size: 30px; 248 | margin-bottom: 20px; 249 | } 250 | 251 | #input-name , #input-lastname , #input-email { 252 | width: 100%; 253 | margin-bottom: 10px; 254 | } 255 | 256 | #trybewarts-forms-logo { 257 | width: 95%; 258 | } 259 | 260 | .line-form { 261 | flex-wrap: wrap; 262 | } 263 | 264 | .feedback-form label { 265 | flex-grow: 1; 266 | } 267 | 268 | #label-rate { 269 | width: 100%; 270 | } 271 | 272 | #label-content { 273 | margin-top: 20px; 274 | } 275 | 276 | #label-family , #label-content , #label-rate { 277 | margin-bottom: 20px; 278 | } 279 | } 280 | 281 | @media screen and ( min-width : 637px ) { 282 | 283 | .trybewarts-login * { 284 | border-radius: 7px; 285 | margin-left: 15px; 286 | padding: 10px; 287 | width: 50%; 288 | } 289 | 290 | #input-name , #input-email { 291 | margin-right: 10px; 292 | } 293 | 294 | #input-name , #input-lastname { 295 | margin-bottom: 10px; 296 | } 297 | 298 | #user-information { 299 | max-width: 500px; 300 | position: absolute; 301 | top: 150px; 302 | padding: 50px; 303 | color: rgb(50, 53, 61); 304 | transform: skewY(-2deg); 305 | } 306 | 307 | #user-information p , #user-information strong { 308 | font-family: Moon Dance, cursive; 309 | font-size: 25px; 310 | } 311 | 312 | #letter { 313 | display: block; 314 | width: 100%; 315 | position: relative; 316 | } 317 | } 318 | 319 | @media screen and ( min-width : 637px ) and ( max-width : 1119px ) { 320 | 321 | #trybewarts-header-title { 322 | margin-right: 10px; 323 | } 324 | 325 | .trybewarts-header-logo { 326 | margin-right: 10px; 327 | } 328 | 329 | main { 330 | flex-direction: column; 331 | align-items: center; 332 | } 333 | } 334 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap"); 3 | @import url("https://fonts.googleapis.com/css2?family=Moon+Dance&display=swap"); 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | border: 0; 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | font-family: Lora, serif; 11 | } 12 | 13 | body { 14 | background-color: #32353d; 15 | } 16 | 17 | #page-container { 18 | position: relative; 19 | min-height: 100vh; 20 | padding-bottom: 60px; 21 | } 22 | 23 | .header { 24 | display: -webkit-box; 25 | display: -ms-flexbox; 26 | display: flex; 27 | width: 100%; 28 | background-color: #32a791; 29 | -webkit-box-pack: justify; 30 | -ms-flex-pack: justify; 31 | justify-content: space-between; 32 | -webkit-box-align: center; 33 | -ms-flex-align: center; 34 | align-items: center; 35 | height: 60px; 36 | padding: 10px; 37 | color: white; 38 | } 39 | 40 | #trybewarts-header-title { 41 | font-family: MedievalSharp, cursive; 42 | } 43 | 44 | .trybewarts-header-logo { 45 | height: 100%; 46 | } 47 | 48 | .trybewarts-login { 49 | display: -webkit-box; 50 | display: -ms-flexbox; 51 | display: flex; 52 | } 53 | 54 | input { 55 | border: 1px solid #32a791; 56 | border-radius: 7px; 57 | padding: 10px; 58 | } 59 | 60 | select { 61 | background-color: #88e9d7; 62 | border-radius: 7px; 63 | padding: 10px 5px; 64 | } 65 | 66 | main { 67 | display: -webkit-box; 68 | display: -ms-flexbox; 69 | display: flex; 70 | -webkit-box-pack: space-evenly; 71 | -ms-flex-pack: space-evenly; 72 | justify-content: space-evenly; 73 | max-width: 1300px; 74 | margin: 0 auto; 75 | } 76 | 77 | #evaluation-form { 78 | display: -webkit-box; 79 | display: -ms-flexbox; 80 | display: flex; 81 | width: 675px; 82 | -webkit-box-orient: vertical; 83 | -webkit-box-direction: normal; 84 | -ms-flex-direction: column; 85 | flex-direction: column; 86 | -webkit-box-pack: center; 87 | -ms-flex-pack: center; 88 | justify-content: center; 89 | -webkit-box-align: center; 90 | -ms-flex-align: center; 91 | align-items: center; 92 | padding: 40px; 93 | color: white; 94 | } 95 | 96 | #evaluation-form h1 { 97 | font-size: 40px; 98 | margin-bottom: 20px; 99 | } 100 | 101 | #trybewarts-forms-logo { 102 | height: 500px; 103 | margin: auto 0; 104 | } 105 | 106 | hr { 107 | border: 1px solid #32a791; 108 | margin: 25px 0; 109 | } 110 | 111 | .line-form { 112 | display: -webkit-box; 113 | display: -ms-flexbox; 114 | display: flex; 115 | } 116 | 117 | .line-form * { 118 | -webkit-box-flex: 1; 119 | -ms-flex-positive: 1; 120 | flex-grow: 1; 121 | } 122 | 123 | .technologies-form { 124 | -ms-flex-wrap: wrap; 125 | flex-wrap: wrap; 126 | } 127 | 128 | .group { 129 | display: -webkit-box; 130 | display: -ms-flexbox; 131 | display: flex; 132 | width: 100%; 133 | -webkit-box-pack: start; 134 | -ms-flex-pack: start; 135 | justify-content: flex-start; 136 | } 137 | 138 | .group label { 139 | width: 50px; 140 | } 141 | 142 | .subject, #agreement { 143 | margin-right: 10px; 144 | } 145 | 146 | .column-form { 147 | -webkit-box-flex: 1; 148 | -ms-flex-positive: 1; 149 | flex-grow: 1; 150 | display: -webkit-box; 151 | display: -ms-flexbox; 152 | display: flex; 153 | -webkit-box-orient: vertical; 154 | -webkit-box-direction: normal; 155 | -ms-flex-direction: column; 156 | flex-direction: column; 157 | } 158 | 159 | .column-form * { 160 | padding: 0 0 10px; 161 | } 162 | 163 | input, textarea, select { 164 | font-size: 1rem; 165 | } 166 | 167 | .family-form { 168 | width: 50%; 169 | } 170 | 171 | .family-form input { 172 | margin-right: 10px; 173 | } 174 | 175 | button { 176 | background-color: indigo; 177 | color: white; 178 | cursor: pointer; 179 | } 180 | 181 | .feedback-form label { 182 | display: -webkit-box; 183 | display: -ms-flexbox; 184 | display: flex; 185 | -webkit-box-orient: vertical; 186 | -webkit-box-direction: normal; 187 | -ms-flex-direction: column; 188 | flex-direction: column; 189 | -webkit-box-align: center; 190 | -ms-flex-align: center; 191 | align-items: center; 192 | } 193 | 194 | #label-rate { 195 | -webkit-box-orient: horizontal; 196 | -webkit-box-direction: normal; 197 | -ms-flex-direction: row; 198 | flex-direction: row; 199 | -webkit-box-align: start; 200 | -ms-flex-align: start; 201 | align-items: flex-start; 202 | } 203 | 204 | #label-family, #label-content, #label-rate, #label-textarea { 205 | font-weight: 600; 206 | font-size: 1.2rem; 207 | } 208 | 209 | #label-family, #label-content, #label-rate { 210 | margin-bottom: 10px; 211 | } 212 | 213 | .feedback-form input { 214 | margin-bottom: 10px; 215 | } 216 | 217 | #textarea { 218 | padding: 10px; 219 | width: 100%; 220 | border-radius: 7px; 221 | resize: none; 222 | border: 1px solid #32a791; 223 | } 224 | 225 | #counter { 226 | -ms-flex-item-align: end; 227 | align-self: flex-end; 228 | } 229 | 230 | #submit-btn { 231 | border-radius: 5px; 232 | margin-top: 10px; 233 | padding: 10px; 234 | } 235 | 236 | #submit-btn:disabled { 237 | background-color: #a0a0a0; 238 | cursor: not-allowed; 239 | } 240 | 241 | #letter-container { 242 | display: none; 243 | } 244 | 245 | #letter { 246 | display: none; 247 | } 248 | 249 | #user-information { 250 | width: 100%; 251 | height: -webkit-fit-content; 252 | height: -moz-fit-content; 253 | height: fit-content; 254 | padding: 10px; 255 | word-wrap: break-word; 256 | } 257 | 258 | #user-information p { 259 | line-height: 40px; 260 | } 261 | 262 | footer { 263 | display: -webkit-box; 264 | display: -ms-flexbox; 265 | display: flex; 266 | position: absolute; 267 | bottom: 0; 268 | width: 100%; 269 | -webkit-box-pack: center; 270 | -ms-flex-pack: center; 271 | justify-content: center; 272 | background-color: #3c404a; 273 | color: white; 274 | padding: 20px; 275 | } 276 | 277 | @media screen and (max-width: 636px) { 278 | #trybewarts-header-title { 279 | -webkit-box-flex: 1; 280 | -ms-flex-positive: 1; 281 | flex-grow: 1; 282 | } 283 | .trybewarts-header-logo { 284 | -webkit-box-flex: 1; 285 | -ms-flex-positive: 1; 286 | flex-grow: 1; 287 | } 288 | .trybewarts-login { 289 | display: none; 290 | } 291 | main { 292 | -webkit-box-orient: vertical; 293 | -webkit-box-direction: normal; 294 | -ms-flex-direction: column; 295 | flex-direction: column; 296 | -webkit-box-align: center; 297 | -ms-flex-align: center; 298 | align-items: center; 299 | } 300 | #evaluation-form { 301 | width: 100%; 302 | } 303 | #evaluation-form h1 { 304 | font-size: 30px; 305 | margin-bottom: 20px; 306 | } 307 | #input-name, #input-lastname, #input-email { 308 | width: 100%; 309 | margin-bottom: 10px; 310 | } 311 | #trybewarts-forms-logo { 312 | width: 95%; 313 | } 314 | .line-form { 315 | -ms-flex-wrap: wrap; 316 | flex-wrap: wrap; 317 | } 318 | .feedback-form label { 319 | -webkit-box-flex: 1; 320 | -ms-flex-positive: 1; 321 | flex-grow: 1; 322 | } 323 | #label-rate { 324 | width: 100%; 325 | } 326 | #label-content { 327 | margin-top: 20px; 328 | } 329 | #label-family, #label-content, #label-rate { 330 | margin-bottom: 20px; 331 | } 332 | } 333 | 334 | @media screen and (min-width: 637px) { 335 | .trybewarts-login * { 336 | border-radius: 7px; 337 | margin-left: 15px; 338 | padding: 10px; 339 | width: 50%; 340 | } 341 | #input-name, #input-email { 342 | margin-right: 10px; 343 | } 344 | #input-name, #input-lastname { 345 | margin-bottom: 10px; 346 | } 347 | #user-information { 348 | max-width: 500px; 349 | position: absolute; 350 | top: 150px; 351 | padding: 50px; 352 | color: #32353d; 353 | -webkit-transform: skewY(-2deg); 354 | transform: skewY(-2deg); 355 | } 356 | #user-information p, #user-information strong { 357 | font-family: Moon Dance, cursive; 358 | font-size: 25px; 359 | } 360 | #letter { 361 | display: block; 362 | width: 100%; 363 | position: relative; 364 | } 365 | } 366 | 367 | @media screen and (min-width: 637px) and (max-width: 1119px) { 368 | #trybewarts-header-title { 369 | margin-right: 10px; 370 | } 371 | .trybewarts-header-logo { 372 | margin-right: 10px; 373 | } 374 | main { 375 | -webkit-box-orient: vertical; 376 | -webkit-box-direction: normal; 377 | -ms-flex-direction: column; 378 | flex-direction: column; 379 | -webkit-box-align: center; 380 | -ms-flex-align: center; 381 | align-items: center; 382 | } 383 | } 384 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /images/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 20 | 22 | 23 | 25 | image/svg+xml 26 | 28 | 29 | 30 | 31 | 33 | 58 | 60 | 66 | 69 | 75 | 81 | 87 | 93 | 98 | 101 | 107 | 112 | 113 | 116 | 122 | 123 | 127 | 132 | 137 | 138 | 144 | 148 | 153 | 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /images/trybewarts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 24 | 25 | 27 | image/svg+xml 28 | 30 | 31 | 32 | 33 | 34 | 36 | 59 | 61 | 67 | 72 | 77 | 81 | 85 | 89 | 93 | 97 | 101 | 105 | 109 | 113 | 117 | 118 | 123 | 127 | 131 | 135 | 139 | 143 | 147 | 151 | 152 | 157 | 161 | 165 | 169 | 173 | 177 | 181 | 185 | 189 | 190 | 200 | T 210 | 216 | 221 | 224 | 230 | 231 | 237 | 243 | 249 | 250 | --------------------------------------------------------------------------------