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>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Assignment 2</title>
  <meta name="description" content="">
  <meta name="author" content="">
    <link rel="stylesheet" href="/css/style.css">
 </head> 
  <body> 
    <div class="container">
      
      <div class="row top-bar">
        <div class="col-sm-7">
          <a href="#">Rutgers</a>
          <a href="#">Prospective Students</a>
          <a href="#">Current Students</a>
          <a href="#">Alumni &amp Friends</a>
          <a href="#">Faculty &amp Staff</a>           
        </div>    
        <div class="col-sm-5 top">
          <a href="">VISIT</a>
          <a href="">DONATE</a>
          <a href="">APPLY</a>
          <input type="text" placeholder="Search SC&I">
        </div>      
      </div> <!-- end row -->
      
      <div class= "row logo-bar">
        <div class="col-sm-8 kitty-logo">
          <img src="http://placekitten.com/g/250/125" alt="Catlogo">
        </div>
        <div class="col-sm-4 kitty">
          <img src="http://placekitten.com/g/150/115" alt="cattextlogo">
        </div>
      </div> <!-- End row -->
      
     <div class="row nav-bar"> 
         <nav class="navigation">
         <div class="col-sm-12">
       <ul>
       <li><a href="#"> Undergraduate</a>
        <ul>
            <li><a href="#">Communication Major</a></li>
            <li><a href="#">Information Technology &amp Informatics Major</a></li>
            <li><a href="#">Journalism and Media Studies</a></li>
            <li><a href="#">Digital Communication, Information, and Media Minor</a></li>
            <li><a href="#">Gender and Media Minor</a></li>
            <li><a href="#">Introductory and Interdisciplinary Courses</a></li>
        </ul>
       </li> 
       <li><a href="#"> Graduate</a>
        <ul>
            <li><a href="#">Master of Communication and Information Studies</a></li>
            <li><a href="#">Master of Information</a></li>
            <li><a href="#">PhD Program</a></li>
        </ul>
       </li>
       <li><a href="#"> Professional Development</a>
       <li><a href="#">Research</a>
        <ul>
            <li><a href="#">Research at SC&ampI</a></li>
            <li><a href="#">Center and Networks</a></li>
            <li><a href="#">Graduate Student Research</a></li>
        </ul>
       </li>
       <li><a href="#"> News &amp Events</a>
        <ul>
            <li><a href="#">Recent &amp Past News</a></li>
            <li><a href="#">Event Calendar</a></li>
            <li><a href="#">SC&ampI Update</a></li>
            <li><a href="#">SC&ampI Magazine</a></li>
            <li><a href="#">For the Media</a></li>
        </ul>
      </li>
       <li><a href="#"> About SC&ampI</a>
        <ul>
          <li><a href="#">About SC&ampI</a></li>
          <li><a href="#">Contact SC&ampI</a></li>
          <li><a href="#">Visit SC&ampI</a></li>
          <li><a href="#">Employment Opportunities at SC&I</a></li>
          <li><a href="#">Communication Department</a></li>
          <li><a href="#">Journalism and Media Studies Department</a></li>
          <li><a href="#">Library and Information Science Department</a></li>
          <li><a href="#">Office of Student Services</a></li>
        </ul>
      </li>
       <li><a href="#"> Directory</a>
        <ul>
          <li><a href="#">All Faculty and Staff</a></li>
          <li><a href="#">Department of Communication</a></li>
          <li><a href="#">Deapartment of Journalism and Media Studies</a></li>
          <li><a href="#">Department of Library and Information Science</a></li>
          <li><a href="#">Dean's Office and IT Staff</a></li>
          <li><a href="#">Research Support Staff</a></li>
          <li><a href="#">Doctoral Students</a></li>
       </ul>
     </li>
       </div>
       </nav>
      </div> <!-- End row -->
      
      <div class="row main-row">
      <div class="col-sm-12">
       <img src="https://placekitten.com/g/1060/330" alt="giantcat">
      </div>
      </div> <!-- End Row-->
    
      <div class="row info-row">
        <div class="col-sm-4 box1">
          <h4><a href="#" class="grey">Information Session for Prospective MCIS Students</h4>
          <br>
          <p>October 11, 2016</p>
          <p>6:30 p.m. – 7:30 p.m.</p>
          <p>On-campus</p>
        </div>
        <div class="col-sm-4 box2">
          <h4><a href="#" class="red">Information Session for Prospective MI Students</a></h4>
          <br>
          <p>October 13, 2016</p>
          <p>6:30 p.m. – 7:30 p.m.</p>
          <p>On-campus</p>
        </div>
         <div class="col-sm-4 box3">
          <h4><a href="#" class="black">Gloria Steinem Endowed Chair in Media, Culture and Feminist Studies</a></h4>
           <br>
           <div class="image">
           <img src="http://placekitten.com/g/150/150" alt="donationpicture" class="little cat" >
           </div>
          <p class="learn">Learn more from this video.</p>
         </div>
      </div> <!-- End Row-->
      
      <div class="row who-row">
        <h2 class="blacktext">WHO WE ARE</h2>
        <div class="col-sm-4 box1">
        <h4><a href="#" class="red">Communication</a></h4>
          <br>
        <p>We are dedicated to the advancement of communication theory and practice through research and public and professional outreach, as well as to preparing students to shape communication concepts and prarctices of the future.</p>
        </div>
        <div class="col-sm-4 box2">
        <h4 ><a href="#" class="red">Journalism and Media Studies</a></h4>
          <br>
        <p>We are committed to cultivating innovative jornalism and media production, while grounding it in analysis of institutions and practices around democratic principles.</p>
        </div>
        <div class="col-sm-4 box3">
        <h4 ><a href="#" class="red">Library and Information Science</a></h4>
          <br>
        <p>We seek to make significant contributions to the social development of individuals by understanding the links among people, information and technology, as well as to prepare students to lead in information rich contexts and systems.</p>
        </div>
      </div><!--End Row-->
      
      <div class="row address-bar">
        <div class="col-sm-9 box1">
          <br>
          <h4 class="black bold">
            Rutgers School of Communication and Information
          </h4>
          <h4>
            4 Huntington St. · New Brunswick, NJ · 08901
          </h4>
          <h4>
            848-932-7500
          </h4>        
        </div>
        <div class="col-sm-3">
          <br>
        <h4 class="black bold">
          CONNECT WITH US
          </h4>  
          <img src="http://placekitten.com/g/200/45" alt="donationpicture">
          <p class="red">
            @RutgersCommInfo
          </p>
          <p class="red">
            #RutgersCommInfo #RUSCI
          </p>
        </div>
      </div> <!--End Row-->
      
      <div class="row last-bar">
        <div class="col-sm-12 box1">
          <p>
            <a href="#">Contact Us</a> · <a href="#">Login</a>
          </p>
          <p>
            Copyright © 2016    Rutgers, the State University of New Jersey, an equal opportunity, affirmative action institution. 
          </p>
        </div>
      </div>
    
    </div>
  </body>
</html> 
<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>
 
.container{
      margin: auto;
      margin-top: 15px;
      margin-bottom: 15px;
      box-shadow: 0px 0px 20px #888888;
}
.top-bar{
  background: #cc0031;
  padding: 5px;
}
.top-bar a{
  color: white;
  padding: 0 25px;
  border-right: 1px solid black;
  font-size: 75%;
}
.logo-bar{
  background: #cc0031;
  padding:  25px;
}
.nav-bar{
  background: #cc0031;
}
.navigation ul{
  float: left;
  list-style-type: none;
  padding: 0, 50, 10, 50px;
  margin:0;
  position: relative;
  z-index: 1;
}
.navigation > ul{
  border: 1px solid #666;
  background: red;
}
.navigation ul a{
  display: block;
  color: white;
  text-decoration: none;
  padding: 0 30px;
  line-height: 32px;
  font-size: 100%
}
.navigation ul li{
  position: relative;
  float: left;
  margin:0;
  padding:0;
}
.navigation ul li:hover{
  background: silver;
  
}
.navigation ul li a:hover {
  color: orange;
}
.navigation ul ul{
position:absolute;
background: gray;
padding: 0px;
display:none;
top: 100%;
}
.navigation ul ul li{
float: none; 
width: 213px;
}
.navigation ul ul a{
  padding: 5px 10px;
}
navigation ul ul ul{
left: 100%;
background: #333;
top: 0;
}
.navigation ul li:hover > ul{
display: block;
​
}
.main-row{
  padding:15px;
  padding-left: 40px;
  border-bottom: 3px solid #5f6a72;
}
.col-sm-4{
padding-top: 25px;
padding-left: 0px;
padding-bottom: 25px;
padding-right:  50px;
}
.box1{
padding-left:100px;
}
.box2{
padding-left:50px;
padding-right:50px;
}
.box3{
padding-right:100px;
}
.kitty-logo{
padding-top: 25px;
padding-left:50px;
}
.kitty{
padding-left: 100px;
}
.info-row{
  border-bottom: 3px solid #5f6a72;  
}
.image{
padding-left:50px;
}
.learn{
padding-left:40px;
font-size: 125%;
}
.blacktext{
padding-left: 100px;
}
h4.grey{
  color:grey;
  font-weight: bold;
}
h4.black{
  color:black;
  font-weight: bold;
}
h4.red{
  color:red;
  font-weight: bold;
}
.who-row{
  border-bottom: 3px solid #5f6a72;
}
p.red{
  color: red;
}
.last-bar{
  font-size: 90%;
}
A.red {color:red;}
A.red:link  {text-decoration: none; color: red;}
A.red:visited {text-decoration: none; color: red;}
A.red:hover {text-decoration: underline; color: orange;}
A.red:active {text-decoration: none; color: red;}
​
A.grey {color:grey;}
A.grey:link  {text-decoration: none; color: grey;}
A.grey:visited {text-decoration: none; color: grey;}
A.grey:hover {text-decoration: underline; color: grey;}
A.grey:active {text-decoration: none; color: grey;}
​
A.black {color:black;}
A.black:link  {text-decoration: none; color: black;}
A.black:visited {text-decoration: none; color: black;}
A.black:hover {text-decoration: underline; color: black;}
A.black:active {text-decoration: none; color: black;}
​
 
​
Output

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

Dismiss x
public
Bin info
nickchin23pro
0viewers