Difference between revisions of "Team:Dalhousie/test5"

Line 1: Line 1:
 
<html>
 
<html>
−
<body>
+
<head>
−
<div id="banner">
+
<style>
−
   <h2>put what you want here</h2>
+
html,
−
   <p>just adjust javascript size to match this window</p>
+
body {
−
</div>
+
   height: 100%;
 +
   padding-top:50px;
 +
}
  
−
   <nav id='nav_bar'>
+
.row {
−
    <ul class='nav_links'>
+
   margin-left:0px;
−
      <li><a href="url">Sign In</a></li>
+
  margin-right:0px;
−
      <li><a href="url">Blog</a></li>
+
}
−
      <li><a href="url">About</a></li>
+
−
    </ul>
+
−
  </nav>
+
  
−
<div id='body_div'>
+
/* Wrapper for page content to push down footer */
−
   <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
+
#wrap {
−
</div>
+
  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;
 +
}
  
−
<style>
+
/* Set the fixed height of the footer here */
−
html, body {
+
#footer {
−
   height: 4000px;
+
   height: 60px;
 +
  background-color: #f5f5f5;
 +
  margin-top:50px;
 +
  padding-top:20px;
 +
  padding-bottom:20px;
 
}
 
}
  
−
.navbar-fixed {
+
header {
−
  top: 0;
+
  height:100%;
−
  z-index: 100;
+
min-height:500px;
−
  position: fixed;
+
−
  width: 100%;
+
 
}
 
}
  
−
#body_div {
+
#wrap > .container {
−
   top: 0;
+
   padding: 60px 15px 0;
−
   position: relative;
+
}
−
   height: 200px;
+
.container .credit {
−
   background-color: green;
+
   margin: 20px 0;
 +
}
 +
 
 +
#footer {
 +
   background-color:#414141;
 +
}
 +
 
 +
#footer a {
 +
   color:#efefef;
 +
}
 +
 
 +
#topNav {
 +
z-index:-1;
 
}
 
}
  
−
#banner {
+
#nav {
 
   width: 100%;
 
   width: 100%;
−
  height: 273px;
 
−
  background-color: gray;
 
−
  overflow: hidden;
 
 
}
 
}
  
−
#nav_bar {
+
#nav.affix-top {
−
  border: 0;
+
  position: absolute;
−
  background-color: #202020;
+
  top:0;
−
  border-radius: 0px;
+
  left:0;
−
  margin-bottom: 0;
+
  z-index:10;
−
  height: 30px;
+
  height:54px;
 +
  background-color:transparent;
 +
  border:0;
 
}
 
}
  
−
//the below css are for the links, not needed for sticky nav
+
#nav.affix {
−
.nav_links {
+
  position: fixed;
−
  margin: 0;
+
  top: 0;
 +
  z-index:10;
 +
  -webkit-transition: all .6s ease-in-out;
 
}
 
}
  
−
.nav_links li {
+
#footer > .container {
−
   display: inline-block;
+
    
−
  margin-top: 4px;
+
 
}
 
}
  
−
.nav_links li a {
+
@media (min-width: 767px) {
−
   padding: 0 15.5px;
+
  .navbar-nav.nav-justified > li{
−
   color: #3498db;
+
      float:none;
−
   text-decoration: 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>
 +
</head>
  
 +
<body>
 +
 +
<!-- Wrap all page content here -->
 +
<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>
 
<script>
−
$(document).ready(function() {
+
/* affix the navbar after scroll below header */
−
  //change the integers below to match the height of your upper dive, which I called
+
$('#nav').affix({
−
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
+
      offset: {
−
  //to figure out what the scroll position is when exactly you want to fix the nav
+
        top: $('header').height()-$('#nav').height()
−
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
+
      }
−
  //you know the position.
+
});
−
  $(window).scroll(function () {
+
  
−
    console.log($(window).scrollTop());
+
/* highlight the top nav as scrolling occurs */
 +
$('body').scrollspy({ target: '#nav' })
  
−
    if ($(window).scrollTop() > 550) {
+
/* smooth scrolling for scroll to top */
−
      $('#nav_bar').addClass('navbar-fixed-top');
+
$('.scroll-top').click(function(){
−
    }
+
  $('body,html').animate({scrollTop:0},1000);
 +
})
  
−
    if ($(window).scrollTop() < 551) {
+
/* smooth scrolling for nav sections */
−
      $('#nav_bar').removeClass('navbar-fixed-top');
+
$('#nav .navbar-nav li>a').click(function(){
−
    }
+
  var link = $(this).attr('href');
−
   });
+
  var posi = $(link).offset().top;
 +
   $('body,html').animate({scrollTop:posi},700);
 
});
 
});
 +
 
</script>
 
</script>
 +
 +
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 17:42, 10 September 2017

Hello Bootstrap 3.

Since 2013

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Profile

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.

Clients & Partners

Renovations

Projects

Interiors

Design

Site Planning

More

Location

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.

Contact Us