Skip to content

Instantly share code, notes, and snippets.

@frankinedinburgh

frankinedinburgh/Template-1.markdown

Created April 6, 2014 23:27
Show Gist options
  • Save frankinedinburgh/10012541 to your computer and use it in GitHub Desktop.
Save frankinedinburgh/10012541 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by frank.
Raw
index.html
<body>
<div class="container">
<header class="row">
<div class="span12">
<nav class="navbar">
<div class="navbar-inner">
<a href="#" class="brand">Digital-Doodle</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><a href="#"><i class="icon-home"></i>Home</a></li>
<li class="divider-vertical"></li>
<li><a href="#">About</a></li>
<li class="divider-vertical"></li>
<li><a href="#"><i class="icon-comment"></i>Blog</a></li>
<li class="divider-vertical"></li>
<li><a href="#"><i class="icon-info-sign"></i>About</a></li>
<li class="divider-vertical"></li>
<li><a href="#">News</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">twitter</a></li>
<li><a href="#">facebook</a></li>
<li><a href="#">linkedin</a></li>
<li class="divider"></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="#">News</a></li>
<li><a href="#"><i class="icon-user"></i>Contact</a></li>
<li class="divider-vertical"></li>
</ul>
</div>
<!-- end of collapse menu -->
</div>
</nav>
</div>
</header>
<!-- end of header -->
<!-- main content start here -->
<div class="row" id="main-content">
<div class="span4" id="sidebar">
<blockquote>
<p>Don't forget to keep up with these tutorials and many more!</p>
<small>digital-doodle</small>
</blockquote>
<div class="well">
<form>
<fieldset>
<legend>Login</legend>
<input type="text" class="input-block-level" placeholder="username"/>
<input type="text" class="input-block-level" placeholder="password"/>
<label class="checkbox">
<input type="checkbox"/>Remember me!
</label>
<div class="pull-right">
<input type="submit" class="btn btn-primary" value="login"/>
<a class="btn btn-info" href="#register" role="button" data-toggle="modal">register</a>
</div>
</fieldset>
</form>
</div>
<!-- end of login form -->
<!-- twitter bootstrap accordion -->
<div class="accordion" id="questions">
<div class="accordion-group">
<div class="accordion-heading">
<a href="#who" class="accordion-toggle btn" data-toggle="collapse" data-parent="questions">Who?</a>
</div>
<div id="who" class="accordion-body collapse">
<div class="accordion-inner">
<p>Who?</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a href="#what" class="accordion-toggle btn" data-toggle="collapse" data-parent="questions">What?</a>
</div>
<div id="what" class="accordion-body collapse">
<div class="accordion-inner">
<p>What?</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a href="#where" class="accordion-toggle btn" data-toggle="collapse" data-parent="questions">Where?</a>
</div>
<div id="where" class="accordion-body collapse">
<div class="accordion-inner">
<p>Where?</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a href="#how" class="accordion-toggle btn" data-toggle="collapse" data-parent="questions">How?</a>
</div>
<div id="how" class="accordion-body collapse">
<div class="accordion-inner">
<p>How?</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a href="#why" class="accordion-toggle btn" data-toggle="collapse" data-parent="questions">Why?</a>
</div>
<div id="why" class="accordion-body collapse">
<div class="accordion-inner">
<p>Why?</p>
</div>
</div>
</div>
</div>
<!-- end of accordion -->
</div>
<div class="span8">
<!-- start of carousel -->
<div id="slider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/850x500">
<div class="carousel-caption">
<h4>Headline for Image 1</h4>
<p>Description of image 1</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/850x500">
<div class="carousel-caption">
<h4>Headline for Image 2</h4>
<p>Description of image 2</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/850x500">
<div class="carousel-caption">
<h4>Headline for Image 3</h4>
<p>Description of image 3</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#slider" data-slide="prev">&lsaquo;</a>
<a class="right carousel-control" href="#slider" data-slide="next">&rsaquo;</a>
</div>
<!-- end of carousel -->
<!-- navigational tabs -->
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#html" data-toggle="tab">HTML/CSS</a></li>
<li class=""><a href="#javascript" data-toggle="tab">Javascript</a></li>
<li class=""><a href="#php" data-toggle="tab">PHP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="html">
<p>HTML/CSS content</p>
</div>
<div class="tab-pane" id="javascript">
<p>Javascript content</p>
</div>
<div class="tab-pane" id="php">
<p>PHP content</p>
</div>
</div>
</div>
<!-- end of navigational tabs -->
</div>
</div>
<!-- end of main-content -->
<footer class="row">
</footer>
</div>
<!-- end of container -->
<div id="register" class="modal hide fade" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true">
<i class="icon-remove"></i>
</button>
<h3 id="modalLabel">Register</h3>
</div>
<div class="modal-body">
<form>
<p class="label label-info">required</p>
<div class="controls controls-row">
<input type="text" class="span2" placeholder="first name"/>
<input type="text" class="span2" placeholder="last name"/>
<select class="span1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="controls control-group info">
<input type="text" class="span5" placeholder="username" id="inputinfo"/>
<input type="text" class="span5" placeholder="email" id="inputinfo"/>
<input type="text" class="span5" placeholder="confirm email" id="inputinfo"/>
</div>
<p class="help-block">I love to learn about:
<a href="#" id="tip" rel="tooltip" data-animation="true" data-original-title="Cool tip!" data-placement="right">Tip!</a>
</p>
<label class="checkbox inline">
<input type="checkbox"/>HTML/CSS
</label>
<label class="checkbox inline">
<input type="checkbox"/>Javascript
</label>
<label class="checkbox inline">
<input type="checkbox"/>PHP
</label>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">cancel</button>
<button class="btn btn-success">cancel</button>
</div>
</div>
</div>
<!-- end of registration form -->
Raw
script.js
$('#tip').tooltip();
@frankinedinburgh
Copy link
Author

bootstrap 2 template

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment