Difference between revisions of "Team:Dalhousie/test5"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
 
 
<style>
 
<style>
−
html,
 
 
body {
 
body {
−
  height: 100%;
+
    height: 3000px;
−
  padding-top:50px;
+
    top: 0;
 +
   
 
}
 
}
−
 
+
#image {
−
.row {
+
    width: 100%;
−
  margin-left:0px;
+
    background: #444;
−
  margin-right:0px;
+
    height: 50px;
 
}
 
}
−
 
+
#scroller{
−
/* Wrapper for page content to push down footer */
+
    height:100px;
−
#wrap {
+
    background:#ccc;
−
  min-height: 100%;
+
−
  height: auto !important;
+
−
  height: 100%;
+
−
  /* Negative indent footer by its height */
+
−
  margin: 0 auto -60px;
+
−
  /* Pad bottom by footer height */
+
−
  padding: 0 0 60px;
+
 
}
 
}
−
 
+
.stuck{
−
/* Set the fixed height of the footer here */
+
    position:fixed;
−
#footer {
+
    z-index:100;
−
  height: 60px;
+
    width:100%;
−
  background-color: #f5f5f5;
+
    top:0;
−
  margin-top:50px;
+
−
  padding-top:20px;
+
−
  padding-bottom:20px;
+
−
}
+
−
 
+
−
header {
+
−
  height:100%;
+
−
min-height:500px;
+
−
}
+
−
 
+
−
#wrap > .container {
+
−
  padding: 60px 15px 0;
+
−
}
+
−
.container .credit {
+
−
  margin: 20px 0;
+
−
}
+
−
 
+
−
#footer {
+
−
  background-color:#414141;
+
−
}
+
−
 
+
−
#footer a {
+
−
  color:#efefef;
+
−
}
+
−
 
+
−
#topNav {
+
−
z-index:-1;
+
−
}
+
−
 
+
−
#nav {
+
−
  width: 100%;
+
−
}
+
−
 
+
−
#nav.affix-top {
+
−
  position: absolute;
+
−
  top:0;
+
−
  left:0;
+
−
  z-index:10;
+
−
  height:54px;
+
−
  background-color:transparent;
+
−
  border:0;
+
−
}
+
−
 
+
−
#nav.affix {
+
−
  position: fixed;
+
−
  top: 0;
+
−
  z-index:10;
+
−
  -webkit-transition: all .6s ease-in-out;
+
−
}
+
−
 
+
−
#footer > .container {
+
−
 
+
−
}
+
−
 
+
−
@media (min-width: 767px) {
+
−
  .navbar-nav.nav-justified > li{
+
−
      float:none;
+
−
  }
+
−
}
+
−
 
+
−
.navbar-nav {
+
−
  margin: 1px 1px;
+
−
} 
+
−
 
+
−
.navbar-toggle {
+
−
outline:0;
+
−
}
+
−
 
+
−
.divider {
+
−
height:50px;
+
−
}
+
−
 
+
−
.panel {
+
−
border-width:0;
+
−
}
+
−
 
+
−
@media (max-width: 768px) {
+
−
header {
+
−
+
−
}
+
−
}
+
−
 
+
−
.scroll-top {
+
−
  position:fixed;
+
−
  bottom:0;
+
−
  right:6%;
+
−
  z-index:100;
+
−
  background: #f2f3f2;
+
−
  font-size:24px;
+
−
  border-top-left-radius:3px;
+
−
  border-top-right-radius:3px;
+
−
}
+
−
.scroll-top a:link,.scroll-top a:visited {
+
−
  color:#222;
+
−
}
+
−
+
−
section {
+
−
  color: #ffffff;
+
−
  min-height: 400px;
+
−
  height: auto !important;
+
−
  height: 100%;
+
−
  padding-top:100px;
+
 
}
 
}
 
</style>
 
</style>
 +
<script>
 +
$(window).scroll(function() {
 +
if ($(window).scrollTop() > 50) {
 +
$('#scroller').addClass('stuck');
 +
} else {
 +
$('#scroller').removeClass('stuck');
 +
}
 +
   
 +
});
 +
</script>
 
</head>
 
</head>
−
 
 
<body>
 
<body>
−
 
+
<div id="image">Some image</div>
−
<!-- Wrap all page content here -->
+
<div id="scroller">Some controls</div>
−
<div id="wrap">
+
−
 
+
−
<header class="masthead">
+
−
<h1 class="text-center">Hello Bootstrap 3.</h1>
+
−
</header>
+
−
   
+
−
<!-- Fly-in navbar -->
+
−
<div class="navbar navbar-inverse navbar-static-top" id="nav">
+
−
    <div class="container">
+
−
      <div class="navbar-header">
+
−
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+
−
          <span class="icon-bar"></span>
+
−
          <span class="icon-bar"></span>
+
−
          <span class="icon-bar"></span>
+
−
        </button>
+
−
      </div>
+
−
      <div class="collapse navbar-collapse">
+
−
        <ul class="nav navbar-nav">
+
−
          <li><a href="#">Home</a></li>
+
−
          <li><a href="#section2">Profile</a></li>
+
−
          <li><a href="#section3">Projects</a></li>
+
−
          <li><a href="#section4">Location</a></li>
+
−
          <li><a href="#section5">Contact</a></li>
+
−
        </ul>
+
−
      </div><!--/.nav-collapse -->
+
−
    </div><!--/.container -->
+
−
</div><!--/.navbar -->
+
−
 
+
−
<!-- Begin page content -->
+
−
<div class="divider" id="section1"></div>
+
−
 
+
−
<div class="container">
+
−
  <div class="col-sm-10 col-sm-offset-1">
+
−
    <div class="page-header text-center">
+
−
      <h1>Since 2013</h1>
+
−
    </div>
+
−
   
+
−
    <p class="lead text-center">
+
−
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
−
    </p>
+
−
   
+
−
    <hr>
+
−
   
+
−
    <div class="divider"></div>
+
−
   
+
−
  </div>
+
−
</div>
+
−
   
+
−
<div class="divider"></div>
+
−
 
+
−
<section class="bg-1">
+
−
  <div class="col-sm-6 col-sm-offset-3 text-center"></div>
+
−
</section>
+
−
 
+
−
<div class="divider" id="section2"></div>
+
−
 
+
−
<div class="row">
+
−
  <div class="col-sm-10 col-sm-offset-1">
+
−
      <h1>Profile</h1>
+
−
     
+
−
      <hr>
+
−
   
+
−
      <p>
+
−
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
+
−
        Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
+
−
        dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
+
−
        Aliquam in felis sit amet augue.
+
−
  </p>
+
−
     
+
−
      <hr>
+
−
     
+
−
      <div class="divider"></div>
+
−
     
+
−
  </div><!--/col-->
+
−
</div><!--/container-->
+
−
 
+
−
<div class="divider"></div>
+
−
 
+
−
<section class="bg-3">
+
−
  <div class="col-sm-6 col-sm-offset-3 text-center"><h2>Clients &amp; Partners</h2></div>
+
−
</section>
+
−
 
+
−
<div class="divider" id="section3"></div>
+
−
 
+
−
<div class="bg-4">
+
−
  <div class="container">
+
−
<div class="row">
+
−
  <div class="col-sm-4 col-xs-6">
+
−
     
+
−
        <div class="panel panel-default">
+
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/444/F8F8F8" class="img-responsive"></a></div>
+
−
          <div class="panel-body">
+
−
            <p>Renovations</p>
+
−
            <p></p>
+
−
 
+
−
          </div>
+
−
        </div><!--/panel-->
+
−
      </div><!--/col-->
+
−
     
+
−
      <div class="col-sm-4 col-xs-6">
+
−
     
+
−
      <div class="panel panel-default">
+
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/454545/FFF" class="img-responsive"></a></div>
+
−
          <div class="panel-body">
+
−
            <p>Projects</p>
+
−
            <p></p>
+
−
           
+
−
          </div>
+
−
        </div><!--/panel-->
+
−
      </div><!--/col-->
+
−
     
+
−
      <div class="col-sm-4 col-xs-6">
+
−
     
+
−
      <div class="panel panel-default">
+
−
          <div class="panel-thumbnail"><a href="#" title="Interiors"><img src="//placehold.it/600x400/555/F2F2F2" class="img-responsive"></a></div>
+
−
          <div class="panel-body">
+
−
            <p>Interiors</p>
+
−
            <p></p>
+
−
           
+
−
          </div>
+
−
        </div><!--/panel-->
+
−
 
+
−
      </div><!--/col-->
+
−
     
+
−
      <div class="col-sm-4 col-xs-6">
+
−
     
+
−
      <div class="panel panel-default">
+
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/555/FFF" class="img-responsive"></a></div>
+
−
          <div class="panel-body">
+
−
            <p>Design</p>
+
−
            <p></p>
+
−
           
+
−
          </div>
+
−
        </div><!--/panel-->
+
−
 
+
−
      </div><!--/col-->
+
−
     
+
−
      <div class="col-sm-4 col-xs-6">
+
−
     
+
−
      <div class="panel panel-default">
+
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/555/EEE" class="img-responsive"></a></div>
+
−
          <div class="panel-body">
+
−
            <p>Site Planning</p>
+
−
            <p></p>
+
−
           
+
−
          </div>
+
−
        </div><!--/panel-->
+
−
 
+
−
      </div><!--/col-->
+
−
     
+
−
      <div class="col-sm-4 col-xs-6">
+
−
     
+
−
      <div class="panel panel-default">
+
−
          <div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/666/F4F4F4" class="img-responsive"></a></div>
+
−
          <div class="panel-body">
+
−
            <p>More</p>
+
−
            <p></p>
+
−
           
+
−
          </div>
+
−
        </div><!--/panel-->
+
−
 
+
−
      </div><!--/col-->
+
−
     
+
−
</div><!--/row-->
+
−
  </div><!--/container-->
+
−
</div>
+
−
 
+
−
<div class="divider" id="section4"></div>
+
−
 
+
−
<div class="row">
+
−
  <div class="col-md-8 col-md-offset-1">
+
−
  </div>
+
−
</div>
+
−
 
+
−
<div class="row">
+
−
 
+
−
  <div class="col-sm-10 col-sm-offset-1">
+
−
      <h1>Location</h1>
+
−
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
+
−
    Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
+
−
    dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
+
−
    Aliquam in felis sit amet augue.
+
−
  </div> 
+
−
     
+
−
 
+
−
  <hr>
+
−
 
+
−
</div><!--/row-->
+
−
 
+
−
<div class="divider" id="section5"></div> 
+
−
 
+
−
<div class="row">
+
−
 
+
−
  <hr>
+
−
 
+
−
  <div class="col-sm-9 col-sm-offset-1">
+
−
     
+
−
      <div class="row form-group">
+
−
        <div class="col-md-12">
+
−
        <h1>Contact Us</h1>       
+
−
        </div>
+
−
        <div class="col-xs-4">
+
−
          <input class="form-control" id="firstName" name="name" placeholder="Your Name" type="text">
+
−
        </div>
+
−
        <div class="col-xs-6">
+
−
          <input class="form-control" id="organization" name="organization" placeholder="Company or Organization" type="text">
+
−
        </div>
+
−
      </div>
+
−
      <div class="row form-group">
+
−
          <div class="col-xs-5">
+
−
          <input class="form-control" name="email" placeholder="Email" type="text">
+
−
          </div>
+
−
          <div class="col-xs-5">
+
−
          <input class="form-control" name="phone" placeholder="Phone" type="text">
+
−
          </div>
+
−
      </div>
+
−
      <div class="row form-group">
+
−
          <div class="col-xs-10">
+
−
            <textarea class="form-control" placeholder="Comments"></textarea>
+
−
          </div>
+
−
      </div>
+
−
      <div class="row form-group">
+
−
          <div class="col-xs-10">
+
−
            <button class="btn btn-default pull-right">Contact Us</button>
+
−
          </div>
+
−
      </div>
+
−
   
+
−
  </div>
+
−
 
+
−
</div><!--/row-->
+
−
 
+
−
<div class="container">
+
−
  <div class="col-sm-8 col-sm-offset-2 text-center">
+
−
 
+
−
      <ul class="list-inline center-block">
+
−
        <li><a href="http://facebook.com/bootply"><img src="/assets/example/soc_fb.png"></a></li>
+
−
        <li><a href="http://twitter.com/bootply"><img src="/assets/example/soc_tw.png"></a></li>
+
−
        <li><a href="http://google.com/+bootply"><img src="/assets/example/soc_gplus.png"></a></li>
+
−
        <li><a href="http://pinterest.com/in1"><img src="/assets/example/soc_pin.png"></a></li>
+
−
      </ul>
+
−
     
+
−
  </div><!--/col-->
+
−
</div><!--/container-->
+
−
 
+
−
</div><!--/wrap-->
+
−
 
+
−
<div id="footer">
+
−
  <div class="container">
+
−
    <p class="text-muted">Copyright ©2014 ACME, Inc.</p>
+
−
  </div>
+
−
</div>
+
−
 
+
−
<ul class="nav pull-right scroll-top">
+
−
  <li><a href="#" title="Scroll to top"><i class="glyphicon glyphicon-chevron-up"></i></a></li>
+
−
</ul>
+
−
 
+
−
 
+
−
<div class="modal" id="myModal" role="dialog">
+
−
  <div class="modal-dialog">
+
−
  <div class="modal-content">
+
−
<div class="modal-header">
+
−
<button class="close" type="button" data-dismiss="modal">×</button>
+
−
<h3 class="modal-title"></h3>
+
−
</div>
+
−
<div class="modal-body">
+
−
<div id="modalCarousel" class="carousel">
+
−
+
−
          <div class="carousel-inner">
+
−
         
+
−
          </div>
+
−
         
+
−
          <a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
+
−
          <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
+
−
         
+
−
        </div>
+
−
</div>
+
−
<div class="modal-footer">
+
−
<button class="btn btn-default" data-dismiss="modal">Close</button>
+
−
</div>
+
−
  </div>
+
−
  </div>
+
−
</div>
+
−
 
+
−
 
+
−
<script>
+
−
 
+
−
/* affix the navbar after scroll below header */
+
−
$('#nav').affix({
+
−
      offset: {
+
−
        top: $('header').height()-$('#nav').height()
+
−
      }
+
−
});
+
−
 
+
−
/* highlight the top nav as scrolling occurs */
+
−
$('body').scrollspy({ target: '#nav' })
+
−
 
+
−
/* smooth scrolling for scroll to top */
+
−
$('.scroll-top').click(function(){
+
−
  $('body,html').animate({scrollTop:0},1000);
+
−
})
+
−
 
+
−
/* smooth scrolling for nav sections */
+
−
$('#nav .navbar-nav li>a').click(function(){
+
−
  var link = $(this).attr('href');
+
−
  var posi = $(link).offset().top;
+
−
  $('body,html').animate({scrollTop:posi},700);
+
−
});
+
−
 
+
−
</script>
+
−
 
+
−
 
+
−
 
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 17:54, 10 September 2017

Some image
Some controls