Skip to content

Instantly share code, notes, and snippets.

@agustinhaller

agustinhaller/business.html

Created January 27, 2013 17:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save agustinhaller/4649294 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save agustinhaller/4649294 to your computer and use it in GitHub Desktop.
Download ZIP
empresa
Raw
business.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bumbea.com</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/zocial.css">
<link rel="stylesheet" href="./css/jquery.rating.css">
<link rel="stylesheet" href="./css/main.css">
<script src="./js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body class="business">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<header>
<h1 class="main-title">
<a href="." title="Bumbea.com">
<img src="./img/logo.png" alt="Bumbea"/>
</a>
</h1>
<section class="search-wrapper">
<div class="input-append search-container">
<input class="search-input" type="text" placeholder="¿Que estas buscando?"/>
<a class="search-btn" href="#" title="Buscar"><i class="icon-search"></i></a>
</div>
</section>
<section class="header-actions">
<ul class="unstyled actions-list">
<li>
<a href="#" title="Ingresar">Ingresar</a>
</li>
<li>
<a href="#" title="Registrarse">Registrarse</a>
</li>
</ul>
</section>
</header>
<div class="navbar">
<div class="navbar-inner main-navbar">
<div class="container">
<a href="." class="home-btn"><i class="icon-home"></i></a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Categorias <b class="caret"></b></a>
<ul class="dropdown-menu categories-menu">
<li class="nav-header">Tecnología</li>
<li>
<ul class="sub-category">
<li>
<a href="#" title="">
<img class="category-image" src="./img/categories/notebook-icon.png" alt=""/>
<span>Computadoras</span>
</a>
</li>
<li>
<a href="#" title="">
<img class="category-image" src="./img/categories/phone-icon.png" alt=""/>
<span>Teléfonos</span>
</a>
</li>
<li>
<a href="#" title="">
<img class="category-image" src="./img/categories/tv-icon.png" alt=""/>
<span>Televisores</span>
</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="nav-header">Otros</li>
<li>
<ul class="sub-category">
<li>
<a href="#" title="">
<img class="category-image" src="./img/categories/phone-icon.png" alt=""/>
<span>Teléfonos</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="#">Todo</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Más Vistos</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Destacados</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Acerca de <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Ayuda</a></li>
<li class="divider"></li>
<li><a href="#">Equipo</a></li>
<li class="divider"></li>
<li><a href="#">Condiciones del servicio</a></li>
<li><a href="#">Politicas de privacidad</a></li>
<li class="divider"></li>
<li><a href="#">Copyright</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- END NAVBAR -->
<div class="container">
<div class="top-content">
<ul class="breadcrumb breadcrumbs-list">
<li><a href="#">Inicio</a><span class="divider">/</span></li>
<li><a href="#">Empresas</a><span class="divider">/</span></li>
<li class="active">Tienda Inglesa</li>
</ul>
</div>
<style>
.main-content .basic-information
{
background: #FFF;
padding: 20px;
display: inline-block;
}
.basic-information h4
{
color: #777;
}
.left-info
{
width: 410px;
margin-right: 20px;
}
.right-info
{
width: 465px;
}
.top-info
{
display: inline-block;
}
.business-details
{
margin-left: 25px;
}
.business-details h3
{
margin: 0px;
width:205px;
line-height: 30px;
margin-bottom: 5px;
}
.business-details .product-rating
{
width: 125px;
text-align: center;
line-height: 22px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-size: 20px;
height: 22px;
background: #FF9032;
color: white;
margin: 0px 0px 5px 0px;
}
.business-details .reviews-resume
{
margin-right: 10px;
text-align: center;
}
#map_canvas
{
width: 465px;
height: 250px;
}
.b-location-info dt
{
width: 75px;
}
.b-location-info dd
{
margin-left: 95px;
}
.social-details
{
padding: 8px 14px;
margin-top: 20px;
}
.social-details h4
{
line-height: 46px;
}
.social-sharing ul
{
list-style: none;
margin: 9px 0px 5px 0px;
display: inline-block;
}
.social-sharing ul li
{
float:left;
font-size: 13px;
margin-left: 5px;
line-height: 0px;
}
.social-sharing ul li:first-child
{
margin-left: 0px;
}
</style>
<div class="main-content">
<div class="thumbnail basic-information">
<div class="pull-left left-info">
<div class="top-info">
<img class="pull-left" src="http://placehold.it/180x180" alt="">
<div class="business-details pull-left">
<h3>Tienda Inglesa</h3>
<div class="product-rating">
<i class="icon-star"></i>
<i class="icon-star"></i>
<i class="icon-star-empty"></i>
<i class="icon-star-empty"></i>
<i class="icon-star-empty"></i>
</div>
<div class="reviews-resume pull-left">
<h4>20</h4>
<h5>Productos</h5>
</div>
<div class="reviews-resume pull-left">
<h4>6</h4>
<h5>Reviews</h5>
</div>
</div>
</div>
<div class="social-details clearfix alert alert-info">
<h4 class="pull-left">Quedate en contacto</h4>
<div class="pull-right social-sharing">
<ul>
<li><a class="zocial facebook icon"></a></li>
<li><a class="zocial twitter icon"></a></li>
<li><a class="zocial pinterest icon"></a></li>
<li><a class="zocial googleplus icon"></a></li>
</ul>
</div>
</div>
<a href="#" class="btn btn-warning pull-right">Ir al sitio</a>
</div>
<div class="pull-right right-info">
<div id="map_canvas"></div>
<div class="b-location-info">
<dl class="dl-horizontal">
<dt>Dirección:</dt>
<dd>Av. Brasil 3123, Montevideo, Uruguay</dd>
<dt>Tel.:</dt>
<dd>2707-89-63</dd>
<dt>Info.:</dt>
<dd>info@tienda.com.uy</dd>
<dt>Atención:</dt>
<dd>Lun a Vie de 10 a 19 hs</dd>
</dl>
</div>
</div>
</div>
<h2>Catálogo de la empresa</h2>
</div>
</div>
<!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="./js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<script src="./js/vendor/jquery-ui-1.9.1.custom.min.js"></script>
<script src="./js/vendor/bootstrap.min.js"></script>
<script src="./js/vendor/jquery.rating.js"></script>
<script src="./js/vendor/jquery.timeago.js"></script>
<script src="./js/vendor/jquery.timeago.es.js"></script>
<script src="./js/main.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyChFXu2DPpaRjaMMY4uLqVkBWhdvLO9RRM&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function(){
initialize();
}
);
function initialize() {
var myLatlng = new google.maps.LatLng(-34.905079,-56.139643);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeControlOptions: {
// Para que no aparezca ningun control que moleste
// mapTypeIds: [],
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'hybrid'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// El marcador que indica donde esta el Edificio Le Premier...
var image = new google.maps.MarkerImage(
"img/marker.png",
new google.maps.Size(46,42),
new google.maps.Point(0,0),
new google.maps.Point(23,42)
);
var shadow = new google.maps.MarkerImage(
"img/shadow.png",
new google.maps.Size(70,42),
new google.maps.Point(0,0),
new google.maps.Point(23,42)
);
var shape = {
coord: [42,0,43,1,43,2,44,3,45,4,45,5,44,6,44,7,44,8,44,9,44,10,44,11,44,12,43,13,43,14,45,15,43,16,43,17,42,18,42,19,42,20,41,21,41,22,41,23,40,24,40,25,40,26,41,27,40,28,42,29,42,30,42,31,42,32,42,33,40,34,39,35,39,36,38,37,38,38,36,39,35,40,32,41,8,41,3,40,2,39,1,38,1,37,0,36,0,35,0,34,0,33,0,32,0,31,1,30,1,29,1,28,2,27,0,26,0,25,0,24,0,23,1,22,1,21,1,20,1,19,1,18,1,17,1,16,2,15,2,14,2,13,2,12,2,11,3,10,3,9,3,8,3,7,3,6,4,5,4,4,4,3,5,2,6,1,7,0,42,0],
type: 'poly'
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
shape: shape,
icon: image,
shadow: shadow
});
}
</script>
<script>
// Here goes the magic!
$(document).ready(function(){
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment