Help in survey form

Tell us what’s happening:
unable to give box-shadow to the form as well that blue tint over the background image.

Your code so far
https://codepen.io/saurabh-singh-negi/pen/jOPeRZy?editors=1100

Your browser information:

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

Challenge: Build a Survey Form

Link to the challenge:

1 Like

If you want a background color on the form then just add a background-color value. You’ll probably want to adjust the opacity as well.

I was able to add a box shadow to the form using the standard box-shadow property.

I’m not sure this is what you want though. It would help if you were a little more specific. Exactly what elements do you want to style? What have you tried so far?

2 Likes

note that you don’t need to replicate the sample project, that was just an example. You are just expected to create a survey form, about whatever you choose, and with the layout of your choice

2 Likes

I want to have that exact shadow that on the demo project and also how do make the background image light so that the text is visible.

this blue box over the form

1 Like

One way to learn is to look at how other people do things. Fortunately, your web browser provides all the tools you need to do this. I would suggest you use the inspector in the dev tools in your browser to see how the CSS is done for those features.

2 Likes

Ok thanks for the help.

1 Like

You can make the blue box over the form setting the form background-color and the page background using the css gradient

This is how you do it, taking the example right from the screenshot you posted


  background: var(--color-darkblue);
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

notice that in the example they have set variables with color at the beginning at the root level

:root {
  --color-white: #f3f3f3;
  --color-darkblue: #1b1b32;
  --color-darkblue-alpha: rgba(27, 27, 50, 0.8);
  --color-green: #37af65;
}

you will have to modify these values to the rgb color of your liking and the “a” in rgba is the alpha, or the transparency of the color or background. For example, rgba(27, 27, 50, 0.8); the first three decimal values will give you some red, green and blue, and the float value will give you the alpha value.

The Url in the code above will give you the background image with the layer of color set on top specified by the rgba color on top.

url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);

once you change that, you will get what you are looking for.