<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row" style="min-height:300px;">
<div class="col-sm-12 bg-panel">
<div class="col-xs-3">
<!-- required for floating -->
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-left">
<li class="active"><a href="#home" data-toggle="tab">¿Qué hacemos?</a></li>
<li><a href="#profile" data-toggle="tab">Perfil</a></li>
<li><a href="#messages" data-toggle="tab">Misión</a></li>
<li><a href="#settings" data-toggle="tab">Visión</a></li>
<li><a href="#politica" data-toggle="tab">Política de calidad</a></li>
</ul>
</div>
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">
<h2><b>¿Qué hacemos?</b></h2>
<p>Trading Sugar es una compañía especializada en la comercialización de azúcar de alta calidad, nuestro producto proviene de los mejores ingenios de centro y sur américa; elegimos a nuestros proveedores bajo estrictos estándares de calidad buscando garantizar la excelencia de nuestros productos, ponemos a disposición de nuestros clientes el mejor talento humano y los recursos tecnológicos más eficientes para ofrecer un servicio que supere sus expectativas.</p>
</div>
<div class="tab-pane" id="profile">
<h2><b>Perfil</b></h2>
<p>Trading Sugar es una compañía especializada en la comercialización de azúcar de alta calidad, nuestro producto proviene de los mejores ingenios de centro y sur américa; elegimos a nuestros proveedores bajo estrictos estándares de calidad buscando garantizar la excelencia de nuestros productos, ponemos a disposición de nuestros clientes el mejor talento humano y los recursos tecnológicos más eficientes para ofrecer un servicio que supere sus expectativas.</p>
</div>
<div class="tab-pane" id="messages">
<h2><b>Misión</b></h2>
<p>Trading Sugar es una compañía especializada en la comercialización de azúcar de alta calidad, nuestro producto proviene de los mejores ingenios de centro y sur américa; elegimos a nuestros proveedores bajo estrictos estándares de calidad buscando garantizar la excelencia de nuestros productos, ponemos a disposición de nuestros clientes el mejor talento humano y los recursos tecnológicos más eficientes para ofrecer un servicio que supere sus expectativas.</p>
</div>
<div class="tab-pane" id="settings">
<h2><b>Visión</b></h2>
<p>Trading Sugar es una compañía especializada en la comercialización de azúcar de alta calidad, nuestro producto proviene de los mejores ingenios de centro y sur américa; elegimos a nuestros proveedores bajo estrictos estándares de calidad buscando garantizar la excelencia de nuestros productos, ponemos a disposición de nuestros clientes el mejor talento humano y los recursos tecnológicos más eficientes para ofrecer un servicio que supere sus expectativas.</p>
</div>
<div class="tab-pane" id="politica">
<h2><b>Política de calidad</b></h2>
<p>Trading Sugar es una compañía especializada en la comercialización de azúcar de alta calidad, nuestro producto proviene de los mejores ingenios de centro y sur américa; elegimos a nuestros proveedores bajo estrictos estándares de calidad buscando garantizar la excelencia de nuestros productos, ponemos a disposición de nuestros clientes el mejor talento humano y los recursos tecnológicos más eficientes para ofrecer un servicio que supere sus expectativas.</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
.tabs-left, .tabs-right {
border-bottom: none;
padding-top: 0px;
}
.tabs-left {
border-right: 1px solid #ddd;
font-size: 23px;
margin-right: -15px;
font-weight: 900;
transition: all 1s;
}
.tabs-right {
border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
float: none;
margin-bottom: 2px;
}
.tabs-left>li {
margin-right: -1px;
}
.tabs-right>li {
margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
border-bottom-color: #ddd;
border-right-color: transparent;
color: #EE4423;
}
.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
border-bottom: 1px solid #ddd;
border-left-color: transparent;
}
.tabs-left>li>a {
border-radius: 4px 0 0 4px;
margin-right: 0;
display:block;
color: #5D5D5D;
transition: all 1s;
}
.tabs-right>li>a {
border-radius: 0 4px 4px 0;
margin-right: 0;
}
.vertical-text {
margin-top:50px;
border: none;
position: relative;
}
.vertical-text>li {
height: 20px;
width: 120px;
margin-bottom: 100px;
}
.vertical-text>li>a {
border-bottom: 1px solid #ddd;
border-right-color: transparent;
text-align: center;
border-radius: 4px 4px 0px 0px;
}
.vertical-text>li.active>a,
.vertical-text>li.active>a:hover,
.vertical-text>li.active>a:focus {
border-bottom-color: transparent;
border-right-color: #ddd;
border-left-color: #ddd;
}
.vertical-text.tabs-left {
left: -50px;
}
.vertical-text.tabs-right {
right: -50px;
}
.vertical-text.tabs-right>li {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.vertical-text.tabs-left>li {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.tab-content {
background: rgba(255, 255, 255, 0.5);
height:300px;
padding:15px;
margin-left:-15px;
}
.bg-panel{
background-image: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url('http://www.gifex.com/images/0X0/2010-08-20-11915/Mapa-satelital-de-Madrid.jpg');
background-repeat: no-repeat;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
cursor: default;
background-color: transparent;
border: 0px solid #ddd;
border-bottom-color: transparent;
background: url("http://nkmediasolutions.com/images/Icon-arrow-left-white.png");
background-repeat: no-repeat;
background-size: contain;
background-position: right;
}
.nav > li > a {
position: relative;
display: block;
padding: 2px 15px;
}
