Design a Contact Form - Design a Contact Form

HTML-CSS
1

Tell us what’s happening:

why are the inputs borders 2 different shade of gray (unlike the textarea which is 1 color), the top left and bottom right are 2 different colors even though I set the borders for one color, another thing is why the body not taking the full height of the page? I set its height to 100% and even tried having a html selector with height property set to 100% and it still didn’t work.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Contact Form</title>
    <link href="styles.css" rel="stylesheet">
</head>

<body>
    <div class="form-container">
        <form>
            <h2>Survey Id</h2>

            <label for="full-name">Name:</label>
            <input type="text" id="full-name" name="name" placeholder="Donald Biden" required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="mail" placeholder="donaldbiden@gmail.com" required>

            <label for="bio">Tell us about yourself:</label>
            <textarea id="bio" name="bio" rows="4" cols="30" placeholder="I never was in the epstein files, It was all ai..." required></textarea>

            <button type="submit">Submit</button>
        </form>
    </div>
</body>

</html>

/* file: styles.css */
body{
  height: 100%;
  background: linear-gradient(to top right, #83a4d4,#b5fafe);
  margin: 0;
  padding: 0;
  font-family: Arial;
}

.form-container{
  width: 60vw;
  max-width: 400px;
  background-color: #f4f4f4;
  margin: 3rem auto;
  padding: 1rem;
  text-align: center;
  border-radius: 15px;
}

h2{
  font-size: 2.5rem;
  color: #555
}

input{
  display: block;
  width: 70%;
  max-width: 300px;
  padding: 1px;
  height: 2em;
  margin: 0 auto 1em auto;
  border-radius: 10px;
  border-color: #CCC;
  outline: none;
  text-align: center;
}

textarea{
  display: block;
  margin: 0 auto 1em auto;
  width: 70%;
  padding: 10px;
  border-radius: 10px;
  border-color: #CCC;
  outline: none;
}

input::placeholder, textarea::placeholder{
  color: #AAA;
}

label{
  margin: 1px;
  color: black;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Design a Contact Form - Design a Contact Form

2

hello!

The inputs always have a default border-style, in this case it is set to inset, that’s why it appears to have 2 different shades of gray. To have the border in a single colour you’d have to set border-style property of the inputs to solid.

2 Likes
3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.