Tribute Page - Build a Tribute Page

Tell us what’s happening:
My Tribute page is not displaying some elements that are included in the page. Is there a limit on the page size or something. because the editor reads everything but doesn’t display the top posrtion.

PS: I have done most of my work on VS CODE, so is that a problem?

Your code so far

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>
    <div>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="index.css" rel="stylesheet" type="text/css"/>
    </div>
    <!-- google fonts under here -->
    <div>
      <link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@1,500&family=Crimson+Text:ital@1&family=Lobster&family=Roboto+Serif:opsz,wght@8..144,200&family=Tangerine:wght@700&display=swap" rel="stylesheet">
    </div>
    <!-- google fonts above here -->
  </head>

  <!-- codes for navbar starts here-->
  <body>
    <nav class="nav-bar">
      <div class="nav-left">
      <div id="nav-left-links">
      <li><a href="#ti-header">THE INTERNATIONALS</a></li>
      <li><a href="https://www.dota2.com/home" target="_blank">ABOUT</a></li>
      <li><a href="https://www.dota2.com/esports/summermajor22/watch/0/0/series" target="_blank">DOTA TEAMS</a></li>
      <li><a href="https://hawk.live/" target="_blank">DOTA LIVE</a></li>
      </div>
      <div class="logo-div"><a href="https://www.dota2.com/home" target="_blank"><img class="dotaLogo" src="https://i.pinimg.com/originals/8a/8b/50/8a8b50da2bc4afa933718061fe291520.jpg" alt="dota_logo" class="dotaLogo"/></a></div>
      </div>
      <div class="nav-right">
        <a href="https://www.dota2.com/newsentry/3190249489765271734" target="_blank"><img src="https://www.insidesport.in/wp-content/uploads/2021/07/Screenshot-2021-07-05-173505.jpg" alt="dota2Image" class="rightNavImg"></a>
        <div id="socials">
        <a id="socio-logo" href="https://www.instagram.com/dota2/?hl=en" target="_blank"><ion-icon name="logo-instagram"></ion-icon></a>
        <a id="socio-logo"href="https://www.youtube.com/user/dota2" target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
        <a id="socio-logo"href="https://www.facebook.com/dota2/" target="_blank"><ion-icon name="logo-facebook"></ion-icon></a>
      </div>
      </div>  
      </nav>
      <!-- codes for navbar ends here-->
     
    
    <!--Main Body Starts Here-->
    <div id="main-seg">
    <main id="main">
      <h1 id="title">DOTA 2</h1>
      <div id="img-div">
      <img id="image" src="http://media.steampowered.com/apps/dota2/images/thebetaisover/thebetaisover_fb_image.png"/>

      <figcaption id="img-caption">An Illustration of Dota 2</figcaption>
      </div><br/>
      <p id="tribute-info"><span class="first-letter">D</span>efence of the Ancients or DOTA </a> for short is an online multiplayer-game played across the globe by many people and is a very competetive <a href="#moba">MOBA*</a> game with constantly changing <a href="#meta">meta*</a>. As exciting as it sounds it is being constantly under development causing many bugs and such issues. The ever-growing community of DOTA2 is now on a collapse compared to the previous decade as it is constantly plagued by <a href="#smurf">smurfs*</a> and account-buyers which makes the game a very bad experience for newer players for the MOBA genre.</p>
      <p id="tribute-link"><a href="https://dota2.fandom.com/wiki/Dota_2_Wiki" target="_blank">Learn more about the game</a></p>
      <!--The Beta Is Over Image Section Ends Here-->
      <!--The Internationals Section Starts Here-->
      <header id="ti-header">Dota 2: The Internationals</header>
      <a href="https://www.dota2.com/newsentry/3190249489765271734" target="_blank"><img src="https://www.rappler.com/tachyon/2022/05/singapore-dota-2.jpg" alt="dota_2_ti_2022" class="ti-img"></a>
      <p id="ti-text">
        To ensure that enough Defense of the Ancients players would take up Dota 2 and to promote the game to a new audience, Valve invited sixteen accomplished Defense of the Ancients esports teams to compete at a Dota 2-specific tournament at <a href="#gamescom">Gamescom*</a> in August 2011, which later became an annually held event known as The International. The winner of each Ti is awarded the <a href="#aegis">Aegis of the Champions*</a>.
      </p>
      <!--The Internationals Main Section ends here-->
      <!--Video Frame Starts Here-->
      <div class="vid-div">
      <h2 id="vid-head">The Most Iconic moments of Dota 2 The International History</h2>
      <iframe width="720" height="430px" src="https://www.youtube.com/embed/3k-cTvUwioc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>      <h3 id="ti-winners">All Time Dota 2 TI Winners</h3>
      <div class="winner-list">
        <ol>
          <li><a href="https://dota2.fandom.com/wiki/Natus_Vincere" target="_blank">Natus Vincere</a> 2011</li>
          <li><a href="https://dota2.fandom.com/wiki/Invictus_Gaming" target="_blank">Invictus Gaming</a> 2012</li>
          <li><a href="https://dota2.fandom.com/wiki/Alliance" target="_blank">Alliance</a> 2013</li>
          <li><a href="https://dota2.fandom.com/wiki/Newbee" target="_blank">Newbee</a> 2014</li>
          <li><a href="https://dota2.fandom.com/wiki/Evil_Geniuses" target="_blank">Evil Geniuses</a> 2015</li>
          <li><a href="https://dota2.fandom.com/wiki/Wings_Gaming" target="_blank">Wings Gaming</a> 2016</li>
          <li><a href="https://dota2.fandom.com/wiki/Team_Liquid" target="_blank">Team Liquid</a> 2017</li>
          <li><a href="https://dota2.fandom.com/wiki/OG" target="_blank">OG</a> 2018</li>
          <li><a href="https://dota2.fandom.com/wiki/OG" target="_blank">OG</a> 2018</li>
        
          <li><a>Cancelled</a> 2020</li>
          <li><a href="https://dota2.fandom.com/wiki/Team_Spirit" target="_blank">Team Spirit</a> 2021</li>
          <li><a>To Be Decided</a> October 8-30</li>
        </ol>
      </div>

      <div id="quote-div">
        <p id="quote">I never lose, either I WIN or I LEARN</p><br/>
        <p id="player-name"><a href="https://liquipedia.net/dota2/Arteezy">~ARTEEZY</a></p>
      </div>

      <div class="notes" id="notes-div">
        <h2 class="notes-header">#Notes</h2>
        <img src="https://media.springernature.com/lw685/springer-static/image/chp%3A10.1007%2F978-3-030-24337-1_2/MediaObjects/486795_1_En_2_Fig1_HTML.png" alt="Dota_2_map" id="notes-img">
        <ul class="btm-notes">
          <li><a id="moba">Moba:</a>Multiplayer Online Battle Arena</li>
          <li><a id="meta">Meta:</a>Metagaming is a broad term usually used to define any strategy, action or method used in a game which transcends a prescribed ruleset, uses external factors to affect the game, or goes beyond the supposed limits or environment set by the game.</li>
          <img src="https://gaming4.cash/wp-content/uploads/2018/08/joe-8.png" alt="smurf_img" id="notes-img">
          <li><a id="smurf">Smurf:</a>The term 'smurf' is used in gaming to describe a player in an online game that creates a new account to play against lower-ranked players, however, it can be used as an all-around term for describing a player who uses an alternate account or multiple accounts.</li>
          <img src="https://i0.wp.com/www.nintendo-town.fr/wp-content/uploads/2016/07/gamescom.jpg?fit=2048,1185&ssl=1" alt="gamescom_img" id="notes-img">
          <li><a id="gamescom">Gamescom:</a>Gamescom (stylized as gamescom) is a trade fair for video games held annually at the Koelnmesse in Cologne, North Rhine-Westphalia, Germany. Since 2018, it has been organised by game Verband der deutschen Games-Branche (English: Association of the German video game industry); and before that, by the Bundesverband Interaktive Unterhaltungssoftware (BIU).It supersedes Games Convention, held in Leipzig, Saxony, Germany. Gamescom is used by many video game developers to exhibit upcoming games and game-related hardware.</li>
          <img id="notes-img" alt="aegis_of_champions" src="https://games.mxdwn.com/wp-content/uploads/2017/03/aegis_front.jpg" />
          <li><a id="aegis">Aegis of the Champions:</a>The Aegis of Champions is a physical trophy that is awarded to the winners of The International tournament. It was forged out of bronze and silver by Weta Workshop in 2012. The reverse side of the trophy is engraved with the names and handles of each player on the winning team of The International each year.</li>
        </ul>
      </div>
      <footer>A Tribute To my All-Time Favourite Game</footer>

    </main>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicon/ionicons.js"></script>
  </body>
  </div>
</html>


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

There shouldn’t be, it is literally the same as the other HTML previewer.

No it shouldn’t be.

I don’t see it clips anything on my end. Perhaps you can provide a screenshot so that we can help you out?

Hi!
I’d advise putting your HTML in this HTML validator. I’m seeing some syntax mistakes that could be affecting how your elements display.

Also this will not affect the preview but you should not have div elements in your head element.

If you need any help understanding the errors I am happy to explain. :slight_smile:

Im not sure exactly what is te bodyhe problem. I noticed you have the main under the body