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>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://aliensix.com/lightningbolt/css/style.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
        <!-- Begin Hero -->
    <div class="jumbotron hero" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target=".ticker h1">
​
        <!-- Content -->
        <div class="container center-vertically">
            <div data-center="opacity: 1" data-top="opacity: 0" data-anchor-target=".hero h1">
                <hr>
                <p>We are Bolt & we like to <em>focus</em> on</p>
                <div class="ticker">
                    <h1>Websites</h1>
                    <h1>Applications</h1>
                    <h1>User Interfaces</h1>
                </div>
                <hr>
            </div>
        </div>
​
    </div>
    <!-- End Hero -->
​
    <!-- Begin Navigation -->
    <div class="navbar">
​
        <div class="container">
​
            <!-- Brand -->
            <a href="javascript:void(0);" class="navbar-brand scroll-top"><img class="logo" width="45" height="45" alt="lightning bolt logo" src="img/logo.png"></img></a>
​
            <!-- Mobile Navigation -->
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="ion-navicon"></span>
            </button>
​
            <!-- Main Navigation -->
            <div class="collapse navbar-collapse navHeaderCollapse" id="myScrollSpy">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#section1" data-id="section1" class="scroll-link">Home</a></li>
                    <li><a href="#section2" data-id="section2" class="scroll-link">Portfolio</a></li>
                    <li><a href="#section3" data-id="section3" class="scroll-link">About</a></li>
                    <li><a href="#section4" data-id="section4" class="scroll-link">Team</a></li>
                    <li><a href="#section5" data-id="section5" class="scroll-link">Services</a></li>
                    <li><a href="#section6" data-id="section6" class="scroll-link">Contact</a></li>
                </ul>
            </div>
​
        </div>
​
    </div>
    <!-- End Navigation -->
​
    <!-- Begin Summary -->
    <section id="section1">
    
        <div class="row summary">
​
            <div class="container">
​
                <!-- Content -->
                <div class="col-lg-10 col-lg-offset-1" >
                    <h3>We create useable ui</h3>
                    <hr>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu. Suspendisse potenti. Ut ac consequat nulla. Praesent tristique eleifend tincidunt.</p>
                    <a href="#" data-id="section3" class="btn btn-default bolt-button-dark scroll-link">
                        About us
                    </a>
                </div>
​
            </div>
​
        </div>
​
    </section>
    <!-- End Summary -->
​
    <!-- Begin Portfolio -->
    <section id="section2">
​
        <div class="container portfolio">
​
            <!-- Page Title -->
            <div class="row page-title">
                <div class="col-lg-12">
                    <h3>Portfolio</h3>
                    <hr>
                    <p>We also create some other stuff.</p>
                </div>
            </div>
​
            <!-- Portfolio Filter -->
            <div class="container text-center">
              <ul id="filterOptions" class="nav nav-pills">
                <li class="active"><a href="#" class="all">all</a></li>
                <li><a href="#" class="print">print</a></li>
                <li><a href="#" class="web">web</a></li>
                <li><a href="#" class="branding">branding</a></li>
                <li><a href="#" class="apps">apps</a></li>
                <li><a href="#" class="graphic design">graphic design</a></li>
                <li><a href="#" class="illustation">illustration</a></li>
              </ul>
            </div>
​
            <!-- Portfolio Items -->
            <div class="row">
              <ul class="ourHolder no-padding">
                <li class="item col-lg-4 no-padding" data-id="id-1" data-type="branding">
                    <a href="http://jsbin.com/koheq/1" data-toggle="modal" data-target="#modal" id="branding1">
                        <img src="http://aliensix.com/lightningbolt/img/projects/thumbs/branding1.jpg" alt="..." />
                        <span class="portfolio-hover">
                          <span>
                            <h4>Beach Me</h4>
                            <em>Branding</em>
                          </span>
                        </span>
                    </a>
                </li>
              </ul>
            </div>
​
        </div>
​
    </section>
    <!-- End Portfolio -->
​
    <!-- Begin Call to Action -->
    <div class="row cta">
​
        <div class="container">
​
            <div class="col-lg-10 col-lg-offset-1">
                <p>
                    Interested in working with us?
                    <a href="#" data-id="section6" class="btn btn-default bolt-button-cta scroll-link">
                        Contact
                    </a>
                    We are interested in your project.
                </p>
            </div>
​
        </div>
​
    </div>
    <!-- End Call to Action -->
​
    <!-- Begin About Us -->
    <section id="section3">
​
        <div class="row about">
​
            <div class="container">
​
                <!-- Page Title -->
                <div class="col-lg-10 col-lg-offset-1 page-title-2">
                    <h3>About</h3>
                    <hr>
                    <p>A passionate team of creative & innovative minds.</p>
                </div>
​
                <!-- Who We Are-->
                <div class="col-lg-4 col-lg-offset-1">
                    <h5>Who We Are</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi.</p>
                </div>
​
                <!-- Goals -->
                <div class="col-lg-6">
                    <h5>Goals</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum mauris at sollicitudin lacinia. </p>
                </div>
​
                <!-- The Team -->
                <div class="col-lg-10 col-lg-offset-1">
                    <h5>The Team</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. </p>
                </div>
​
            </div>
​
        </div>
​
    </section>
    <!-- End About Us -->
    <!-- Modal -->
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
        </div>
      </div>
    </div>
</body>
</html>
Output

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

Dismiss x
public
Bin info
davidpauljuniorpro
0viewers