Permalink
Browse files

complete rewrite based on a different design that actually works?

  • Loading branch information...
1 parent 17b199a commit b72ccd7309cd2b32d6d89e1c76e938e80d09bf44 @TimeDoctor committed Jul 24, 2015
View
@@ -1,95 +1,218 @@
- <!-- Carousel
- ================================================== -->
- <div id="myCarousel" class="carousel slide" data-ride="carousel">
- <!-- Indicators -->
- <div class="carousel-inner" role="listbox">
- <div class="item active">
- <img class="first-slide" src="/openalheader.jpg" class="img-responsive" alt="">
- <div class="container">
- <div class="carousel-caption">
- <h1>3D Sound</h1>
- <p>The sound is all around you, Batman</p>
- <p><a class="btn btn-lg btn-primary" href="#" role="button">Get started developing today.</a></p>
- </div>
- </div>
- </div>
- </div><!-- /.carousel -->
-
-
- <!-- Marketing messaging and featurettes
- ================================================== -->
- <!-- Wrap the rest of the page in another container to center all the content. -->
- <br/>
-
- <div class="container marketing">
- <!-- Three columns of text below the carousel -->
+<section class="container-fluid" id="section1">
+ <h1 class="text-center v-center">OpenAL</h1>
+
+ <div class="container">
<div class="row">
- <div class="col-lg-4">
- <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
- <h2>Cross Platform</h2>
- <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
- </div><!-- /.col-lg-4 -->
- <div class="col-lg-4">
- <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
- <h2>Open API</h2>
- <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
- </div><!-- /.col-lg-4 -->
- <div class="col-lg-4">
- <img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
- <h2>Positional Audio</h2>
- <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
- </div><!-- /.col-lg-4 -->
- </div><!-- /.row -->
-
-
- <!-- START THE FEATURETTES
-
- <hr class="featurette-divider">
-
- <div class="row featurette">
- <div class="col-md-7">
- <h2 class="featurette-heading">Ghosts love it <span class="text-muted">It'll blow your mind.</span></h2>
- <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
- </div>
- <div class="col-md-5">
- <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+ <div class="col-sm-4">
+ <div class="row">
+ <div class="col-sm-10 col-sm-offset-2 text-center"><h3>Efficient</h3><p>OpenAL renders 3D sound quickly. Your buffer will be perfectly filled.</p><i class="fa fa-rocket fa-5x"></i></div>
+ </div>
+ </div>
+ <div class="col-sm-4 text-center">
+ <div class="row">
+ <div class="col-sm-10 col-sm-offset-1 text-center"><h3>Simple</h3><p>Ever written OpenGL code? You already know how to work with OpenAL.</p><i class="fa fa-heart fa-5x"></i></div>
+ </div>
+ </div>
+ <div class="col-sm-4 text-center">
+ <div class="row">
+ <div class="col-sm-10 text-center"><h3>Open API</h3><p>Remember EAX and A3D? Forget them. OpenAL is vendor neutral.</p><i class="fa fa-code fa-5x"></i></div>
+ </div>
+ </div>
+ </div><!--/row-->
+ <!---ZWARNING: Why doesn't this work?
+ <div class="row">
+ <div class="col-sm-10 text-center">
+ <a class="btn btn-lg btn-primary" href="#" role="button">Get started developing today.</a>
+ </div>
+ </div> -->
+ </div><!--/container-->
+</section>
+<!-- ZWARNING: I don't think we want this.
+
+<section class="container-fluid" id="section2">
+ <div class="row">
+ <div class="col-sm-8 col-sm-offset-2 text-center">
+ <h1>Documentation</h1>
+ <br>
+ <p class="lead">Get started adding OpenAL to your application today with this documentation.</p>
+ <br>
+ <i style="font-size:120px" class="fa fa-camera fa-5x"></i>
+ <p>ZWARNING: Add Book Icon</p>
+ </div>
+ </div>
+</section>
+
+<section class="container-fluid" id="section3">
+ <h1 class="text-center">Bootstrap is Responsive</h1>
+ <div class="row">
+ <div class="col-sm-6 col-sm-offset-3">
+ <h3 class="text-center">Vertical scrolling has become a popular and lasting trend in Web design.</h3>
+ <div class="row">
+ <div class="col-xs-4 col-xs-offset-1">Some brand-tacular designs even have home page content that is taller that 12,000 pixels. That's a lotta content.</div>
+ <div class="col-xs-2"></div>
+ <div class="col-xs-4 text-right">Anyhoo, this is just some random blurb of text, and Bootply.com is a playground and code editor for Bootstrap.</div>
</div>
+ <p class="text-center">
+ <img src="/assets/example/img_mtnpeople.png" class="img-responsive center-block ">
+ </p>
</div>
-
- <hr class="featurette-divider">
-
- <div class="row featurette">
- <div class="col-md-7 col-md-push-5">
- <h2 class="featurette-heading">So many platforms <span class="text-muted">See for yourself.</span></h2>
- <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
- </div>
- <div class="col-md-5 col-md-pull-7">
- <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
- </div>
+ </div>
+</section>
+
+<section class="container-fluid" id="section4">
+ <h2 class="text-center">Change this Content. Change the world.</h2>
+ <div class="row">
+ <div class="col-sm-8 col-sm-offset-2">
+ <img src="/assets/example/bg_smartphones.jpg" class="img-responsive center-block ">
+ <p class="text-center">Images will scale down proportionately as browser width narrows.</p>
</div>
-
- <hr class="featurette-divider">
-
- <div class="row featurette">
- <div class="col-md-7">
- <h2 class="featurette-heading">Big Gulp. <span class="text-muted">Checkmate.</span></h2>
- <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
- </div>
- <div class="col-md-5">
- <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
- </div>
+ </div>
+</section>
+
+<section class="container-fluid" id="section5">
+ <div class="col-sm-10 col-sm-offset-1">
+ <div class="container">
+ <div class="row">
+ <div class="col-sm-4 col-xs-12">
+ <div class="list-group">
+ <a href="#" class="list-group-item active">
+ <h2 class="list-group-item-heading">Basic</h2>
+ <h6>Free to get started</h6>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 100 - more about this</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 2 - this is more about this</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 3 GB</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 4</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Feature</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Feature</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <button class="btn btn-primary btn-lg btn-block">Get Started</button>
+ </a>
+ </div>
</div>
-
- <hr class="featurette-divider">
-
- END THE FEATURETTES -->
-
- </div><!-- /.container -->
-
-
-
+
+ <div class="col-sm-4 col-xs-12">
+ <div class="list-group text-center">
+ <a href="#" class="list-group-item active">
+ <h2 class="list-group-item-heading">Better</h2>
+ <h6>Most popular plan</h6>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 200 - more about this</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 2 - this is more about this</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 5 GB</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 6</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Feature</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Feature</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <button class="btn btn-default btn-lg btn-block">$10 per month</button>
+ </a>
+ </div>
+ </div>
+
+ <div class="col-sm-4 col-xs-12">
+ <div class="list-group text-right">
+ <a href="#" class="list-group-item active">
+ <h2 class="list-group-item-heading">Best</h2>
+ <h6>For enterprise grade</h6>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 100 - more about this</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 2 - this is more about this</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 8 GB</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Option 10</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Unlimited</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <p class="list-group-item-text">Unlimited</p>
+ </a>
+ <a href="#" class="list-group-item">
+ <button class="btn btn-default btn-lg btn-block">$20 per month</button>
+ </a>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+</section>
+<section class="container-fluid" id="section6">
+ <h2 class="text-center">Do you see what I mean?</h2>
+ <p class="text-center lead">Add some compelling information here</p>
+ <img src="/assets/example/bg_iphone.png" class="img-responsive center-block ">
+
+</section>
+
+<section class="container" id="section7">
+ <h1 class="text-center">Social Media Fascination</h1>
+ <div class="row">
+
+ <div class="col-sm-1 col-sm-offset-2 col-xs-4 text-center">
+ <i class="fa fa-github fa-4x"></i>
+ </div>
+ <div class="col-sm-1 col-xs-4 text-center">
+ <i class="fa fa-foursquare fa-4x"></i>
+ </div>
+ <div class="col-sm-1 col-xs-4 text-center">
+ <i class="fa fa-facebook fa-4x"></i>
+ </div>
+ <div class="col-sm-1 col-xs-4 text-center">
+ <i class="fa fa-pinterest fa-4x"></i>
+ </div>
+ <div class="col-sm-1 col-xs-4 text-center">
+ <i class="fa fa-google-plus fa-4x"></i>
+ </div>
+ <div class="col-sm-1 col-xs-4 text-center">
+ <i class="fa fa-twitter fa-4x"></i>
+ </div>
+ <div class="col-sm-1 col-xs-4 text-center">
+ <i class="fa fa-dribbble fa-4x"></i>
+ </div>
+ <div class="col-sm-1 col-xs-4 text-center">
+ <i class="fa fa-instagram fa-4x"></i>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12 text-center">
+ <br><br>
+ <p>
+ <a href="http://www.bootstrapzero.com/bootstrap-template/sectionalize">Get the code for this template.</a>
+ </p>
+ </div>
+ </div>
+</section>
+-->
Oops, something went wrong.

0 comments on commit b72ccd7

Please sign in to comment.