Skip to content

Instantly share code, notes, and snippets.

@nicxes

nicxes/homepage.html Secret

Created August 4, 2019 22:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nicxes/dde6ddce7b920aebae52efe51be0385a to your computer and use it in GitHub Desktop.
Save nicxes/dde6ddce7b920aebae52efe51be0385a to your computer and use it in GitHub Desktop.
Download ZIP
HTML Markup Boopix
Raw
homepage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Boopix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ion Icons -->
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body class="lab-x1">
<!-- Navbar no logueado
================================================== -->
<nav class="navbar">
<div class="container">
<div class="col-xs-6">
<div class="logo">
<a href=""><img src="http://www.boopix.com/wp-content/uploads/2016/07/logo.png"></a>
</div><!-- .logo -->
</div><!-- .col -->
<div class="col-xs-6">
<ul class="menu text-right">
<li class="hidden-xs">¿Eres nuevo?</li>
<li class="hidden-xs"><a href="#" data-toggle="modal" data-target="#login">Ingresar/Registrarme</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/login.html">Ingresar</a></li>
</ul><!-- .menu -->
</div><!-- .col -->
</div><!-- .container -->
</nav><!-- .navbar -->
<!-- Carousel
================================================== -->
<section id="spotlight" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url('http://media.gettyimages.com/photos/senior-man-raising-toast-to-family-at-meal-table-picture-id529341403');">
<div class="container">
<div class="carousel-caption hidden-xs">
<h1>Con boopix atesora tus momentos para siempre</h1>
<h3>Imprime tus fotos en unos pocos clics y muy facil</h3>
</div><!-- .carousel -->
</div><!-- .container -->
</div><!-- .item -->
</div><!-- .carousel -->
</section><!-- .section -->
<!-- Products
================================================== -->
<section class="products">
<div class="container">
<h3 class="title">Descubre nuestros productos</h3>
<hr>
<div id="products">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Todos los productos</a></li>
<li><a href="#2" data-toggle="tab">Impresiones</a></li>
<li><a href="#3" data-toggle="tab">Fotolibros</a></li>
<li><a href="#4" data-toggle="tab">Álbums</a></li>
<li><a href="#5" data-toggle="tab">Cuadros</a></li>
<li><a href="#6" data-toggle="tab">Accesorios</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<article class="card">
<ul class="links hidden-xs">
<li><a href=""><i class="fa fa-truck fa-flip-horizontal"></i></a></li>
<li data-toggle="tooltip" data-placement="bottom" title="Pasalo a buscar por Nuñez, Capital Federal"><a href=""><i class="fa fa-map-marker fa-flip-horizontal"></i></a></li>
</ul>
<img src="http://media.gettyimages.com/photos/senior-man-raising-toast-to-family-at-meal-table-picture-id529341403">
<div class="overlay">
<h3>Paquete de fotos</h3>
<p class="hidden-xs hidden-sm">Ahora tiempo y dinero imprimiendo tus fotos por paquetes, en tamaño mediano (10 x 13cm) o grande (13 x 18cm)</p>
</div><!-- .overlay -->
</article><!-- .card -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .tab-pane -->
</div><!-- .tab-content -->
</div><!-- .products -->
<div class="text-center">
<a href="#" class="btn btn-primary btn-lg" role="button">Ver más productos</a>
</div><!-- .text-center -->
</div><!-- .container -->
</section>
<!-- Footer
================================================== -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 hidden-sm hidden-md hidden-lg">
<span class="login"><a href="/">Ingresar</a></span>
</div><!-- .col -->
<div class="hidden-xs col-sm-12 col-md-10">
<span class="logo"><a href="/"><img src="assets/images/logos/logo-footer.png"></a></span>
<ul class="links">
<li><a href="">¿Por qué Boopix?</a></li>
<li><a href="">Cómo funciona</a></li>
<li><a href="">Promociones</a></li>
<li><a href="">Forma de entrega</a></li>
<li><a href="">Contacto</a></li>
<li><a href="">Ingresar</a></li>
</ul><!-- .links -->
</div><!-- .col -->
<div class="col-xs-6 col-sm-12 col-md-2">
<ul class="social">
<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>
</ul><!-- .social -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
</footer><!-- .footer links -->
<footer class="copyright">
<div class="container">
<ul>
<li>boopix - Copyright 2016</li>
<li class="hidden-xs"><a href="">Términos y condiciones</a></li>
<li class="hidden-xs"><a href="">Privacidad</a></li>
</ul>
</div><!-- .container -->
</footer><!-- .footer -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/34c19b2e94.js"></script>
<script src="./assets/js/main.min.js"></script>
<!-- Only on DEVELOPMENT
<script src="./assets/js/main.js"></script>
-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment