Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <link href="https://fonts.googleapis.com/css?family=Exo+2|Libre+Franklin" rel="stylesheet">
</head>

<body>
  <div class="layout gentext">
    <header class="top">
      <!--Consider a single line header and constraining width of containing element to wrap text-->
      <h1 class="head title"><u>Everything You Need to Know Before MGSV: The Phantom Pain</u></h1>
      <h1 class="head title">(in as few words as possible)</h1>
    </header>
    <main class="content">			
      <section id="about">
        <h2 class="head">About this guide:</h2>
        <p>Understanding the Metal Gear Solid series is a labor of love that even the most devoted fans can struggle with. The series provides some of gaming's most unforgettable moments and inventive situations, but its story can be a tangled mess of retcons, contrivances, and nanomachines.</p>
        <p>The latest entry to the series provides some of the most engaging and open-ended stealth gameplay yet, and is an absolute blast both for veterans and newcomers. But those who haven't been following this crazy story may have trouble following the events of MGSV, so this guide is meant to provide brief summaries of the mainline games that chronologically precede Metal Gear Solid V: The Phantom Pain. It should provide enough background to understand the context without miring you too much in the deeper absurdities we've come to expect of Kojima-san.</p>
      </section>			
      <section id="mgs3">							
        <h3 class="head">
          MGS3: Snake Eater - 1964
        </h3> 
        <p>
          The U.S. gets word that there's a Soviet scientist named Sokolov who wants to defect. He's working on some banging new nuclear weapon. The U.S. sends in a single operative code-named Naked Snake, who is part of a covert C.I.A. unit called FOX. He's being assisted via radio by his commanding officer, Major Zero, and a badass legendary soldier known by the codename of The Boss. She was Snake's mentor and is a legend for her leadership of the Cobra Unit, a spec-ops unit that was significant in the U.S.'s victory in WWII.
        </p>
        <figure class="photofig">
          <img src="http://www.metalgearinformer.com/wp-content/uploads/2014/10/MGS3-Naked-Snake-Virtuous-Mission.jpg" alt="Naked Snake" class="photo1"><img src="https://vignette.wikia.nocookie.net/metalgear/images/e/e9/BossI15.png/revision/latest?cb=20130213114224" alt="The Boss" class="photo2"><img src="https://vignette.wikia.nocookie.net/metalgear/images/2/23/MGS3ZeroPP.png/revision/latest?cb=20131223065609>" alt="Major Zero: commanding officer-Virtuous Mission/Operation Snake Eater" class="photo3">
          <figcaption class="figcap">
            Left to right: Naked Snake, The Boss, Major Zero
          </figcaption>
        </figure>
        <p>
          Snake successfully contacts Sokolov but learns that a rogue GRU Colonel, Colonel Volgin is unhatching a coup and plans to steal the nuclear weapon Sokolov is working on. Snake's extraction of Sokolov is thwarted by The Boss, who reveals to Snake that she has defected to the Soviet Union (specifically to Volgin's faction) and has provided him with Nuclear warheads. She kicks Snake's ass and takes custody of Sokolov. Volgin then uses one of the warheads to destroy a Russian base. Because the U.S. plane extracting Snake was caught on Soviet Radar at the time of the strike, the Soviet Union holds the U.S. responsible for the nuclear attack.
        </p>
        <figure class="photofig">
          <img src="https://vignette.wikia.nocookie.net/metalgear/images/f/f4/The_Boss_and_Colonel_Volgin.jpg/revision/latest/scale-to-width-down/180?cb=20080602140944" alt="The Boss and Colonel Volgin" class="photo2">
          <figcaption class="figcap">
            Left to right: Colonel Volgin and The Boss
          </figcaption>
        </figure>
        <p>
          Two weeks later the political fallout comes to a head and the Soviets issue an ultimatum: the U.S. must prove its innocence by assassinating The Boss and Volgin, and neutralizing the new nuclear weapon now in Volgin's possession. Snake is sent back into Russia to carry out the mission. Bunch of stuff happens. During his mission, he loses his eye and also learns of how Volgin amassed enough resources to finance his military coup: The Philosopher's Legacy. The Philosophers were a secret alliance of the most powerful and influential figures in control of the three major superpowers (U.S. China and Russia). They formed during World War I and pooled their financial resources to amass enough wealth to guarantee victory in World Wars I and II. As WWII reached its conclusion, the organization had begun to splinter due to its own internal corruption and Volgin managed to get his hands on the records of the transactions, effectively controlling the remainder of the massive pile of cash they'd amassed
        </p>
        <p>
          More shit happens. Snake destroys the nuclear weapon and kills Volgin. He then confronts The Boss, who monologues to him about her desire to use the Philosopher's Legacy to end the cold war and unite the world. He kills her and escapes, holding possession of the Philosopher's Legacy records. Snake returns to the U.S. For surpassing The Boss, Snake is awarded the codename Big Boss. However, he also learns that The Boss had never actually defected. Her mission from the beginning was to win Volgin's trust for the purpose of securing The Philosopher's Legacy for the US. When Volgin made the decision to nuke the soviet base, it threatened to derail the whole operation, and so The Boss had to be killed at Snake's hands in order to protect America's interests (she accepted her death as part of her mission). This information leaves Big Boss disillusioned at the concept of loyalty to a nation or ideology. 
        </p>
        <figure class="photofig">
          <img src="https://vignette.wikia.nocookie.net/metalgear/images/d/d3/3569058353_0426dd4aee.jpg/revision/latest/scale-to-width-down/180?cb=20090726042208" alt="Big Boss: sometime after Operation Snake Eater" class="photo2">
          <figcaption class="figcap">							
            Codename: Big Boss
          </figcaption>
        </figure>
      </section>
      <section id="quicknote">					
        <div class="note">
          <p>
            (Note this summary leaves out EVA who is a double agent who assisted and then double-crossed Snake, as well as Ocelot who was in Volgin's organization (and had an obsessive rivalry with Snake) but was a triple agent working for the Soviets as well as the Americans)
          </p>
        </div>
        <p>
          Between MGS3 and Peace Walker, the events get a little hazy as a game covered most of the important bits but was also partially retconned. The important details are the following:
        </p>
        <p>
          Key members of the team from MGS3 (including but not limited to Major Zero, Big Boss, Ocelot, and EVA) band together, having collectively gained control of the Philosopher's Legacy. They plot to use the Legacy to gain control of the United States and form The Patriots, so that they can unify the world in accordance with The Boss's vision. Major Zero unhatches the Les Enfents Terribles project, a project to clone Big Boss's DNA (Solid Snake, Liquid Snake, and Solidus Snake are born from this project). Big Boss is outraged at Zero's cloning of him (possibly done without his knowledge or consent). Their differing philosophies over The Boss's wishes eventually prove a point of intractable tension: While Big Boss's primary concern is that soldiers should not be completely subject to the political whims of the times, Zero's plan to achieve it seems to go too far: He wishes to control the flow of information on a global scale to dictate the directions of the times. Big Boss leaves the Patriots.
        </p>
      </section>
      <section id="mgspw">
        <h3 class="head">
          MGS: Peace Walker - 1974
        </h3> 
        <p>
          Big Boss partners with Kaz Miller to form a mercenary band MSF (Militaires Sans Fronteires or Soldiers Without Borders... pardon the shitty spelling). They are approached by a young student named Paz and a KGB officer with a contract to interfere with a CIA military operation unfolding in Costa Rica. As part of the payment, the KGB officer provides MSF with an abandoned offshore facility that MSF can use and expand as a forward operating base to allow them to deploy on operations with more ease. Big Boss accepts the mission in part because of a recording provided by Paz which suggests that The Boss may still be alive.
        </p>
        <figure class="photofig">
          <img src="https://vignette.wikia.nocookie.net/metalgear/images/a/af/2132411934_view.jpg/revision/latest?cb=20100603145002" alt="MSF Mother Base: Somewhere in the Carribean" class="photo2">
          <figcaption class ="figcap">									
            Mother Base: MSF
          </figcaption>
        </figure>
        <p>
          Big Boss investigates, using the operation as an opportunity to expand MSF from resources and personnel acquired in the field. He learns that the CIA operation is actually the act of a rogue CIA operative, who has constructed a nuclear equipped walking tank, Peace Walker, controlled by AI, whose design is intended to be an absolute deterrent to nuclear weapons. The AI would automatically launch a tactical strike upon discovery of a launch that would ensure world-wide annihilation. The AI is modeled after the personality of The Boss. Big Boss encounters and extracts the chief scientist, Huey Emmerich, who, with the assistance of AI Engineer Dr. Strangelove (yeah... really...) goes to work building a walking nuclear tank for MSF, to allow them to have their own deterrent against any outside interference (Metal Gear Zeke). 
        </p>
        <p>
          Big Boss damages Peace Walker but it is ultimately the AI of The Boss that prevents disaster by self-destructing itself instead of launching. The operation is a success and Big Boss continues to build up MSF's strength. Paz then reveals herself to be an agent of Zero's shadow organization, Cipher, and attempts to steal Metal Gear Zeke to use as leverage to force MSF to serve as the militant wing of Cipher. Big Boss defeats Metal Gear Zeke and Paz is thrown into the ocean and disappears. Big Boss declares MSF its own military nation, not beholden to any ideology or nation, but rather as a place where soldiers can fight for themselves, Outer Heaven. Kaz also confides to Big Boss that he was aware that the Peace Walker Mission was set up by Cipher, but kept that information hidden because he couldn't resist the opportunity for MSF to expand.
        </p>
      </section>
      <section id="mgsvgz">
        <h3 class="head">
          MGSV: Ground Zeroes - 1975
        </h3>
        <p>
          Big Boss and Miller learn that Paz has survived and is being held for interrogation on a U.S. base in Cuba, under suspicion of having betrayed Cipher. Around the same time, the IAEA (International Atomic Energy Agency) demands to inspect the MSF Mother Base for Nuclear Weapons. Big Boss had, to this point, elected to keep Metal Gear Zeke's existence a secret, not wanting to draw the ire of the world down on them, but rather keep it as an ace in the hole in case they are ever attacked. Huey Emmerich, against Big Boss's wishes, invites the IAEA to conduct an inspection, believing that if they can successfully fool the inspectors, MSF will be in the clear.
        </p>
        <p>
          Right before the inspection begins, Big Boss learns that a child who's been living on Mother Base, Chico, ran off to try to rescue Paz, and has been imprisoned at the U.S. base. Big Boss dispatches to the base to extract Chico and Paz, to keep them both from divulging any information about MSF to the US or to Cipher. The mission is a success, but on the return flight, Big Boss finds Mother Base under seige: the IAEA inspection was a ruse, a way to grant XOF, a Cipher Military unit, sufficient access to occupy and destroy the base. Big Boss manages to extract Miller from the firefight before Mother Base collapses, but they then discover that Paz had a bomb planted inside her. She attempts to jump from the helicopter but is too late. The bomb detonates, causing the chopper to crash, and Big Boss is left in a coma.
        </p>
        <figure class="photofig">
          <img src="https://vignette.wikia.nocookie.net/metalgear/images/7/79/TPP_GDC2013-08.jpg/revision/latest?cb=20130328021951" alt="Mother Base under attack" class="photo2">
          <figcaption class="figcap">
            Assault on Mother Base
          </figcaption>
        </figure>
      </section>
    </main>
    <nav class="float">
      <a href="https://nedblogs.wordpress.com/" target="_blank">Home</a>
      <a href="https://nedblogs.wordpress.com/contact/" target="_blank">Contact</a>
      <a href="#mgs3">MGS3</a>
      <a href="#mgspw">MGS:PW</a>
      <a href="#mgsvgz">MGSV:GZ</a>
      <a href="#top">Back to top</a>
    </nav>
    <div class="navspace"></div>
    <div class="blurb">
      <p>Ipso balls the text will take this area up in total blah blah blah blah balls (benoit)</p>
    </div>
    <footer class="bottom">
      <p>This is an amateur website which earns no revenue... clearly... copyright (probably not) pending</p>
    </footer>
  </div>
</body>
              
            
!

CSS

              
                /*GENERAL CSS RULES AND PAGE LAYOUT*/

body {
  background: url("https://i.imgur.com/ZNzo3cr.gif");
}
.gentext {
  font-family: "Libre Franklin", sans-serif;
  color: #CCCCCC;
  font-size: 18px;
}
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav content info"
    "footer footer footer";
  grid-template-columns: 10% 1fr 20%;
  grid-template-rows: auto auto auto;
}

/*HEADER RULES*/
.top {
  grid-area: header;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 
}
.head {
  font-family: "Exo 2", sans-serif;
  /*border-style: solid;*/
}
.title {
  margin: -0.1%;
}

/*MAIN CONTENT RULES*/
.content {
  grid-area: content;
  padding-right: 2%;
  line-height: 30px;
  margin-top: 5%;
  text-align: justify;
  padding-left: 3.5%;
}

.note {
  font-weight: bold;
  font-style: italic;
  margin: 0 10% 0 10%;
}
/****Photos****/
.photofig {
  display: grid;
  margin: auto auto auto auto;
  grid-template-areas: 
    "photo1 photo2 photo3"
    "cap cap cap";
  grid-template-columns: repeat(3, 300px);
  grid-template-rows: auto 1fr;
  margin: auto;
  grid-gap: 10px 10%;
}
.photo1 {
  grid-area: photo1;
  width: 300px;
}
.photo2 {
  grid-area: photo2;
  width: 300px;
}
.photo3 {
  grid-area: photo3;
  width: 300px;
}
.figcap {
  grid-area: cap;
  justify-self: center;
  font-size: 14px;
}


/*NAVIGATION BAR RULES*/
.navspace {
  grid-area: nav;
  background: linear-gradient(90deg, hsl(33, 10%, 10%), hsl(70, 10%, 20%));
  background-color: black;
  border-style: solid;
  border-color:black;
}
.float {
  position: fixed;
  display: flex;
  flex-direction: column;
  width:10%;
  top: 33%;
}
/*.button {
  background: linear-gradient(180deg, hsl(0, 0%, 70%), hsl(0, 0%, 30%));
  height: 30px;
  border-style: solid;
  border-color: #111111;
  text-align: center;
  padding-top: 5%;
}
.button:hover {
  background: linear-gradient(0deg, hsl(0, 0%, 70%), hsl(0, 0%, 30%));
}*/
a {
  text-decoration: none;
  color: #000000;
    background: linear-gradient(180deg, hsl(0, 0%, 70%), hsl(0, 0%, 30%));
  height: 30px;
  border-style: solid;
  border-color: #111111;
  text-align: center;
}
a:hover {
  text-decoration: none;
  color: hsl(0, 100%, 25%);
  background: linear-gradient(0deg, hsl(0, 0%, 70%), hsl(0, 0%, 30%));
}
/*INFO BLURB RULES*/
.blurb {
  grid-area: info;
}

/*FOOTER RULES*/
.bottom {
  grid-area: footer;
  justify-self: center;
  font-size: 12px;
}
/*TODO: Animated Info Blurbs in the right-side margin. A header button with expanding text upon hover*/
/*TODO: Darker filter for background of header*/
              
            
!

JS

              
                
              
            
!
999px

Console