In the website above, i found a problem dealing with the style of the legend
element,
So what i did is that i applied a margin: -10000px;
to the legend
element and i replaced that text with ::before
and ::after
of a div
element above the legend
element, -please see the code for a better understanding ,the code is below- , is there is another way around to do the styling?
HTML:
<div id="overlay-color"></div>
<div id="hero">
<main>
<div id="title-div">
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform </p>
</div>
<form action="#" id="survey-form">
<!-- input 1 -->
<label for="name" id="name-label">Name</label>
<input type="text" name="name" id="name" placeholder="Enter your name" required>
<!-- input 2 -->
<label for="email" id="email-label">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your Email" required>
<!-- input 3 -->
<label for="number" id="number-label">Age <span>(optional)</span></label>
<input type="number" min="10" max="99" name="age" id="number" placeholder="Age">
<!-- input 4 -->
<label for="dropdown">Which option best describes your current role?</label>
<select class="" name="options1" id="dropdown" required>
<option value="" disabled selected>Select current role</option>
<option value="Student">Student</option>
<option value="Full Time Job">Full Time Job</option>
<option value="Full Time Learner">Full Time Learner</option>
<option value="Prefer not to say">Prefer not to say</option>
<option value="Other">Other</option>
</select>
<!-- input 5 -->
<fieldset>
<legend>Would you recommend freeCodeCamp to a friend?</legend>
<div id="legend1"></div>
<div>
<input type="radio" name="radio" value="Definitely" id="Definitely">
<label for="Definitely">
Definitely
</label>
</div>
<div>
<input type="radio" name="radio" value="Maybe" id="Maybe">
<label for="Maybe">
Maybe
</label>
</div>
<div >
<input type="radio" name="radio" value="Not sure" id="Not_sure">
<label for="Not_sure">
Not sure
</label>
</div>
</fieldset>
<!-- input 6 -->
<label for="options2">What is your favorite feature of freeCodeCamp? </label>
<select name="options2" id="options2" required>
<option value="" disabled selected>Select an option</option>
<option value="Challenges">Challenges</option>
<option value="Projects">Projects</option>
<option value="Community">Community</option>
<option value="Open Source">Open Source</option>
</select>
<!-- input 7 -->
<fieldset>
<legend>What would you like to see improved? (Check all that apply)</legend>
<div id="legend2"></div>
<!-- checkbox 1 -->
<div>
<input type="checkbox" value="Front-end Projects" id="chk1">
<label for="chk1">Front-end Projects</label>
</div>
<!-- checkbox 2 -->
<div>
<input type="checkbox" value="Back-end Projects" id="chk2">
<label for="chk2">Back-end Projects</label>
</div>
<!-- checkbox 3 -->
<div>
<input type="checkbox" value="Data Visualization" id="chk3">
<label for="chk3">Data Visualization</label>
</div>
<!-- checkbox 4 -->
<div>
<input type="checkbox" value="Challenges" id="chk4">
<label for="chk4">Challenges</label>
</div>
<!-- checkbox 5 -->
<div>
<input type="checkbox" value="Open Source Community" id="chk5">
<label for="chk5">Open Source Community</label>
</div>
<!-- checkbox 6 -->
<div>
<input type="checkbox" value="Gitter help rooms" id="chk6">
<label for="chk6">Gitter help rooms</label>
</div>
<!-- checkbox 7 -->
<div>
<input type="checkbox" value="Videos" id="chk7">
<label for="chk7">Videos</label>
</div>
<!-- checkbox 8 -->
<div>
<input type="checkbox" value="City Meetups" id="chk8">
<label for="chk8">City Meetups</label>
</div>
<!-- checkbox 9 -->
<div>
<input type="checkbox" value="Wiki" id="chk9">
<label for="chk9">Wiki</label>
</div>
<!-- checkbox 10 -->
<div>
<input type="checkbox" value="Forum" id="chk10">
<label for="chk10">Forum</label>
</div>
<!-- checkbox 11 -->
<div>
<input type="checkbox" value="Additional Courses" id="chk11">
<label for="chk11">Additional Courses</label>
</div>
</fieldset>
<!-- input 8 -->
<label for="textarea0" id="textarea-label">Any comments or suggestions?</label>
<textarea id="textarea0" name="name" rows="7" cols="80" placeholder="Enter your comment here..."></textarea>
<!-- Button -->
<button type="submit" name="button" id="submit">Submit</button>
</form>
</main>
</div>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--Mcolor: rgba(45,108,108, .8);
--font: 'Ubuntu', sans-serif;
}
#overlay-color {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--Mcolor);
}
#hero {
background-image: url("https://cdn.pixabay.com/photo/2017/07/31/11/21/people-2557396_960_720.jpg");
background-color: #333;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body {
font-family: var(--font);
color: white;
font-weight: 400;
margin: 0;
}
main {
padding-top: 2em;
max-width: 550px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
#survey-form {
background-color: rgba(30, 30, 30, .6);
padding: 2em 3em 3em 3em;
line-height: 2.5em;
border-radius: 5px;
}
@media (max-width:500px){
#survey-form {
padding: 2em 1em 3em 1em;
}
}
@media (min-width:750px){
main {
max-width: 720px;
}
}
#title-div {
max-width: 95%;
margin-left: auto;
margin-right: auto;
font-weight: 400;
}
#title {
text-align: center;
margin-bottom: .5em;
}
#description {
font-size: 1.2em;
text-align: center;
margin-bottom: 2em;
font-style: italic;
}
#survey-form input {
display: block;
margin-left: auto;
margin-right: auto;
}
#survey-form label {
display: block;
font-size: 1.25em;
margin-bottom: .1em;
}
#name, #email, #number, select, textarea {
width: 100%;
font-size: 1.1em;
font-weight: 400;
font-family: var(--font);
padding: 8px 12px 8px 12px;
margin-bottom: 25px;
border-radius: 5px;
border-style: none;
color: rgba(30, 30, 30, .7);
}
#name:focus, #email:focus, #number:focus, select:focus, textarea:focus {
outline: none;
border: 1px solid var(--Mcolor);
box-shadow: 0 0 7px 3px var(--Mcolor);
}
#survey-form span {
font-size: .8em;
}
option[selected] {
font-weight: 700;
font-size: .9em;
}
#survey-form legend {
position: absolute;
left: -10000px;
}
#survey-form fieldset #legend1::before {
font-size: 1.25em;
line-height: 1.3em;
content: "What would you like to see improved? ";
}
#survey-form fieldset #legend1::after {
content: "(Check all that apply)";
}
#survey-form fieldset #legend2::before {
font-size: 1.25em;
line-height: 1.3em;
content: "Would you recommend freeCodeCamp to a friend?";
}
#survey-form fieldset {
padding: 0;
margin: 0;
border: none;
}
#survey-form fieldset [type='radio'] {
margin: 0 7px 0 5px;
display: inline-block;
height: 15px;
width: 15px;
}
#survey-form fieldset [type='radio']:focus {
margin: 0 7px 0 5px;
display: inline-block;
outline-style: solid;
outline-width: thin;
height: 15px;
width: 15px;
}
#survey-form fieldset [type='checkbox'] {
margin: 0 7px 0 5px;
display: inline-block;
height: 15px;
width: 15px;
}
#survey-form fieldset [type='checkbox']:focus {
margin: 0 7px 0 5px;
display: inline-block;
outline-style: solid;
outline-width: thin;
height: 15px;
width: 15px;
}
#survey-form fieldset label {
display: inline;
margin:0;
padding:0;
}
#survey-form #textarea-label {
margin-top:1.3em;
}
#survey-form textarea {
height: 8em;
resize: vertical;
}
#survey-form button {
margin: 1.1em 0;
font: inherit;
font-size: 1.1em;
font-weight: 500;
width: 100%;
height: 2.7em;
border-radius: 3px;
border-style: none;
background-color: rgba(75,158,120, 1);
color: white;
padding: .25em;
cursor: pointer;
}
#survey-form button:hover {
animation-name: button;
animation-duration: .5s;
animation-fill-mode: forwards;
color: #555;
}
@keyframes button {
100% {
background-color: rgba(125,208,170, 1);
}
}