title: Bootstrap with Picture Slideshow
body: <p>My Code so far:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  
   &lt;html&gt;
  
   &lt;head&gt;
  
      &lt;!-- Naming title and allowing for small-device-viewing --&gt;
      &lt;title&gt;Tech Site&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;!-- Calling StyleSheets --&gt;
      &lt;link href = "/ssheets/bootstrap/bootstrap.min.css" rel = "stylesheet"&gt;
      &lt;link href = "/ssheets/main.css" rel = "stylesheet"&gt;
  
      &lt;!-- Calling JavaScript --&gt;
      &lt;!-- Might be worth moving down to the bottom of 'body' so the page is displayed faster --&gt;
      &lt;script src = "/jscript/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src = "/jscript/bootstrap/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="/jscript/main.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!-- Need to display:
           - Navigation Bar
           - Fading Picture
           - 3 Column Testimony Preview
           - Footer
      --&gt;
  
      &lt;!-- Navbar --&gt;
      &lt;!-- Nav bar set at static to reduce overlapping at top --&gt;
      &lt;div class = "navbar navbar-default navbar-static-top"&gt;
          &lt;div class = "container"&gt;
  
              &lt;a href = "#" class = "navbar-brand"&gt;Tech Site&lt;/a&gt;
  
              &lt;button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"&gt;
                  &lt;span class = "icon-bar"&gt;&lt;/span&gt;
                  &lt;span class = "icon-bar"&gt;&lt;/span&gt;
                  &lt;span class = "icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
              &lt;div class = "collapse navbar-collapse navHeaderCollapse"&gt;
  
                  &lt;ul class = "nav navbar-nav navbar-right"&gt;
  
                      &lt;li class = "active"&gt;&lt;a href = "#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href = "#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                      &lt;li class = "dropdown"&gt;
  
                      &lt;a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"&gt;Social Media &lt;b class = "caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class = "dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href = "#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href = "#"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href = "#"&gt;Google+&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href = "#"&gt;Instagram&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href = "#"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href = "#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Main Content --&gt;
      &lt;!-- Fading Image --&gt;
      &lt;div class = "container"&gt;
  
          &lt;div class="img-responsive"&gt;
              &lt;img style="max-height:450px; width:100%;" src="/images/photo_1.jpg" /&gt;
          &lt;/div&gt;             
  
      &lt;/div&gt;
  
      &lt;div class = "container"&gt;
  
          &lt;div class = "row"&gt;
  
              &lt;div class = "col-md-3"&gt;
  
                  &lt;h3&gt;&lt;a href = "#"&gt;$500 Gaming PC Build&lt;/a&gt;&lt;/h3&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;/p&gt;
                  &lt;a href = "#" class = "btn btn-default"&gt;Read More&lt;/a&gt;
  
              &lt;/div&gt;
  
              &lt;div class = "col-md-3"&gt;
  
                  &lt;h3&gt;&lt;a href = "#"&gt;$500 Gaming PC Build&lt;/a&gt;&lt;/h3&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;/p&gt;
                  &lt;a href = "#" class = "btn btn-default"&gt;Read More&lt;/a&gt;
  
              &lt;/div&gt;
  
              &lt;div class = "col-md-3"&gt;
  
                  &lt;h3&gt;&lt;a href = "#"&gt;$500 Gaming PC Build&lt;/a&gt;&lt;/h3&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;/p&gt;
                  &lt;a href = "#" class = "btn btn-default"&gt;Read More&lt;/a&gt;
  
              &lt;/div&gt;
  
              &lt;div class = "col-md-3"&gt;
  
                  &lt;h3&gt;&lt;a href = "#"&gt;$500 Gaming PC Build&lt;/a&gt;&lt;/h3&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. &lt;/p&gt;
                  &lt;a href = "#" class = "btn btn-default"&gt;Read More&lt;/a&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class = "navbar navbar-default navbar-fixed-bottom"&gt;
  
          &lt;div class = "container"&gt;
              &lt;p class = "navbar-text pull-left"&gt;A Site&lt;/p&gt;
              &lt;a href = "#" class = "navbar-btn btn-primary btn pull-right"&gt;Find us on Facebook&lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
          &lt;!-- End of Footer --&gt; 
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS is bootstrap 3; as noted in the html code.</p>
  
  <p>At the point of the img responsive tags, I want to have a fading slideshow (slow transition) between three images. However, I have no idea how to do that without messing up the layout. Any ideas?</p>