Survey Form - Build a Survey Form

Tell us what’s happening:
Describe your issue in detail here.

Did i add the background image wrong ? Because everytime i try to add a blur effect to my backrgound it mess up all the other elements.

Like it wont let me center the inputs with the normal commands. or is there another way i should be commanding the inputs.

Also my labels for my inputs are no showing up because of the background blur, is there a way around this ? what do i need to input so that my elements are showing up behind my background image?

   **Your code so far**
/* file: index.html */
<!DOCTYPE hmtl>
<html lang="en" >
 <head>
 <meta charset="utf-8">
 <title>FreeCodeCamp Survey Form</title>
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <div class="bg-image">
  <div class="filter-blur"></div>
   <h1 id="title">FreeCodeCamp Survey Form</h1>
   <p style="font-style: italic;" id="description">Thank you for taking the time to help us improve the platform</p> 

 <div>
 <Form id="survey-form" class="border">
   <input id="name" type="text" class="input-box1" placeholder="Enter your name"  required> <label class="textlabel1" for="name" id="name-label">Name</label>

   <input class="input-box2" id="email" type="email" placeholder="Enter your email"  required><label for="email" id="email-label">Email</label>
   
   <input class="input-box3" id="number" type="number" min="18"
   max="100" placeholder="age"><label for="number" id="number-label">Age</label>
   
   
   

 </form>
   </div>
   
   </div>
   
   
   </html>




/* file: styles.css */



body, {
 height: 100%;
 margin: 0;
 padding:0;
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify: center

}

.bg-image {
 background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Hcz1FFkU3w4Hikbl3TlYewHaE8%26pid%3DApi&f=1');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 width:100%;
 height:100%;
 position: relative;
}

.filter-blur {
 background: rgba(240,227,227,0.5);
 backdrop-filter: blur(4px);
 position: absolute;
 height:100%;
 width:100%;
 z-index:1;

}

h1 {
 position: absolute;
 z-index: 2;
 font-size: 4vw;
 font-family: 'teko', sans-serif;
 color: black;
 text-align: center;
 padding-left: 22%;

}

p {
  position: absolute;
 z-index: 2;
 padding-top: 7%;
 padding-left: 30%;
 color: black;


}

.input-box1 {
  position: absolute;
  color: black;
  z-index:2;
  align-items: center;
  margin-left: 41%;
  margin-top: 20%;
  height: 29;
  width: 50%;
  border-radius: 6px;
   }


 .input-box2 {
   position: absolute;
  color: black;
  z-index:2;
 align-items: center;
  margin-left: 34%;
  margin-top: 30%;
  height:29;
  width: 50%;
  border-radius: 6px;
  
 }

 .input-box3 {
   position: absolute;
  color: black;
  z-index:2;
 align-items: center;
  margin-left: 27.5%;
  margin-top: 40%;
  height: 29;
  width: 50%;
  border-radius: 6px;
 

 }

 .text-label1 {
   font-size: 3;
   position: absolute;
   color: black;
   z-index: 4;

 }

   **Your browser information:**

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

just noticed this. You may want to correct the spelling…

Edit:

Also noticed you have a missing semi-colon on the last line of this block (justify) as well you seem to have an extra comma in the selector after the word body


Also here, you are missing the closing body tag.

1 Like

I took a copy of your code on my computer so I can see what you are talking about.
I’ve fixed up the errors I mentioned in my previous post.
Now I want to know, what did you do to add the blur?
(So i can try and see what you are doing on my end)

I took a screenshot so you can see that on my end the background looks blurred but maybe you wanted it more blurred so please explain what you were trying to do in the code specifically that didn’t work.

I was able to get the background the way i wanted but i can’t get the input columns align with the normal align: center;

I am having a problem with getting anything centered on my page.

Also my labels for my input columns are not showing up because of the blur affect and i cant seem to how to fix that.

Ive also tried to add a border around my input columns but it keeps sending it to the top of the page.

can only give you some advice as there are too many issues here.
I would start with fixing the background image so it is applied on the body tag.
Then I would restructure the form to be inside of a main tag.
The main tag would get the flex display style or a grid layout style.
I personally do not think using absolute positioning is a good idea for the input and label fields. You want them to be able to move if the screen gets smaller.
So in addition to just working on one issue at a time, you can look into either flex layout or grid layout to put things the way you want in the middle of the page.

1 Like

Okay thank you for the help !