Skip to content

response form for mobiles of the site #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kunal-singh-8057 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

response form for mobiles of the site #70

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 74 additions & 69 deletions formulario.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,127 @@
/* Todos os elementos da página */
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* better box sizing */
}

/* Elementos com o ID "titulo" */
/* Body: center form with max width and padding instead of fixed margin */
body {
background-color: #F0F8FF;
font-family: sans-serif;
font-size: 1em;
color: #59429d;
max-width: 480px; /* max width for desktop */
margin: 2% auto; /* auto horizontal margin for center */
padding: 0 1em; /* padding left/right for small screens */
display: flex;
flex-direction: column;
align-items: center;
}

/* Title and subtitle */
#titulo {
font-family: sans-serif;
color: #380B61;
margin-left: 7%;
}
margin-left: 0;
text-align: center;
}

/* Elementos com o ID "subtitulo" */
#subtitulo {
font-family: sans-serif;
color: #380B61;
margin-left: 10%;
}
margin-left: 0;
text-align: center;
}

#check{
display: inline-block;
/* Inline-block container for checkboxes */
#check {
display: block; /* block for better stacking */
}

/* Elementos de tag <fieldset>*/
/* Fieldset */
fieldset {
border: 0;
}

/* Elemento de tag <body> */
body{
background-color: #F0F8FF;
font-family: sans-serif;
font-size: 1em;
color: #59429d;
margin-left: 36%;
margin-top: 2%;
justify-content: center;
}

/* Elementos de tags <body>, <input>, <Select>, <textarea> e <button> */
input, select, textarea, button {
font-family: sans-serif;
font-size: 1em;
color: #59429d;
border-radius: 5px;
/* Group fields - by default stacked vertically */
.grupo {
display: flex;
flex-wrap: wrap; /* allow wrapping */
justify-content: space-between;
}

/* Elementos de classe "grupo" nos estados das pseudoclasses "before" e "after" */
.grupo:before, .grupo:after {
display: table;
}

/* Elementos de classe "grupo" no estado da pseudoclasse "after" */
.grupo:after {
clear: both;
}

/* Elementos de classe "campo" */
.campo {
/* Individual fields inside grupo */
.grupo .campo {
flex: 1 1 48%; /* each field takes ~48% width, allowing 2 per row */
margin-bottom: 1em;
}

/* Elementos de classe "campo" de tag <label> */
/* Label inside campo */
.campo label {
margin-bottom: 0.2em;
color: #59429d;
display: block;
}

/* Elementos de classe "campo" ou "grupo" de tag <fieldset> */
fieldset.grupo .campo {
float: left;
margin-right: 1em;
}

/* Elementos de classe "campo" das tags <input> com atributo text e email, da tag <select> e da tag <textarea>*/
.campo input[type="text"], .campo input[type="email"], .campo select, .campo textarea {
/* Normal fields */
.campo input[type="text"],
.campo input[type="email"],
.campo select,
.campo textarea {
padding: 0.2em;
border: 1px solid #59429d;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
display: block;
width: 100%; /* make inputs full width */
}

/* Elementos de classe "campo" de tag <select> e <option>*/
.campo select option {
padding-right: 1em;
}

/* Elemento de classe "campo" com tag <input>, <select> e <textarea> tocas com estado da pseudoclasse "focus"*/
.campo input:focus, .campo select:focus, .campo textarea:focus {
background: #E0E0F8;
}

/* Elemento de classe "botao" */
/* Button */
.botao {
font-size: 1.2em;
background: #59429d;
border: 0;
margin-bottom: 1em;
color: #ffffff;
padding: 0.2em 0.6em;
padding: 0.5em 1em;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
position: absolute;
top: 90%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
cursor: pointer;
width: 100%; /* full width button */
max-width: 300px;
transition: background 0.3s ease;
}

/* Elemento de classe "botao" com o estado da pseudoclasse "hover" */
.botao:hover {
background: #CCBBFF;
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
text-shadow: none;
}

/* Elementos de classe botão e de tag <select> */
.botao, select{
/* Cursor pointer on select too */
select {
cursor: pointer;
}
}

/* Responsive: for small screens (below 480px) */
@media (max-width: 480px) {

/* Group fields stack vertically */
.grupo {
flex-direction: column;
}

.grupo .campo {
flex: 1 1 100%; /* full width on small */
}

/* Reduce font size slightly */
body {
font-size: 0.9em;
}

/* Shrink button */
.botao {
max-width: 100%;
}
}