├── 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 | 
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 | 
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 |
93 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Trybewarts
8 |
9 |
10 |
11 |
12 |
13 |
14 |
23 |
24 |
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 |
160 |
--------------------------------------------------------------------------------
/images/trybewarts.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
250 |
--------------------------------------------------------------------------------