123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html lang="en">

<head>
 <!--  Meta  -->
 <meta charset="UTF-8" />
 <title>Chris Metzen tribute page</title>

 <!--  Styles  -->
 <link rel="stylesheet" href="styles/index.processed.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
 <link rel="stylesheet" href="styles/Style.css">

</head>


<body data-spy="scroll" data-target=".nav" data-offset="50">

  <nav id="main-nav" class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-*">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
      aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarResponsive">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <hr>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://codepen.io/Zalmez/full/vZgjOb/">Portfolio</a>
      </ul>
    </div>
  </nav>


 <div id="content-container" class="container">
  <div id="content-jumbotron" class="jumbotron">
   <div class="row">
    <div class="col-xs-12 mx-auto text-center">
     <h1 class="text-center">Chris Metzen</h1>
     <img class="rounded border-0 mx-auto text-center" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Chris_Metzen_BlizzCon_2009.jpg"></img>
     <h2 class="text-center"><em>"The Thundergod"</em></h2>

    </div>
   </div>
  </div>
 </div>

 <div id="about-container" class="container">
  <div id="about-jumbotron" class="jumbotron">
   <div class="row">
    <div class="col-xs-12 mx-auto text-center">
     <h1 class="">About</h1>
     <p align=center>
      Chris Metzen, born november 22, 1973 is an American game designer, artist, voice actor and author known for his work creating the fictional universe and scripts for Blizzard Entertainment's three major award-winning media franchises: Warcraft, Diablo
      and StarCraft. Chris Metzen also went under the alias "Thundergod". Metzen was hired by Blizzard Entertainment as an animator and artist; his first work for the company was with the video game <em>Justice League Task Force</em>
      <br> Metzen was the Senior Vice President of Story and Franchise Development at Blizzard Entertainment and assisted the company's projects by providing voice talent for a number of characters, as well as contributing to artistic character design.
      Outside of Blizzard Entertainment, Metzen authored a graphic novel series based on futuristic second American civil war. Metzen retired in September 2016 to spend more time with his family.
     </p>
    </div>
   </div>
  </div>
 </div>

 <div id="career-container" class="container">
  <div id="career-jumbotron" class="jumbotron">
   <div class="row">
    <div class="col-xs-12 mx-auto text-center">
     <h1 class="">Career</h1>
     <p align=left>
      Metzen began his career in design after applying to Blizzard Entertainment, then known as Chaos Studios, on the recommendation of a friend who had seen his work. He was quickly recruited by the company, although Metzen states that at the time he did not
      really know what Blizzard Entertainment dealt with, assuming it was a graphic design studio rather than a video game developer. Metzen's first work for the company was with the game Justice League Task Force, in which he provided artwork and character
      animation. Around the same time, Metzen also contributed to 1994's Warcraft: Orcs and Humans by working on artwork, illustrations and the game's documentation. Later video games by Blizzard Entertainment would frequently include Metzen's work in
      manual design, illustration and concept art. However, Metzen's role in developing later Warcraft games increased significantly with 1995's Warcraft II: Tides of Darkness, which gave him the opportunity to work on the game's fantasy-based fictional
      universe in addition to designing the game's various scenarios and missions. In 1996, Blizzard Entertainment launched its second major franchise with the role-playing game Diablo. Diablo's fictional universe was created by both Metzen and fellow
      designer Bill Roper, and Metzen also provided voice acting for some of the game's characters. On occasion, Metzen would provide voice talent for later video games. In 1998 he took the role of lead designer on the science fiction strategy game StarCraft.
      Along with James Phinney, Metzen again provided the game's extensive story and script, as well as organizing the voice casting for the game.In 1999, Metzen wrote a short story set in the StarCraft universe with fellow Blizzard Entertainment employee
      Sam Moore. The story, entitled Revelations, was published in the spring issue of Amazing Stories with cover artwork by Samwise Didier.Returning to the Diablo series in 2000 with Diablo II, Metzen worked on the game's story, script and artwork. In
      2001, he published a novel set in the Warcraft universe, entitled Of Blood and Honor. With 2002's Warcraft III: Reign of Chaos, Metzen was the creative director, a role he would hold in all of Blizzard's later video games, and provided the game's
      story concept and script.Metzen's work with 2004's massively multiplayer online role-playing game World of Warcraft was not as extensive as his earlier work, but he still contributed with script writing, artwork and voice work. Metzen announced
      in early 2005 that he was working on a graphic novel series independent of Blizzard Entertainment. The series, entitled Soldier: 76, is set in a second American civil war in 2010, with increased domestic and global terror threats and the increase
      in power for the US federal government over that of local state governments serving as a background. Metzen wrote the series' script, while Brazilian artist Max Velati was responsible for the illustration and painting of the book. Soldier: 76 would
      later appear as a character in Overwatch, Blizzard's online first-person shooter game, released in May 2016. Chris Metzen teamed with author Flint Dille and artist Livio Ramondelli to create the 12-part, bi-weekly digital comic series Transformers:
      Autocracy. Autocracy, published by IDW Publishing was published in 2012. The series focuses on the days just before the Great War. It is set after Megatron Origin, and presents the Decepticons as an established force, sowing dissent across Cybertron
      primarily through terrorist actions. The series focuses on Orion Pax, an Autobot commander charged with rooting out these cells. Transformers: Autocracy was released as a collected Trade Paperback in July 2012 with a bonus forward authored by Metzen.
      The same team is current working on the follow-up series, "Transformers: Monstrosity". Metzen made a cameo appearance in the 2016 Warcraft film, as a turbaned perfume vendor in Stormwind. On September 12, 2016, Metzen announced that he was retiring
      from Blizzard Entertainment after nearly twenty-three years with the company.
     </p>
     <h4>You can find more information about Chris Metzen <a href="https://en.wikipedia.org/wiki/Chris_Metzen" target="_blank">here</a></h4>
    </div>
   </div>
  </div>
 </div>

 <div id="roles-container" class="container">
  <div id="roles-jumbotron" class="jumbotron">
   <div class="row">
    <div class="col-xs-12 mx-auto text-center">
     <h1 class="">Roles</h1>
     <ul id="roles-list" class="list-group">
      <li id="rolesListing" class="list-group-item">Diablo - Skeleton King
       <li>
        <li id="rolesListing" class="list-group-item">StarCraft - Marine, Battlecruiser, Ghost
         <li>
          <li id="rolesListing" class="list-group-item">Warcraft III: Reign of Chaos – Thrall
           <li>
            <li id="rolesListing" class="list-group-item">Warcraft III: The Frozen Throne – Thrall, Vol'jin
             <li>
              <li id="rolesListing" class="list-group-item">World of Warcraft – Thrall, Vol'jin, Orcs, Nefarian, Ragnaros, Hakkar the Soulflayer
               <li>
                <li id="rolesListing" class="list-group-item">World of Warcraft: The Burning Crusade – Thrall, Vol'jin
                 <li>
                  <li id="rolesListing" class="list-group-item">World of Warcraft: Wrath of the Lich King – Thrall, Vol'jin, Varian Wrynn, Deathbringer Saurfang/Dranosh Saurfang, Bronjahm
                   <li>
                    <li id="rolesListing" class="list-group-item">StarCraft II: Wings of Liberty – Marine, Battlecruiser
                     <li>
                      <li id="rolesListing" class="list-group-item">World of Warcraft: Cataclysm – Thrall, Vol'jin, Varian Wrynn, Nefarian, Ragnaros, Hakkar the Soulflayer
                       <li>
                        <li id="rolesListing" class="list-group-item">World of Warcraft: Mists of Pandaria – Thrall, Arcanital Mara'kah, Captain Halu'kal, Nalak the Storm Lord, War-God Jalak
                         <li>
                          <li id="rolesListing" class="list-group-item">Starcraft II: Heart of the Swarm - Marine, Battlecruiser
                           <li>
                            <li id="rolesListing" class="list-group-item">Hearthstone: Heroes of Warcraft - Thrall, Various minions
                             <li>
                              <li id="rolesListing" class="list-group-item">World of Warcraft: Warlords of Draenor - Thrall
                               <li>
                                <li id="rolesListing" class="list-group-item">Heroes of the Storm - Thrall, Varian Wrynn
                                 <li>
                                  <li id="rolesListing" class="list-group-item">StarCraft II: Legacy of the Void – Marine, Battlecruiser
                                   <li>
                                    <li id="rolesListing" class="list-group-item">World of Warcraft: Legion - Thrall, Varian Wrynn
                                     <li>
                                      <li id="rolesListing" class="list-group-item">Overwatch - Bastion
                                       <li>
     </ul>
    </div>
   </div>
  </div>
 </div>
 <div id="why-container" class="container">
  <div id="why-jumbotron" class="jumbotron">
   <div class="row">
    <div class="col-xs-12 mx-auto text-center">
     <h1 class="">Why did I pick Chris Metzen?</h1>
     <p>
      I picked Chris Metzen because he is the person I look up to! He has done basically everything I want to achieve. This is not the only reason; He always hypes up the crowd like
      a god! FOR THE HORDE! I love all the work he has done and the games he has worked on as well. a lot of this are a part of my childhood, mostly world of warcraft and starcraft! :) This is the reason. Hope you liked the page ^^
     </p>
    </div>
   </div>
  </div>
 </div>

 <!-- Scripts -->
 <script src="scripts/index.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>
            
          
!
            
              /*
tags
*/

body {
 margin-top: 30px;
 background-image: url("http://media-diablofans.cursecdn.com/attachments/12/211/635170298781250295.png");
 font-family: Raleway;
 background-color: #cccccc;
 background-repeat: no-repeat;
 padding: 35px;
 background-attachment: fixed;
 background-position: center;
}
#main-nav {
  background-color: #0b3c49;
}
p{
	color: white;
}
h1, h2, h4 {
 font-family: 'Raleway', sans-serif;
	color: white;
}

a:link {
 color: white;
 text-decoration: underline;
}

a:visited {
 color: black;
}

a:hover {
 color: blue;
}

a:active {
 color: black;
}


/*
ID's
*/

#content-container {
 padding: 6px;
 border-radius: 8px;
 margin-bottom: 30px;
 background-color: rgba(153, 102, 51, 0.5)
}

#content-jumbotron {
 margin-bottom: 0px;
 background-color: rgba(153, 102, 51, 0.5)
}

#about-container {
 padding: 6px;
 border-radius: 8px;
 margin-bottom: 30px;
 background-color: rgba(153, 102, 51, 0.5)
}

#about-jumbotron {
 margin-bottom: 0px;
 background-color: rgba(153, 102, 51, 0.5)
}

#career-container {
 padding: 6px;
 border-radius: 8px;
 margin-bottom: 30px;
 background-color: rgba(153, 102, 51, 0.5)
}

#career-jumbotron {
 margin-bottom: 0px;
 background-color: rgba(153, 102, 51, 0.5)
}

#roles-container {
 padding: 6px;
 border-radius: 8px;
 margin-bottom: 30px;
 background-color: rgba(153, 102, 51, 0.5)
}

#roles-jumbotron {
 margin-bottom: 0px;
 background-color: rgba(153, 102, 51, 0.5)
}

#roles-list {
 list-style-type: none;
}

#why-container {
 padding: 6px;
 border-radius: 8px;
 margin-bottom: 30px;
 background-color: rgba(153, 102, 51, 0.5)
}

#why-jumbotron {
 margin-bottom: 0px;
 background-color: rgba(153, 102, 51, 0.5)
}

#rolesListing{
	background-color: lightgray;
}

/*
classes
*/

.main-color {
 background-color: #1abc9c;
}

.transparent-background {
 background-color: rgba(120, 237, 213, 0.5)
}


/*
Scrollbar css
*/

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: rgb(153, 102, 51);
}
            
          
!
            
              function ExportToExcel(mytblId){
	var htmltable= docum
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console