values.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/betaicon.ico">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="bootstrap/css/custom.css" rel="stylesheet" type="text/css"/>
	<title> WPI Beta Theta Pi</title>
	<style type="text/css">
	.span4 {
		margin-left: 0px;
	}
	
	.span5 {
		margin-left: 0px;
	}
	
	.imagefit {
		height:500px; 
		width:inherit; 
		overflow: hidden;
	}

  .caption-container {
    position: absolute;
    bottom: 0px;
  }
	
	@media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        height: 500px;
      }

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
    }


    @media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
        height: 300px;
      }
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }
     }
     
     /* Featurettes
         ------------------------- */
     
         .featurette-divider {
           margin-bottom: 20px ; /* Space out the Bootstrap <hr> more */
           margin-top: 20px;
         }
         .featurette {
           overflow: hidden; /* Vertically center images part 2: clear their floats. */
         }
         .featurette-image {
           margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
         }
     
         /* Give some space on the sides of the floated elements so text doesn't run right into it. */
         .featurette-image.pull-left {
           margin-right: 40px;
         }
         .featurette-image.pull-right {
           margin-left: 40px;
         }
     
         /* Thin out the marketing headings */
         .featurette-heading {
           font-size: 50px;
           font-weight: 300;
           line-height: 1;
           letter-spacing: -1px;
         }
      
      
  </style>
  
<script src="bootstrap/js/jquery-1.9.1.js"></script>
<script src="bootstrap/js/jquery-ui.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>

<!-- Icon: Either Social Media Icon, Great Seal, or Coat of Arms-->
<!-- Top left: Seal or something, facing inward. Top right, wpi seal, facing inward-->

<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
          <a class="brand" href="#">WPI BETA THETA PI</a>
      </div>
    </div>
	<div class="container body-container">
		<div class="hero-unit" style="background-color:#ffffff;">
			<div class="row">
				<div class="span11" style="width:inherit; margin-left: 20px;">
					<div class="navbar2" style="padding-top:20px;">
						<div class="navbar-inner2">
							<div class="container2">
								<ul class="nav">
									<li><a href="index.html">Home</a></li>
									<li><a href="recruitment.html">Go Beta</a></li>
									<li><a href="values.html">Values</a></li>
									<!--<li><a href="brotherhood.html">Brotherhood</a></li>--> <!-- dropdown = values --> 
									<li><a href="contact.html">Current Execs</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="container-marketing">
						<hr class="featurette-divider">
						<div class="featurette">
							<img class="featurette-image pull-right" style="max-width:300px; margin-top: 20px;" src="./images/fingeractivity1.jpg">
							<h2 class="featurette-heading">
							Mutual Assistance
							</h2>
							<p class="lead">
							Betas believe that men are mutually obligated to help others in the honorable labors and aspirations of life.
							</p>
						</div>
						
						<hr class="featurette-divider">
						<div class="featurette"> <!--Don't cut off tushar's head --> 
							<img class="featurette-image pull-left" style="max-width:400px; margin-top: 20px;" src="./images/constitutionsigning.jpg">
							<h2 class="featurette-heading">
						    Intellectual Growth
							</h2>
							<p class="lead">
							Betas are devoted to continually cultivating their minds, including high standards of academic achievement.
							</p>
						</div>
						
						<hr class="featurette-divider">
						<div class="featurette">
							<img class="featurette-image pull-right" style="max-width:300px; margin-top: 20px;" src="./images/trust.jpg">
							<h2 class="featurette-heading">
							Trust
							</h2>
							<p class="lead">
							Betas develop absolute faith and confidence in one another by being true to themselves and others.
							</p>
						</div>
						
						<hr class="featurette-divider">
						<div class="featurette">
							<img class="featurette-image pull-left" style="max-width:300px; margin-top: 20px;" src="./images/funpic1.jpg">
							<h2 class="featurette-heading">
							Responsible Conduct
							</h2>
							<p class="lead">
							Betas choose to act responsibly, weighing the consequences of their actions on themselves and those around them.
							</p>
						</div>
						
						<hr class="featurette-divider">
						<div class="featurette">
							<img class="featurette-image pull-right" style="max-width:300px; margin-top: 20px;" src="./images/nickhat.jpg">
							<h2 class="featurette-heading">
							Integrity
							</h2>
							<p class="lead">
							Betas preserve their character by doing what is morally right and demanding the same from their brothers.
							</p>
						</div>
						
						<hr class="featurette-divider" style="margin-bottom:10px;">
						</div>
				</div>
			</div>
		</div>
		<div class="container" style="width:inherit;">
			<div class="pull-left span5">
				<address>
					<strong>WPI BETA THETA PI</strong><br>
					100 Institute Road<br>
					Worcester, MA 01609<br>
				</address>
			</div>
			<!--
			<button class="btn btn-large" href="brothers.html">
				<a href="brothers.html">Meet The Brothers</a>
			</button>
			-->
			<div class="pull-right"> 
				<a href="https://twitter.com/Beta_WPI"><img src="./images/twitter.png"/></a>
				<a href="https://www.facebook.com/pages/Beta-Theta-Pi-Worcester-Polytechnic-Institute/364925203577997"><img src="./images/facebook.png"/></a>
			</div>
		</div>
	</div>
</body>
</html>