product_pc4_bangho.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>Bienvenidos Electro Compras</title>

 		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">
 		<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
 		<link type="text/css" rel="stylesheet" href="css/slick.css"/>
 		<link type="text/css" rel="stylesheet" href="css/slick-theme.css"/>
 		<link type="text/css" rel="stylesheet" href="css/nouislider.min.css"/>
 		<link rel="stylesheet" href="css/font-awesome.min.css">
 		<link type="text/css" rel="stylesheet" href="css/style.css"/>

    </head>
	<body>
		<header>
			<div id="top-header">
				<div class="container">
					<ul class="header-links pull-left">
						<li><a href="#"><i class="fa fa-phone"></i> +543814146349</a></li>
						<li><a href="#"><i class="fa fa-envelope-o"></i> alvarez.cf98@gmail.com</a></li>
						<li><a href="#"><i class="fa fa-map-marker"></i> Argentina, Tucuman</a></li>
					</ul>
					<ul class="header-links pull-right">
						<li><a href="#"><i class="fa fa-dollar"></i> $$</a></li>
						<li><a href="#"><i class="fa fa-user-o"></i> Mi Cuenta</a></li>
					</ul>
				</div>
			</div>

			<div id="header">
				<div class="container">
					<div class="row">
						<div class="col-md-3">
							<div class="header-logo">
								<a href="index.html" class="logo">
									<img src="./img/logo.png" alt="">
								</a>
							</div>
						</div>

						<div class="col-md-6">
							<div class="header-search">
								<form>
									<select class="input-select">
										<option value="0">Todas las categorias</option>
										<option value="1">Notebook</option>
										<option value="2">Smartphones</option>
										<option value="3">Camaras</option>
										<option value="4">Accesorios</option>
									</select>
									<input class="input" placeholder="Buscar Aqui">
									<button class="search-btn">Buscar </button>
								</form>
							</div>
						</div>

						<div class="col-md-3 clearfix">
							<div class="header-ctn">
								<div>
									<a href="#">
										<i class="fa fa-heart-o"></i>
										<span>Lista de deseos</span>
										<div class="qty">0</div>
									</a>
								</div>

								<div class="dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
										<i class="fa fa-shopping-cart"></i>
										<span>Su Carrito</span>
										<div class="qty">0</div>
									</a>
									<div class="cart-dropdown">
										<div class="cart-list">
											<div class="product-widget">
												<button class="delete"><i class="fa fa-close"></i></button>
											</div>											
										</div>
										<div class="cart-summary">
											<small> Articulos seleccionados</small>
											<h5>SUBTOTAL: $ 0</h5>
										</div>
										<div class="cart-btns">
											<a href="#">Ver Carrito</a>
											<a href="#">Revisar  <i class="fa fa-arrow-circle-right"></i></a>
										</div>
									</div>
								</div>

								<div class="menu-toggle">
									<a href="#">
										<i class="fa fa-bars"></i>
										<span>Menu</span>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>

		<nav id="navigation">
			<div class="container">
				<div id="responsive-nav">
					<ul class="main-nav nav navbar-nav">
						<li><a href="index.html">Inicio</a></li>
						<li class="active"><a href="#">Notebook</a></li>
						<li><a href="store_smartphones.html">Smartphones</a></li>
						<li><a href="#">Camaras</a></li>
						<li><a href="#">Accesorios</a></li>
					</ul>
				</div>
			</div>
		</nav>

		<div id="breadcrumb" class="section">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<ul class="breadcrumb-tree">
							<li><a href="#">Inicio</a></li>
							<li><a href="#">Notebook</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="section">
			<div class="container">
				<div class="row">
					<div class="col-md-5 col-md-push-2">
						<div id="product-main-img">
							<div class="product-preview">
								<img src="./img/product03.png" alt="">
							</div>

							<div class="product-preview">
								<img src="./img/product03.png" alt="">
							</div>

							<div class="product-preview">
								<img src="./img/product03.png" alt="">
							</div>

							<div class="product-preview">
								<img src="./img/product03.png" alt="">
							</div>
						</div>
					</div>

					<div class="col-md-2  col-md-pull-5">
						<div id="product-imgs">
							<div class="product-preview">
							  <img src="./img/product03.png" alt="">
							</div>
						</div>
					</div>

					<div class="col-md-5">
						<div class="product-details">
						  <h2 class="product-name">Notebook BANGHO</h2>
						  	<div>
								<div class="product-rating">
									<i class="fa fa-star"></i>
								</div>
							</div>
							<div>
							  <h3 class="product-price">$20.000 <del class="product-old-price">$23.000</del></h3>
							  <span class="product-available">En Stock</span>
							</div>
							<p>Su procesador Intel Core I3-8130U junto con su memoria RAM de 4 GB se complementan para ofrecer el máximo rendimiento con el menor consumo de energía. </p>
							<div class="product-options">
								<label> Color
									<select class="input-select">
										<option value="0">Gris</option>
										<option value="1">Negro</option>
			  						</select>
							  	</label>
						  	</div>

							<div class="add-to-cart">
								<div class="qty-label">
									Agregar
									<div class="input-number">
										<input type="number">
										<span class="qty-up">+</span>
										<span class="qty-down">-</span>
									</div>
								</div>
								<button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i>añadir al carrito</button>
							</div>

							<ul class="product-btns">
								<li><a href="#"><i class="fa fa-heart-o"></i> añadir a lista de deseos</a></li>
								<li><a href="#"><i class="fa fa-exchange"></i> comparar</a></li>
							</ul>

							<ul class="product-links">
								<li>Categoria:</li>
								<li><a href="#">Notebook </a></li>
							</ul>

							<ul class="product-links">
							  <li>Seguir:</li>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								<li><a href="#"><i class="fa fa-envelope"></i></a></li>
							</ul>

						</div>
					</div>

					<div class="col-md-12">
						<div id="product-tab">
							<ul class="tab-nav">
								<li class="active"><a data-toggle="tab" href="#tab1">Descripcion</a></li>
							</ul>

							<div class="tab-content">
								<div id="tab1" class="tab-pane fade in active">
									<div class="row">
										<div class="col-md-12">
										  <p>- Procesador Intel Core i5 </p>
										  <p>- Memoria RAM 4 GB DDR4</p>
										  <p>- Almacenamiento 1 TB</p>
										  <p>- DVD+RW, Bluetooth 4.0, Windows 10</p>
										  <p>- Tamaño de pantalla 15.6 "</p>
										  <p>- Sistema Operativo: Windows 10 Home 64 bits US - Peso 1.33 kg </p>
										</div>
									</div>
								</div>																										
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div id="newsletter" class="section">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="newsletter">
							<p>Suscríbase a la <strong>Carta de Noticias</strong></p>
							<form>
								<input class="input" type="email" placeholder="Introduce tu correo electrónico">
								<button class="newsletter-btn"><i class="fa fa-envelope"></i> Suscribete</button>
							</form>
							<ul class="newsletter-follow">
								<li>
									<a href="#"><i class="fa fa-facebook"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-twitter"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-instagram"></i></a>
								</li>
								<li>
									<a href="#"><i class="fa fa-pinterest"></i></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
		</div>

		<footer id="footer">
			<div class="section">
				<div class="container">
					<div class="row">
						<div class="col-md-3 col-xs-6">
							<div class="footer">
								<h3 class="footer-title">Sobre nosotros</h3>
								<p>Somos un microemprendimiento realizando sus primeros pasos en el rubro de la informatica, estamos ubicados en la localidad de San Miguel de Tucuman.</p>
								<ul class="footer-links">
									<li><a href="#"><i class="fa fa-map-marker"></i>Argentina, Tucuman</a></li>
									<li><a href="#"><i class="fa fa-phone"></i>+543814146349</a></li>
									<li><a href="#"><i class="fa fa-envelope-o"></i>alvarez.cf98@gmail.com</a></li>
								</ul>
							</div>
						</div>

						<div class="col-md-3 col-xs-6">
							<div class="footer">
								<h3 class="footer-title">Categorias</h3>
								<ul class="footer-links">
									<li><a href="#">Ofertas</a></li>
									<li><a href="#">Notebook</a></li>
									<li><a href="#">Smartphones</a></li>
									<li><a href="#">Camaras</a></li>
									<li><a href="#">Accesorios</a></li>
								</ul>
							</div>
						</div>

						<div class="clearfix visible-xs"></div>

						<div class="col-md-3 col-xs-6">
							<div class="footer">
								<h3 class="footer-title">Informacion</h3>
								<ul class="footer-links">
									<li><a href="#">Sobre Nosotros</a></li>
									<li><a href="#">Contactenos</a></li>
									<li><a href="#">Política de privacidad</a></li>
									<li><a href="#">Pedidos y devoluciones</a></li>
									<li><a href="#">Términos y condiciones</a></li>
								</ul>
							</div>
						</div>

						<div class="col-md-3 col-xs-6">
							<div class="footer">
								<h3 class="footer-title">Servicios</h3>
								<ul class="footer-links">
									<li><a href="#">Mi cuenta</a></li>
									<li><a href="#">Ver Carrito</a></li>
									<li><a href="#">Lista de deseos</a></li>
									<li><a href="#">Seguir mi pedido</a></li>
									<li><a href="#">Ayuda</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div id="bottom-footer" class="section">
				<div class="container">
					<div class="row">
						<div class="col-md-12 text-center">
							<ul class="footer-payments">
								<li><a href="#"><i class="fa fa-cc-visa"></i></a></li>
								<li><a href="#"><i class="fa fa-credit-card"></i></a></li>
								<li><a href="#"><i class="fa fa-cc-paypal"></i></a></li>
								<li><a href="#"><i class="fa fa-cc-mastercard"></i></a></li>
								<li><a href="#"><i class="fa fa-cc-discover"></i></a></li>
								<li><a href="#"><i class="fa fa-cc-amex"></i></a></li>
							</ul>
							<span class="saludo">
								<p> Hecho con <i class="fa fa-heart-o" aria-hidden="true"></i> por <a href="https://github.com/C-Alvarez98" target="_blank">Cristian</a></p>
							</span>
						</div>
					</div>
				</div>
			</div>
		</footer>

		<!-- jQuery Plugins -->
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/slick.min.js"></script>
		<script src="js/nouislider.min.js"></script>
		<script src="js/jquery.zoom.min.js"></script>
		<script src="js/main.js"></script>

	</body>
</html>