Compare commits
1 Commits
master
...
dependabot
| Author | SHA1 | Date |
|---|---|---|
dependabot[bot]
|
57ab16cb7a |
152
README.md
152
README.md
|
|
@ -1,107 +1,81 @@
|
|||
# EcoSen - Registradores de datos abiertos (o lo más abiertos posibles) para variables ambientales (English below)
|
||||
El monitoreo ambiental es esencial para el cuidado del ambiente. Particularmente, me interesa poder monitorear ambientes acuáticos. Para medir estas variables una opción son los registradoresd e datos privativos. Estos debido a sus altos costos, o por ser de diseños cerrados nos imposibilitan compararlo o repararlos.
|
||||
Nuestra propuesta consiste en el diseño y desarrollo de registradores de datos (RD) con tecnologías inalámbricas para tener información en tiempo real en cualquier dispositivo conectado a internet. Los RD pueden ser tanto acuáticos como terrestres. Los acuáticos se espera puedan medir información relevante para el cálculo de índices de calidad de agua ([Pesce y Wunderlin, 2000](https://www.sciencedirect.com/science/article/pii/S0043135400000361)), como ser turbidez, oxígeno disuelto, conductividad y pH. El terrestre va a medir aquellas variables relevantes para la calidad del aire o suelo.
|
||||
La base técnica para la construcción de estos registradores es la presente en el increíble proyecto [Cave Pearl Proyect](https://thecavepearlproject.org/), pero adaptandolo a aguas superficiales.
|
||||
# EcoSen - LoRa Data-Loggers for environmental quality (Español abajo)
|
||||
Environmental monitoring is essential due to the variety of ways in which it is threatened.
|
||||
Usually recording environmental variables can be carried out by private data loggers. These devices, due to their high costs, or being of closed design, do not allow us to buy in quantity or build them.
|
||||
Our proposal consists in the design and development of open hardware data loggers with LoRaWan technology for communication with devices for downloading data. The data loggers will be of two types: aquatic and terrestrial. Aquatics will measure relevant data for the determination of water quality such as turbidity, dissolved oxygen, conductivity and pH. The terrestrial, will measure bee activity variables in hive, biological indicators of environmental quality.
|
||||
These data loggers are based mainly in the [Cave Pearl Proyect](https://thecavepearlproject.org/), but with adaptations to surface waters.
|
||||
|
||||
### Descargo de responsabilidad
|
||||
Este proyecto se encuentra en gestación por lo que vamos a ver es su evolución. Aún no hemos logrado un perfecto funcionamiento de lo propuesto ni con todo tipo de sensores ni con la conectividad inalámbrica, así que cualquier persona que se quiera sumar es bienvenida. Puedes comuncarte con alejo.bonifacio@unc.edu.ar
|
||||
<img src="Images/image_1.jpg" width="100%">
|
||||
|
||||
## Motivación
|
||||
Queremos traer a la sociedad la pasión por el monitoreo de ríos, lagunas, lagos y todo tipo de humedales. Además, reconocemos la importacia de aprender acerca de proyectos de electronica abierta con la posibilidad de reproducir, modificar y personalizar los RD. La tecnología abierta que queremos compartir es asociada a repositorios que harán de la información accesible a cualquier persona. Si en algún momento crees que alguna información no es lo suficiente pública por favor nos lo haces saber.
|
||||
### Motivation
|
||||
We want to bring to society the passion for monitoring rivers and lakes. Also with the plus of learning about open electronic projects with possibility of reproduce, modify and customize data loggers. The Open technology that we bring is associated with open data repositories that will make the environmental information accessible to everyone!
|
||||
|
||||
## Primer paso, midamos algo..
|
||||
Vamos a usar una placa arduino para registrar unos valores del ambiente. Con esto vamos a lograr ver que estos microcontroladores son capaces de sensar variables ambientales y eso no interesa mucho.
|
||||
### The first steps, measuring
|
||||
To begin recording environmental variables is necessary to develop some abilities measuring these. To do that we are gonna start making a [Coqui conductivity sensor](https://publiclab.org/wiki/coqui) of [Public Lab](https://publiclab.org/) website.
|
||||
<img src="Images/Coqui.jpg" width="100%">
|
||||
With this task, we are learning to measure environmental variables with an open source hardware
|
||||
|
||||
### Materiales (con links a proveedores en Argentina)
|
||||
* [Arduino uno](https://articulo.mercadolibre.com.ar/MLA-719198757-arduino-uno-r3-con-cable-usb-y-chip-desmontable-atmel-_JM#position=9&search_layout=grid&type=item&tracking_id=e573198c-48a2-4803-9afd-36106603708a)
|
||||
* [DHT 11](https://articulo.mercadolibre.com.ar/MLA-752254138-modulo-sensor-humedad-relativa-y-temperatura-dht11-arduino-_JM#position=2&search_layout=stack&type=item&tracking_id=45f07ec5-ad22-412b-94d2-94497e139acf)
|
||||
* [Cables dupont](https://articulo.mercadolibre.com.ar/MLA-621254141-pack-40-cables-macho-macho-10cm-dupont-arduino-y-protoboard-_JM#position=3&search_layout=stack&type=item&tracking_id=f217ef53-0080-491f-b6bd-d42105134adf)
|
||||
* [Protoboard](https://articulo.mercadolibre.com.ar/MLA-630797518-protoboard-830-puntos-placa-experimental-arduino-electronica-_JM#position=1&search_layout=grid&type=item&tracking_id=1832eed4-aa24-40df-b3ca-a32b95b5c628)
|
||||
* Cable USB-b a USB-c (viene incluido con el arduino UNO)
|
||||
* Computadora de escritorio o laptop
|
||||
### Second step, logging
|
||||
To begin logging we are going to made an Arduino Uno based data logger. This data logger is based in one of the [Cave Pearl Projects] (https://thecavepearlproject.org/2015/12/22/arduino-uno-based-data-logger-with-no-soldering/). After complete the datalogger we are going to add a DHT11 temperature and relative humidity module to pin 8 of Arduino Uno. The code.ino is downloadable in the following [link](https://drive.google.com/open?id=17P1dIhY--dl7_n6sXm4gY56F4k5InGaj)or in the Codes folder.
|
||||
<img src="Images/HumTeDL.jpg" width="100%">
|
||||
|
||||
|
||||
### Procedimiento :electric_plug:
|
||||
* Instalamos Arduino IDE en nuestra pc -> [link](https://www.arduino.cc/en/software). Abrimos el software. Para usar el programa en español, vamos a Archivo/Preferencias y seleccionamos Español en el idioma del editor.
|
||||
* Conectamos la placa a la PC con el cable USB-b a USB-c.
|
||||
* Abrimos el programa Arduino IDE, vamos al menú Herramientas/Puerto, nos fijamos qué puerto se nos habilita y lo seleccionamos.
|
||||
* Vamos al menú Herramientas/Placa y nos aseguramos que esté seleccionada la placa Arduino Uno.
|
||||
* Abrimos el ejemplo blink, que se ubica en Archivo/Ejemplo/01.Basics. Subimos el código a la placa con la flecha que se ubica a la derecha en la parte superior de la consola. Si queremos aprender del código, podemos cambiar el tiempo en el que se mantiene prendido y/o apagado el LED cambiando el número que hay dentro de cada uno de los delay que hay en el código. Vamos al IDE y cambiamos el primero a 500 y el segundo a 2000. Volvemos a subir el código y chequeamos que la luz se mantenga apagada menos tiempo que prendida.
|
||||
* Desconectamos la placa de la PC y armamos el circuito con la protoboard, el Arduino Uno y el DHT11.
|
||||
El esquema de conexión va a ser el siguiente:
|
||||
* + (calle roja) -> 5V (VCC) en Arduino Uno
|
||||
* - (calle azul) -> GND en Arduino Uno
|
||||
* OUT del DHT11 -> pin 8 en Arduino Uno
|
||||
### Specifications & Technical Attributes
|
||||
|
||||
* Volvemos a conectar la placa a la PC y revisamos en el IDE que el puerto y el tipo de placa sean los correctos
|
||||
* Esto no es un paso sino una advertencia. Lo que sigue es empezar a probar códigos que usan librerías. Acá la cosa puede empezar a ponerse algo frustrante. Esto es porque puede haber muchas librerías para un mismo módulo pero no todas funcionan de la misma manera. Entonces, vamos a tener que estar muy segures de que la librerías sea la que funciona con nuestro código. Para evitar problemas, acá están los enlaces para descargar las librerías necesarias para los códigos que vamos a usar.
|
||||
* Una vez armado el circuito, vamos a probar el siguiente [código](https://drive.google.com/drive/folders/1apZFteFHHeEfqCXaeWlCMYO2od5rfOG3?usp=sharing). Para esto:
|
||||
* Bajamos el archivo del código y lo abrimos en el IDE.
|
||||
* Agregamos las librerías DHT sensor library y Adafruit sensor master. Para incluir estas librerías tenemos que descargar los archivos ZIP de cada una de estas ([DHT](https://github.com/adafruit/DHT-sensor-library) y [Adafruit](https://github.com/adafruit/Adafruit_Sensor)). En el IDE, vamos a Programa/Incluir librería/Añadir biblioteca .ZIP. Ahí cargamos las librerías recientemente descargadas sin descomprimir. Luego de esto vamos a Programa/Incluir librería/ y buscamos DHT y Adafruit, ambas al fondo de la lista desplegable.
|
||||
* Cargamos el código en la placa y abrimos el monitor serial con la lupita que se ubica a la derecha en la parte superior de la consola y comenzamos a ver los valores de humedad y temperatura. Nos aseguramos que la frecuencia que está en la parte inferior derecha del monitor serial esté en 9600.
|
||||
The specific attributes of the data logger you build will depend slightly on the type of sensors you buy for the system. The numbers shown below are for the full version of the data logger that contains exactly the parts that we suggest in our build documents and parts list. Below, you can see which parts could be changed for which spec upgrades.
|
||||
|
||||
## Segundo paso, Registremos... :arrow_up:
|
||||
Para empezar a registrar vamos a necesitar un nuevo elemento, el módulo SD. Con este módulo empezaremos a ganar independencia, ya que podremos guardar la información generada por el sensor en una memoria extraíble. Así, podremos retirar la información de la placa para leerla en otro dispositivo.
|
||||
| Attribute | Value [SI] |
|
||||
| ---------- | :-------------: |
|
||||
| Weight | 1 [kg] |
|
||||
| Footprint | 30x5 [cm] |
|
||||
| Battery Capacity | 6800 [mAh] |
|
||||
| Operating time |3[months](continual use)|
|
||||
| Approximate Max wireless communication | 3 [km] |
|
||||
| Communication (in this guide) | Arduino IDE (windows, mac, GNU/linux) |
|
||||
| Cost | ~ U$S350 |
|
||||
|
||||
### Materiales, muchos ya los tenemos :sunglasses:
|
||||
* Circuito con la protoboard, el Arduino Uno y el DHT11 que armamos en el primer paso
|
||||
* [Módulo micro SD](https://articulo.mercadolibre.com.ar/MLA-905429694-modulo-lector-memorias-micro-sd-arduino-5v-hobbytronica-_JM#position=3&search_layout=grid&type=item&tracking_id=78f54e44-642d-4fc8-b9fd-e26b2e29e181)
|
||||
* [Memoria micro SD](https://articulo.mercadolibre.com.ar/MLA-927190694-memoria-micro-sd-2gb-nuevas-sin-blister-originales-100-_JM#position=4&search_layout=stack&type=item&tracking_id=d6d6c54d-7f15-4b18-b0df-8bed206f4609)
|
||||
##### Table of compenents
|
||||
|
||||
### Procedimiento :electric_plug:
|
||||
Desconectamos la placa de la PC
|
||||
||Quantity|Value U$S|Link|
|
||||
|----------------|:-----------------:|------------------|--------------------|
|
||||
|arduino pro mini|1|3.881656805|[->](https://articulo.mercadolibre.com.ar/MLA-643647762-arduino-pro-mini-33v-8mhz-robotica-atmel-atmega328-mona-_JM)|
|
||||
|Arduino mega|1|9.349112426|[](https://articulo.mercadolibre.com.ar/MLA-621290099-arduino-uno-r3-atmega16u-atmega328-atmel-robotica-todomicr-_JM?quantity=1#position=9&type=item&tracking_id=982584cd-6e84-467d-a826-ffea1fc20edd)|
|
||||
|temperature sensor ds18b20|1|4.130177515|[](https://articulo.mercadolibre.com.ar/MLA-818621568-sensor-digital-temperatura-ds18b20-cable-sumergible-3-metros-_JM)|
|
||||
|sensor de turbidez|1|15.66863905|[](https://articulo.mercadolibre.com.ar/MLA-668633063-modulo-sensor-de-turbidez-analogico-liquid-particles-_JM)|
|
||||
|pH sensor|1|29.5|[](https://www.dfrobot.com/product-1025.html)|
|
||||
|conductivity sensor|1|79.9|[](https://www.dfrobot.com/product-1797.html?search=conductivity&description=true)|
|
||||
|disolved oxygen sensor|1|169|[](https://www.dfrobot.com/product-1628.html)|
|
||||
|real time clock|1|2.970414201|[](https://articulo.mercadolibre.com.ar/MLA-617370292-reloj-tiempo-real-rtc-ds3231-eeprom-24c32-arduino-mona-_JM)|
|
||||
|18650 battery charger |1|2.911242604|[](https://articulo.mercadolibre.com.ar/MLA-678695062-cargador-universal-para-pilas-18650-14500-26650-ultrafire-_JM?variation=19019023778&quantity=1#reco_item_pos=1&reco_backend=machinalis-seller-items-pdp&reco_backend_type=low_level&reco_client=vip-seller_items-above&reco_id=7352aa27-a3d6-4223-9ae9-d8e44830d339)|
|
||||
|battery holder|1|1.124260355|[](https://articulo.mercadolibre.com.ar/MLA-812596321-portapila-2-pilas-bateria-porta-pilas-doble-18650-salida-cab-_JM?quantity=1#position=1&type=item&tracking_id=08eb7c3b-f94b-4834-a1d7-e88dc6b7ab6a)|
|
||||
|rechargable 18650 batteries|2|3.360946746|[](https://articulo.mercadolibre.com.ar/MLA-717530188-pila-bateria-18650-recargable-37v-6800mah-li-ion-linternas-_JM?quantity=1#position=1&type=item&tracking_id=cbb2490b-d433-4775-9784-98cee71379df)|
|
||||
|LoRa module|2|15|[](https://www.ebay.com/itm/REYAX-RYLR896-Lora-module-SX1276-UART-Interface-868MHz-915MHz-Antenna-AT-command/181562403752?hash=item2a45f66ba8:g:h0QAAOSw9~5ZVKTx)|
|
||||
|Hermetic case|2|8,272189349|[](https://articulo.mercadolibre.com.ar/MLA-823608945-frascos-vidrio-lunchera-hermetico-envase-recipiente-1000ml-_JM?quantity=1&variation=45946622024)|
|
||||
|Electronic stuff(jumper wires, terminal boards, soldering tin, etc.)|| 10||
|
||||
|
||||
El esquema de conexión va a ser el siguiente:
|
||||
* MOSI -> pin 11 en Arduino Uno
|
||||
* MISO -> pin 12 en Arduino Uno
|
||||
* SCK -> pin 13 en Arduino Uno
|
||||
* CS -> pin 10 en Arduino Uno
|
||||
* + (calle roja) -> VCC en Módulo micro SD
|
||||
* - (calle azul) -> GND en Módulo micro SD
|
||||
### Features
|
||||
This data logger is designed to function similarly to the [Cave Pearl Proyect data logger](https://thecavepearlproject.org/category/diy-build-a-pro-mini-logger/) designs:
|
||||
* __Autonomous:__ this data logger has an autonomy of several months
|
||||
* __Customisable:__ Allows to choose what sensor you want for your data logger
|
||||
* __Wireless communication:__ Thanks to the LoRa connectivity this device can send a measurements to a server and get access to the information wherever you are. This feature is new to the Cave Pearl Proyect data logger.
|
||||
|
||||
Volvemos a conectar la placa a la PC y revisamos en el IDE que el puerto y el tipo de placa sean los correctos.
|
||||
We chose a Arduino pro-mini to be the "brain" of this data logger for its versatility, accessibility, simplicity, and ability to add and upgrade your own modifications. Any method with which you can communicate with a arduino pro-mini (bluetooth, WiFi, LoRa, etc) can be added to the data logger to get the information from its.
|
||||
|
||||
Colocamos la memoria SD formateada en el módulo micro SD. Podemos formatear la memoria SD de la siguiente manera: la conectamos a una PC, hacemos botón derecho sobre la unidad, elegimos Formatear..., luego elegimos Sistema de archivos: FAT32 y le ponemos un nombre a la unidad. Advertencia: esto borra TODOS los archivos de la memoria, de forma irreversible.
|
||||
<img src="Images/ArduinoLoRa.png" width="100%">
|
||||
|
||||
[List of components](https://drive.google.com/open?id=1hyrhMyJMDih4w9r664UP0bz__xZFTRils_V-fsFg26g)
|
||||
|
||||
Lo primero que vamos a hacer es ver si el módulo está funcionando. Para esto vamos a correr [este código](https://drive.google.com/drive/folders/1Auk2bpi2UsZg1wRcR5S4bSVcaOQSAcNh?usp=sharing) de prueba del módulo y ver si lee una tarjeta. Este código fue creado por Limor Fried y modificado por Tom Igoe. El código cargado necesita de las librerías SD y SPI, pero estas ya vienen instaladas por defecto con el Arduino IDE.
|
||||
### Do you want to contribute to the project?
|
||||
This project need people interested in contribute in different tasks. In order to collaborate with this project, you will need to have some experience in the following:
|
||||
* __Coding arduino microcontrollers:__ Although we are already working in the code for the full data logger, improvements of the code are always necessary the best code possible for the device.
|
||||
* __Electronics:__ This project uses components like sensors, different modules, and batteries.
|
||||
* __Community management:__ We need some expertise in the use of social networks and content production.
|
||||
|
||||
Si el módulo está funcionando, tenemos que poder ver en el monitor serial que la placa detecta al módulo micro SD y otras características de la tarjeta.
|
||||
Most of the above are skills that you can learn and pick up fairly quickly from watching videos and doing research on the internet, and throughout the project we try to give supplemental information on some of these as well. See the build documents for more information.
|
||||
|
||||
Opcionalmente, podemos probar el siguiente [código](https://drive.google.com/drive/folders/1CoSecuAWTeewKR29v6g7QjIeroU6Y_bo?usp=sharing) para escribir en la memoria y después chequear en la pc que realmente se haya escrito en ella. Este último código es una modificación de ReadWrite de la biblioteca SD.
|
||||
|
||||
## Tercer paso, agregando información temporal :clock930:
|
||||
Ahora necesitamos tener una marca temporal para cada una de las mediciones que hagamos. Si bien cuando medimos conectados a una computadora tenemos esa información, la idea es tener registradores de datos portátiles.
|
||||
|
||||
### Materiales
|
||||
* Circuito con la protoboard, el Arduino Uno y el DHT11 que armamos en el primer paso
|
||||
* [módulo RTC ds3231](https://articulo.mercadolibre.com.ar/MLA-916734561-modulo-rtc-ds3231-alta-precision-eeprom-24c32-arduino-cpila-_JM?quantity=4)
|
||||
* [pila cr2032](https://www.mercadolibre.com.ar/pila-panasonic-cr2032-boton-pack-de-5-unidades/p/MLA16144305?pdp_filters=category:MLA6384#searchVariation=MLA16144305&position=1&search_layout=stack&type=product&tracking_id=7f628464-07a2-4d25-b8d9-152a70706ea2)
|
||||
|
||||
### Procedimiento :electric_plug:
|
||||
Lo que tenemos que hacer ahora es poner en hora el RTC (Real Time Clock, que significa reloj en tiempo real). Este módulo es el que gracias a la pila cr2032 nos va a indicar la hora del registrador de datos aún cuando nuestra placa microcontroladora se quede sin energía.
|
||||
|
||||
Conexionado:
|
||||
|
||||
_Imagen tomada de Cave Pearl Proyect, sobre como armar un registrador de datos con un Arduino Uno para principiantes_
|
||||
|
||||
Pin SCL: al pin A5 de Arduino UNO/nano
|
||||
Pin SDA: AL pin A4 de Arduino UNO/nano
|
||||
Pin SQW: al pin 2 de Arduino UNO/nano
|
||||
Pin Vcc: A 5V de Arduino
|
||||
Pin GND: A masa de Arduino
|
||||
|
||||
Para poner en hora el vamos a usar el siguiente [código](https://drive.google.com/drive/folders/1xmDleDZfOQ61mQbiiEyEOe9PkdY9zb3K?usp=sharing). En este código, en la linea 13 ponemos la hora como se encuentra ejemplificado en el comentario de la linea 14 para nuestro fecha y horario actual.
|
||||
|
||||
## Cuarto paso, uniendo todo...
|
||||
Ahora lo que vamos a hacer es unir todos los pasos que acabamos de hacer para armar un registrador de datos. El sensor DHT 11 nos va a medir la humedad y la temperatura. Con el módulo micro SD registraremos la información en una memoria SD. Y con el módulo RTC tendremos la marca temporal de las mediciones independientemente de que la placa arduino se quede sin alimentación.
|
||||
|
||||
### Materiales
|
||||
* Todos los que ya tenemos
|
||||
|
||||
### Procedimiento :electric_plug:
|
||||
Vamos a hacer las mismas conexiones que hicimos en los pasos anteriores. Esta vez también vamos a necesitar una librería, [Low Power](https://drive.google.com/file/d/1o-YGQhqMeBoLcBzYglsBMXcvMwZ6bN6o/view?usp=sharing), que nos va permitir poner a dormir al registrador de datos para reducir su consumo y así aumentar su autonomía. Ahora, vamos a usar el siguente [código](https://drive.google.com/drive/folders/1gBKL7R--h3a7O_cv_qDV6s0UkdjrKHTQ?usp=sharing), el cual es una modificación del que está [página de Cave Pearl Project](https://thecavepearlproject.org/2015/12/22/arduino-uno-based-data-logger-with-no-soldering/). Lo que lograremos con esto será registrar valores ambientales, que se registren en la memoria y que el registrador entre en fase de dormición hasta la próxima lectura.
|
||||
|
||||
# Miniaturizando...
|
||||
Proximamente veremos como armar un registrador de datos con arduino Pro Mini de 3.3v. La primera dificultad es conectarlo a una PC... acá va un [tutorial del procedimiento](https://naylampmechatronics.com/blog/14_tutorial-como-programar-un-arduino-pro-mini-328.html)
|
||||
If you want to contribute please send me an email to: alejobonifacio@gmail.com
|
||||
|
||||
## Happy building!!
|
||||
If you have any questions or run into problems during your build, please search for answers and/or reach out on the [forum](https://create.arduino.cc/projecthub/alejobonifacio/ecosen-lora-data-loggers-for-environmental-quality-9dffba).
|
||||
|
||||
### Model of README
|
||||
This README document is based in the NASA Open Source Rover [project](https://github.com/nasa-jpl/open-source-rover)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
# mi-pagina-web-personal-master
|
||||
Mí primer página en git hub
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Business Casual - Start Bootstrap Theme</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom fonts for this template -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="css/business-casual.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="site-heading text-center text-white d-none d-lg-block">
|
||||
<span class="site-heading-upper text-primary mb-3">A Free Bootstrap 4 Business Theme</span>
|
||||
<span class="site-heading-lower">Business Casual</span>
|
||||
</h1>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
|
||||
<div class="container">
|
||||
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Start Bootstrap</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="index.html">Home
|
||||
<span class="sr-only">(current)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="about.html">About</a>
|
||||
</li>
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="products.html">Products</a>
|
||||
</li>
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="store.html">Store</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="page-section about-heading">
|
||||
<div class="container">
|
||||
<img class="img-fluid rounded about-heading-img mb-3 mb-lg-0" src="img/about.jpg" alt="">
|
||||
<div class="about-heading-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-9 col-lg-10 mx-auto">
|
||||
<div class="bg-faded rounded p-5">
|
||||
<h2 class="section-heading mb-4">
|
||||
<span class="section-heading-upper">Strong Coffee, Strong Roots</span>
|
||||
<span class="section-heading-lower">About Our Cafe</span>
|
||||
</h2>
|
||||
<p>Founded in 1987 by the Hernandez brothers, our establishment has been serving up rich coffee sourced from artisan farmers in various regions of South and Central America. We are dedicated to travelling the world, finding the best coffee, and bringing back to you here in our cafe.</p>
|
||||
<p class="mb-0">We guarantee that you will fall in <em>lust</em> with our decadent blends the moment you walk inside until you finish your last sip. Join us for your daily routine, an outing with friends, or simply just to enjoy some alone time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer text-faded text-center py-5">
|
||||
<div class="container">
|
||||
<p class="m-0 small">Copyright © Your Website 2019</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
/*!
|
||||
* Start Bootstrap - Business Casual v5.0.9 (https://startbootstrap.com/template-overviews/business-casual)
|
||||
* Copyright 2013-2019 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-casual/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: 'Lora';
|
||||
background-image: linear-gradient(rgba(47, 23, 15, 0.65), rgba(47, 23, 15, 0.65)), url("../img/bg.jpg");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Raleway';
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.text-faded {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.site-heading {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
font-family: 'Raleway';
|
||||
}
|
||||
|
||||
.site-heading .site-heading-upper {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.site-heading .site-heading-lower {
|
||||
font-size: 5rem;
|
||||
font-weight: 100;
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
.page-section {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-heading .section-heading-upper {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.section-heading .section-heading-lower {
|
||||
display: block;
|
||||
font-size: 3rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.bg-faded {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
#mainNav {
|
||||
background-color: rgba(47, 23, 15, 0.9);
|
||||
font-family: 'Raleway';
|
||||
}
|
||||
|
||||
#mainNav .navbar-brand {
|
||||
color: #e6a756;
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav .nav-item .nav-link {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav .nav-item.active .nav-link {
|
||||
color: #e6a756;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#mainNav .navbar-nav .nav-item .nav-link {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#mainNav .navbar-nav .nav-item .nav-link:hover {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
#mainNav .navbar-nav .nav-item.active .nav-link:hover {
|
||||
color: #e6a756;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xl {
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.intro {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.intro .intro-img {
|
||||
width: 75%;
|
||||
float: right;
|
||||
}
|
||||
.intro .intro-text {
|
||||
left: 0;
|
||||
width: 60%;
|
||||
margin-top: 3rem;
|
||||
position: absolute;
|
||||
}
|
||||
.intro .intro-text .intro-button {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.intro .intro-text {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
background-color: rgba(230, 167, 86, 0.9);
|
||||
}
|
||||
|
||||
.cta .cta-inner {
|
||||
position: relative;
|
||||
padding: 3rem;
|
||||
margin: 0.5rem;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.cta .cta-inner:before {
|
||||
border-radius: 0.5rem;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
bottom: -0.5rem;
|
||||
left: -0.5rem;
|
||||
right: -0.5rem;
|
||||
border: 0.25rem solid rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.about-heading .about-heading-img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.about-heading .about-heading-content {
|
||||
margin-top: -5rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.product-item .product-item-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -3rem;
|
||||
}
|
||||
.product-item .product-item-img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
max-width: 60vw;
|
||||
}
|
||||
.product-item .product-item-description {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -3rem;
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
.list-hours {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.list-hours .list-hours-item {
|
||||
border-bottom: 1px solid rgba(230, 167, 86, 0.5);
|
||||
padding-bottom: .25rem;
|
||||
margin-bottom: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.list-hours .list-hours-item.today {
|
||||
font-weight: bold;
|
||||
color: #e6a756;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.list-hours {
|
||||
width: 50%;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.address strong {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: rgba(47, 23, 15, 0.9);
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #e6a756 !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: #e6a756 !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
box-shadow: 0px 3px 3px 0px rgba(33, 37, 41, 0.1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #e6a756;
|
||||
border-color: #e6a756;
|
||||
}
|
||||
|
||||
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
|
||||
background-color: #df902a;
|
||||
border-color: #df902a;
|
||||
}
|
||||
|
||||
.font-weight-light {
|
||||
font-weight: 100 !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/*!
|
||||
* Start Bootstrap - Business Casual v5.0.9 (https://startbootstrap.com/template-overviews/business-casual)
|
||||
* Copyright 2013-2019 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-casual/blob/master/LICENSE)
|
||||
*/body{font-family:Lora;background-image:linear-gradient(rgba(47,23,15,.65),rgba(47,23,15,.65)),url(../img/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover}h1,h2,h3,h4,h5,h6{font-family:Raleway}p{line-height:1.75}.text-faded{color:rgba(255,255,255,.3)}.site-heading{margin-top:5rem;margin-bottom:5rem;text-transform:uppercase;line-height:1;font-family:Raleway}.site-heading .site-heading-upper{display:block;font-size:2rem;font-weight:800}.site-heading .site-heading-lower{font-size:5rem;font-weight:100;line-height:4rem}.page-section{margin-top:5rem;margin-bottom:5rem}.section-heading{text-transform:uppercase}.section-heading .section-heading-upper{display:block;font-size:1rem;font-weight:800}.section-heading .section-heading-lower{display:block;font-size:3rem;font-weight:100}.bg-faded{background-color:rgba(255,255,255,.85)}#mainNav{background-color:rgba(47,23,15,.9);font-family:Raleway}#mainNav .navbar-brand{color:#e6a756}#mainNav .navbar-nav .nav-item .nav-link{color:rgba(255,255,255,.7);font-weight:800}#mainNav .navbar-nav .nav-item.active .nav-link{color:#e6a756}@media (min-width:992px){#mainNav .navbar-nav .nav-item .nav-link{font-size:.9rem}#mainNav .navbar-nav .nav-item .nav-link:hover{color:rgba(255,255,255,.4)}#mainNav .navbar-nav .nav-item.active .nav-link:hover{color:#e6a756}}.btn-xl{font-weight:700;font-size:.8rem;padding-top:1.5rem;padding-bottom:1.5rem;padding-left:2rem;padding-right:2rem}.intro{position:relative}@media (min-width:992px){.intro .intro-img{width:75%;float:right}.intro .intro-text{left:0;width:60%;margin-top:3rem;position:absolute}.intro .intro-text .intro-button{width:100%;left:0;position:absolute;bottom:-2rem}}@media (min-width:1200px){.intro .intro-text{width:45%}}.cta{padding-top:5rem;padding-bottom:5rem;background-color:rgba(230,167,86,.9)}.cta .cta-inner{position:relative;padding:3rem;margin:.5rem;background-color:rgba(255,255,255,.85)}.cta .cta-inner:before{border-radius:.5rem;content:'';position:absolute;top:-.5rem;bottom:-.5rem;left:-.5rem;right:-.5rem;border:.25rem solid rgba(255,255,255,.85)}@media (min-width:992px){.about-heading .about-heading-img{position:relative;z-index:0}.about-heading .about-heading-content{margin-top:-5rem;position:relative;z-index:1}}@media (min-width:992px){.product-item .product-item-title{position:relative;z-index:1;margin-bottom:-3rem}.product-item .product-item-img{position:relative;z-index:0;max-width:60vw}.product-item .product-item-description{position:relative;z-index:1;margin-top:-3rem;max-width:50vw}}.list-hours{font-size:.9rem}.list-hours .list-hours-item{border-bottom:1px solid rgba(230,167,86,.5);padding-bottom:.25rem;margin-bottom:1rem;font-style:italic}.list-hours .list-hours-item.today{font-weight:700;color:#e6a756}@media (min-width:992px){.list-hours{width:50%;font-size:1.1rem}}.address strong{font-size:1.2rem}.footer{background-color:rgba(47,23,15,.9)}.text-primary{color:#e6a756!important}.bg-primary{background-color:#e6a756!important}.btn{box-shadow:0 3px 3px 0 rgba(33,37,41,.1)}.btn-primary{background-color:#e6a756;border-color:#e6a756}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:#df902a;border-color:#df902a}.font-weight-light{font-weight:100!important}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
"use strict";
|
||||
|
||||
// Load plugins
|
||||
const autoprefixer = require("gulp-autoprefixer");
|
||||
const browsersync = require("browser-sync").create();
|
||||
const cleanCSS = require("gulp-clean-css");
|
||||
const del = require("del");
|
||||
const gulp = require("gulp");
|
||||
const header = require("gulp-header");
|
||||
const merge = require("merge-stream");
|
||||
const plumber = require("gulp-plumber");
|
||||
const rename = require("gulp-rename");
|
||||
const sass = require("gulp-sass");
|
||||
|
||||
// Load package.json for banner
|
||||
const pkg = require('./package.json');
|
||||
|
||||
// Set the banner content
|
||||
const banner = ['/*!\n',
|
||||
' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n',
|
||||
' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n',
|
||||
' * Licensed under <%= pkg.license %> (https://github.com/BlackrockDigital/<%= pkg.name %>/blob/master/LICENSE)\n',
|
||||
' */\n',
|
||||
'\n'
|
||||
].join('');
|
||||
|
||||
// BrowserSync
|
||||
function browserSync(done) {
|
||||
browsersync.init({
|
||||
server: {
|
||||
baseDir: "./"
|
||||
},
|
||||
port: 3000
|
||||
});
|
||||
done();
|
||||
}
|
||||
|
||||
// BrowserSync reload
|
||||
function browserSyncReload(done) {
|
||||
browsersync.reload();
|
||||
done();
|
||||
}
|
||||
|
||||
// Clean vendor
|
||||
function clean() {
|
||||
return del(["./vendor/"]);
|
||||
}
|
||||
|
||||
// Bring third party dependencies from node_modules into vendor directory
|
||||
function modules() {
|
||||
// Bootstrap
|
||||
var bootstrap = gulp.src('./node_modules/bootstrap/dist/**/*')
|
||||
.pipe(gulp.dest('./vendor/bootstrap'));
|
||||
// jQuery
|
||||
var jquery = gulp.src([
|
||||
'./node_modules/jquery/dist/*',
|
||||
'!./node_modules/jquery/dist/core.js'
|
||||
])
|
||||
.pipe(gulp.dest('./vendor/jquery'));
|
||||
return merge(bootstrap, jquery);
|
||||
}
|
||||
|
||||
// CSS task
|
||||
function css() {
|
||||
return gulp
|
||||
.src("./scss/**/*.scss")
|
||||
.pipe(plumber())
|
||||
.pipe(sass({
|
||||
outputStyle: "expanded",
|
||||
includePaths: "./node_modules",
|
||||
}))
|
||||
.on("error", sass.logError)
|
||||
.pipe(autoprefixer({
|
||||
cascade: false
|
||||
}))
|
||||
.pipe(header(banner, {
|
||||
pkg: pkg
|
||||
}))
|
||||
.pipe(gulp.dest("./css"))
|
||||
.pipe(rename({
|
||||
suffix: ".min"
|
||||
}))
|
||||
.pipe(cleanCSS())
|
||||
.pipe(gulp.dest("./css"))
|
||||
.pipe(browsersync.stream());
|
||||
}
|
||||
|
||||
// Watch files
|
||||
function watchFiles() {
|
||||
gulp.watch("./scss/**/*", css);
|
||||
gulp.watch("./**/*.html", browserSyncReload);
|
||||
}
|
||||
|
||||
// Define complex tasks
|
||||
const vendor = gulp.series(clean, modules);
|
||||
const build = gulp.series(vendor, css);
|
||||
const watch = gulp.series(build, gulp.parallel(watchFiles, browserSync));
|
||||
|
||||
// Export tasks
|
||||
exports.css = css;
|
||||
exports.clean = clean;
|
||||
exports.vendor = vendor;
|
||||
exports.build = build;
|
||||
exports.watch = watch;
|
||||
exports.default = build;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 684 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 421 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 758 KiB |
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Alejo Bonifacio - Holista Templado</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom fonts for this template -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="css/business-casual.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="site-heading text-center text-white d-none d-lg-block">
|
||||
<span class="site-heading-upper text-primary mb-3">Mi primera página web gratis</span>
|
||||
<span class="site-heading-lower">Alejo Bonifacio</span>
|
||||
</h1>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
|
||||
<div class="container">
|
||||
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Start Bootstrap</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<li class="nav-item active px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="index.html">Home
|
||||
<span class="sr-only">(current)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="about.html">About</a>
|
||||
</li>
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="products.html">Products</a>
|
||||
</li>
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="store.html">Store</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="page-section clearfix">
|
||||
<div class="container">
|
||||
<div class="intro">
|
||||
<img class="intro-img img-fluid mb-3 mb-lg-0 rounded" src="img/intro.jpg" alt="">
|
||||
<div class="intro-text left-0 text-center bg-faded p-5 rounded">
|
||||
<h2 class="section-heading mb-4">
|
||||
<span class="section-heading-upper">Fresh Coffee</span>
|
||||
<span class="section-heading-lower">Worth Drinking</span>
|
||||
</h2>
|
||||
<p class="mb-3">Every cup of our quality artisan coffee starts with locally sourced, hand picked ingredients. Once you try it, our coffee will be a blissful addition to your everyday morning routine - we guarantee it!
|
||||
</p>
|
||||
<div class="intro-button mx-auto">
|
||||
<a class="btn btn-primary btn-xl" href="#">Contactame!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-section cta">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-9 mx-auto">
|
||||
<div class="cta-inner text-center rounded">
|
||||
<h2 class="section-heading mb-4">
|
||||
<span class="section-heading-upper">Our Promise</span>
|
||||
<span class="section-heading-lower">To You</span>
|
||||
</h2>
|
||||
<p class="mb-0">When you walk into our shop to start your day, we are dedicated to providing you with friendly service, a welcoming atmosphere, and above all else, excellent products made with the highest quality ingredients. If you are not satisfied, please let us know and we will do whatever we can to make things right!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer text-faded text-center py-5">
|
||||
<div class="container">
|
||||
<p class="m-0 small">Copyright © Your Website 2019</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"title": "Business Casual",
|
||||
"name": "startbootstrap-business-casual",
|
||||
"version": "5.0.9",
|
||||
"scripts": {
|
||||
"start": "node_modules/.bin/gulp watch"
|
||||
},
|
||||
"description": "A casual HTML website theme for businesses built with Bootstrap",
|
||||
"keywords": [
|
||||
"css",
|
||||
"sass",
|
||||
"html",
|
||||
"responsive",
|
||||
"theme",
|
||||
"template"
|
||||
],
|
||||
"homepage": "https://startbootstrap.com/template-overviews/business-casual",
|
||||
"bugs": {
|
||||
"url": "https://github.com/BlackrockDigital/startbootstrap-business-casual/issues",
|
||||
"email": "feedback@startbootstrap.com"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Start Bootstrap",
|
||||
"contributors": [
|
||||
"David Miller (http://davidmiller.io/)"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/BlackrockDigital/startbootstrap-business-casual.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "4.3.1",
|
||||
"jquery": "3.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"browser-sync": "2.26.7",
|
||||
"del": "5.1.0",
|
||||
"gulp": "4.0.2",
|
||||
"gulp-autoprefixer": "7.0.0",
|
||||
"gulp-clean-css": "4.2.0",
|
||||
"gulp-header": "2.0.9",
|
||||
"gulp-plumber": "^1.2.1",
|
||||
"gulp-rename": "1.4.0",
|
||||
"gulp-sass": "4.0.2",
|
||||
"merge-stream": "2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Business Casual - Start Bootstrap Theme</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom fonts for this template -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="css/business-casual.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="site-heading text-center text-white d-none d-lg-block">
|
||||
<span class="site-heading-upper text-primary mb-3">A Free Bootstrap 4 Business Theme</span>
|
||||
<span class="site-heading-lower">Business Casual</span>
|
||||
</h1>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
|
||||
<div class="container">
|
||||
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Start Bootstrap</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="index.html">Home
|
||||
<span class="sr-only">(current)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="about.html">About</a>
|
||||
</li>
|
||||
<li class="nav-item active px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="products.html">Products</a>
|
||||
</li>
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="store.html">Store</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="page-section">
|
||||
<div class="container">
|
||||
<div class="product-item">
|
||||
<div class="product-item-title d-flex">
|
||||
<div class="bg-faded p-5 d-flex ml-auto rounded">
|
||||
<h2 class="section-heading mb-0">
|
||||
<span class="section-heading-upper">Blended to Perfection</span>
|
||||
<span class="section-heading-lower">Coffees & Teas</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="img/products-01.jpg" alt="">
|
||||
<div class="product-item-description d-flex mr-auto">
|
||||
<div class="bg-faded p-5 rounded">
|
||||
<p class="mb-0">We take pride in our work, and it shows. Every time you order a beverage from us, we guarantee that it will be an experience worth having. Whether it's our world famous Venezuelan Cappuccino, a refreshing iced herbal tea, or something as simple as a cup of speciality sourced black coffee, you will be coming back for more.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-section">
|
||||
<div class="container">
|
||||
<div class="product-item">
|
||||
<div class="product-item-title d-flex">
|
||||
<div class="bg-faded p-5 d-flex mr-auto rounded">
|
||||
<h2 class="section-heading mb-0">
|
||||
<span class="section-heading-upper">Delicious Treats, Good Eats</span>
|
||||
<span class="section-heading-lower">Bakery & Kitchen</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="img/products-02.jpg" alt="">
|
||||
<div class="product-item-description d-flex ml-auto">
|
||||
<div class="bg-faded p-5 rounded">
|
||||
<p class="mb-0">Our seasonal menu features delicious snacks, baked goods, and even full meals perfect for breakfast or lunchtime. We source our ingredients from local, oragnic farms whenever possible, alongside premium vendors for specialty goods.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-section">
|
||||
<div class="container">
|
||||
<div class="product-item">
|
||||
<div class="product-item-title d-flex">
|
||||
<div class="bg-faded p-5 d-flex ml-auto rounded">
|
||||
<h2 class="section-heading mb-0">
|
||||
<span class="section-heading-upper">From Around the World</span>
|
||||
<span class="section-heading-lower">Bulk Speciality Blends</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="img/products-03.jpg" alt="">
|
||||
<div class="product-item-description d-flex mr-auto">
|
||||
<div class="bg-faded p-5 rounded">
|
||||
<p class="mb-0">Travelling the world for the very best quality coffee is something take pride in. When you visit us, you'll always find new blends from around the world, mainly from regions in Central and South America. We sell our blends in smaller to large bulk quantities. Please visit us in person for more details.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer text-faded text-center py-5">
|
||||
<div class="container">
|
||||
<p class="m-0 small">Copyright © Your Website 2019</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.about-heading {
|
||||
@media (min-width: 992px) {
|
||||
.about-heading-img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.about-heading-content {
|
||||
margin-top: -5rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.text-primary {
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: $primary !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
box-shadow: 0px 3px 3px 0px fade-out($gray-900, 0.9);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: darken($primary, 10%);
|
||||
border-color: darken($primary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.font-weight-light {
|
||||
font-weight: 100 !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.btn-xl {
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.cta {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
background-color: fade-out($primary, 0.1);
|
||||
.cta-inner {
|
||||
position: relative;
|
||||
padding: 3rem;
|
||||
margin: 0.5rem;
|
||||
background-color: fade-out($white, 0.15);
|
||||
&:before {
|
||||
border-radius: 0.5rem;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -0.5rem;
|
||||
bottom: -0.5rem;
|
||||
left: -0.5rem;
|
||||
right: -0.5rem;
|
||||
border: 0.25rem solid fade-out($white, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.footer {
|
||||
background-color: fade-out($secondary, 0.1);
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
body {
|
||||
@include body-font;
|
||||
background-image: linear-gradient(rgba(47, 23, 15, 0.65), rgba(47, 23, 15, 0.65)), url('../img/bg.jpg');
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include heading-font;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.text-faded {
|
||||
color: fade-out($white, 0.7);
|
||||
}
|
||||
|
||||
.site-heading {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
|
||||
@include heading-font;
|
||||
.site-heading-upper {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
.site-heading-lower {
|
||||
font-size: 5rem;
|
||||
font-weight: 100;
|
||||
line-height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-section {
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
text-transform: uppercase;
|
||||
.section-heading-upper {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
.section-heading-lower {
|
||||
display: block;
|
||||
font-size: 3rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-faded {
|
||||
background-color: fade-out($white, 0.15);
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.intro {
|
||||
position: relative;
|
||||
@media (min-width: 992px) {
|
||||
.intro-img {
|
||||
width: 75%;
|
||||
float: right;
|
||||
}
|
||||
.intro-text {
|
||||
left: 0;
|
||||
width: 60%;
|
||||
margin-top: 3rem;
|
||||
position: absolute;
|
||||
.intro-button {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.intro-text {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@mixin heading-font {
|
||||
font-family: 'Raleway';
|
||||
}
|
||||
|
||||
@mixin body-font {
|
||||
font-family: 'Lora';
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
#mainNav {
|
||||
background-color: fade-out($secondary, 0.1);
|
||||
@include heading-font;
|
||||
.navbar-brand {
|
||||
color: $primary;
|
||||
}
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: fade-out($white, 0.3);
|
||||
|
||||
font-weight: 800;
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
font-size: 0.9rem;
|
||||
&:hover {
|
||||
color: fade-out($white, 0.6);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.nav-link:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.product-item {
|
||||
@media (min-width: 992px) {
|
||||
.product-item-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -3rem;
|
||||
}
|
||||
.product-item-img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
max-width: 60vw;
|
||||
}
|
||||
.product-item-description {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -3rem;
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.list-hours {
|
||||
font-size: 0.9rem;
|
||||
.list-hours-item {
|
||||
border-bottom: 1px solid fade-out($primary, 0.5);
|
||||
padding-bottom: .25rem;
|
||||
margin-bottom: 1rem;
|
||||
font-style: italic;
|
||||
&.today {
|
||||
font-weight: bold;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
@media(min-width: 992px) {
|
||||
width: 50%;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
strong {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
// Variables
|
||||
|
||||
// Restated Bootstrap Variables
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$primary: #e6a756 !default;
|
||||
$secondary: #2F170F !default;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "global";
|
||||
@import "navbar";
|
||||
@import "buttons";
|
||||
@import "intro";
|
||||
@import "cta";
|
||||
@import "about";
|
||||
@import "products";
|
||||
@import "store";
|
||||
@import "footer";
|
||||
@import "bootstrap-overrides";
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Business Casual - Start Bootstrap Theme</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom fonts for this template -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="css/business-casual.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="site-heading text-center text-white d-none d-lg-block">
|
||||
<span class="site-heading-upper text-primary mb-3">A Free Bootstrap 4 Business Theme</span>
|
||||
<span class="site-heading-lower">Business Casual</span>
|
||||
</h1>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
|
||||
<div class="container">
|
||||
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Start Bootstrap</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="index.html">Home
|
||||
<span class="sr-only">(current)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="about.html">About</a>
|
||||
</li>
|
||||
<li class="nav-item px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="products.html">Products</a>
|
||||
</li>
|
||||
<li class="nav-item active px-lg-4">
|
||||
<a class="nav-link text-uppercase text-expanded" href="store.html">Store</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="page-section cta">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-9 mx-auto">
|
||||
<div class="cta-inner text-center rounded">
|
||||
<h2 class="section-heading mb-5">
|
||||
<span class="section-heading-upper">Come On In</span>
|
||||
<span class="section-heading-lower">We're Open</span>
|
||||
</h2>
|
||||
<ul class="list-unstyled list-hours mb-5 text-left mx-auto">
|
||||
<li class="list-unstyled-item list-hours-item d-flex">
|
||||
Sunday
|
||||
<span class="ml-auto">Closed</span>
|
||||
</li>
|
||||
<li class="list-unstyled-item list-hours-item d-flex">
|
||||
Monday
|
||||
<span class="ml-auto">7:00 AM to 8:00 PM</span>
|
||||
</li>
|
||||
<li class="list-unstyled-item list-hours-item d-flex">
|
||||
Tuesday
|
||||
<span class="ml-auto">7:00 AM to 8:00 PM</span>
|
||||
</li>
|
||||
<li class="list-unstyled-item list-hours-item d-flex">
|
||||
Wednesday
|
||||
<span class="ml-auto">7:00 AM to 8:00 PM</span>
|
||||
</li>
|
||||
<li class="list-unstyled-item list-hours-item d-flex">
|
||||
Thursday
|
||||
<span class="ml-auto">7:00 AM to 8:00 PM</span>
|
||||
</li>
|
||||
<li class="list-unstyled-item list-hours-item d-flex">
|
||||
Friday
|
||||
<span class="ml-auto">7:00 AM to 8:00 PM</span>
|
||||
</li>
|
||||
<li class="list-unstyled-item list-hours-item d-flex">
|
||||
Saturday
|
||||
<span class="ml-auto">9:00 AM to 5:00 PM</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="address mb-5">
|
||||
<em>
|
||||
<strong>1116 Orchard Street</strong>
|
||||
<br>
|
||||
Golden Valley, Minnesota
|
||||
</em>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
<small>
|
||||
<em>Call Anytime</em>
|
||||
</small>
|
||||
<br>
|
||||
(317) 585-8468
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-section about-heading">
|
||||
<div class="container">
|
||||
<img class="img-fluid rounded about-heading-img mb-3 mb-lg-0" src="img/about.jpg" alt="">
|
||||
<div class="about-heading-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-9 col-lg-10 mx-auto">
|
||||
<div class="bg-faded rounded p-5">
|
||||
<h2 class="section-heading mb-4">
|
||||
<span class="section-heading-upper">Strong Coffee, Strong Roots</span>
|
||||
<span class="section-heading-lower">About Our Cafe</span>
|
||||
</h2>
|
||||
<p>Founded in 1987 by the Hernandez brothers, our establishment has been serving up rich coffee sourced from artisan farmers in various regions of South and Central America. We are dedicated to travelling the world, finding the best coffee, and bringing back to you here in our cafe.</p>
|
||||
<p class="mb-0">We guarantee that you will fall in
|
||||
<em>lust</em>
|
||||
with our decadent blends the moment you walk inside until you finish your last sip. Join us for your daily routine, an outing with friends, or simply just to enjoy some alone time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer text-faded text-center py-5">
|
||||
<div class="container">
|
||||
<p class="m-0 small">Copyright © Your Website 2018</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
<!-- Script to highlight the active date in the hours list -->
|
||||
<script>
|
||||
$('.list-hours li').eq(new Date().getDay()).addClass('today');
|
||||
</script>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
mi-pagina-web-personal-master/vendor/bootstrap/css/bootstrap-grid.min.css.map
vendored
Normal file
1
mi-pagina-web-personal-master/vendor/bootstrap/css/bootstrap-grid.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,331 @@
|
|||
/*!
|
||||
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
border-bottom: 0;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #6c757d;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button:not(:disabled),
|
||||
[type="button"]:not(:disabled),
|
||||
[type="reset"]:not(:disabled),
|
||||
[type="submit"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,8 @@
|
|||
/*!
|
||||
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
|
||||
/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
1
mi-pagina-web-personal-master/vendor/bootstrap/css/bootstrap-reboot.min.css.map
vendored
Normal file
1
mi-pagina-web-personal-master/vendor/bootstrap/css/bootstrap-reboot.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
mi-pagina-web-personal-master/vendor/bootstrap/js/bootstrap.bundle.min.js.map
vendored
Normal file
1
mi-pagina-web-personal-master/vendor/bootstrap/js/bootstrap.bundle.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue