Polls with header question and options to choose (radio and checkboxes)
<!-- Radio Buttons -->
<div class="polls">
<h5 class="polls-question">
<span class="polls-question-label">Q:</span>
Choose your favourite programming language?
</h5>
<div class="polls-options">
<div>
<input type="radio" name="programming" value="Javascript" id="programmingJavascript" required>
<label for="programmingJavascript">Javascript</label>
</div>
<div>
<input type="radio" name="programming" value="Ruby" id="programmingRuby" required>
<label for="programmingRuby">Ruby</label>
</div>
<div>
<input type="radio" name="programming" value="Php" id="programmingPhp" required>
<label for="programmingPhp">Php</label>
</div>
<div>
<input type="radio" name="programming" value="Python" id="programmingPython" required>
<label for="programmingPython">Python</label>
</div>
</div>
<div class="polls-submit">
<input type="submit" class="button" value="Submit Vote">
</div>
</div>
<!-- Checkboxes -->
<div class="polls">
<h5 class="polls-question">
<span class="polls-question-label">Q:</span>
Choose Javascript frameworks that you use?
</h5>
<div class="polls-options">
<div>
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Angular.js</label>
</div>
<div>
<input id="checkbox2" type="checkbox">
<label for="checkbox2">React.js</label>
</div>
<div>
<input id="checkbox3" type="checkbox">
<label for="checkbox3">Vue.js</label>
</div>
<div>
<input id="checkbox4" type="checkbox">
<label for="checkbox4">Knockout.js</label>
</div>
</div>
<div class="polls-submit">
<input type="submit" class="button" value="Submit Vote">
</div>
</div>
$polls-question-label-color: $primary-color;
$polls-submit-button-transform: uppercase;
.polls {
margin-bottom: 1rem;
.polls-question {
margin-bottom: .5rem;
.polls-question-label {
color: $polls-question-label-color;
font-weight: 500;
margin-right: .25rem;
}
}
.polls-submit {
margin-top: .3rem;
.button {
margin-right: .5rem;
text-transform: $polls-submit-button-transform;
}
}
}
.polls {
margin-bottom: 1rem;
}
.polls .polls-question {
margin-bottom: .5rem;
}
.polls .polls-question .polls-question-label {
color: #1779ba;
font-weight: 500;
margin-right: .25rem;
}
.polls .polls-submit {
margin-top: .3rem;
}
.polls .polls-submit .button {
margin-right: .5rem;
text-transform: uppercase;
}