Hello all,
I’ve working on my code for some time now and I’m feeling a little bit frustrated. The technical documentation project has but stock. Is it ok to paste my codes here?
Anyway, 2 lines have been holding me up:
*Your Technical Documentation project should use at least one media query.
This is my response:
@media only screen and (min-width: 350px) and (max-width: 1199px) { #navbar {
position: left;
}
}
**Your #navbar should have exactly one header element within it.
And here’s my response:
<nav id="navbar">
<header>Hipo-Tx leather products are designed for the 'man' in men</header>
<a href="#Hipo-Tx_leather_products" class="nav-link">Hipo-Tx leather products</a>
</nav>
I know you may need more info to help but would need to be sure I’m not violating any rules regarding not sharing project codes as stated as above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>technical documentation</title>
<link rel="stylesheet" href="styles.css">
<style>
* {
box-sizing: border-box;
}
body {
background-color: linen;
border: 2px solid green;
padding: 5px;
}
@media only screen and (max-width: 1199px) and (min-width: 769px) { #navbar {
position: relative;
}
}
@media only screen and (min-width: 768px) {
body, #navbar {background: violet;
position: relative;
}
}
</style>
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Hipo-Tx_leather_products">
<header>
Hipo-Tx leather products
</header>
<p>Welcome to Hipo-TyreX Men's Collectibles</p>
<p>Let us style you in comfort</p>
<code></code>
<ul>
<li>Styles</li>
</ul>
<nav id="navbar">
<header>Hipo-Tx leather products are designed for the 'man' in men</header>
<a href="#Hipo-Tx_leather_products" class="nav-link">Hipo-Tx leather products</a>
</nav>
</section>
<section class="main-section" id="Bags_&_Wallets">
<header>
Bags & Wallets
</header>
<p>Bespoke <b>Hipo-Tx leather bags & Wallet</b> will always stand-out even in a
<em>cashless</em> world full of smart
technologies. </p>
<p>Comfort with zero effort like a breeze</p>
<code></code>
<ul>
<li>Carry-on accessories</li>
</ul>
<nav id="navbar">
<header>Hipo-Tx leather bags & wallets are desinged for the sophisticated yet simple urban lifestyle, keeping your belongings safe in a stylish and comfortable fashion.</header>
<a href="#Bags_&_Wallets" class="nav-link">Bags & Wallets</a>
</nav>
</section>
<section class="main-section" id="Signate_Rings">
<header>
Signate Rings
</header>
<p>Signate Rings are <b>stand-out styles</b> <br>for men with purpose, </p>
<p>authority <br>and a sense of self worth</p>
<code></code>
<ul>
<li>Complimentary fashion</li>
</ul>
<nav id="navbar">
<header>Signate rings fashion statement, express confidence & style</header>
<a href="#Signate_Rings" class="nav-link">Signate Rings </a>
</nav>
</section>
<section class="main-section" id="Timeless_Watches">
<header>
Timeless Watches
</header>
<p>There will always be time to check<br> <em>time</em> </p>
<p>for each activity</p>
<code></code>
<ul>
<li>Complimentary fashion</li>
</ul>
<nav id="navbar">
<header>For as long as man shall walk the earth, he will always need an instrument to track of time. Timeless watches that speak the language of time keeping, silently and with grace.</header>
<a href="#Timeless_Watches" class="nav-link">Timeless Watches</a>
</nav>
</section>
<section class="main-section" id="Sun_glasses_&_Chains">
<header>
Sun glasses & Chains
</header>
<p>Elegant protection from the Sun in style</p>
<p>Styling neck & hand chains</p>
<code></code>
<ul>
<li>Functional fashion</li>
</ul>
<nav id="navbar">
<header>The world is getting hotter and more Sunny with more <abbr title="ultra Violet">UV</abbr>rays reaching us than ever before. Sun glasses are a wonderful defence against such dangers.</header>
<a href="#Sun_glasses_&_Chains" class="nav-link">Sun glasses & Chains</a>
</nav>
</section>
</main>
</body>
</html>
These are my worries
These are code thus far and 2 points are still failing me with regards to the user stories:
Your #navbar should have exactly one header element within it. - i don’t understand this one
Your Technical Documentation project should use at least one media query. - My code already contains this, so i don’t understand this as well
I’m pretty sure the tests won’t pass if you put the media queries inside style tags in the HTML. I think the tests want the media queries to be in the styles.css editor.
If you use a style element you have to remove the link element (pretty sure it is either or). But I’d suggest using the styles.css tab for the CSS and not a style element.
As for the nav test. You have added multiple nav elements all with the same id. You can’t use the same id more than one time. You should have one nav element with the id navbar and all the a elements with the class nav-link should be inside that one nav element. It is meant for page navigation. Look at the example project.
Hi, I’ve been starting on the general structure of my Technical Documentation project, but I’m not sure what is meant by a ‘header’ element in the instructions/tests. I tried putting h1 elements for the ‘header’ in each case but still failed the test. What could I be missing please?
Hi!
Welcome to the forum! Please make a new topic for your question.
Click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
