Project Trybewarts

Block 06 Project: HTML&CSS - Forms, flexbox & responsive

👋 Hello, guys! This is a forms project. In this project I make a form with HTML and CSS, using Flexbox. I used JS for mock login validation, to insert a submit button activation conditional and also take the information typed in the inputs and put it on the screen when clicking on the send button.

📍 Here I use HTML, pure CSS and JavaScript for pratice the skills:

• Create forms in HTML;
• Use CSS Flexbox to create flexible layouts;
• Build pages that change layout according to screen orientation;

📖 The project requirements were:

1. Create a green bar at the top of the page ✔️
2. Add the Trybewarts logo with the trybewarts-header-logo class in the top bar ✔️
3. Add a login form in the right corner of the top bar containing email, password inputs and a login button ✔️
4. Create a title with Trybewarts text centered in the header ✔️
5. Add a form to the body of the page ✔️
6. Make the main axis of the form vertical ✔️
7. Add the Trybewarts logo to the right side of the page ✔️
8. Add to the form with id evaluation-form the inputs of first name, last name and email ✔️
9. Add to the form a select with the id house containing the options Gitnoria, Reactpuff, Corvinode and Pytherina ✔️
10. Position the First Name and Last Name fields so that they line up ✔️
11. Position the Email and Home fields so they line up ✔️
12. Add to the form an input field to which family the student person identifies ✔️
13. Create checkbox type input fields containing six options ✔️
14. Create an input field to rate the level of satisfaction with Trybewarts from 1 to 10 ✔️
15. Create a textarea with the id textarea and a label with the textarea class containing the maximum number of characters equal to 500 ✔️
16. Create a checkbox type input field with id agreement to validate the information ✔️
17. Create a Submit button to submit the form ✔️
18. Make the Submit button enabled only after the checkbox for requirement 16 is selected ✔️
19. Create a footer at the end of the page ✔️
20. Create a counter with the ID counter containing the number of characters available in the text area, ranging from 500 to 0, which should update as something is typed into the text area ✔️
21. Make sure that, when clicking on the Submit button, the content inside the tag is replaced by the information filled in by the user ✔️

🔗 Deploy here

🙏🏽 Thanks for viewing this repository!