Tell us what’s happening:
When ever I add the code element to fulfill my the challenge is messes up my web page.
Your code so far
WARNING
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tech Documentation Page</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="background-img">
<nav id="navbar">
<header><div class="title"><i>Top Five NBA Players of All Time</div></header>
<a class="nav-link" href="#Michael_Jordan"><code>Michael Jordan</code></a>
<br>
<a class="nav-link" href="#LeBron_James"><code>LeBron James</code></a>
<br>
<a class="nav-link" href="#Kareem_Abdul-Jabbar"><code>Kareem Abdul-Jabbar</code></a>
<br>
<a class="nav-link" href="#Erving_Magic_Johnson"><code>Erving Magic Johnson</code></a>
<br>
<a class="nav-link" href="#Kobe_Bryant"><code>Kobe Bryant</code></a></i>
</nav>
<main id="main-doc">
<section id="Michael_Jordan" class="main-section">
<header>Michael Jordan</header>
<p class="career"> Michael Jordans Playing career lasted over 15 seasons in the NBA with 2 retirements in between.</p>
<p>
<ul>
<li><span class="accolades">Notable Accolades</span></li>
<ul>
<li>Six-time Finals MVP</li>
<li>Five-time Regular Season MVP</li>
<li>Ten-time All-NBA First Team selections</li>
<li>Nine-time All-Defensive Team selections</li>
</ul>
</ul>
</p>
</section>
<img id="jordan-photo" src="https://e00-marca.uecdn.es/assets/multimedia/imagenes/2022/02/17/16451255007747.jpg" />
<div class="break">
<section id="LeBron_James" class="main-section">
<header>LeBron James</header>
<p class="career">LeBron James has current played for 19 seasons in the NBA starting in 2003 and is still playing today.</p>
<p>
<ul>
<li><span class="accolades">Notable Accolades</span></li>
<ul>
<li>Four time Finals MVP</li>
<li>Four time Regular Season MVP</li>
<li>Thirteen-time All-NBA First Team selections</li>
<li>Six-time All-Defensive Team selections</li>
</ul>
</ul>
</p>
</section>
<img id="lebron-photo" src="https://library.sportingnews.com/2021-12/lebron-james-los-angeles-lakers_kej02uf93prj18vqxkh8dfnqk.png"/>
<section id="Kareem_Abdul-Jabbar" class="main-section">
<header>Kareem Abdul-Jabbar</header>
<p class="career">Kareem Abdul-Jabbar played for 2 season in the NBA.</p>
<p>
<ul>
<li>Notable Accolades</li>
<ul>
<li>Two-time Finals MVP</li>
<li>Six-time Regular Season MVP</li>
<li>NBA all time leading point scorer</li>
<li>Eleven-time All-Defensive Team selections</li>
</ul>
</ul>
</p>
</section>
<img id="kareem-photo" src="http://a.espncdn.com/photo/2009/0528/nba_jabbarhooks_800.jpg"/>
<section id="Erving_Magic_Johnson"class="main-section">
<header>Erving Magic Johnson</header>
<p class="career"> Erving "Magic" Johnson played for 13 seasons in the NBA.</p>
<p>
<ul>
<li><span class="accolades">Notable Accolades</span></li>
<ul>
<li>Three-time Finals MVP</li>
<li>Three-time Regular Season MVP</li>
<li>Nine-time All-NBA First Team selections</li>
<li>Four-time NBA assist leader</li>
</ul>
</ul>
</p>
</section>
<img id="magic-photo" src="https://library.sportingnews.com/2022-05/nba-plain--2f937cdd-88c7-4988-b48c-b0d5af47e7a4.png"/>
<section id="Kobe_Bryant" class="main-section">
<header>Kobe Bryant</header>
<p class="career">Kobe Bryant played for 20 seasons in the NBA, starting in 1996 and ending in 2016;</p>
<p>
<ul>
<li><span class="accolades">Notable Accolades</span></li>
<ul>
<li>Two-time Finals MVP</li>
<li>One Regular Season MVP</li>
<li>Eleven-time All-NBA First Team selections</li>
<li>Twelve-time All-Defensive Team selections</li>
</ul>
</ul>
</p>
</section>
<img id="kobe-photo" src="https://c4.wallpaperflare.com/wallpaper/963/985/309/kobe-bryant-wallpaper-preview.jpg"/>
</main>
</body>
</html>
html{
width: 1505px;
max-width: 1505px;
overflow-x: hidden;
}
#navbar{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 225px;
border: 5px solid black;
}
.rank{
font-size: 40px;
}
.main-section{
padding: 30px 250px;
color: white;
text-align: center;
position: relative;
left: 100px;
}
li{
font-size: 25px;
padding: 15px
}
header{
font-size: 30px;
text-decoration: underline;
}
#navbar header{
font-size: 30px;
text-align: center;
border-bottom: 10px solid black;
}
code{
display: block;
color: black;
font-size: 25px;
padding: 15px;
}
code:hover{
color: red;
font-weight: bold;
}
#Michael_Jordan{
top: -20;
}
.career{
font-size: 30px
}
#jordan-photo{
z-index: -1;
position: absolute;
top: 0;
left: 14.6rem;
height: 85%;
border-bottom: 5px solid white;
border-top: 5px solid black;
display: block;
max-width: 1280px;
max-height: 800px;
width: 100%;
filter: brightness(60%);
}
.accolades{
font-size: 30px
}
#lebron-photo{
z-index: -1;
position: absolute;
top: 480px;
left: 14.6rem;
height: 85%;
border-bottom: 5px solid white;
border-top: 10px solid white;
display: block;
max-width: 1280px;
max-height: 800px;
width: 100%;
filter: brightness(60%)
}
#Lebron_James{
top:-70;
}
#kareem-photo{
z-index: -1;
position: absolute;
top: 960px;
left: 14.6rem;
height: 100%;
border-bottom: 5px solid red;
border-top: 10px solid white;
display: block;
max-width: 1280px;
max-height: 800px;
width: 100%;
filter: brightness(60%);
overflow: hidden;
}
#Kareem_Abdul-Jabbar{
top: -100;
padding-bottom: 0px;
}
#magic-photo{
z-index: -1;
position: absolute;
top: 1440px;
left: 14.6rem;
height: 85%;
border-bottom: 5px solid white;
border-top: 10px solid white;
display: block;
max-width: 1280px;
max-height: 800px;
width: 100%;
filter: brightness(60%)
}
#kobe-photo{
z-index: -1;
position: absolute;
top: 2020px;
left: 14.6rem;
height: 85%;
border-top: 10px solid white;
display: block;
max-width: 1280px;
max-height: 800px;
width: 100%;
filter: brightness(60%);
border-bottom: 30px solid black;
}
#Kobe_Bryant{
top: 50;
}
#Erving_Magic_Johnson{
top: -100;
}
@media (max-width: 800px){
width: 600px
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Safari/537.36
Challenge: Build a Technical Documentation Page
Link to the challenge: