b36cdbafd1
* chore: rename part to step * chore: update metas * chore: more renaming * chore: update tooling * chore: update frontmatter * chore(tools): title testing
1.5 KiB
1.5 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 613e275749ebd008e74bb62e | Step 8 | 0 | step-8 |
--description--
A useful property of an SVG (scalable vector graphics) is that is contains a path attribute which allows the image to be scaled without affecting the resolution of the resultant image.
Currently, the img is assuming it's default size, which is too large. Correctly, scale the image using it's id as a selector, and setting the width to max(100px, 18vw).
--hints--
You should use the #logo selector to target the img element.
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
You should give the img a width of max(100px, 18vw).
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
--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>freeCodeCamp: 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></nav>
</header>
<main></main>
</body>
</html>
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
--fcc-editable-region--