<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container">
<h1 class="page-heading bottom-indent">¿Cómo realizar pedidos?</h1>
<ul class="timeline">
<li>
<div class="timeline-badge">1</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">INICIAR Sesión o Crear una Cuenta</h4>
</div>
<div class="timeline-body">
<p>Puede iniciar sesión en el área de Mi cuenta que se encuentra en la parte superior derecha de la página. Si no tiene una cuenta deberá registrarse.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">2</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Navegar Productos.</h4>
</div>
<div class="timeline-body">Navegue por la oferta de productos online y dé click para ver los detalles del producto, si no está seguro acerca de las características o tiene dudas sobre el mismo, póngase en contacto con nosotros: 01(33) 3636-3410 para obtener ayuda.</div>
</div>
</li>
<li>
<div class="timeline-badge">3</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Agregar Productos a Carrito</h4>
</div>
<div class="timeline-body">
<p>Una vez que esté seguro del producto que quiere pedir, haga click en el botón de “Añadir a Carrito”.Puede elegir también la cantidad a pedir. Puede revisar su Carrito de Pedidos al momento que lo deseé o al final de realizar todos sus pedidos online. Podrá también corroborar nuevamente la cantidad de productos pedidos o eliminar algún producto que ya no deseé solicitar.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning">4</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Realizar Pedido</h4>
</div>
<div class="timeline-body">
<p>Para realizar su pedido, es necesario que de click en el icono superior del "Carrito” o directo en la ventana emergente que se genera al añadir algún producto al carrito, dando click en el botón “Ir a pedido”. Una vez dentro de su Carrito de Pedidos deberá de corroborar si su orden es correcta, confirmado esto puede proceder a Realizar su Pedido.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge">5</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Correo de Confirmación</h4>
</div>
<div class="timeline-body">
<p>Una vez que envíe la solicitud de pedido, recibirá por correo la confirmación del mismo con un número de folio para su seguimiento, de no ser así, verifique que el correo que nos proporcionó en sus datos de Registro sea válido.</p>
<hr />
<div class="btn-group"><button type="button" class="btn btn-secondary btn-sm dropdown-toggle"> Revisa también en la bandeja de No Deseados</button></div>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge info">6</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Verificación de Pedido</h4>
</div>
<div class="timeline-body">
<p>Nuestro personal de Ventas se contactará con usted para verificar los datos de contacto que nos proporcionó, se le notificará el tiempo de entrega y existencia de todos los productos solicitados, además confirmaremos su forma y fecha de pago.
</p>
<hr />
<div class="btn-group"><button type="button" class="btn btn-primary btn-sm dropdown-toggle"> ¿Dudas? llámanos: 01 (33)36363410 </button></div>
</div>
</div>
</li>
</ul>
</div>
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
left: 15px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
