60% complete on technical documentation page

Can anyone help me get 100% complete on the technical documentation page? I got 60% complete for the following code.

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

``` <!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<title>Technical Documentation Page</title>
</head>
<body>
<main id="main-doc">
	<div>
		<nav id="navbar">
			<header>CSS Animation Properties</header>
			<ul>
				<li><a class="nav-link" href="#Animation">Animation</a></li>
				<li><a class="nav-link" href="#Animation-delay">Animation-delay</a></li>
				<li><a class="nav-link" href="#Animation-direction">Animation-direction</a></li>
				<li><a class="nav-link" href="#Animation-duration">Animation-duration</a></li>
				<li><a class="nav-link" href="#Animation-fill-mode">Animation-fill-mode</a></li>
			</ul>
			<!-- for regular sized devices (laptops, desktops) your #navbar should always be on the left edge of the window -->
		</nav>
	</div>
	<div id="main-div">
		<section id="Animation" class="main-section">
			<header>Animation</header>
			<p>The animation shorthand CSS property applies on animation between styles.</p>
			<p> It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.</p>
			<code>/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
			<span>animation</span>: 3s ease-in 1s 2 reverse both paused slidein;</code>
			<ul>
				<li>animation-name</li>
				<li>animation-duration</li>
				<li>animation-timing-function</li>
				<li>animation-delay</li>
				<li>animation-iteration-count</li>
				<li>animation-direction</li>
				<li>animation-fill-mode</li>
				<li>animation-play-state</li>
			</ul>
		</section>
		<section id="Animation-delay" class="main-section">
			<header>Animation-delay</header>
			<p>The animation-delay CSS property....</p>
			<p>It is often convenient to use the sorthand property animation to set all animation properties at once.</p>
			<code>/* Single animation */
				<span>animation-delay</span>: ;</code>
			<ul>
				<li>animation-delay</li>
			</ul>
		</section>
		<section id="Animation-direction" class="main-section">
			<header>Animation-direction</header>
			<p>The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.</p>
			<p>It is often convenient to use the sorthand property animation to set all animation properties at once.</p>
			<code>/* Single animation */
				<span>animation-direction</span>: normal;
			<span>animation-direction</span>: reverse;
		<span>animation-direction</span>: alternate;
	<span>animation-direction</span>: alternate-reverse;</code>
			<ul>
				<li>animation-direction</li>
			</ul>
		</section>
		<section id="Animation-duration" class="main-section">
			<header>Animation-duration</header>
			<p>The animation-duration CSS property sets the length of time that an animation takes to complete one cycle.</p>
			<p>It is often convenient to use the sorthand property animation to set all animation properties at once.</p>
			<code>/* Single animation */
				<span>animation-duration</span>: 6s;
				<span>animation-duration</span>: 120ms;</code>
			<ul>
				<li>animation-duration</li>
			</ul>
		</section>
		<section id="Animation-fill-mode" class="main-section">
			<header>Animation-fill-mode</header>
			<p>The animation-fill-mode CSS property sets how a CSS animation applies styles to its target beefore and after its execution.</p>
			<p>It is often convenient to use the sorthand property animation to set all animation properties at once.</p>
			<code>/* Single animation */
				<span>animation-fill-mode</span>: none;
			<span>animation-fill-mode</span>: forwards;
		<span>animation-fill-mode</span>: backwards;
	<span>animation-fill-mode</span>: both;</code>
			<ul>
				<li>animation-fill-mode</li>
			</ul>
		</section>
	</div>
</main>
</body>
</html>
**Your code so far**
 ``` * {
			margin: 0;
			padding: 0;
		}
		body {
			padding: 1.5em;
		}
		#main-doc {
		}
		#navbar {
			border-right: 2px solid gray;
			height: 100%;
			position:  fixed;
      left: 0;
      top: 0;

		}
		#navbar header {
			font-size: 2rem;
			margin-top: 0;
			font-family: sans-serif;
			margin-bottom: .2em;
		}
		#navbar li {
			list-style: none;
			border-top: 2px solid gray;
			padding: 1em
		}
		#navbar li:last-of-type {
			border-bottom: 2px solid gray;
		}
		#navbar li a {
			text-decoration: none;
			font-size: 1.5rem;
			font-family: monospace;
			color: gray;


		}
		#navbar li:hover {
			background-color: lightblue;
		}
		.main-section ul {
			list-style: none;
			font-size: 12px;
			color: lightblue;
			margin-left: .5em;
			
		}
		.main-section{
			margin-left: 30em;
			font-family: sans-serif;
			padding-left: .4em;
		}
		.main-section header {
			font-weight: bold;
			margin-left: 8em;
			font-size: 1.5rem;
			font-family: sans-serif;
			margin-bottom: .2em;
			margin-top: 1em;
			font-style: italic;

		}
		p {
			line-height: 2em;
		}
		code {
			white-space: pre-line;
		}
		span {
			color: orange;
		}

		
		@media(max-width: 700px){
			#navbar {
				position: fixed;
				font-size: .5rem;
				max-width: 50%;
			}
			#main-doc {
					word-break: break-all;
				}
			.main-section {
				margin-left: 50%;
				font-size: .8rem;
			}
			#main-div {
			
			}
			.main-section header {
				margin-left: .10em;
			}
		}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Build a Technical Documentation Page

Link to the challenge:

It means you have completed 60% of the 5 final projects, or 3 of the 5

O! ok thanks. I thought i only got 60/100 for the code.

@ilenia Thank you but i don’t think it’s that what it means because it’s not giving me the completed sign (the thick sign). And i also didn’t get that Trophy

Projects are not graded

To submit you need to press submit on that modale