Skip to content

Instantly share code, notes, and snippets.

@Mdimran41

Mdimran41/index.html

Created March 6, 2016 00:46
Show Gist options
  • Save Mdimran41/04b16f6e9527606321a6 to your computer and use it in GitHub Desktop.
Save Mdimran41/04b16f6e9527606321a6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Start Pack</title>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<sectoin class="menuarea text-uppercase text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills nav-justified">
<li><a href="" class="btn btn-success btn-lg ">home</a></li>
<li><a href="" class="btn btn-info btn-lg">service</a></li>
<li><a href="" class="btn btn-warning btn-lg">our team</a></li>
<li><a href="" class="btn btn-info btn-lg">about us</a></li>
<li><a href="" class="btn btn-danger btn-lg">about us</a></li>
</ul>
</div>
</div>
</div>
</sectoin>
<section class="logomenu">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="logo">
<h1>logo</h1>
</div>
</div>
<div class="col-md-4">
<ul class="nav nav-pills text-capitalize">
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
<li><a href="">service</a></li>
</ul>
</div>
<div class="col-md-3 col-md-offset-3">
<input type="text" class="form-control">
<button class="btn btn-success ">search</button>
</div>
</div>
</div>
</section>
<section class="servicearea">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="singleservice">
<h2 class=" text-capitalize">section heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim maiores similique ipsam harum. Accusantium minima aperiam perferendis atque a ratione!</p>
<a href="" class="btn btn-primary text-capitalize" type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">read more</a>
</div>
</div>
<div class="col-md-4">
<div class="singleservice">
<h2 class=" text-capitalize">section heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim maiores similique ipsam harum. Accusantium minima aperiam perferendis atque a ratione!</p>
<a href="" class="btn btn-primary text-capitalize" type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">read more</a>
</div>
</div>
<div class="col-md-4">
<div class="singleservice">
<h2 class=" text-capitalize">section heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim maiores similique ipsam harum. Accusantium minima aperiam perferendis atque a ratione!</p>
<a href="" class="btn btn-primary text-capitalize" type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">read more</a>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<div class="prg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia quam expedita quia voluptatibus officia molestiae, obcaecati provident dolor at maxime ducimus? Illum iure possimus, magni, qui doloremque nesciunt mollitia accusamus sint minus totam voluptates earum ipsa repellat deserunt ut, officia fugit. Magni laborum harum vitae voluptates neque, molestiae nesciunt!</p>
</div>
</div>
<div class="modal-footer">
<input type="text" placeholder="comment" class="form-control btn-block">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ourservice">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>our service <small>we are provided</small></h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="text-capitalize btn btn-info btn-block">web design</h3>
<h3 class="text-capitalize btn btn-primary btn-block">web developmen</h3>
<h3 class="text-capitalize btn btn-success btn-block">web grap</h3>
<h3 class="text-capitalize btn btn-warning btn-block">web hosting</h3>
</div>
<div class="col-md-6">
<h3 class="text-capitalize btn btn-primary btn-block">web design</h3>
<h3 class="text-capitalize btn btn-warning btn-block">web developmen</h3>
<h3 class="text-capitalize btn btn-success btn-block">web grap</h3>
<h3 class="text-capitalize btn btn-info btn-block">web hosting</h3>
</div>
</div>
</div>
</section>
<section class="progressbar clearfix">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-striped " style="width:30%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 25%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:40%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 25%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:40%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 25%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 25%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-striped " style="width:40%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 35%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="tabarea">
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active btn-primary"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim corporis iusto sapiente, natus molestiae in sunt reiciendis consequatur recusandae. Eligendi cupiditate rerum porro id culpa deleniti, beatae quos ut optio.</div>
<div role="tabpanel" class="tab-pane" id="profile">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit non voluptatem ipsam similique. Excepturi consectetur nihil illum exercitationem impedit rerum, at cumque, enim, consequuntur saepe qui. Quidem eligendi optio obcaecati ipsa dolorem incidunt, soluta quia voluptate similique, totam officia ullam labore. Doloremque iusto eligendi reiciendis ipsum, animi aperiam, possimus magni.</div>
<div role="tabpanel" class="tab-pane" id="messages">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at itaque, dolorum consequatur, reprehenderit sed delectus culpa obcaecati quisquam odit reiciendis deleniti exercitationem corporis sequi sint expedita libero qui dolorem, atque quidem dignissimos placeat officia. Praesentium accusamus quo nisi earum..</div>
<div role="tabpanel" class="tab-pane" id="settings">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis vel consequuntur quasi repudiandae nesciunt quia magnam aperiam ipsa animi recusandae earum placeat ex est corporis, velit tenetur molestias cumque illum iure praesentium in excepturi dignissimos. Quasi iusto suscipit, quisquam esse eos, hic inventore laudantium accusamus atque possimus, autem. Nostrum, quis!</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment