API tools faq
paste
Advertisement
Fhernd

index.html

Fhernd
Sep 12th, 2017
269
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Tienda</title>
  6.     <link rel="stylesheet" href="css/foundation.min.css" media="screen" charset="utf-8">
  7.     <link rel="stylesheet" href="foundation-icons/foundation-icons.css" media="screen" charset="utf-8">
  8.     <link rel="stylesheet" href="css/home.css" media="screen" charset="utf-8">
  9. </head>
  10. <body>
  11. <div class="row">
  12.     <div class="medium-3 columns text-center">
  13.         <h1>e-Store</h1>
  14.     </div>
  15.     <div class="medium-4 columns medium-offset-5">
  16.         <div class="column row">
  17.             <div class="menu align-right show-for-medium show-for-large">
  18.                 <li><a href="#">Ingresa</a></li>
  19.                 <li><a href="#">Regístrate</a></li>
  20.                 <li><a href="#">Ayuda</a></li>
  21.                 <li><a href="#">Mapa del sitio</a></li>
  22.             </div>
  23.         </div>
  24.         <div class="row">
  25.             <div class="small-9 columns medium-offset-3">
  26.                 <ul class="menu align-right">
  27.                     <li><a><i class="step fi-social-facebook size-36"></i></a></li>
  28.                     <li><a><i class="step fi-social-instagram size-36"></i></a></li>
  29.                     <li><a><i class="step fi-social-twitter size-36"></i></a></li>
  30.                     <li><a><i class="step fi-social-youtube size-36"></i></a></li>
  31.                     <li><a><i class="step fi-social-pinterest size-36"></i></a></li>
  32.                 </ul>
  33.             </div>
  34.         </div>
  35.     </div>
  36. </div>
  37.  
  38. <div class="column row">
  39.     <div class="button-group expanded stacked-for-small">
  40.         <a href="#" class="button">Hogar</a>
  41.         <a href="#" class="button">Salud</a>
  42.         <a href="#" class="button">Deporte</a>
  43.         <a href="#" class="button">Tecnología</a>
  44.         <a href="#" class="button">Accesorios</a>
  45.         <a href="#" class="button">Ropa</a>
  46.         <a href="#" class="button">Mantenimiento</a>
  47.         <a href="#" class="button hollow alert">Carrito <i class="step fi-shopping-cart"></i></a>
  48.     </div>
  49. </div>
  50.  
  51. <div class="column row">
  52.     <ul class="breadcrumbs">
  53.         <li><a href="#">Home</a></li>
  54.         <li><a href="#">Hogar</a></li>
  55.         <li><a href="#">Varios</a></li>
  56.         <li>Decoración</li>
  57.     </ul>
  58. </div>
  59.  
  60. <div class="row large-uncollapse">
  61.     <div class="large-3 columns show-for-medium-only show-for-large-only">
  62.         <div class="callout">
  63.             <h4>Búsqueda Avanzada</h4>
  64.             <form action="" role="form">
  65.                 <fieldset>
  66.                     <div class="form-group">
  67.                         <label for="nombre">Por nombre:</label>
  68.                         <input type="text" id="nombre" name="nombre">
  69.                     </div>
  70.                     <div class="form-group">
  71.                         <label for="referencia">Por referencia:</label>
  72.                         <input type="text" id="referencia" name="referencia">
  73.                     </div>
  74.                     <p class="help-text">Número único del producto</p>
  75.                     <div class="form-group">
  76.                         <label for="categoria">Por categoría</label>
  77.                         <select name="categoria" id="categoria">
  78.                             <option value="hogar">Hogar</option>
  79.                             <option value="salud">Salud</option>
  80.                             <option value="deporte">Deporte</option>
  81.                             <option value="tecnologia">Tecnología</option>
  82.                             <option value="accesorios">Accesorios</option>
  83.                             <option value="ropa">Ropa</option>
  84.                             <option value="Mantenimiento">Mantenimiento</option>
  85.                         </select>
  86.                     </div>
  87.                     <div class="form-group">
  88.                         <label>Tipo de producto:</label>
  89.                         <label>
  90.                             <input type="checkbox">Nuevo
  91.                         </label>
  92.                         <label>
  93.                             <input type="checkbox">Usado
  94.                         </label>
  95.                     </div>
  96.                     <div class="form-group">
  97.                         <label>Tipo de precio:</label>
  98.                         <label>
  99.                             <input type="radio">Pleno
  100.                         </label>
  101.                         <label>
  102.                             <input type="radio">En oferta
  103.                         </label>
  104.                     </div>
  105.                     <div class="form-group text-center">
  106.                         <label>¿Buscar productos agotados?</label>
  107.                         <div class="switch large">
  108.                             <input type="checkbox" class="switch-input" name="agotadosSwitch">
  109.                             <label class="switch-paddle" for="agotadosSwitch">
  110.                                 <span class="switch-active" aria-hidden="true">Sí</span>
  111.                                 <span class="switch-inactive" aria-hidden="true">No</span>
  112.                             </label>
  113.                         </div>
  114.                     </div>
  115.                     <hr>
  116.                     <div class="form-group text-center">
  117.                         <a href="#" class="button alert">Buscar</a>
  118.                     </div>
  119.                 </fieldset>
  120.             </form>
  121.         </div>
  122.     </div>
  123.     <div class="large-9 columns">
  124.         <div class="callout">
  125.             <h3>Decoración</h3>
  126.             <hr>
  127.             <div class="row large-uncollapse">
  128.                 <div class="large-4 columns">
  129.                     <div class="secondary callout text-center">
  130.                         <img src="img/1.jpg" alt="Decoracion 1" class="thumbnail"/>
  131.                         <h5>Decoración 1</h5>
  132.                         <p>
  133.                             <a href="#">Ver más <i class="step fi-plus"></i></a>
  134.                         </p>
  135.                     </div>
  136.                 </div>
  137.                 <div class="large-4 columns">
  138.                     <div class="secondary callout text-center">
  139.                         <img src="img/2.jpg" alt="Decoracion 1" class="thumbnail"/>
  140.                         <h5>Decoración 2</h5>
  141.                         <p>
  142.                             <a href="#">Ver más <i class="step fi-plus"></i></a>
  143.                         </p>
  144.                     </div>
  145.                 </div>
  146.                 <div class="large-4 columns">
  147.                     <div class="secondary callout text-center">
  148.                         <img src="img/3.jpg" alt="Decoracion 1" class="thumbnail"/>
  149.                         <h5>Decoración 3</h5>
  150.                         <p>
  151.                             <a href="#">Ver más <i class="step fi-plus"></i></a>
  152.                         </p>
  153.                     </div>
  154.                 </div>
  155.             </div>
  156.             <div class="row large-uncollapse">
  157.                 <div class="large-4 columns">
  158.                     <div class="secondary callout text-center">
  159.                         <img src="img/4.jpg" alt="Decoracion 1" class="thumbnail"/>
  160.                         <h5>Decoración 4</h5>
  161.                         <p>
  162.                             <a href="#">Ver más <i class="step fi-plus"></i></a>
  163.                         </p>
  164.                     </div>
  165.                 </div>
  166.                 <div class="large-4 columns">
  167.                     <div class="secondary callout text-center">
  168.                         <img src="img/5.jpg" alt="Decoracion 1" class="thumbnail"/>
  169.                         <h5>Decoración 5</h5>
  170.                         <p>
  171.                             <a href="#">Ver más <i class="step fi-plus"></i></a>
  172.                         </p>
  173.                     </div>
  174.                 </div>
  175.                 <div class="large-4 columns">
  176.                     <div class="secondary callout text-center">
  177.                         <img src="img/6.jpg" alt="Decoracion 1" class="thumbnail"/>
  178.                         <h5>Decoración 6</h5>
  179.                         <p>
  180.                             <a href="#">Ver más <i class="step fi-plus"></i></a>
  181.                         </p>
  182.                     </div>
  183.                 </div>
  184.             </div>
  185.         </div>
  186.     </div>
  187.  
  188. </div>
  189.  
  190. <script src="js/jquery.js"></script>
  191. <script src="js/what-input.js"></script>
  192. <script src="js/foundation.min.js" charset="utf-8"></script>
  193. <script src="js/home.js" charset="utf-8"></script>
  194. </body>
  195. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!