<form>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" />
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname" />
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
<label for="address2">Address 2:</label>
<input type="text" id="address2" name="address2" />
<label for="city">City:</label>
<input type="text" id="city" name="city" />
<label for="state">State:</label>
<select type="text" id="state" name="state">
<option value="WA">Washington</option>
</select>
<label for="zip">Zip:</label>
<input type="text" id="zip" name="zip" />
<div id="department-block">
<label for="department">Department:</label>
<select id="department" name="department" multiple>
<option value="finance">Finance</option>
<option value="humanresources">Human Resources</option>
<option value="marketing">Marketing</option>
</select>
</div>
<div id="buttons">
<button id="cancel">Cancel</button>
<button id="back">Back</button>
<button id="next">Next</button>
</div>
</form>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
gap: 20px;
font-family: "Exo", Arial, sans-serif;
background-color: #f7f7f7;
padding: 20px;
}
input,
select {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
color: #2c3e50;
font-size: 13px;
}
button {
--background: #275efe;
--text: #fff;
--shadow: rgba(10, 22, 50, 0.24);
display: inline-flex;
justify-content: center;
align-items: center;
background: var(--background);
border-radius: 4px;
box-shadow: 0 2px 8px -1px var(--shadow);
color: var(--text);
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: none 0;
cursor: pointer;
min-width: 100px;
min-height: 44px;
padding: 5px 10px;
font-family: "Exo", Arial, sans-serif;
}
button:not(:first-child) {
margin-left: 14px;
}
#cancel {
--background: #242836;
--text: #f5f9ff;
}
#next {
--background: #e91e63;
--text: #f5f9ff;
}
button:hover {
transform: scale(0.95);
box-shadow: 0 1px 4px -1px var(--shadow);
}
form {
max-width: 60vw;
box-shadow: 0 0 0 6px rgb(0 0 0 / 13%);
padding: 10px;
border-radius: 6px;
margin: auto;
display: grid;
grid-template-columns: [labels] auto [controls] auto [oversized] auto;
grid-auto-flow: row dense;
gap: 10px;
}
form > label {
grid-column: labels;
grid-row: auto;
align-self: center;
}
form > input,
form > select {
grid-column: controls;
grid-row: auto;
}
#department-block {
grid-column: oversized;
grid-row: span 3;
}
#buttons {
grid-row: auto;
grid-column: 1 / -1;
text-align: end;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.