25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
6.6 KiB
6.6 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 61487b77d4a37707073a64e5 | Step 48 | 0 | step-48 |
--description--
When the screen width is small, the h1 does not wrap its text content how it should. Center align the text for the h1.
Then, give the main padding such that the Student Info section header can be fully seen.
--hints--
You should give the h1 a text-align of center.
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center');
You should add a main selector to target the main element.
assert.exists(new __helpers.CSSHelp(document).getStyle('main'));
You should give the main a padding-top of at least 25px.
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25);
You should only change the padding-top value.
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom);
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft);
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
--seed--
--seed-contents--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<address>
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
San Francisco<br />
California<br />
USA
</address>
</footer>
</body>
</html>
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
--fcc-editable-region--
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
--fcc-editable-region--
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
p::before {
content: "Question #";
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}