<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #EEEEEE;
}
.heading {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 2rem;
background-color: white;
text-align: center;
width: 100%;
max-width: 100%;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
padding: 1rem;
}
.grid-container{
display: grid;
grid-template-columns: repeat(2,1fr);
}
/* form styling */
.form{
width: 500px;
margin: 20px auto;
background-color: #31363F;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 1rem;
border-radius: 10px;
}
.form-control{
text-align: left;
margin-bottom: 1rem;
background-color: #31363F;
}
.form-control label{
display: block;
margin-bottom: 10px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #31363F;
color: white;
font-size: 16px;
}
.form-control input,.form-control select,.form-control textarea{
width: 100%;
max-width: 100%;
border-radius: 10px;
padding: 10px;
display: block;
background-color: ;
}
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
#submit{
padding: 8px 10px;
background-color: #4c00ff;
border-radius: 5px;
font-size: 16px;
width: 100px;
color: white;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: center;
}
small{
background-color: #31363F;
color: white;
}
select >option{
padding: 10px;
font-size: 16px;
}
.code{
width: 100%; /* Optional: Adjust width as needed */
height: 700px;
overflow: scroll;/* Optional: Adjust height as needed */
}
iframe {
width: 100%;
height: 300px;
border: 0;
transform: scale(1);
overflow: scroll;
}
</style>
<body>
<h1 class="heading">Survey Form For Beginners</h1>
<div class="grid-container">
<div class="container">
<form action="" class="form">
<div class="form-control">
<label for="name" id="label-name">
Name
</label>
<input type="text" id="name">
</div>
<!-- email -->
<div class="form-control">
<label for="email" id="label-email">
Email
</label>
<input type="email" id="email">
</div>
<!-- age -->
<div class="form-control">
<label for="age" id="label-age">
Age
</label>
<input type="text" id="age">
</div>
<!-- role -->
<div class="form-control">
<label for="role">
Which option best describes you?
</label>
<select name="role" id="role">
<option value="student">student</option>
<option value="intern">intern</option>
<option value="professional">professional</option>
</select>
</div>
<!-- radio choices -->
<div class="form-control">
<label>
Would you recommend SRK'S
<!-- radio choices -->
<div class="form-control">
<label>
Would you recommend SRK'S to a friend?
</label>
<!-- Input Type Radio Button -->
<label for="recommed-1">
<input type="radio" id="recommed-1" name="recommed">Yes
</input>
</label>
<label for="recommed-2">
<input type="radio" id="recommed-2" name="recommed">No
</input>
</label>
<label for="recommed-3">
<input type="radio" id="recommed-3" name="recommed">Maybe
</input>
</label>
</div>
<div class="form-control">
<label>Languages and Frameworks known
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox" name="inp">C
</input>
</label>
<label for="inp-2">
<input type="checkbox" name="inp">C++
</input>
</label>
<label for="inp-3">
<input type="checkbox" name="inp">C#
</input>
</label>
<label for="inp-4">
<input type="checkbox" name="inp">Java
</input>
</label>
<label for="inp-5">
<input type="checkbox" name="inp">Python
</input>
</label>
<label for="inp-6">
<input type="checkbox" name="inp">JavaScript
</input>
</label>
<label for="inp-7">
<input type="checkbox" name="inp">React
</input>
</label>
<label for="inp-7">
<input type="checkbox" name="inp">Angular
</input>
</label>
<label for="inp-7">
<input type="checkbox" name="inp">Django
</input>
</label>
<label for="inp-7">
<input type="checkbox" name="inp">Spring
</input>
</label>
</div>
<div class="form-control">
<label for="comment">Any comments or suggestions</label>
<!-- multi-line text input control -->
<textarea name="comment" id="comment" placeholder="Enter your comment here">
</textarea>
</div>
<button type="submit" value="submit" id="submit">Submit</button>
</form >
</div >
</div >
</body >
</html >