agregando archivos gitignore y package.json

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "rules": {
+    "keyword-spacing": 1,
+    "space-before-function-paren": [1, "never"],
+    "eqeqeq": 1,
+    "space-infix-ops": 1,
+    "comma-spacing": 1,
+    "brace-style": 1,
+    "no-multiple-empty-lines": 1,
+    "camelcase": 1,
+    "func-call-spacing": 1,
+    "key-spacing": 1,
+    "semi": 1,
+    "no-floating-decimal": 1,
+    "no-multi-spaces": 1,
+    "object-property-newline": 1,
+    "padded-blocks": [1, "never"],
+    "space-before-blocks": 1,
+    "space-in-parens": 1,
+    "spaced-comment": 1,
+    "quotes": [1, "single"],
+    "id-length": [1, { "exceptions": ["i", "j", "x"] }],
+    "indent": [1, 2],
+    "no-array-constructor": 1
+  }
+}

.gitignore

@@ -0,0 +1 @@
+/node_modules

README.md

@@ -13,42 +13,37 @@ con el texto del atributo `alt` de la imagen.
 
 ## Flujo de trabajo
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
+1. Se realizó un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
+   del repositorio brindado por `Laboratoria`.
 
-2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar
-   es `git clone` y su estructura normalmente se ve así:
+## Planificación:
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/cardify.git
-   ```
+1. Semana 1 - días : 
 
-3. Cuando hayas terminado tu producto, envía un Pull Request a la rama que tus
-   instructorxs este repositorio
-   (puedes solicitar apoyo de tus profes para este paso).
+  - **Miércoles 24**: Tomar decisiones del reto a desarrollar.
+    - Encargadas: Araceli y Lesly.
+    - Resultado: Se determinó por unanimidad realizar el reto 2 - Cardify.
 
-> Nota: No olvides que es una buena práctica describir tu proyecto en este
-> archivo `README.md` :smiley:.
+  - **Jueves 25**: Investigación del material a utilizar, como son los issues y milestones.
+    - Encargadas: Araceli y Lesly.
 
-***
-
-## Instalación
-
-### Global (navegador)
+  - **Viernes 26**: Iniciamos la estructura del reto elegido y se hizo la asignación de tareas aplicando el issues. 
+    - Encargadas: Araceli y Lesly 
+    - Resultado: Planificación parte 1, se puede observar dándole click en el siguiente enlace: https://github.com/AraceliGS/cardify/issues/1.
 
-```html
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="path-to-cardify.js"></script>
-```
+  - **Sábado 27**: Se realizó la maquetación, asignación de tareas del día, se añadieron los archivos package.json y .gitignore.
+    - Encargadas: Araceli y Lesly
+    - Resultado: 
+      - Scketch inicial.
+      - Estructura inicial y estilos.
+      - Asignación de tareas empleando issues, Planificación - parte 2: https://github.com/AraceliGS/cardify/issues/3.
+      - Primera versión de nuestro archivo package.json.
+      - Primera actualización del archivo README.md.
+      - Investigación de plugin.
 
-## Uso
+## Anexos
 
-```js
-// `container` es el selector del contenedor donde se buscarán todas las
-// imágenes a ser procesadas.
-$(container).cardify({});
-```
+**Scketch**
 
-## Ejemplos
+![scketch-inicial](assets/docs/scketch-inicial.jpg "scketch-inicial")
 
-...

css/main.css

@@ -0,0 +1,50 @@
+/* Estilos generales */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #faebd7;
+}
+
+.container {
+  margin-top: 5em;
+  border: 1px solid #eacadd;
+  margin-bottom: 5em;
+}
+/* Título del Encabezado */
+
+nav .brand-logo {
+  font-family: 'Tinos', serif;
+  font-size: 2.5em;
+}
+
+/* Estilos a las imágenes */
+
+img.responsive-img, video.responsive-video {
+  width: 400px;
+}
+
+@media (min-width: 993px) {
+  .container {
+    width: 80%;
+  } 
+
+  img.responsive-img, video.responsive-video {
+    max-height: 600px;
+    height: 300px;
+    width: auto;
+  }   
+}
+
+@media only screen and (min-width: 1201px) {
+  .container {
+    width: 70%;
+  }
+}
+
+/* Probando */
+
+.opacity {
+  opacity: 0.5;
+}

index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Cardify</title>
+  <link href="https://fonts.googleapis.com/css?family=Tinos" rel="stylesheet">
+  <link rel="stylesheet" href="vendors/materialize/css/materialize.min.css">
+  <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+  <!-- Encabezado -->
+  <header>
+    <nav>
+      <div class="nav-wrapper">
+        <a href="#" class="brand-logo center">Elizabeth</a>
+      </div>
+    </nav>
+  </header>
+  <!-- Contenedor de imágenes -->
+  <section>
+    <div class="container center-align">
+      <div class="row">
+        <div class="col s12 l4">
+          <img class="responsive-img image" data-image="0" src="assets/images/image1.jpg" alt="Imagen 1">
+        </div>
+        <div class="col s12 l4">
+          <img class="responsive-img image" data-image="1" src="assets/images/image5.jpg" alt="Imagen 2">
+        </div>
+        <div class="col s12 l4">
+          <img class="responsive-img image" data-image="2" src="assets/images/image14.jpg" alt="Imagen 3">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col s12 l4">
+          <img class="responsive-img image" data-image="3" src="assets/images/image4.jpg" alt="Imagen 4">
+        </div>
+        <div class="col s12 l4">
+          <img class="responsive-img image" data-image="4" src="assets/images/image7.jpg" alt="Imagen 5">
+        </div>
+        <div class="col s12 l4">
+          <img class="responsive-img image" data-image="5" src="assets/images/image10.jpg" alt="Imagen 6">
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col s12 l4">
+          <img class="responsive-img image" data-image="6" src="assets/images/image2.jpg" alt="Imagen 7">
+        </div>
+        <div class="col s12 l4">
+          <img class="responsive-img image" data-image="7" src="assets/images/image3.jpg" alt="Imagen 8">
+        </div>
+        <div class="col s12 l4">
+          <img class="responsive-img image" data-image="8" src="assets/images/image8.jpg" alt="Imagen 9">
+        </div>
+      </div>
+    </div>
+  </section>
+  <script src="vendors/jquery/jquery-3.2.1.min.js"></script>
+  <script src="vendors/materialize/js/materialize.min.js"></script>
+  <script src="src/index.js"></script>
+  <script src="js/app.js"></script>
+</body>
+</html>

js/app.js

@@ -0,0 +1,8 @@
+$(document).ready(() => {
+  let $images = $('img');
+  $images.each(function() {
+    $(this).one('mouseover', () => {
+      $(this).cardify();  
+    });
+  });
+});

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "cardify",
+  "version": "1.0.0",
+  "description": "Reto 2 Cardify",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LeslyN/cardify.git"
+  },
+  "keywords": [
+    "images"
+  ],
+  "author": "Araceli Gutarra & Lesly Nomberto",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/LeslyN/cardify/issues"
+  },
+  "homepage": "https://github.com/LeslyN/cardify#readme"
+}

src/index.js

@@ -0,0 +1,17 @@
+// Código del plugin Cardify
+
+// Función anónima autoejecutable
+
+(function(obj) {
+  // Heredando las caracterìsticas de jQuery al plugin creado
+  obj.fn.extend({
+    // Nombre del plugin
+    cardify: function() {
+      const init = () => {
+        $(this).addClass('opacity');
+        alert($(this).attr('alt'));
+      };
+      return $(this).each(init);
+    }
+  });
+})(jQuery);

vendors/materialize/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2017 Materialize
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

vendors/materialize/README.md

@@ -0,0 +1,90 @@
+<p align="center">
+  <a href="http://materializecss.com/">
+    <img src="http://materializecss.com/res/materialize.svg" width="150">
+  </a>
+
+  <h3 align="center">MaterializeCSS</h3>
+
+  <p align="center">
+    Materialize, a CSS Framework based on material design.
+    <br>
+    <a href="http://materializecss.com/"><strong>-- Browse the docs --</strong></a>
+    <br>
+    <br>
+    <a href="https://travis-ci.org/Dogfalo/materialize">
+      <img src="https://travis-ci.org/Dogfalo/materialize.svg?branch=master" alt="Travis CI badge">
+    </a>
+    <a href="https://badge.fury.io/js/materialize-css">
+      <img src="https://badge.fury.io/js/materialize-css.svg" alt="npm version badge">
+    </a>
+    <a href="https://cdnjs.com/libraries/materialize">
+      <img src="https://img.shields.io/cdnjs/v/materialize.svg" alt="CDNJS version badge">
+    </a>
+    <a href="https://david-dm.org/Dogfalo/materialize">
+      <img src="https://david-dm.org/Dogfalo/materialize/status.svg" alt="dependencies Status badge">
+      </a>
+    <a href="https://david-dm.org/Dogfalo/materialize#info=devDependencies">
+      <img src="https://david-dm.org/Dogfalo/materialize/dev-status.svg" alt="devDependency Status badge">
+    </a>
+    <a href="https://gitter.im/Dogfalo/materialize">
+      <img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter badge">
+    </a>
+</p>
+
+## Table of Contents
+- [Quickstart](#quickstart)
+- [Documentation](#documentation)
+- [Supported Browsers](#supported-browsers)
+- [Changelog](#changelog)
+- [Testing](#testing)
+- [Contributing](#contributing)
+- [Copyright and license](#copyright-and-license)
+
+## Quickstart:
+Read the [getting started guide](http://materializecss.com/getting-started.html) for more information on how to use materialize.
+
+- [Download the latest release](https://github.com/Dogfalo/materialize/releases/latest) of materialize directly from GitHub.
+- Clone the repo: `git clone https://github.com/Dogfalo/materialize.git`
+- Include the files via [cdnjs](https://cdnjs.com/libraries/materialize). More [here](http://materializecss.com/getting-started.html).
+- Install with [npm](https://www.npmjs.com): `npm install materialize-css`
+- Install with [Bower](https://bower.io): `bower install materialize`
+- Install with [Atmosphere](https://atmospherejs.com): `meteor add materialize:materialize`
+
+## Documentation
+The documentation can be found at <http://materializecss.com>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org/en/) installed on your computer.
+
+### Running documentation locally
+Run these commands to set up the documentation:
+
+```bash
+git clone https://github.com/Dogfalo/materialize
+cd materialize
+npm install
+```
+
+Then run `grunt monitor` to compile the documentation. When it finishes, open a new browser window and navigate to `localhost:8000`. We use [BrowserSync](https://www.browsersync.io/) to display the documentation.
+
+### Documentation for previous releases
+Previous releases and their documentation are available for [download](https://github.com/Dogfalo/materialize/releases).
+
+## Supported Browsers:
+Materialize is compatible with:
+
+- Chrome 35+
+- Firefox 31+
+- Safari 7+
+- Opera
+- Edge
+- IE 10+
+
+## Changelog
+For changelogs, check out [the Releases section of materialize](https://github.com/Dogfalo/materialize/releases) or the [CHANGELOG.md](CHANGELOG.md).
+
+## Testing
+We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](CONTRIBUTING.md#jasmine-testing-guide).
+
+## Contributing
+Check out the [CONTRIBUTING document](CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/Dogfalo/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
+
+## Copyright and license
+Code copyright 2017 Materialize. Code released under the MIT license.