Skip to content

Instantly share code, notes, and snippets.

@guiseek

guiseek/index.html

Last active January 28, 2016 21:46
Show Gist options
  • Save guiseek/90c29916b3dee8b6716e to your computer and use it in GitHub Desktop.
Save guiseek/90c29916b3dee8b6716e to your computer and use it in GitHub Desktop.
Download ZIP
Loja de Cerveja Template
Raw
index.html
<!DOCTYPE html>
<html>
<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>Loja de Cerveja</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<style>
table tr th:first-child {
width: 20px;
}
table tr th:last-child {
width: 70px;
}
</style>
<!--[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>
<div class="container">
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Loja de Cerveja</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="glyphicon glyphicon-shopping-cart"></i>
Carrinho
<span class="label label-default">0</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Cervejas</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Limpar carrinho</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="row">
<aside class="col-sm-3">
<section class="panel panel-default">
<header class="panel-heading">
Cervejarias
</header>
<div class="panel-body">
<section class="navbar">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" placeholder="Buscar cervejarias..." aria-describedby="basic-addon1">
</div>
</section>
<section class="list-group">
<a href="#" class="list-group-item">Cerveja 1</a>
<a href="#" class="list-group-item">Cerveja 2</a>
</section>
<section>
<h4 class="page-header">Cervejaria</h4>
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Ex.: Budweiser">
<span class="input-group-btn">
<button class="btn btn-success" type="button">
<i class="glyphicon glyphicon-ok"></i>
</button>
</span>
</div>
</form>
</section>
</div>
<footer class="panel-footer">
0 cervejas encontradas
</footer>
</section>
</aside>
<main class="col-sm-9">
<nav class="navbar">
<div class="row">
<div class="col-sm-6">
<ol class="breadcrumb">
<li class="active">Loja de cerveja</li>
</ol>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-success btn-block">Nova cerveja</button>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" placeholder="Buscar cervejas..." aria-describedby="basic-addon1">
</div>
</div>
</div>
</nav>
<div class="panel panel-default">
<header class="panel-heading">Cervejas</header>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<input type="checkbox">
</th>
<th>Nome</th>
<th>Categoria</th>
<th>Cervejaria</th>
<th>Comprar</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>Cerveja x</td>
<td>Indian Pale Ale</td>
<td>Cervejaria 1</td>
<td>
<button class="btn btn-default btn-xs">
<i class="glyphicon glyphicon-shopping-cart"></i> 0
</button>
</td>
<td>
<button class="btn btn-default btn-xs">
<i class="glyphicon glyphicon-pencil"></i>
</button>
<button class="btn btn-default btn-xs">
<i class="glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Cerveja x</td>
<td>Indian Pale Ale</td>
<td>Cervejaria 1</td>
<td>
<button class="btn btn-default btn-xs">
<i class="glyphicon glyphicon-shopping-cart"></i> 0
</button>
</td>
<td>
<button class="btn btn-default btn-xs">
<i class="glyphicon glyphicon-pencil"></i>
</button>
<button class="btn btn-default btn-xs">
<i class="glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/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