Skip to content

Instantly share code, notes, and snippets.

@leohmoraes

leohmoraes/formnogrid.markdown

Created November 6, 2020 12:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leohmoraes/26877ea77fc2c784133993a43bf1d414 to your computer and use it in GitHub Desktop.
Save leohmoraes/26877ea77fc2c784133993a43bf1d414 to your computer and use it in GitHub Desktop.
Download ZIP
FormNoGrid
Raw
index.html
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<form>
<header>
<h2>Cadastro Responsivo</h2>
</header>
<fieldset>
<label>
<span>Código:</span>
<input type="text" value="" autofocus>
</label>
<label>
<span>Nome:</span>
<input type="text" value="">
</label>
<label>
<span>Descrição:</span>
<input type="text" value="">
</label>
</fieldset>
</form>
</main>
</body>
</html>
Raw
style.css
* {
margin: 0px;
padding: 0px;
border-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
main {
display: block;
}
input[type=text] {
height: 35px;
font-size: 14px;
color: #555;
border: 1px solid #ccc;
background-color: white;
}
input[type=text]:focus {
outline: 0;
border-color: #4697e4;
}
label {
font-size: 14px;
font-weight: bold;
color: black;
}
label > input {
display: block;
width: 100%;
}
form {
border: 1px solid #428bca;
max-width: 700px;
margin: 0 auto;
}
form > header {
background-color: #428bca;
text-align: center;
color: white;
}
form fieldset {
border: none;
margin: 10px 0px 10px 10px;
}
form fieldset > label {
display: block;
float: left;
width: calc(100% - 10px);
height: 55px;
margin-top: 10px;
margin-right: 10px;
}
form fieldset label > input {
float: left;
}
@media (min-width: 700px) {
form > fieldset > label:nth-child(1) {
width: 80px;
}
form > fieldset > label:nth-child(2) {
width: calc(100% - 80px - 20px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment