Tell us what’s happening:
what the fuck
Select the element with the class submit-btn. Set cursor to pointer (to indicate it’s clickable), background-color to royalblue, color to whitesmoke, border to none, border-radius to 6px, and padding to 12px 20px.
.submit-btn {
cursor: pointer;
background-color: royalblue;
color: whitesmoke;
border: none;
border-radius: 6px;
padding: 12px 20px;
}
- Set the border property to none.
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Name: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a;
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: none;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) {
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn),
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder,
textarea {
color: whitesmoke;
}
.contact-method-radio-btn {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
vertical-align: bottom;
}
.contact-method-radio-btn::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 50%;
transform: translate(3px, 3px) scale(0);
transition: all 0.3s ease-in;
}
.contact-method-radio-btn:checked::before {
transform: translate(3px, 3px) scale(1);
background-color: lightgreen;
}
.submit-btn {
cursor: pointer;
background-color: royalblue;
color: whitesmoke;
border: none;
border-radius: 6px;
padding: 12px 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
Challenge Information:
Design a Parent Teacher Conference Form - Step 35