Top_Games

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar">
  <header> My Top Games</header>
  <ul>
    <a class="nav-link" href="#max_payne" rel="internal">
      <li>Max Payne</li>
    </a>
    <a class="nav-link" href="#call_of_duty_2" rel="internal">
      <li>Call Of Duty 2</li>
    </a>
    <a class="nav-link" href="#need_for_speed_porsche_unleashed" rel="internal">
      <li>Need For Speed Porsche Unleashed</li>
    </a>
    <a class="nav-link" href="#counter_strike_1.6" rel="internal">
      <li>Counter Strike 1.6</li>
    </a>
    <a class="nav-link" href="#age_of_empires_2" rel="internal">
      <li>Age Of Empires 2</li>
    </a>
    <a class="nav-link" href="#need_for_speed_3" rel="internal">
      <li>Need For Speed 3</li>
    </a>
    <a class="nav-link" href="#crysis" rel="internal">
      <li>Crysis</li>
    </a>
    <a class="nav-link" href="#need_for_speed_most_wanted" rel="internal">
      <li>Need For Speed Most Wanted</li>
    </a>
    <a class="nav-link" href="#settlers_3" rel="internal">
      <li>Settlers 3</li>
    </a>
    <a class="nav-link" href="#need_for_speed_underground_2" rel="internal">
      <li>Need For Speed Underground 2</li>
    </a>
    <a class="nav-link" href="#far_cry_2" rel="internal">
      <li>Far Cry 2</li>
    </a>
  </ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="max_payne">
    <header id="max_payne">Max Payne</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Max_Payne_logo.jpg/250px-Max_Payne_logo.jpg" />
    <article>
      <p>Max Payne is a third-person shooter video game series developed by Remedy Entertainment (Max Payne and Max Payne 2) and Rockstar Studios (Max Payne 3). The series is named after its protagonist, Max Payne, a New York City police detective turned
        vigilante after his family had been murdered by drug dealers. The series' first and second installments were written by Sam Lake, while Max Payne 3 was primarily written by Rockstar Games' Dan Houser.</p>
      <code>This is not the code</code>
      <ul>
        <li>The franchise is notable for its use of "bullet time" in action sequences, as well as being positively received by critics, although Max Payne 2's sales were considered underwhelming.</li>
        <li>As of 2011, the Max Payne franchise has sold over 7.5 million copies. The film rendition received negative reviews but was commercially successful.</li>
      </ul>

      <iframe width="560" height="315" src="https://www.youtube.com/embed/M2ib6yAbAsA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>Renegade DEA agent and former NYPD officer Max Payne attempts to hunt down the ones responsible for murdering his wife and child, as well as framing him for the murder of his partner, Alex Balder. As the story unfolds he gains a number of "allies",
        including a Russian mafia gangster, called Vladimir Lem, and Mona Sax, a female vigilante who is out to avenge the death of her twin sister, Lisa, and manages to bring down the ring-leaders in a major drug-operation for a narcotic called V or
        Valkyr—after the mythological figures in Norse mythology.</p>
      </artice>
  </section>

  <section class="main-section" id="call_of_duty_2">
    <header>Call Of Duty 2</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/d/d1/Call_of_Duty_2_Box.jpg" />
    <article>
      <p>Call of Duty 2 is a first-person shooter video game developed by Infinity Ward and published by Konami in Japan and Activision in the rest of the world. It is the second installment of the Call of Duty series. Announced by Activision on April 7,
        2005, the game was released on October 25, 2005, for Microsoft Windows and on November 22, 2005,[2] as a launch title for the Xbox 360. Other versions were eventually released for OS X, mobile phones, and Pocket PCs.</p>
      <code>This is not the code</code>
      <ul>
        <li>Call of Duty 2 is a first-person shooter that has a single-player story mode and a multiplayer mode. The player takes on the roles of several Allied protagonists in specific missions during World War II. The player can crouch and lie prone, and
          is able to scale low walls and other obstacles.</li>
        <li>The player has a set of binoculars. While it is generally ignored during infantry-limited gameplay, it is vital to the long-range use of the Crusader tanks and one of the missions in which the player must direct artillery fire to defend a town.</li>
      </ul>

      <iframe width="560" height="315" src="https://www.youtube.com/embed/UMaOIhzCi-4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>The game is set during World War II and the campaign mode is experienced through the perspectives of four soldiers: one in the Red Army, one in the United States Army, and two in the British Army. It contains four individual campaigns, split into three stories, with a total of 27 missions. Many features were added and changed from the original Call of Duty, notably regenerating health and an icon that indicates a nearby grenade about to explode.</p>
      </artice>
  </section>

  <section class="main-section" id="need_for_speed_porsche_unleashed">
    <header>Need For Speed Porsche Unleashed</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/thumb/a/af/Need_for_Speed_-_Porsche_Unleashed_Coverart.png/220px-Need_for_Speed_-_Porsche_Unleashed_Coverart.png" />
    <article>
      <p>Need for Speed: Porsche Unleashed, released as Need for Speed: Porsche 2000 in Europe, is a racing video game released in 2000. It is the fifth installment in the Need for Speed series. Unlike other NFS titles, Porsche Unleashed centers on racing
        Porsche sports cars, with models ranging from 1950 to 2000.</p>
      <code>This is not the code</code>
      <ul>
        <li>Need for Speed: Porsche Unleashed gives the player the opportunity to race Porsche cars throughout a range of tracks located in Europe. The cars were studied in detail in terms of driving mechanics in order to create a realistic simulation.</li>
        <li>The premise of the game remains largely the same compared to previous games in the series: driving and racing sports cars. However, the game only offers Porsches. The handling of the cars was improved, and the player can customize their cars drawing from an in-depth catalog of different Porsche as well as aftermarket parts.</li>
      </ul>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/45f11Bqb83c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>Although the game retains the police chases from Hot Pursuit and High Stakes, the feature is relatively minor and is only seen in the Factory Driver mode.</p>
      </artice>
  </section>

  <section class="main-section" id="counter_strike_1.6">
    <header>Counter Strike 1.6</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Counter-Strike_Box.jpg/220px-Counter-Strike_Box.jpg" />
    <article>
      <p>Counter-Strike (also known as Half-Life: Counter-Strike) is a first-person shooter video game developed by Valve Corporation. It was initially developed and released as a Half-Life modification by Minh "Gooseman" Le and Jess Cliffe in 1999, before Le and Cliffe were hired and the game's intellectual property acquired.</p>
      <code>This is not the code</code>
      <ul>
        <li>The terrorists must carry a bomb, plant it on one of the designated spots and protect it from being disarmed by the counter-terrorists before it explodes to win. The counter-terrorists win if the time runs out with no conclusion.</li>
        <li>A player can choose to play as one of eight different default character models (four for each side, although Counter-Strike: Condition Zero added two extra models, bringing the total to ten). Players are generally given a few seconds before the
          round begins (known as "freeze time") to prepare and buy equipment, during which they cannot attack or move.</li>
      </ul>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/1FWhdBXJ_ts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>Set in various locations around the globe, players assume the roles of members of combating teams of the governmental counter-terrorist forces and various terrorist militants opposing them. During each round of gameplay, the two teams are tasked with defeating the other by the means of either achieving the map's objectives, or else eliminating all of the enemy combatants. Each player may customize their arsenal of weapons and accessories at the beginning of every match, with currency
        being earned after the end of each round.</p>
      </artice>
  </section>

  <section class="main-section" id="age_of_empires_2">
    <header>Age Of Empires 2</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/5/56/Age_of_Empires_II_-_The_Age_of_Kings_Coverart.png" />
    <article>
      <p>Age of Empires II: The Age of Kings is a real-time strategy video game developed by Ensemble Studios and published by Microsoft. Released in 1999 for Microsoft Windows and Macintosh, it is the second game in the Age of Empires series. An expansion, The Conquerors, was released in 2000.</p>
      <code>This is not the code</code>
      <ul>
        <li>The Age of Kings is set in the Middle Ages and contains thirteen playable civilizations. Players aim to gather resources, which they use to build towns, create armies, and defeat their enemies. There are five historically based campaigns, which constrict the player to specialized and story-backed conditions.</li>
        <li>The Age of Kings supports multiplayer over the Internet, or via a local area network (LAN). Up to eight players can take part in one game, with all of the single player game modes available.</li>
      </ul>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/_rS_n3JVTPE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>The Age of Kings focuses on building towns, gathering resources, creating armies and ultimately conquering opponents by destroying their units and buildings. Players conquer rival towns and empires as they advance one of 13 civilizations through
        four "Ages": the Dark Age, the Feudal Age, the Castle Age (being the High Middle Ages), and the Imperial Age, reminiscent of the Renaissance—a 1000-year timeframe. Advancing to a new Age unlocks new units, structures, and technologies, but players
        must first build certain buildings from their current age and then pay a sum of resources (typically food and gold).</p>
      </artice>
  </section>

  <section class="main-section" id="need_for_speed_3">
    <header>Need for Speed 3</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a6/NFS_III_Hot_Pursuit_%28PC%2C_US%29_cover_art.jpg/220px-NFS_III_Hot_Pursuit_%28PC%2C_US%29_cover_art.jpg" />
    <article>
      <p>Need for Speed III: Hot Pursuit, released as Need for Speed: Hot Pursuit in Europe, is a racing video game released in 1998. It is the third major installment in the Need for Speed series, significantly incorporating police pursuits as a major part
        of gameplay.</p>
      <ul>
        <li>Hot Pursuit remains focused in racing using exotic sports cars, but features races that primarily take place in locations within North America, including varied settings and climates.</li>
        <li>In addition, police AI is significantly improved over its predecessor, utilizing several tactics to stop both the player and opponent.</li>
      </ul>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/N6kPh02GfOk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>With police pursuits reintegrated into the game, Hot Pursuit's gameplay now consists of two categories. The first encompasses standard racing, as it has been in its predecessors, The Need for Speed and Need for Speed II, in which the player is allowed
        to race against one (including split-screen races) or seven other racers in normal circuit racers, knockouts, or tournaments (which allow the player to unlock bonus vehicles and a bonus track).</p>
      </artice>
  </section>

  <section class="main-section" id="crysis">
    <header>Crysis</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e9/Crysis_Cover.jpg/220px-Crysis_Cover.jpg" />
    <article>
      <p>Crysis is a first-person shooter video game developed by Crytek and published by Electronic Arts for Microsoft Windows and released in November 2007.</p>
      <ul>
        <li>The game is based in a future where a massive ancient alien-built structure has been discovered buried inside a mountain in the fictional Lingshan Islands, near the coast of the East Philippines.</li>
        <li>The single-player campaign has the player assume the role of U.S. Army Delta Force soldier Jake Dunn, referred to in-game by his callsign, Nomad. Nomad is armed with various futuristic weapons and equipment, most notably a "Nanosuit" which was
          inspired by the real-life military concept of Future Force Warrior.</li>
      </ul>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/xvfVmlVcnJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>The player controls a Delta Force soldier codenamed Nomad. The player's weapons can be customized without pausing the flow of time, for example changing firing modes, changing scopes or adding sound suppressors. The player is also capable of selecting
        various modes in Nomad's military "Nanosuit" which draw power from the suit's energy. When the suit's energy is depleted, no modes can be used and the player is more vulnerable to damage before the suit recharges.</p>
      </artice>
  </section>

  <section class="main-section" id="need_for_speed_most_wanted">
    <header>Need For Speed Most Wanted</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/8e/Need_for_Speed_Most_Wanted_Box_Art.jpg/220px-Need_for_Speed_Most_Wanted_Box_Art.jpg" />
    <article>
      <p>Need for Speed: Most Wanted is a 2005 racing video game developed by EA Canada and published by Electronic Arts. It is the ninth installment in the Need for Speed series. The game features street racing-oriented game play, with certain customization
        options from the Need for Speed: Underground series.</p>
      <ul>
        <li>Most Wanted is like other Need for Speed games, where the player selects one car and races against a time limit or other racers to reach a destination. Police chases have once again been integrated into certain racing sessions, in which the police
          employ vehicles and tactics to stop the player's car and arrest the player, like Need for Speed III: Hot Pursuit and Need for Speed: Hot Pursuit 2.</li>
        <li>Three distinct regions are offered in the city of Rockport, along with cycling weather. Racing events take place between sunrise and sunset, unlike in the Underground where the events took place at night.</li>
      </ul>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/e_XUDY9SjI4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>The game provides players with three game modes. The Quick Race mode allows the player to select a car and an event and immediately start racing. The available cars and events are unlocked as the player progresses through the storyline in the Career
        mode.</p>
      </artice>
  </section>

  <section class="main-section" id="settlers_3">
    <header>Settlers 3</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Settlers_3_cover.jpg/220px-Settlers_3_cover.jpg" />
    <article>
      <p>The Settlers III (German: Die Siedler III) is a real-time strategy video game with city-building elements, developed and published by Blue Byte. Released for Microsoft Windows in November 1998, it is the third game in The Settlers series, following
        The Settlers (1993) and The Settlers II (1996).</p>
      <ul>
        <li>In the game's single-player campaign, the player controls one of three races (Romans, Egyptians or Asians) whose respective deities are summoned by the great god HE, after HE becomes dissatisfied with how the lesser gods are ruling. HE tells them
          they must each pick a champion from among their people, and have him lead a war against the other peoples, with the gods of the two losing races facing an arduous and absurd punishment.</li>
        <li>Quest of the Amazons tells a prequel story, chronicling how Helios's daughter, Q'nqüra, becomes HIS personal assistant, engineering events so that women become the secret rulers of the universe.</li>
      </ul>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/-uFRbYP8S0Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>The Settlers III is a real-time strategy game with city-building elements,[4][5][6] controlled via a point and click interface, in which the primary goal on most maps is to build a settlement with a functioning economy, producing sufficient military
        units so as to conquer rival territories, ultimately gaining control of either the entire map, or a certain predetermined section of it.[7] To achieve this end, the player must engage in economic micromanagement, construct buildings, and generate
        resources.</p>
      </artice>
  </section>

  <section class="main-section" id="need_for_speed_underground_2">
    <header>Need For Speed Underground 2</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Nfsu2-win-cover.jpg/220px-Nfsu2-win-cover.jpg" />
    <article>
      <p>Need for Speed: Underground 2 is a cross-platform racing video game and the eighth installment in the popular Need for Speed driving game series published and developed by Electronic Arts. Released in 2004, it is the direct sequel to Need for Speed:
        Underground, and is part of the Need for Speed series, available on Microsoft Windows, Game Boy Advance, GameCube, PlayStation 2, Xbox, PlayStation Portable, Nintendo DS and mobile phones.</p>
      <ul>
        <li>The game entails tuning cars for street races, resuming the Need for Speed: Underground storyline. Need for Speed: Underground 2 provides several new features, such as a broader customization, new methods of selecting races, the "explore" mode
          (similar to the Midnight Club series, in a large city known as "Bayview").</li>
        <li>The City Center was based on Philadelphia, Beacon Hill was based on Beverly Hills and Coal Harbor was based on Camden, New Jersey, and Bayview as a whole is a microcosm of the west coast of the United States.</li>
      </ul>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/iItS8Z2FthM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>Underground 2 is unique among the games in the Need for Speed series in that it requires players to drive to a certain place in the city in order to begin a race (other games allow the player to select a race from a menu). Most races are marked
        on the in-game radar, but some are hidden and the player must search for them, should he/she decide to play them.</p>
      </artice>
  </section>

  <section class="main-section" id="far_cry_2">
    <header>Far Cry 2</header>
    <img id="header-img" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/97/Far_Cry_2_cover_art.jpg/220px-Far_Cry_2_cover_art.jpg" />
    <article>
      <p>Far Cry 2 is an open world first-person shooter developed by Ubisoft Montreal and published by Ubisoft. It was released worldwide for Microsoft Windows, PlayStation 3, and Xbox 360 in October 2008. It is the second installment of the main Far Cry
        series, preceded by 2004's Far Cry and followed by 2012's Far Cry 3. Far Cry 2 is backwards compatible with Xbox One.</p>
      <ul>
        <li>Ubisoft has marketed Far Cry 2 as the true sequel to Far Cry, however the sequel has very few noticeable similarities to the original game. Instead, it features completely new characters and setting, as well as a new style of gameplay that allows
          the player greater freedom to explore different African landscapes such as deserts, jungles, and savannas.</li>
        <li>Far Cry 2 was met with positive reception upon its release, with critics praising the game's setting, open-ended gameplay, visuals and AI, while criticism was directed at glitches, design choices and the writing. By January 2009, the game had
          sold nearly three million copies.</li>
      </ul>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/m-7m4vtn-eM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>StoryLine</h3>
      <p>Far Cry 2 is a sequel to the original Far Cry. The game features an open-ended experience. Players are able to ally with one or multiple factions, and to progress through the game world and missions as they see fit, resulting in a nonlinear style
        of gameplay commonly referred to as sandbox mode that allows the story to progress at their speed and in the order they choose.</p>
      </artice>
  </section>
</main>

style.css

html,
body {
  min-width: 290px;
  background-color: #ccccb3;
  line-height: 2;
}
#navbar {
  position: fixed;
  min-width:290px;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100%;
  min-width: 290px;
  border-right: 5px solid;
  border-color: rgba(61, 61, 41, 1);
}
header {
  color: black;
  font-size: 30px;
  text-align: center;
  font-weight: bold;
}

#navbar li {
  color: #3d3d29;
  border: 1px solid;
  border-bottom-width: 0px;
  padding: 8px;
  padding-left: 45px;
  list-style: none;
  position: relative;
  left: -50px;
  width: 100%;
}
#navbar a{
    color: #3d3d29;
    text-decoration:none;
    cursor:pointer;
    font-weight:bolder;
}
#main-doc header{
  text-align:left;
  margin:0px;
}
#main-doc{
  position: absolute;
  margin-left:310px;
  padding:20px;
  margin-bottom:110px;
}
section article{
  color: #3d3d29;
  margin:5px;
  font-size:0.96em;
}
p {line-height:20px;} 
ul {line-height:20px;} 
section {border-bottom: 5px solid;color:#3d3d29;}
@media only screen and (max-width: 815px) {
    /* For mobile phones: */
  #navbar ul{
  border:1px solid;
    height:207px;
  }
    #navbar{
      background-color:white;
      position:absolute;
      top:0;
      padding:0;
      margin: 0;
      width:100%;
      max-height:275px;
      border:none;
      z-index:1;
      border-bottom:2px solid;
    }
  #main-doc{
    position: relative;
    margin-left:0px;
    margin-top:270px;
  }
  #main-doc section {
/*     padding-top: 240px; */
  }
}

@media only screen and (max-width: 400px) {
  #main-doc{
    margin-left:-10px;
  }
  code{
    margin-left:-20px;
    width:100%;
    padding:15px;
    padding-left:10px;
    padding-right:45px;
    min-width:233px;
  }
}

top_games.markdown

Top_Games

A Pen by Mayank Solan on CodePen.

License.