Learn Accessibility by Building a Quiz - Step 9

As described in the freeCodeCamp Style Guide, the logo should retain an aspect ratio of 35 / 4, and have padding around the text.

First, change the background-color to #0a0a23 so you can see the logo. Then, use the aspect-ratio property to set the desired aspect ratio to 35 / 4. Finally, add a padding of 0.4rem all around.

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
   <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" />
     <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
     <h1>HTML/CSS Quiz</h1>

/* file: styles.css */
body {
	background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;

#logo {
 width: max(100px, 18vw);
	background-color: #0a0a23;
	padding: 0.4rem;
	aspect-ratio: 35/4;

Test: Sorry, your code does not pass. Hang in there.

Hint: You should use the aspect-ratio property.

       **Your browser information:**

User Agent is: <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.3 Safari/605.1.15</code>

**Challenge:**  Learn Accessibility by Building a Quiz - Step 9

**Link to the challenge:**

Can you post the exercise’s link.

I skipped to the next step, and it showed the same exact code I had. Not sure if its just a glitch, but here’s the code for the step. Thanks for the listen anyhow!


It’s always best to write the elements in the order given in the exercise. So in this case it would be 1. background-color 2. aspect-ratio 3. padding; and the values should also the written out like you see it—for example, there is a space between 35, 4 and the forward slash /. If you do this, it is likely that the code will be accepted by the program.

1 Like

I appreciate you, thanks!