Merge pull request #5 from ValePV/master

adding images and modify width

assets/css/main.css

@@ -4,6 +4,7 @@ body{
 }
 img{
   border-radius: 5%;
+  margin-bottom: 2em;
 }
 
 h1{

index.html

@@ -18,7 +18,7 @@ <h1 class="text-center">BRADYPUS</h1>
   <div class="contain container">
     <div class="row">
       <div class="col-lg-4">
-        <img class="img-responsive" src="assets/img/uno.jpg" alt="colgando">
+        <img class="img-responsive" src="assets/img/uno.jpg" height="42" width="300" alt="colgando">
       </div>
       <div class="col-lg-4">
         <img class="img-responsive" src="assets/img/dos.jpg" alt="astronauta">
@@ -27,7 +27,29 @@ <h1 class="text-center">BRADYPUS</h1>
         <img class="img-responsive" src="assets/img/tres.jpg" alt="encañado">      
       </div>
     </div>
+    <div class="row">
+      <div class="col-lg-4">
+        <img class="img-responsive" src="assets/img/g-cuatro.gif"  alt="Meli">
+      </div>
+      <div class="col-lg-4">
+        <img class="img-responsive" src="assets/img/g-cinco.gif"  alt="Vane">
+      </div>
+      <div class="col-lg-4">
+        <img class="img-responsive" src="assets/img/g-seis.gif"  alt="Vale">      
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-lg-4">
+        <img class="img-responsive" src="assets/img/g-uno.gif"  alt="Kote">
+      </div>
+      <div class="col-lg-4">
+        <img class="img-responsive" src="assets/img/g-dos.gif"  alt="Maite">
+      </div>
+      <div class="col-lg-4">
+        <img class="img-responsive" src="assets/img/g-tres.gif"  alt="Marcia">      
+      </div>
     </div>
+  </div>
 <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
 <script type="text/javascript" src="lib/main.js"></script>
 </body>

src/app.js

@@ -11,12 +11,14 @@ $(document).ready(() => {
       this.find('figure').map(function() {
         $(this).append(`<figcaption><h3 class="text-caption">${$(this).children('img').attr('alt')}</h3></figcaption>`);
       }); // encuentra y recorre los figure dentro de la class y agrega un figcaption que tiene como contenido lo escrito en ALT.
+
       this.find('figure').map(function() { // Encuentra los figure dentro de la class y agrega estilo.
         $(this).css({
           'position': 'relative',
-          'width': '100%'
+          'width': 100%
         });
       });
+
       $('figcaption').css({ // Estilos.
         'position': 'absolute',
         'top': '0',
@@ -29,6 +31,8 @@ $(document).ready(() => {
         'transition': '.8s ease',
         'background-color': 'rgba(255,255,255, 0.6)'
       });
+
+
       $('.text-caption').css({
         'color': 'black',
         'font-size': '2em',