I know there’s still a lot I could do to the Nav Menu, but I’m curious why it doesn’t pass the automated testing as it is?
<div id="backColor-container">
<div id="head-container">
<nav id="navbar">
<header>
<h1 id="title">Framing,<br/>Finishing<br/>& Functionaly</h1><!-- Write your comments here -->
<p id="description">
how to build a website<br/>like a house
</p>
</header>
<ul>
<a class="nav-link" href="#building_Codes" rel="internal"><li>building Codes</li></a>
<a class="nav-link" href="#WATER,_WASTE_&_ELECTRICITY" rel="internal"><li>Water, Waste & Electricity</li></a>
<a class="nav-link" href="#Framing" rel="internal"><li>Framing</li></a>
<a class="nav-link" href="#Finishing" rel="internal"><li>Finishing</li></a>
<a class="nav-link" href="#Functionaly" rel="internal"><li>Functionaly</li></a>
</ul>
</nav>
</div><!-- id="id="head-container" on line 2-->
<main id="main-doc">
<section class="main-section" id="building_Codes">
<header>building Codes</header>
<article>
</main>
<footer>
<a href="#Codes" rel="link">Copyright 2018, TurtleWolfe.com</a>
</footer>
</div><!-- id="id="backColor-container" on line 1-->
CSS
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
color: yellow;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
height: 100%;
position: relative;
background: url(https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/800px-Joy_Oil_gas_station_blueprints.jpg?raw=true) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a {
color: yellow;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
}
#backColor-container {
background-color: rgba(0, 0, 100, 0.6);
}
#head-container {
display: flex;
flex-direction: reverse;
}
#navbar {
width: 100%;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
}/* navbar */
header {
width: 70%;
font-size: 2.5em;
text-align: right;
float: right;
margin-right: 5%;
}
#main-doc{
margin-top: 20%;
margin-left:8%;
width: 55%;
border: double #32a1ce;
padding: 4%;
}
section{
margin-top: 25px;
padding: 2%;
border: 2mm ridge rgb(333, 333, 333, .6);
background-color: #AD66D5;
font-size: 1.3em;
text-align: justify;
-webkit-box-shadow: inset 10px 10px 72px 3px rgba(0,0,0,0.6);
-moz-box-shadow: inset 10px 10px 72px 3px rgba(0,0,0,0.6);
box-shadow: inset 10px 10px 72px 3px rgba(0,0,0,0.6);
background-color: #1565C0;
font: 'Open Sans';
}
code {
background-color: #1565C0;
font: Inconsolata;
color: white;
}
@media (max-width: 1250px) {
/* @media (width <= 30em) {....} */
section{
margin-top: 15px;
border: 1mm ridge rgb(333, 333, 333, .6);
}
} /* end of media query 1250px */
footer {
position: fixed;
bottom: 0;
width: 100%;
background: url(https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/800px-Joy_Oil_gas_station_blueprints.jpg?raw=true) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Chrome
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page
