Skip to content

Instantly share code, notes, and snippets.

@shahariaazam

shahariaazam/index.html

Last active December 21, 2015 17:09
Show Gist options
  • Save shahariaazam/6338965 to your computer and use it in GitHub Desktop.
Save shahariaazam/6338965 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Appirio</title>
<!-- Stylesheet -->
<link href="assets/css/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.css" type="text/css" rel="stylesheet" />
<link href="assets/css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- header starts -->
<div class="navbar">
<div class="navbar-inner">
<!-- inner header main part starts -->
<div class="row-fluid">
<!-- header left part starts -->
<div class="span2">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Active App Name <span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Contact</a></li>
<li><a href="#">Person</a></li>
<li><a href="#">Upload to box</a></li>
</ul>
</div>
</div>
<!-- header left part ends -->
<!-- header middle part starts -->
<div class="span8 middle-alert">
<h3>Important</h3>
</div>
<!-- header middle part ends -->
<!-- header right part starts -->
<div class="span2">
<div class="row-fluid">
<div class="span10"> Logo </div>
<div class="span2"> <i class="icon-question-sign"></i> </div>
</div>
</div>
<!-- header right part ends -->
</div>
<!-- inner header main part ends -->
</div>
</div>
<!-- span 12 ends -->
<!-- header ends -->
<div class="navbar">
<div class="navbar-inner">
<div class="row-fluid">
<div class="span3" style="padding-top:5px;">
<!--img src="assets/img/User.png" height="30" width="30" style="margin-left:2%;"-->
<i class="icon-user"></i>&nbsp;<a href="#">Adib Rahman</a> </div>
<div class="span4" style="padding-top:5px;"> Position: <a href="#">Web Developer</a> </div>
<div class="span3" style="padding-top:5px;"> Company <a href="#">MTX LIMITED</a> </div>
<div class="span2">
<div class="btn-group">
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Action</a>
<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Record an Email</h4>
</div>
<div class="modal-body">
<!-- Main Content goes here -->
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Related to:</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Test 1">
<button class="btn"><i class="icon-search"></i></button>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Name:</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Name">
<button class="btn"><i class="icon-search"></i></button>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Due Date</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Date">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Priority:</label>
<select>
<option>Normal</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Subject</label>
<button type="submit" class="btn btn-default">Subject of Email</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Button to trigger modal -->
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="span12">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab"><img src="assets/img/icon_document.png" height="40" width="40"></a></li>
<li><a href="#tab2" data-toggle="tab"><img src="assets/img/images.jpg" height="40" width="40"></a></li>
<li><a href="#tab3" data-toggle="tab"><img src="assets/img/docs.png" height="40" width="40"></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>
<div class="span4" style="background-color:#CCC;">
<table class="table">
<tr>
<td><p class="text-right">Billing City</p></td>
<td><input type="text" style="height:15px; width:100px;" /></td>
</tr>
<tr>
<td><p class="text-right">Billing State</p></td>
<td><select style="height:25px; width:100px;" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
</tr>
<tr>
<td><p class="text-right">Billing street</p></td>
<td><input type="text" style="height:15px; width:100px;" /></td>
</tr>
<tr>
<td><p class="text-right">Billing Zip/ Postal Code</p></td>
<td><input type="text" style="height:15px; width:100px;" /></td>
</tr>
<tr>
<td><p class="text-right">Account Name</p></td>
<td><input type="text" style="height:15px; width:100px;" /></td>
</tr>
<tr>
<td><p class="text-right">Anual revenue</p></td>
<td><input type="text" style="height:15px; width:100px;" /></td>
</tr>
<tr>
<td><p class="text-right">Owner</p></td>
<td><input type="text" style="height:15px; width:100px;" /></td>
</tr>
<tr>
<td><p class="text-right">
<button class="btn btn-success">SAVE </button>
</td>
<td><button class="btn btn-danger"> Cancel </button></td>
</tr>
</table>
</div>
<div class="span6">
<ul class="nav nav-tabs">
<li class="active"><a href="#test1" data-toggle="tab">Home</a></li>
<li><a href="#test2" data-toggle="tab">Home</a></li>
<li><a href="#test3" data-toggle="tab">Messages</a></li>
<li><a href="#test4" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="test1">Home</div>
<div class="tab-pane" id="test2">Home</div>
<div class="tab-pane" id="test3">Messages</div>
<div class="tab-pane" id="test4">Settings</div>
</div>
<!--div class="tabbable"-->
<!-- Only required for left/right tabs -->
<!--ul class="nav nav-tabs">
<li class="active"><a href="#tab6" data-toggle="tab">Section 1</a></li>
<li><a href="#tab7" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab6">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab7">
<p>Howdy, I'm in Section 5</p>
</div>
</div>
</div-->
</div>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<table class="table table-striped">
<tr>
<td>Opportunity</td>
<td>Amount</td>
<td>Probability</td>
<td>Stage</td>
<td>Updated </td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript starts -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/less-1.4.1.min.js"></script>
<!-- Javascript ends -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment