Tell us what’s happening:
Your code so far
this is html:
<div class= "container">
<header class="header">
<h1 id="title" class="form-center">Form A326 rps</h1>
<p id="description" class="description-text-center">We are glad you are dealing with us. Please fill out this short questionnaire</p>
<div class="image"><strong>CMA</div>
</header>
<form class="form" id="survey-form" action='https://docs.google.com/spreadsheets/d/1dKwlt6BDGMAYxg7Bh8rWFtISMACXjzdkPCCWnc8aC84/edit#gid=0'>
<!-- this display the all form header content----------------------------------------------------------------->
<div class="form2 text">
<label id="email" for="email">E-mail:</label>
<input class="headlight" type="text" required placeholder="write your Email" name:"email" id="email" class="control_name_field"/> </div>
<!-- next question -->
<div class="form2 text">
<label id="name" for="Name">Name: </label> <input type="text" class="headlight" required placeholder="write your name please" name:"name" id="name" class="control_name_field"/>
</div>
<!-- next question ----------------------------------------------------------------------------------- -->
<div class="form2 text">
<label id="number" for="age">Your age: </label>
<input type="number" placeholder="Your age" name:"age" id="number" class="headlight" min="10" max="99"/></div>
<!-- ----------- next question ------------------ -->
<div class="form2 text">
<p>What is your occupation at the moment?</p>
<select class="headlight" id="dropdown" name:"role" class="control_name_field"/select>
<option class="headlight" disabled selected value> select current occupation</option>
<option value="Student">Student</option>
<option value="job">Full time job</option>
<option value="other">Other</option>
<input class="headlight" id="information" type="text" placeholder="if other Please specify"/>
</div>
<!-- next question --------------------------------------------------------------------- -->
<div class="form2">
<p>Would you recommand this app for a friend?</p>
<label id="job" for="Work">Yes:</label>
<input type="radio" name:"user-radio" value="definitely" class="input_radio" checked/>
<label id="job" for="Work">No:</label>
<input type="radio" name:"user-radio" value="definitely" class="input_radio"/>
<label id="job" for="Work">Not sure:</label>
<input type="radio" name:"user-radio" value="definitely" class="input_radio"/></div>
<!-- next question --------------------------------------------------------------------- -->
<div class="form2 text">
<p> what is your favorite feature from our conent ?</p>
<select class="headlight" id="dropdown" name:"role" class="control_name_field" required>Your favorite feature
<option disabled selected value> Your favorite feature is</option>
<option value="Blogs">Blogs</option>
<option value="Game videos">Game videos</option>
<option value="Animations ">Animations</option>
<option value="Songs">Songs</option></select>
</div>
<!-- next question --------------------------------------------------------------------- -->
<div class="form2">
<p>What would you like from us to improve?
<span class="clue">(check here bellow)</span></p>
<label><input name="prefer" value="similar" type="checkbox" class="input-checkbox"/>Blogs</label>
<label><input name="prefer" value="similar" type="checkbox" class="input-checkbox"/>videos</label>
<label><input name="prefer" value="similar" type="checkbox" class="input-checkbox"/>songs</label>
<label><input name="prefer" value="similar" type="checkbox" class="input-checkbox"/>cartoons</label>
<label><input name="prefer" value="similar" type="checkbox" class="input-checkbox"/>Poadcasts</label>
</div>
<!-- next question --------------------------------------------------------------------- -->
<div class="form2">
<p> Send us your comment</p>
<input id="comment_section" type="text" placeholder="Your comment here ... "/>
<div class="form2">
<button id="submit" type="submit" class="submit">Submit</button>
</div>
</form>
</div
there is css here :
/* Universal selector: this cover all the website selector */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
:root{
--color-white: #f3f3f3;
--color-darkblue:#1b1b32;
--color-darkblue-alpha:rgba (27, 27, 50, 0.8);
--color-greem : #37af65;
/* this is browser defaut css settiings */
}
/* this is the body css setting*/
body{
font-family: 'poppins', sans-serif;
font-size: 1rem;
font-weight: 400;
line-heigtht:1.4;
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
background-image: url(https://www.fishphilosophy.com/wp-content/uploads/2017/06/blog-37-play-kids.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
.container{
display:block;
margin: auto;
width:90%;
opacity: 0.8;
}
@media(min-width:576px){
.container {
max-width:540px;
}
}
div {
img-size:20px;
}
h1{
text-align: center;
font-color: white,
}
h2{
}
h3{
}
p{
text-align: left;
}
.description-text-center {
text-align: center;
}
.form-center {
text-align: center;
}
.image {
text-align: center;
top:20%;
width:108px;
height:100px;
color:Black;
background-color: orange;
position: relative;
display: relative;
left: 40%;
font-family: "Sofia", sans-serif;;
}
.header{
background: #BA55D3;
color: white;
}
.form {
background: linear-gradient(45deg, Plum, LightSeaGreen);
}
.form2{
max-width:100%;
max-height:100%;
margin:10px 20px;
padding: 4px
}
button:hover {
animation-name: blue;
animation-duration: 500ms
}
#headlight {
text-color: white;
}
label{
display: flex;
align-items: center;
}
input, button, select, textarea{
margin:0;
line-height: inherit;
font-family: inherit;
font-size: inherit;
}
button {
border:none;
}
#comment_section {
min-height: 100px;
width: 95%;
resize : vertical;
display: center;
}
.submit {
display: inline-block;
width: 100%;
padding: 0.3rem;
background: blue;
border-radius: 2px;
}
}
.clue{
}
.headlight{
display:block;
width: 95%;
height: 2.345rem;
padding:
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.41 YaBrowser/21.2.0.1099 Yowser/2.5 Safari/537.36.
Challenge: Build a Survey Form
Link to the challenge:
