DOTA2 Tribute

dota2-tribute.markdown

DOTA2 Tribute

A Pen by Wenhu on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<div class="container-fluid">
  <h1 class="text-center" id="title"><strong>Dota 2 GO</strong></h1>
  <h4 class="text-center" id="subtitle"><em>everlasting battle for the youth</em></h4>
  <div id="img_div">
    <img class="img-responsive" id="dota_img" src="https://images2.alphacoders.com/474/474206.jpg">
    <h6 class="text-center" id="caption">The logo and several shining heros in Dota2.</h6>
  </div>
  <div id="text">
    <br/><br/>
    <p style="color: orange" id="que1"><strong>What is Dota 2</strong></p>
    <p id="introduction">Dota 2 is a free-to-play multiplayer online battle arena (MOBA) video game developed and published by Valve Corporation. The game is the stand-alone sequel to Defense of the ancients (Dota), which was a community-created mod for Blizzard Entertainment's Warcraft III: Reign of Chaos and its expansion pack, The Frozen Throne. Due to the basal limitation of Warcraft III for balancing the Dota map, the map developers have set up a new version--Dota 2 with Valve. It's almost 100% the same as Dota for users, but much more flexible for developers. <br/><br/>Dota 2 is played in matches between two teams that consist of five players, with both teams occupying their own separate base on the map. Each of the ten players independently control a powerful character, known as a "hero", that each feature unique abilities and different styles of play. During a match, a player and their team collects experience points and items for their heroes in order to fight through the opposing team's defenses. A team wins by being the first to destroy a large structure located in the opposing team's base, called the "Ancient".</p>
    <p style="color: orange" id="que2"><strong>The history of its predecessor</strong></p>
    <ul id="history">
      <li>2002</li>
      <ol>
        <li>Unknown date, Aeon of Strife is released by Aeon64 for Starcraft: Brood War.</li>
        <li>July 3rd, Warcraft 3: Reign of Chaos is released. Aeon of Strife is ported to WC3 by multiple people.</li>
        <li>Unknown date, Defense of the Ancients Beta 2 is released by Eul. The very first DotA map.</li>
      </ol>
      <li>2003</li>
      <ol>
        <li>July 1, Warcraft 3: The Frozen Throne is released.</li>
        <li>Unknown date, The second installment of DotA, Thirst for Gamma, is released by Eul. It never gains popularity.</li>
      </ol>
      <li>2004</li>
      <ol>
        <li>February 3, The first version of the Allstars series was "DotA Allstars Beta v0.95" is released by Meian and Ragn0r.</li>
        <li>March, DotA Allstars v.3.0d is released by Guinsoo.</li>
        <li>April, Clan Team Dota Allstars is formed, the clan consists of Pendragon, Guinsoo and IceFrog among others.</li>
        <li>November, DotA Allstars v.5.84 is released by Guinsoo. The first competitive version of DotA. November 20, International Gaming Syndicate (IGS) starts the first offical league for DotA Allstars. The first official competitive match is between House of Zed and 4DTA.</li>
      </ol>
      <li>2005</li>
      <ol>
        <li>February 28, Shortly after the 6.x series is released. Guinsoo announces his departure and IceFrog along with Neichus takes over developement.</li>
        <li>March, World Cyber Games announces a tournament for DotA.</li>
      </ol>
      <li>2006</li>
      <ol>
        <li>May, DotA Allstars v.6.32 is released. This is another classic version of DotA following the stable competitive version 6.27.</li>
        <li>October, The e-sport organization Cyberathlete Professional League hosts a DotA tournament in China.</li>
        <li>September 10, DotA Allstars v.6.37 is released by IceFrog. The second stable competitive version in the 6.3x series.</li>
      </ol>
      <li>2007</li>
      <ol>
        <li>February 7, DotA Allstars v.6.41 is released by IceFrog. With this version All Pick (-AP) replaced League Mode (-LM) as the official competitive mode.</li>
        <li>September 6, DotA Allstars v.6.48b is released by IceFrog.</li>
      </ol>
      <li style="color: blue"><em>2 Octobers</em></li>
      <ol>
        <li>IceFrog announced his new position in Valve through his blog in October 2009.</li>
        <li>Dota 2 was publicly announced by Game Informer in October 2010.</li>
      </ol>
      <li style="color: red"><strong>9th July, 2013------New era began!</strong></li>
   </ul>
  </div>
  <div>
  <div class="row">
    <div class="col-md-10">
      <p id="info">Hey, if you are interested in Dota 2, you could find more on <a href="http://blog.dota2.com/">Dota 2 Blog</a> and <a href="https://en.wikipedia.org/wiki/Dota_2">Dota 2 Wiki</a>.</p>
    </div>
    <div class="col-md-2">
      <button class="btn btn-default">Subscribe</button>
    </div>
  </div>
</div>

script.js

$(document).ready(function(){
  $("#video").css("color", "red");
  $("#title").addClass("text-primary animated bounce");
  $("#subtitle").addClass("animated shake");
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

style.css

body{
  margin: 30px;
}

#img_div{
  text-align: center;
}

#dota_img{
  width: 1024px;
  height: auto;
}

#title{
  font-size: 80px;
}

#subtitle, #que1, #que2{
  font-family: "Oswald", Monospace;
}

#caption{
  font-family: "Open Sans", Monospace;
  font-size: 15px;
}

#que1, #que2{
  font-size: 30px;
}

#introduction, #history{
  font-size: 15px;
}

#info{
  font-family: "Indie Flower", Monospace;
  font-size: 25px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />