hi there!
you are just posting a link to the challenge which does not show us your code.
To post your code, please select it all and copy it here.
<!DOCTYPE html>
<main id="main-doc" id="main-section">
<html lang="en>"
<head><meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Sports Fans</title>
<section id="main-doc"><section class=".main-section">
<section class="main-section" id=".main-section" id="Introduction" for="intro">
<header id="intro">Introduction</header>
<article>
<p>this was a story</p>
<p>This is not a story</p>
<p>This is the never ending story</p>
<ul>
<li>CSS</li>
<li>HTML</li>
<li>Javascript</li>
</ul>
</article>
<code></code>
</ul>
</section>
<section id="Snooker" class=".main-section" class="main-section" for="snooker" >
<header id="snooker">Snooker</header>
<article>
<p>The following serves as a guideline</p>
<p>We assume that you already have a basic knowledge of the following:</p>
<ul>
<li>basic knowledge of HTML</li>
<li>basic knowledge of CSS</li>
</ul>
</article>
</section>
<li><section id="Football" class='.main-section' class="main-section" for="football" >
<header id="football">Football</header>
<article>
<p>HTML stands for HyperText Markup Language</p>
<p>It is the main requirement for web-design</p>
<p>You can learn it within a week</p>
<code>
<!Doctype html>
</code>
<code>
<metacharset = UTF-8>
</code>
</article>
<ul>
<li>Sport is the best distraction</li>
<li>Sport to ease the pain of dessertion</li>
<li>What is the next chapter in this decades chaos</li>
<li>The next generation will destroy</li>
<li>Lock the doors batten the hatches</li>
</ul>
</section>
<section id="Basketball" class= ".main-section" class="main-section for="basketball">
<header id="basketball">Basketball</header>
<article>
<p>Javascript was introduced to make our websites responsive</p>
<p>This helps one to easily navigate through the website</p>
<p>This is the main backbone of web development</p>
<code>
var x = 5;
print(x)
</code>
</article>
</section>
<section id="Tennis" class=".main-section" class="main-section" for="tennis">
<header id="tennis">Tennis</header>
<p></p>
<p></p>
<code></code>
</li>
</section>
<li><section id="Boxing" class=".main-section" class="main-section"for="boxing" >
<header id="boxing">Boxing</header>
<p></p>
<p></p>
<code></code>
</section></li>
<li><section id="Ice-Hockey" class=".main-section" class="main-section" for="ice-hockey" >
<header id="ice-hockey">Ice-Hockey</header>
<p></p>
<p></p>
<code></code>
</section></li>
<li><section id="Swimming" class=".main-section" class="main-section" for="swimming" >
<header id="swimming">Swimming</header>
<p></p>
<p></p>
<code></code>
</section></li>
<li><section id="Rugby" class=".main-section" class="main-section" for="rugby" >
<header id="rugby">Rugby</header></li>
<p></p>
<p></p>
<code></code>
</section></li>
<li><section id="Hurling" class=".main-section" class="main-section" for="hurling" >
<header id="hurling">Hurling</header>
<p></p>
<p></p>
<code></code>
</section>
</li>
<li><section id="Judo" class=".main-section"class="main-section" for="judo" >
<header id="judo">Judo</header>
<p></p>
<p></p>
<code></code>
</section>
</li>
</section id=".main-doc" class=".main-section">
</section>
</section>
<section id=".main-doc" class=".nav-link">
<main id="main-doc">
<div id="side-nav">
<nav id="navbar">
<ul>
<section id="Introduction">
<header id="Introduction" align="left">Introduction</header>
<a main class=".nav-link" id="Technical-doc">
<li><a class="nav-link" id=".nav-link"></a></li>
<li><a class="navbar"><a class=".nav-link" href="Snooker">Snooker</a></li>
<li><a class=".nav-link" href="Football">Football</a></li>
<li><a class=".nav-link" href="Basketball">Basketball</a></li>
<li><a class=".nav-link" href="Tennis">Tennis</a></li>
<li><a class=".nav-link" href="Boxing">Boxing</a></li>
<li><a class=".nav-link" href="Ice-Hockey"> Ice-Hockey</a></li>
<li><a class=".nav-link" href="Swimming">Swimming</a></li>
<li><a class=".nav-link" href="Rugby">Rugby</a></li>
<li><a class=".nav-link" href="Hurling">Hurling</a></li>
<li><a class=".nav-link" href="Judo">Judo</a></li>
</section id=".main-doc" class=".nav-link">
</a main class=".nav-link" id="Technical-doc">
</ul>
</section class=".main-section"></section id=".main-doc">
</navbar>
</div>
</nav>
</main>
</html>
</nav>
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Your arrangement of the html elements is incorrect.
For eg: the html tag should be after the DOCTYPE tag.
While the closing html tag should be the last line of code in your file.
Your head element should not include code that belongs in your body element.
And your body element is completely missing.
Please consider rewriting this code to follow standard practices.
Tell us what’s happening:
Hi, I am having trouble creating a media query in the styles page. I tried using one from the tutorial page. Can you help me out.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Judo">
<header id="judo">Judo</header>
<li><p>Judo people have to wear a Gi</p></li>
<li><p>Judo originates from Japan</p></li>
<p>Judo sparring should be practiced on mats</p>
</section>
<code><code>
<section class="main-section" id="Hurling">
<header id="hurling">Hurling</header>
<li><p>Hurling or hurling is a sport from Ireland</p></li>
<p>Hurly bats are made from ash<p>
<p>Hence the saying the clash of the ash</p>
<code><code>
</section>
<section class="main-section" id="Basketball">
<header id="basketball">Basketball</header>
<li><p>Basketball is mainly played in America</p></li>
<li><p>Micheal Jordan is the most famous NBA star</p></li>
<code><code>
</section>
<section class="main-section" id="Football">
<header id="football">Football</header>
<p>Leo Messi is the best footballer</p>
<p>Brazilians are known for their football skills</p>
<code><code>
</section>
<section class="main-section" id="Ice-Hockey">
<header id="ice-hockey">Ice-Hockey</header>
<code><code>
</section>
<div id="side-nav">
<nav id="navbar">
<header>Sports</header>
<a class="nav-link" href="#Judo">Judo</a>
<a class="nav-link" href="#Hurling">Hurling</a>
<a class="nav-link" href="#Basketball">Basketball</a>
<a class="nav-link" href="#Football">Football</a>
<a class="nav-link" href="#Ice-Hockey">Ice-Hockey</a>
<script src="index.js"></script>
</body>
</html>
/* file: styles.css */
@media (max-width: 480px) {
p {
font-size: 16px;
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
body{
font-size : 35px;
font-family : sans-serif;
}
}
.container{
height : 100vh;
}
@media (min-width : 480px) (max-width : 768px) {
.container{
// Your code here
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
Hello @the_one_1988 !
This link will show how to use the media query with both the min-width and max-width.
It has a very good example, too.
Good luck!
Tell us what’s happening:
Can someone please give a hint on how to pass the media query for this tech. documentation page
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Judo">
<header id="judo">Judo</header>
<li><p>Judo people have to wear a Gi</p></li>
<li><p>Judo originates from Japan</p></li>
<p>Judo sparring should be practiced on mats</p>
</section>
<code><code>
<section class="main-section" id="Hurling">
<header id="hurling">Hurling</header>
<li><p>Hurling or hurling is a sport from Ireland</p></li>
<p>Hurly bats are made from ash<p>
<p>Hence the saying the clash of the ash</p>
<code><code>
</section>
<section class="main-section" id="Basketball">
<header id="basketball">Basketball</header>
<li><p>Basketball is mainly played in America</p></li>
<li><p>Micheal Jordan is the most famous NBA star</p></li>
<code><code>
</section>
<section class="main-section" id="Football">
<header id="football">Football</header>
<p>Leo Messi is the best footballer</p>
<p>Brazilians are known for their football skills</p>
<code><code>
</section>
<section class="main-section" id="Ice-Hockey">
<header id="ice-hockey">Ice-Hockey</header>
<code><code>
</section>
<div id="side-nav">
<nav id="navbar">
<header>Sports</header>
<a class="nav-link" href="#Judo">Judo</a>
<a class="nav-link" href="#Hurling">Hurling</a>
<a class="nav-link" href="#Basketball">Basketball</a>
<a class="nav-link" href="#Football">Football</a>
<a class="nav-link" href="#Ice-Hockey">Ice-Hockey</a>
<script src="index.js"></script>
</body>
</html>
/* file: styles.css */
section {
background-color: #8449;
font-size: 18px;
font-family: sans-serif;
}
@media (max-width: 500px) {
body {
background-color: #87ceeb;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
The CSS file you need to link to is styles.css
hi Thomas, you do not need to keep creating new topics for the same project/challenge.
Just one topic is sufficient.
If you need more help just reply to the topic you already have with the new questions you have.
I’ve merged the duplicate topics created into one.
1 Like
Thanks man. That’s just the tweak I needed to complete the project!