Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Game Reviews|GameR</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
    <link rel="stylesheet" href="/css/style.css">
</head>
​
<body>
<div class="container">
  <div class="row">
     <div class="col-sm-12">
  <h1 class="title">GameR</h1>
  <h6 class="title">A Gaming Community</h2>
    </div>
  </div>
  
<!-- Header & Navbar -->
    <header class="row top-bar">
        <div class = "col-sm-12 right-menu">
            <a href="http://jsbin.com/hixogeb">Home &#903</a>
            <a href="http://jsbin.com/lonesi">About Us &#903</a>
            <a href="https://jsbin.com/qinosa">Game Review &#903</a>
            <a href="https://jsbin.com/sohosim">Market Place </a>
            </div>
    </header>
<!-- end -->
    
<!--  Game Review 1 -->
<div>    
    <img class="img"  src="http://media-www-battlefieldwebcore.spark.ea.com/content/battlefield-portal/en_US/_global_/_jcr_content/ccm/componentwrapper_1/components/opengraph/ogImage.img.jpg" alt="battlefield 1 cover picture">
​
       <div class="row">
        <div class="col-sm-12">
            <h3>Battlefield 1 Review</h3>
        </div>
      </div>
  <br>
       
      <div class="row">
        <div class ="col-sm-12">
         
            <button class="btn1">Show review</button>
<br>
            <p class="show1 hide">Battlefield 1 was one of the most anticipated games to come out this year. In Japan the PlayStation 4 version topped sales, selling 113,083 copies in its first week. This game has won best action game in the Game Critics Awards 2016 and Has been nominated, Best of Show, Best Console Game, Best PC Game, and Best Online Multiplayer. For The Game Awards 2016, it’s been nominated for Best Game Direction, Best Music/Sound Design, Best Multiplayer, and Best Action Game. According to Game Informer, GameSpot, and IGN, the game has scored 9.25/10, 9/10, and 9/10 respectfully. </p>
           <p class=" show1 hide">As a PC gamer, and Battlefield 1 being the first game in the Battlefield game series, I was impressed with the game. As a former Call of Duty player back on XBOX 360, the game modes brought a whole new way of playing a first person shooter game. Specifically, I enjoy playing Conquest, where players have to take control and hold 3 spots on a large map. Also, I’m very impressed with the four classes you can choose to equip. My favorite is the assault class. The Model 10 A Hunter variant was just brilliant as it could destroy enemies at length but after the nerf, my next favorite would be the Automatico Trench variant, as it has a high rate of fire and causes major damage. 
<br>
             <button class="btn2">Hide review</button></p>
        </div>
      </div>
  <br>    
<div class="row">
  
  <div class="col-sm-12">
    <button type="button" class="btn5">Click me to see pictures from r/Gaming (Battlefield)!</button>
      <div class="text"></div>
       </div>
  </div>
  </div>
  
  
​
<!--  Game Review 2 -->
​
 <div>
   
   <br>
   <div class="break"> </div>
   
      <img class="img2"  src="https://www.destinythegame.com/content/dam/atvi/bungie/dtg-comet/wtb/rise-of-iron/roi-box.jpg" alt="Destiny Cover picture">
    
   <div class="row">
     
        <div class="col-sm-12">
            <h3>Destiny Review</h3>
        </div>
   </div>
   <div class="row">
     
        <div class ="col-sm-12">
          <br>
            <button class="btn3">Show review</button>
<br>
            <p class="review2 hide">With the arrival of Rise of Iron this past September, Destiny has gotten a whole lot bigger! Grind your way to the max light level (400) and earn new exotic gear, defeat the siva infused fallen opponents, and explore tha vast depths of the Plaguelands. Meet both new and old allies at the brand new Iron Temple social space where the Iron Lords await your arrival to save the world. In addition, the brand new Iron Banner PVP mode is geared towards players who have put in time and effort into making themselves better and stronger. This is due to the fact that the mode incorporates benefits depending on what weapons/armor you are using. Visit new locations and revisit old enemies who are now buffed up and stronger due to experimentation with Siva (a synthetic steroid).</p>
           <p class="review2 hide">Personally, I am truly enjoying this DLC and I feel like it is almost worth the $30 price tag. With a new exciting raid and a lot of new ways to play with and against other players, the game has received a much needed refresher. The grind for new weapons and armor can be a bore at times but the payout is worth it. Snailing towards level 400 is a pretty fun experience and it keeps you busy for a good amount of time. My favorite part of this DLC is the constant updates and holiday releases that Bungie are giving to the players for free. This includes the really fun and cool Halloween event that was held for all Guardians to enjoy. My only complaint about this DLC is that I feel like it should include more new content as opposed to the various levels, weapons, and bosses that were simply reskinned and made stronger. 
<br>
             <button class="btn4">Hide review</button></p>          
        </div>
     
   </div>
   
<br>    
<div class="destiny row">
  <div class="col-sm-12">
    <button type="button" class="btn6">Click me to see pictures from r/Gaming (Destiny)!</button>
    <div class="text2"> </div>
       </div>
 </div>
​
  
<!-- Footer -->   
   <br>
  <!-- //<hr>
  //Break in section
    -->
   <div class="break"> </div>
    <div class ="row footer">
        <div class="col-sm-8">
          - <u>Contact Us</u> -
          <br>    
           <b>Email: </b>GameRGroup@DoGA.rutgers.edu
          <br>
           <b>Office #: </b>860-021-7834
          <br>
           <b>Address: </b> Rutgers Department of Game Appreciation
          <br>
            - 123 Bartholemew Ave, New Brunswick NJ 08901
      </div>
      <div class="col-sm-4">
        - <u>Social Media</u> -
           <br>
        <b>Trinh: </b> 
        <a href="mailto:Trinh.son@rutgers.edu" class="no line"> 
                <img src="http://www.iconsdb.com/icons/preview/persian-red/email-2-xxl.png" alt="email icon" class="icons">
            </a>
          <br>
        <b>Roman:</b>
        <a href="https://www.facebook.com/rninetail" class="no line">
                <img src="https://comminfo.rutgers.edu/templates/sci-2016-new/images/sci-facebook.png" alt="facebook icon" class="icons">
            </a>
          <br>
        <b>Nick: </b>
         <a href="https://www.facebook.com/nick.chin23" class="no line">
                <img src="https://comminfo.rutgers.edu/templates/sci-2016-new/images/sci-facebook.png" alt="facebook icon" class="icons">
            </a>
          <br>
         <b>Josh: </b>
         <a href="https://www.facebook.com/josh.casquejo.9" class="no line">
                <img src="https://comminfo.rutgers.edu/templates/sci-2016-new/images/sci-facebook.png" alt="facebook icon" class="icons">
            </a>
          <br>   
​
        
      </div>
      
    </div>
      
     <h5>Copyright &copy; 2016 Rutgers, the State University of New Jersey, an equal opportunity, affirmative action institution.</h5>
   <!-- End -->
  
  </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</body>
</html>
 
* {
  box-sizing: border-box;
}
​
body {
  padding: 20px;
  background-color: #F0F0F0 ;
  text-align: center;
}
p.small {
    line-height: 70%;
}
.container {    
  background-color: white;
  box-shadow: 0px 0px 20px #888888;
}
.top-bar{
  background-color: #FF9999;
  padding: 10px 0px 10px;
}
.top-bar a {
  color:black;
  padding: 0px; 15px;
  border-right:2px solid #0000;
  line-height:30px;
}
.title{
  font-family: agency fb;
  padding: px;
}
.hide{
  visibility: hidden;
}
.img {
  width:100%;
  max-height:500px;
  float: left;
  background-size:contain;
  padding-bottom:10px;
}
.img2{
  max-height:500px;
  width: 80%;
  margin-top:12px;
}
.btn2{
  float: center;
}
button {
  box-shadow: -1px 3px 3px #888888;
    height: 30px;
    margin-bottom: 10px;
    text-align: center;
  line-height: 20px;
  font-family: agency fb;
  font-size:19px;
    word-wrap:break-word;
  height:100%;
}
button:hover {
    background: #d3d3d3 ;
    text-decoration: none;
    filter: none;
}
h1 {
  padding: 1%;
  font-family: agency fb;
}
h3,h5{
  font-family: agency fb;
   
}
.right-menu,.footer {
  font-size:18px;
    font-family: agency fb;
}
h6 {
  font-size:20px;
}
​
.row.footer{
  text-align:center;
  padding-right:35px;
}
.break{
  width: 100%;
  height: 1px; 
  background:   #D0D0D0 ; 
  overflow: hidden;
  margin-bottom:10px;
  
}
.icons{
    height: 35px;
    width:35px;
    left: 20px;
    margin: 2px;
    padding: 5px;
}
a.no.line{
    border-right-style: none;
    color:red;
    margin: 2px;
  text-decoration:none;
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rnin3tailpro
0viewers