<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Superheroes With Useless Powers Community & Support Network</title>
</head>
<div id="header" class="header">
<object id="logo"
class="header__logo"
type="image/svg+xml"
data="https://assets.codepen.io/2032127/swup-logo.svg">
</object>
<object id="logo-text"
class="header__logo-text"
type="image/svg+xml"
data="https://assets.codepen.io/2032127/text-logo-d_1.svg">
</object>
</div>
<div id="form-border">
<form id="survey-form" class="box-element box-element-border">
<h1 id="title">Member Intake Form</h1>
<p id="description">I am a short description of the page.</p>
<label id="name-label"
for="name"
class="input_label-none">Name
</label>
<div class="input-element-border">
<input id="name"
name="name"
type="text"
placeholder="Name"
class="input-element"
required />
</div>
<fieldset>
<legend class="subheader" >The above name is my...</legend>
<label id="secret-identity-label">
<input id="secret-identity"
value="Secret identity"
name="name-type"
type="radio" />Secret identity
</label>
<br>
<label id="superhero-alias-label">
<input id="superhero-alias"
value="Superhero alias"
name="name-type"
type="radio" />Superhero alias
</label>
</fieldset>
<label id="email-label"
for="email"
class="input_label-none">Email
</label>
<div class="input-element-border">
<input id="email"
name="email"
type="email"
placeholder="Email"
class="input-element"
required />
</div>
<br>
<label id="number-label"
for="age"
class="input_label-none">Age
</label>
<div class="input-element-border">
<input id="number"
name="age"
type="number"
min="18" max="999"
placeholder="Age"
class="input-element"
required />
</div>
<br>
<label id="dropdown-label"
for="dropdown"
class="input_label-none">Superhero status
</label>
<div class="input-element-border input-element-dropdown-border">
<select id="dropdown"
name="dropdown"
class="input-element input-element-dropdown">
<option>My current superhero status is...</option>
<option>Active full-time</option>
<option>Nights only</option>
<option>Retired</option>
<option>Apprenticing</option>
<option>Civilian</option>
<option>Recently returned from the Phantom Zone</option>
</select>
</div>
<br>
<br>
<fieldset>
<legend class="subheader">Please check all areas of difficulty:</legend>
<label id="bullying-label"
for="bullying">
<input id="bullying"
name="bullying"
value="Coworker teasing / bullying"
type="checkbox"/>Coworker teasing / bullying
</label>
<br>
<label id="control-label"
for="control">
<input id="control"
name="control"
value="Superpower incontinence / control issues"
type="checkbox"/>Superpower incontinence / control issues
</label>
<br>
<label id="embarrassed-label"
for="embarrassed">
<input id="embarrassed"
name="embarrassed"
type="checkbox"
value="Embarrassed to use powers" />Embarrassed to use powers
</label>
<br>
<label id="work-life-label"
for="work-life">
<input id="work-life"
name="work-life"
type="checkbox"
value="Work-life balance" />Work-life balance
</label>
<br>
<label id="liability-label"
for="liability">
<input id="liability"
name="liability"
type="checkbox"
value="Consistent property damage / liability" />Consistent property damage / liability
</label>
</fieldset>
<label id="describe-label"
for="describe">
<div class="input-element-border">
<textarea id="describe"
name="describe"
class="input-element"
placeholder="Please describe your useless superpower."></textarea>
</div>
</label>
<input id="submit"
type="submit"
value="Submit" />
</form>
</div>
</html>:root {
--header_text_color: #E5EFFF;
--box_bg_color: linear-gradient(180deg, #4D4D63 0%, #695978 100%);
--box_border_color: linear-gradient(180deg,#737390,#695979);
--input_bg_color: linear-gradient(to bottom, rgba(162, 179, 210, 1), rgba(229, 239, 255, 1));
--input_border_color: linear-gradient(to bottom, rgba(53, 45, 106, 1), rgba(202, 198, 232, 1));
--mid_grey_purple: #A2A2CA;
--dark_grey_purple: rgba(57, 57, 57, 1);
--button_bg_color: #6270B6;
--shadow-color: #1F2435;
}
body {
background: #343346;
overflow-x:hidden;
}
.header {
/* min-width: 350px; */
max-width: 750px;
max-height: 200px;
margin: 0 auto;
margin-bottom: 5px;
/*background-color: red;*/
display: flex;
}
.header__logo {
width: 20%;
display: inline-block;
margin: 0em .5em 1em .5em;
filter: drop-shadow(0px 4.27807px 4.27807px rgba(0, 0, 0, 0.25));
}
.header__logo-text {
width: 75%;
margin-top: -.5em;
}
#form-border{
background: var(--box_border_color);
position: relative;
display: block;
padding: 1px;
box-shadow: 0px 4px 8px var(--shadow-color);
border-radius: 9px;
max-width: 750.25px;
/* min-width: 350px; */
margin: 0 auto;
margin-bottom: 30px;
}
.box-element {
box-sizing: border-box;
position: relative;
margin: 0 auto;
/* min-width: 350px; */
max-width: 750px;
padding: 26px 32px;
background: var(--box_bg_color);
border-radius: 8px;
display: flex;
flex-direction: column;
}
.box-element-border {
position: relative;
}
.box-element-border::before {
position: absolute;
inset: 0;
z-index: 0;
border-radius: 8px;
padding: 1px;
background: var(--box_border_color);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.input-element {
background: var(--input_bg_color);
border-radius: 4px;
margin: 0;
width: 100%;
border-style: none;
padding: 10px 20px;
z-index: 2;
display: flex;
}
.input-element-border {
display: flex;
background: var(--input_border_color);
z-index: 1;
padding: 2px;
border-radius: 5px;
}
h1 {
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
font-style: normal;
font-weight: 700;
font-size: 20px;
text-align: center;
text-transform: uppercase;
color: var(--header_text_color);
margin-top:0px;
margin-bottom: 30px;
}
#description, legend, textarea {
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
font-size: 18px;
color: var(--header_text_color);
font-opacity: 55%;
font-style: normal;
font-weight: 100;
line-height: 20px;
}
.subheader {
opacity: 55%;
line-height: 27px;
padding-top: 15px;
}
#description {
display: none;
}
p, label, input, select {
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
font-size: 16px;
color: var(--header_text_color);
font-style: normal;
font-variant: normal;
font-weight: 100;
line-height: 32px;
}
.input-element-dropdown {
padding: 13.75px;
background: linear-gradient(180deg, #83839D 0%, #887C95 100%),
linear-gradient(180deg, #CAC6E8 0%, #655E93 10.42%, #635C91 86.46%, #332F4F 100%);
z-index: 12;
}
.input-element-dropdown-border {
background: linear-gradient(180deg, #CAC6E8 0%, #655E93 10.42%, #635C91 86.46%, #332F4F 100%);
linear-gradient(to bottom, rgba(53, 45, 106, 1), rgba(202, 198, 232, 1))
}
input, textarea {
color: var(--dark_grey_purple);
}
input[type="radio"], input[type="checkbox"] {
vertical-align: middle;
margin-top: -4px;
margin-right: 0.75em;
margin-left: 10px;
height: 20px;
width: 20px;
background: var(--input_bg_color);
border-radius: 50%;
}
.input-border {
background: var(--input_border_color);
margin-top: -27px;
margin-bottom: -15px;
margin-left: 8.225px;
width: 24px;
height: 24px;
border-radius: 50%;
}
#submit {
-webkit-appearance: none;
text-transform: uppercase;
font-weight: 700;
color: var(--header_text_color);
background: var(--button_bg_color);
box-shadow: 0px 4px 4px var(--shadow-color);
margin: 0 auto;
margin-top: 30px;
margin-bottom: 10px;
border-radius: 4px;
border-style: none;
padding: 10px 100px 10px 100px;
max-width: 350px;
width: 100%;
display: block;
}
fieldset {
border: none;
float: left;
margin-left: -15px;
margin-bottom: 1.5em;
}
::placeholder {
color: #695978;
opacity: 50%;
text-transform: uppercase;
}
textarea::placeholder{
text-transform: none;
padding-top: 5px;
}
textarea {
display: flex;
box-sizing: border-box;
position: relative;
width: 100%;
min-height: 122px;
padding: 26px 32px;
border-radius: 8px;
resize: none;
}
.input_label-none {
display: none;
}
/* Start of Responsive CSS edits for desktop*/
@media screen and (min-width: 600px) {
body {
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.