Design a Parent Teacher Conference Form - Step 35

HTML-CSS
1

Tell us what’s happening:

set border: none

alwalys fail, steps 35. class submit.btn

Your code so far

<!-- file: index.html -->
<!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>

/* file: styles.css */
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: 1px solid gray;
  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;
}


/* User Editable Region */

.submit-btn {
  cursor: pointer;
  background-color: royalblue;
  color: whitesmoke;
  border: none;
}

/* User Editable Region */

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

2

Hi @azharfaturrahman9,

Welcome back.

This is a known bug. A GitHub issue has already been created. Some users report success using the Firefox browser. Otherwise, please move on to the next step until this is fixed.

Happy coding!

3

I tried set border: none, but it still doesn’t work.

4

Welcome to the forum @gokdemiraytacpro!

Read the post before this. It’s a bug.

And please don’t post on someone else’s topic unless you are trying to help them with their code. Create your own topic when you need help by clicking the “Help” button in the challenge.

Happy coding!

5

Hello,

Thank you for the comment and sorry for the off-topic message. I understand how the forum works.

I will be more careful in the future and will create a new topic if I need help.