API tools faq
paste
bocajbee

halo main page.html

bocajbee
Jun 22nd, 2020
128
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <!-- https://www.w3schools.com/html/html_responsive.asp _-->
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  9.         <link href="styles.css" rel="stylesheet">
  10.         <!-- Load an icon library to show a hamburger menu (bars) on small screens -->
  11.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  12.  
  13.         <title>Overview</title>
  14.     </head>
  15.     <body>
  16.         <!-- Top Navigation Menu -->
  17.         <!-- https://getbootstrap.com/docs/4.0/components/navs/ -->
  18.          <div class="navbar">
  19.             <nav class="nav justify-content-center">
  20.                  <!-- Top Navigation Menu links -->
  21.                 <li><a href="index.html">Overview</a></li>
  22.                 <li><a href="Halo Reach.html">Halo Reach</a></li>
  23.                 <li><a href="Halo CE.html">Halo Combat Evolved: Anniversary</a></li>
  24.                 <li><a href="Halo 2.html">Halo 2: Anniversary</a></li>
  25.                 <li><a href="Halo 3.html">Halo 3</a></li>
  26.                 <li><a href="Halo 3 ODST.html">Halo 3: ODST</a></li>
  27.             </nav>
  28.         </div>
  29.         <!-- links to my other html in hamburger menu pages -->
  30.         <!-- Hamburger Navigation links (hidden by default) -->
  31.         <div class="topnav">
  32.             <a href="#home" class="active">Halo</a>
  33.                 <div id="myLinks">
  34.                     <li><a href="index.html">Overview</a></li>
  35.                     <li><a href="Halo Reach.html">Halo Reach</a></li>
  36.                     <li><a href="Halo CE.html">Halo Combat Evolved: Anniversary</a></li>
  37.                     <li><a href="Halo 2.html">Halo 2: Anniversary</a></li>
  38.                     <li><a href="Halo 3.html">Halo 3</a></li>
  39.                     <li><a href="Halo 3 ODST.html">Halo 3: ODST</a></li>
  40.                 </div>
  41.                 <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links !-->
  42.                 <!-- calls a JS myFunction(), only when the hamburger menu icon is clicked "onclick" -->
  43.                 <a href="javascript:void(0);" class="icon" onclick="myFunction()">
  44.                       <i class="fa fa-bars"></i>
  45.                 </a>
  46.  
  47.                 <script>
  48.                 function myFunction()
  49.                 {
  50.                     // take the current div element passed in on line 30 by element, then store this
  51.                     var x = document.getElementById("myLinks");
  52.  
  53.                     // check line 130 of styles.css. If this condition sees if that the element at "myLinks.style.display" is set to "block" as referenced in the CSS style sheet
  54.                     // then set "x.style.display to "none", essentialy hiding/closing the hamburger menu
  55.                     if (x.style.display === "block")
  56.                     {
  57.                         x.style.display = "none";
  58.                     }
  59.                     // otherwise, if it sees "myLinks.style.display" is set to "none", it'll change this to "block", expalnding the hamburger menu
  60.                     else
  61.                     {
  62.                         x.style.display = "block";
  63.                     }
  64.                 }
  65.                 </script>
  66.  
  67.         </div>
  68.  
  69.         <!-- https://www.w3schools.com/css/css3_flexbox.asp -->
  70.         <div class="flex-container">
  71.             <!-- https://www.youtube.com/watch?v=tiV4hJ30zIc -->
  72.             <div class ="col-md-6">
  73.                     <div class="margin: auto 1.5em; display: inline-block">
  74.                         <!-- https://www.youtube.com/watch?v=x99gNzHtm0k -->
  75.                         <!-- https://stackoverflow.com/questions/16466240/adjusting-and-image-size-to-fit-a-div-bootstrap -->
  76.                         <img src="mccpc.jpg"; style="width:100%"; class="img-fluid">
  77.                     </div>
  78.             </div>
  79.  
  80.                 <div class ="col-md-6">
  81.                     <div class="margin: auto 1.5em; display: inline-block">
  82.                         <h3>MCC comes to PC</h3>
  83.                             <p>
  84.                             For the first time, the series that changed console gaming forever comes to PC with six blockbuster games in one epic experience. This bundle includes all titles in the
  85.                             collection that will be delivered over time and available for individual purchase, beginning now with Halo: Reach. Featuring Halo: Reach along with Halo: Combat Evolved
  86.                             Anniversary, Halo 2: Anniversary, Halo 3, the Halo 3: ODST Campai gn and Halo 4, the Master Chief Collection offers players their own exciting journey through the epic saga.
  87.                             Each adds its own multiplayer maps, modes and game types, building a unified multiplayer suite that expands over time. When completed in 2020, the collection will contain
  88.                             over 140 multiplayer maps and 67 campaign missions, making this the PC collection Halo fans have been waiting for. Halo: The Master Chief Collection is available
  89.                             for purchase via Microsoft Store, Steam, or with your Microsoft PC Game Pass subscription.
  90.                             </p>
  91.                     </div>
  92.                 </div>
  93.             </div>
  94.  
  95.         <!-- https://www.w3schools.com/css/css3_flexbox.asp -->
  96.         <div class ="flex-container">
  97.             <div class= "iframe-container">
  98.                 <iframe width="448" height="252" src="https://www.youtube.com/embed/88VBun17AMI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  99.             </div>
  100.         </div>
  101.  
  102.         <div class="footer">
  103.             <div class= "signature">
  104.                 <p>A CS50 Project By: Jacob Allen</p>
  105.             </div>
  106.         </div>
  107.  
  108.     </body>
  109. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!