Hi coders. I’m currently working on building the Survey Form but as I am going through the code I realised the scroll bar is missing causing some of the content to be unreadable. Could someone help please?
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="header">
<h1 id="title">Survey Form</h1>
<p id="description">We require all users to complete this Survey Form in order for us to get better</p>
</header>
<form id="survey-form" />
<fieldset>
<label id="name-label" for="name">Name<input id="name" name="name" type="text" placeholder ="Enter your full name" required /></label>
<label id="email-label" for ="email">Email<input id="email"
name="email" type="email" placeholder ="Enter your email address" required /></label>
<label id="number-label" for="number">Age<input id="number" name="phone-number" type="number", min="18" max="65" placeholder="Age" required /></label>
</fieldset>
<fieldset>
<h4>How did you heard of cryptocurencies?</h4>
<select id="dropdown" name="dropdown">
<option value="">(please select one of the following options)</option>
<option value="1">A friend</option>
<option value="2">Internet adverts</option>
<option value="3">Other</option>
</select>
</fieldset>
<fieldset>
<h4>How would you best describe yourself as?</h4>
<label for="trader">
<input id="trader" name="user-type" type="radio" value="Radio" class="inline" checked />Trader</label>
<label for="investor">
<input id ="investor"name="user-type" type="radio" value="Radio" class="inline" />Investor</label>
<label for="both">
<input id="both" name="user-type" type="radio" value="Radio" class="inline" />Both</label>
<label for="none-of-the-above">
<input id="none-of-the-above" name="user-type" type="radio" value="Radio" class="inline" />None of the above</label>
<h4>What is the primary coin you are investing/trading?</h4>
<label for="etherum">
<input id="etherum" name="primary-coin" type="radio" value="Radio" class="inline" checked />Etherum</label>
<label for="bitcoin">
<input id="bitcoin" name="primary-coin" type="radio" value="Radio" class="inline" />Bitcoin</label>
<label for="other">
<input id="other" name="primary-coin" type="radio" value="Radio" class="inline" />Other</label>
<textarea></textarea>
<input name="checkbox" type="checkbox" value="Checkbox" />
<input name="checkbox" type="checkbox" value="Checkbox" />
<input id="submit" type="submit" />
</fieldset>
</body>
CSS:
body {
width: 100%;
height: 100%;
position:fixed;
background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://www.colorado.edu/ecenter/sites/default/files/styles/medium/public/article-thumbnail/cryptocurrency.png?itok=HHvIzV6z);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #f5f6f7;
font-family: ComicSans;
font-size: 16px;
}
form {
background-color: rgba(28, 19, 76, 0.8);
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}
header {
margin: 0.5em auto;
text-align: center;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
input, textarea, select {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
}