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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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><meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    
  </style> <!--END OF STYLE-->
</head><!--END OF HEAD-->
<body background="http://wallpaperstock.net/wallpapers/thumbs1/35345hd.jpg" a="">
  <nav class="navbar">
  <ul style=" list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(61, 51, 41);">
    <li style="display: inline; float: left;">
      <a style="display: block; padding: 10px; background-color: rgb(61, 51, 41)" href="#HOME" style="color: white">Home</a></li>
    <li style="display: inline; float: left" >
      <a style="display: block; padding: 10px; background-color: rgb(61, 51, 41)" href="#CHARACTERS" style="color: white">Characters</a></li>
    <li style="display: inline; float: left;">
      <a style="display: block; padding: 10px; background-color: rgb(61, 51, 41)" href="#TEAMS" style="color: white">Teams</a></li>
    <li style="display: inline; float: left;">
      <a class="active" style="display: block; padding: 10px; background-color: rgb(61, 51, 41)" href="#PLAYERS" style="color: white" >Players</a></li>
    
  </ul>
  </nav>
</body><!--BODY ENDS-->
<div class="container-fluid"> 
  <p></p>
  <p></p>
  <p></p>
      <div class=" container-fluid" style="border-radius: 0px;">
        <h1 class=" text-center container-fluid" style="font-family: Times New Roman; font-size:5em;" id="HOME"><span style="color: gold">League</span><span style="color: white"> of</span> <span style="color: gold"> Legends</span></h1>
        
  </div>
  <div class="row"> <!--ROW FOR CHRACTERS, PLAYERS, TEAMS-->
 <!-- CHARACTERS STARTS HERE-->
     <div class="col-xs-4 container-fluid"><h1 class="text-center well container-fluid" style="background-color:white; font-size: 30px; font-family: Times New Roman; color: white" id="CHARACTERS">CHARACTERS</h1>
       <!--ROW 1-->
       <div class="row">       
         <div class="col-xs-4 container-fluid" style="backgroun-color: grey">
           <button class="btn btn-block text-center well container-fluid" style="background-color: black; padding: 0px 0px 0px 0px">
             <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/diana/" target="_blank">
               <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Diana_0.jpg" alt="a picture of diana" class="img-responsive" style=""></a></button>
           <p class="text-center container-fluid " style="color: white; font-family: algerian; margin-top: -20px; font-size: 15px
                                                          ">DIANA<p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="background-color: black; padding: 0px 0px 0px 0px">
             <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/ahri/" target="_blank">
               <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_0.jpg" class="img-responsive"></a></button>
           <p class="text-center container-fluid " style="color: white; font-family: algerian; margin-top: -20px; font-size: 15px
                                                          ">AHRI</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="background-color: black; padding: 0px 0px 0px 0px">
             <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/akali/" target="_blank">
               <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Akali_0.jpg" alt="akali"></a></button>
           <p class="text-center container-fluid " style="color: white; font-family: algerian; margin-top: -20px; font-size: 15px
                                                          ">AKALI</p>
         </div>
       </div>
       <!--ROW 2-->
       <div class="row">
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="background-color: black; padding: 0px 0px 0px 0px">
             <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/alistar/" target="_blank">
               <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg" alt="allistar"></a></button>
           <p class="text-center container-fluid font-size-names" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                                         ">ALLISTAR</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/amumu/" target="_blank">
               <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Amumu_0.jpg" alt="amumu"></a></button>
           <p class="text-center container-fluid font-size-names" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                                         ">AMUMU</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/anivia/">
               <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Anivia_0.jpg" alt="anivia"></a></button>
           <p class="text-center container-fluid font-size-names" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                                         ">ANIVIA</p>
         </div>
       </div>
       <!--ROW 3-->
       <div class="row">
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/ashe/" target="_blank">
               <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ashe_0.jpg" alt="ashe"></a></button>
           <p class="text-center container-fluid font-size-names" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                                         ">ASHE</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/aurelionsol/" target="_blank">
               <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/AurelionSol_0.jpg" alt="aurelion sol"></a></button>
           <p class="text-center container-fluid font-size-names" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                                         ">AURELION SOL</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/azir/" target="_blank">
               <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Azir_0.jpg" alt="azir"></a></button>
           <p class="text-center container-fluid font-size-names" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                                         ">AZIR</p>
         </div>  
       </div>       
     </div> <!--END OF FIRST CHARACTERS DIV-->
<!--CHARACTERS END HERE-->
<!--TEAMS STARTS HERE-->
     <div class="col-xs-4 container-fluid"><h1 class="text-center well container-fluid" style="background-color:grey; font-size: 30px; font-family: Times New Roman; color: white" id="TEAMS">TEAMS</h1>
       <!--ROW 1-->
       <div class="row">
         <div class="col-xs-4 container-fluid">
         <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
           <a href="http://www.tsm.gg/" target="_blank">
             <img class="img-responsive" src="http://img09.deviantart.net/d07e/i/2014/134/a/2/tsm_minimal_logo_only__by_sikknesssam-d7iazan.jpg" alt="TSM"></a></button>
         <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                       ">TSM</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://cloud9.gg/" target="_blank">
              <img class="img-responsive" src="https://s3.amazonaws.com/mlg-gamebattles-production/assets/arenas/teams/16/23/838/23189580_1456945667_1920.jpeg" alt="cloud9"></a></button>
         <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                       ">CLOUD9</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://eng.sksports.net/SK_En/main.asp" target="_blank">
               <img class="img-responsive" src="https://i.ytimg.com/vi/zMoJNCJifvU/maxresdefault.jpg" alt="SKTT1"></a></button>
         <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                       ">SKTTI1</p>
         </div>
       </div>
       <!--ROW 2-->
       <div class="row">
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" stlye="padding: 0px 0px 0px 0px">
             <a href="http://lol.gamepedia.com/Samsung_Galaxy" target="_blank">
               <img class="img-responsive" src="http://www.teamliquid.net/staff/Fionn/galaxxy.jpg" alt="samsunggalaxy"></a></button>
         <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                       ">SSG</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://www.h2k.gg/" target="_blank">
               <img class="img-responsive" src="https://pbs.twimg.com/media/Ch32bRvWkAAntF-.jpg" alt="h2k"></a></button>
         <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                       ">H2K</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://immortals.gg/" target="_blank">
               <img class="img-responsive" src="https://static.lolwallpapers.net/2016/02/Immortals-Fan-Art-By-Rabow.png" alt="immortals"></a></button>
         <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                       ">IMMORTALS</p>
         </div>
       </div>
       <!--ROW 3-->
       <div class="row">
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
             <a href="http://clgaming.net/" target="_blank">
               <img class="img-responsive" src="https://liquipedia.net/commons/images/8/86/CLG-logo.png" alt="clg"></a></button>
         <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                       ">CLG</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block tex-center well" style="padding: 0px 0px 0px 0px">
            <a href="http://lol.gamepedia.com/ROX_Tigers" target="_blank">
              <img class="img-responsive" src="https://www.esportspedia.com/lol/images/9/94/Roxtigersnew.png" alt="roxtigers"></a></button>
         <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                       ">ROX T</p>
         </div>
         <div class="col-xs-4 container-fluid">
           <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
            <a href="lol.gamepedia.com/Edward_Gaming" target="_blank">
              <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Edward_Gaming_logo.png/330px-Edward_Gaming_logo.png"></a></button>
         <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                       ">EDG</p> 
         </div>         
       </div>   
     </div> <!--END OF FIRST TEAMS DIV-->
<!--TEAMS END HERE-->
<!--PLAYERS START HERE-->
     <div class="col-xs-4 container-fluid"><h1 class="text-center well container-fluid" style="background-color:white; font-size: 30px; font-family: Times New Roman; color: white" id="PLAYERS">PLAYERS</h1>
       <!--ROW 1-->
       <div class="row">
            <div class="col-xs-4 container-fluid">
              <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
                <a href="#FAKER" >
                  <center>
                  <img class="img-responsive" src="https://gamepedia.cursecdn.com/lolesports_gamepedia_en/thumb/1/1c/SKT_Faker_2019_Split_2.png/330px-SKT_Faker_2019_Split_2.png?version=843ed75624355361296c5fd9c0a702dc" alt="Faker"></center>
                </a></button>
              <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                            ">FAKER</p>
            </div>
            <div class="col-xs-4 container-fluid">
              <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
                <a href="#BJERGSEN">
                  <center>
                  <img class="img-responsive" src="https://gamepedia.cursecdn.com/lolesports_gamepedia_en/thumb/c/c9/TSM_Bjergsen_2019_Split_2.png/330px-TSM_Bjergsen_2019_Split_2.png?version=56a24026c9389faa158dad777d04b434" alt="Bjergsen"></center>
                </a></button>
              <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                           ">BJERGSEN</p>
            </div>
            <div class="col-xs-4 container-fluid">
              <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
                <a href="#WESTDOOR">
                  <center>
                  <img class="img-responsive" src="https://gamepedia.cursecdn.com/lolesports_gamepedia_en/thumb/1/1e/AHQ_Westdoor_2018_Split_2.png/330px-AHQ_Westdoor_2018_Split_2.png?version=a530832b0efe86b358de279667e2a3e8" alt="westdoor"></center>
                </a></button>
              <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                            ">WESTDOOR</p>
            </div>
        </div>
            <!--ROW 2-->
         <div class="row">
            <div class="col-xs-4 container-fluid">
              <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
                <a href="#DOUBLELIFT">
                  <center>
                  <img class="img-responsive" src="https://gamepedia.cursecdn.com/lolesports_gamepedia_en/thumb/6/69/TL_Doublelift_2019_Split_1.png/330px-TL_Doublelift_2019_Split_1.png?version=a87433a7337c02be87ebc2865dddcdd7" alt="doublelift"></center>
                </a></button>
              <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                            ">DOUBLELIFT</p>
            </div>
            <div class="col-xs-4 container-fluid">
              <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
                <a href="#YELLOWSTAR">
                  <center>
                  <img class="img-responsive" src="https://gamepedia.cursecdn.com/lolesports_gamepedia_en/thumb/b/bc/FNC_Yellowstar_2016_Summer.png/330px-FNC_Yellowstar_2016_Summer.png?version=7b92a50f039f0e84885c14cea78587bf" alt="yellowstar"></center>
                    </a></button>
              <p class="text-center container-fluid" style="font-family: algerian; color: white; margin-top: -20px; font-size: 15px
                                                            ">YELLOWSTAR</p>
            </div>
            <div class="col-xs-4 container-fluid">
              <button class="btn btn-block text-center well" style="padding: 0px 0px 0px 0px">
                <a href="#IMP">
                  <center>
                  <img class="img-responsive im" src="https://gamepedia.cursecdn.com/lolesports_gamepedia_en/thumb/7/75/JDG_imp_2019_Split_2.png/330px-JDG_imp_2019_Split_2.png?version=2ae774f674810b8bc2eb560895b2b2be" alt="imp"></center>
                    </a></button>
              <p class="text-center container-fluid" style="font-family: algerian; color:white; margin-top: -20px; font-size: 15px
                                                            ">IMP</p>
            </div> 
         </div> <!--END OF ROW 2 TEAMS-->
     </div> <!--END OF PLAYERS DIV-->
 <!--PLAYERS END HERE-->
   </div> <!--END OF ROW FOR CHARACTERS, TEAMS, PLAYERS-->
  <div class="row">
    <div class="col-xs-4 container-fluid">
      <a href="http://gameinfo.na.leagueoflegends.com/en/game-info/champions/" target="_blank">
      <h1 class="text-center well container-fluid" style="background-color:white; font-size: 10px; font-family: Times New Roman; color: white" >FOR MORE CHARACTERS</h1></a>
      <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">*THE LINKS & IMAGES ABOVE/BELOW IS NOT OWNED BY ME</p>
    </div> <!-- ENDING FOR "FOR MORE CHARACTERS"-->
    <div class="col-xs-4 container-fluid">
      <a href="http://lol.gamepedia.com/Portal:Teams" target="_blank">
      <h1 class="text-center well container-fluid" style="background-color:white; font-size: 10px; font-family: Times New Roman; color: white" >FOR MORE TEAMS</h1></a>
      <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">*THE LINKS & IMAGES ABOVE/BELOW IS NOT OWNED BY ME</p>
    </div> <!--ENDING FOR "FOR MORE TEAMS"-->
    <div class="col-xs-4 container-fluid">
      <a href="http://www.lolesports.com/en_US/featured/top20" target="_blank">
      <h1 class="text-center well container-fluid" style="background-color:white; font-size: 10px; font-family: Times New Roman; color: white" >FOR MORE PLAYERS</h1></a>
      <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">*THE LINKS & IMAGES ABOVE/BELOW IS NOT OWNED BY ME</p>
    </div> <!-- ENDING FOR "FOR MORE PLAYERS"--> 
  </div> <!--ENDING DIV FOR SECOND SECTION-->
 <div>
   <h1 class="jumbotron text-center" style="color: gold; font-family: copperplate gothic bold;" id="INFORMATIONS">PLAYER INFORMATIONS</h1>
  </div> <!--ENDING ROW FOR THIRD SECTION-->
  <div>
    <div id="FAKER">
      <div class="row">
        <div class="col-xs-4">
          <center>
            <img class="img-responsive" src="https://genknews.genkcdn.vn/2019/2/20/photo-1-15506580471741809623406.jpg" alt="faker"></center>
          
        </div> <!--FIRST COLUMN END-->
        <div class="col-xs-7 container-fluid" style="background-color: rgb(102, 90, 88); font-family: Times New Roman; font-size: 2em">
          <ul>
            <li><strong>Name:</strong> Lee Sang-hyeok</li>
            <li><strong>Born:</strong> May 7, 1996(age20); South Korea</li>
            <li><strong>Nationality:</strong> South Korean</li>
            <li><strong>Team:</strong> SK Telecom T1</li>
            <li><strong>Role:</strong> 	Mid</li>
            <li><strong>Early Life:</strong><span style="font-size: 15px">Faker was born in Seoul on May 7, 1996. He and his brother were raised by their grandparents and their father, Lee Kyung-joon in Gangseo District, Seoul. Faker always loved puzzles and video games, including custom maps on Warcraft III and the MOBA "Chaos". He discovered League of Legends in late 2011, and quickly became very good at the game. He dropped out of high school in order to join SKT. </span></li>
          </ul>
          <a href="https://en.wikipedia.org/wiki/Faker_(video_gamer)" target="_blank">
          <p class="container-fluid text-center text-primary" style="font-family: Times New Roman; font-size: 10px">FOR FULL INFORMATION</p></a>
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">*THE LINK ABOVE IS NOT OWNED BY ME</p>
        </div> <!--SECOND COLUMN END-->
      </div> <!--ENDING ROW FOR FAKER-->
    </div> <!--ENDING DIV FOR FAKER-->
    <hr>
    <div id="BJERGSEN">
      <div class="row">
        <div class="col-xs-4">
          <center>
            <img class="img-responsive img-center" src="https://pbs.twimg.com/profile_images/1119832495891959808/rJKIB9Zv_400x400.png" alt="bjergsen"></center>
          
        </div> <!--FIRST COLUMN END-->
        <div class="col-xs-7 container-fluid" style="background-color: rgb(102, 90, 88); font-family: Times New Roman; font-size: 2em">
          <ul>
            <li><strong>Name:</strong> Søren Bjerg</li>
            <li><strong>Born:</strong> February 21, 1996 (age 20); Denmark</li>
            <li><strong>Nationality:</strong> Danish</li>
            <li><strong>Team:</strong> 	Team SoloMid</li>
            <li><strong>Role:</strong> Mid</li>
            <li><strong>Championships:</strong> 2015 NA LCS Spring Split; 2016 NA LCS Summer Split</li>
            <li><strong>Personal Life:</strong> <span style="font-size: 15px"> Søren Bjerg was born on February 21, 1996.[9] He has two brothers.[10] He currently lives at the TSM gaming house in Los Angeles, California.[11] Other games he used to play include Counter Strike Global Offensive, World of Warcraft, and Diablo 2.</span></li>
          </ul>
          <a href="https://en.wikipedia.org/wiki/Bjergsen" target="_blank">
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">FOR FULL INFORMATION</p>  
          </a>
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">*THE LINK ABOVE IS NOT OWNED BY ME</p>
        </div> <!--SECOND COLUMN END-->
      </div> <!--ENDING ROW FOR BJERGSEN-->
    </div> <!--ENDING DIV FOR BJERGSEN-->
    <hr>
    <div id="IMP">
      <div class="row">
        <div class="col-xs-4">
          <center>
            <img class="img-responsive img-center" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbgq_xFrIvgklIRLKU2_xhUnVU6MdcG3Hb8x_e3qzP7KneDVs3" alt="imp"></center>
          
        </div> <!--FIRST COLUMN END-->
        <div class="col-xs-7 container-fluid" style="background-color: rgb(102, 90, 88); font-family: Times New Roman; font-size: 2em">
          <ul>
            <li><strong>Name:</strong> Gu Seung-bin</li>
            <li><strong>Born:</strong> June 7, 1995(age 21); South Korea</li>
            <li><strong>Nationality:</strong> South Korean</li>
            <li><strong>Team:</strong> LGD Gaming</li>
            <li><strong>Role:</strong> AD</li>
            <li><strong>Alternate ID's:</strong><span style="font-size: 15px"> tdyipc (NA), MVP imp (KR), 4seasons (KR), 잊혀진계절 (KR), sbimp (Current KR ID), dog pmi (Actual KR)</span></li>
          </ul>
          <a href="http://lol.gamepedia.com/Imp" target="_blank">
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">FOR FULL INFORMATION</p></a>
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">*THE LINK ABOVE IS NOT OWNED BY ME</p>
        </div> <!--SECOND COLUMN END-->
      </div> <!--ENDING ROW FOR IMP-->
    </div> <!--ENDING DIV FOR IMP-->
    <hr>
    <div id="WESTDOOR">
      <div class="row">
        <div class="col-xs-4">
          <center>
            <img class="img-responsive img-center" src="https://gamepedia.cursecdn.com/lolesports_gamepedia_en/d/d0/Ahq_westdoor_2014_WCS.jpg?version=bc3372426e774684f2f249fe0744b4c5" alt="imp"></center>
        </div> <!--FIRST COLUMN END-->
        <div class="col-xs-7 container-fluid" style="background-color: rgb(102, 90, 88); font-family: Times New Roman; font-size: 2em">
            <ul>
              <li><strong>Name:</strong> Liu Shu-Wei</li>
              <li><strong>Born:</strong> October 16, 1993; Taiwan</li>
              <li><strong>Nationality:</strong> Taiwanese</li>
              <li><strong>Team:</strong> ahq e-Sports Club</li>
              <li><strong>Role:</strong>Mid</li>
              <li><strong>Personal Life:</strong><span style="font-size: 15px"> He first started playing Defense of the Ancients before moving onto League of Legends because he felt the game emphasized on teamwork more than any other action RTS games out there and was thus, much more interesting and challenging. He is now one of the most famous players in the Taiwanese scene and one of the most skilled players in the world. He is crucial to AHQ's success, leading ahq e-Sports to first place in the 2015 LMS Playoffs.</span></li>
            </ul>
           <a href="http://lol.gamepedia.com/Westdoor#Biography" target="_blank">
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">FOR FULL INFORMATION</p></a>
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">*THE LINK ABOVE IS NOT OWNED BY ME</p>
        </div> <!--SECOND COLUMN END-->
      </div> <!--ENDING ROW FOR WESTDOOR-->
    </div> <!--ENDING DIV FOR WESTDOOR-->
    <hr>
    <div id="YELLOWSTAR">
      <div class="row">
        <div class="col-xs-4">
          <center>
            <img class="img-responsive img-center" src="https://i.pinimg.com/originals/f9/b0/33/f9b0338e8fc0a4433f6f65599d0b3d36.png" alt="yellowstar"></center>
        </div> <!--FIRST COLUMN END-->
        <div class="col-xs-7 container-fluid" style="background-color: rgb(102, 90, 88); font-family: Times New Roman; font-size: 2em">
            <ul>
              <li><strong>Name:</strong> Bora Kim</li>
              <li><strong>Born:</strong> February 15, 1992(age24); France</li>
              <li><strong>Nationality:</strong> French</li>
              <li><strong>Team:</strong> Paris Saint-Germain</li>
              <li><strong>Role:</strong>eSports Manager</li>
              <li><strong>Personal Life:</strong><span style="font-size: 15px">YellOwStaR's first gaming experience started at a very early stage in his life; he was only two years old when he first played on the Megadrive. At an age of 8, he switched to PC gaming and, upon playing StarCraft for the first time, he was stuck to the RTS genre.[1] In 2002, he switched to WarCraft 3 due to his brother's insistence. It took him 3 years to step into WC3's competitive scene and make a name for himself under the monikers Unlucky.power and Psyko. He started off as an Undead player, but changed to the Night Elf mid-way through his WC3 career.[2] In 2009, he was introduced to League of Legends by his brother and has been sticking to this ever since.[3]</span></li>
            </ul>
           <a href="http://lol.gamepedia.com/YellOwStaR" target="_blank">
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">FOR FULL INFORMATION</p></a>
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">*THE LINK ABOVE IS NOT OWNED BY ME</p>
        </div> <!--SECOND COLUMN END-->
      </div> <!--ENDING ROW FOR YELLOWSTAR-->
    </div> <!--ENDING DIV FOR YELLOWSTAR-->
    <hr>
    <div id="DOUBLELIFT">
      <div class="row">
        <div class="col-xs-4">
          <center>
            <img class="img-responsive img-center" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKqzxYOFT_iHVYMimi4ZOhTVMTTVlI5Cb7pcVS7KFiwOq6ipxM"></center>
          
        </div><!--FIRST COLUMN END-->
        <div class="col-xs-7 container-fluid" style="background-color: rgb(102, 90, 88); font-family: Times New Roman; font-size: 2em">
          <ul>
            <li><strong>Name:</strong> Yiliang Peng</li>
              <li><strong>Born:</strong> July 19, 1993(age23); United States</li>
              <li><strong>Nationality:</strong> American</li>
              <li><strong>Team:</strong> Team SoloMid</li>
              <li><strong>Role:</strong>AD</li>
              <li><strong>Personal Life:</strong><span style="font-size: 15px">Doublelift hails from Mission Viejo, California. Doublelift first discovered his love for video games through the classic Nintendo 64 titles Star Fox and Golden Eye. After his brother got a computer, Doublelift frequently used it to play Diablo 1 and StarCraft. Since Doublelift’s brother would buy a new computer every few years, Doublelift soon came to own his own hand-me-down desktop. This allowed him to spend more time playing computer games such as DotA, WoW, and HoN with his brother and friends. Eventually they all left these games behind and moved to LoL. </span></li>
            </ul>
           <a href="http://lol.gamepedia.com/Doublelift" target="_blank">
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">FOR FULL INFORMATION</p></a>
          <p class="container-fluid text-primary text-center" style="font-family: Times New Roman; font-size: 10px">*THE LINK ABOVE IS NOT OWNED BY ME</p>
        </div> <!--SECOND COLUMN END-->
      </div> <!--ENDING ROW FOR DOUBLELIFT-->
    </div> <!--ENDING DIV FOR DOUBLELIFT--> 
  </div> <!--ENDING DIV FOR FOURTH SECTION-->
  
</div> <!--FIRST DIV-->

              
            
!

CSS

              
                @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}
  h1 {
    background-image:
  url("http://www.f-covers.com/cover/league-of-legends-fantasy-art-facebook-cover-timeline-banner-for-fb.jpg");
    background-size: cover;
}
ul {
  list-style-type: none;
}
.navbar{
  position:fixed;
  top: 0;
  width:100%;
  z-index: 999;
}
hr{
  display: ;
  width: 100%;
}
              
            
!

JS

              
                
              
            
!
999px

Console