From f3d70ee2174728c5bd168a695fbcacafdf158d59 Mon Sep 17 00:00:00 2001
From: javer-benavidez_cencosud <javer.benavidez@externos-cl.cencosud.com>
Date: Tue, 16 May 2023 11:56:14 -0500
Subject: [PATCH] added a list of books

---
 Maquetado/scss/application.scss  |   3 +-
 Maquetado/scss/book-details.scss |  51 ++++++++++++
 Maquetado/scss/book-list.scss    |  24 ++++++
 Maquetado/scss/details.scss      |  58 -------------
 Maquetado/scss/mixins.scss       |   4 +
 Maquetado/views/book-list.html   | 135 +++++++++++++++++++++++++++++++
 Maquetado/{ => views}/index.html |   6 +-
 7 files changed, 219 insertions(+), 62 deletions(-)
 create mode 100644 Maquetado/scss/book-details.scss
 create mode 100644 Maquetado/scss/book-list.scss
 delete mode 100644 Maquetado/scss/details.scss
 create mode 100644 Maquetado/scss/mixins.scss
 create mode 100644 Maquetado/views/book-list.html
 rename Maquetado/{ => views}/index.html (88%)

diff --git a/Maquetado/scss/application.scss b/Maquetado/scss/application.scss
index dcd6a8c..677f589 100644
--- a/Maquetado/scss/application.scss
+++ b/Maquetado/scss/application.scss
@@ -1,2 +1,3 @@
 @import 'equalizer';
-@import 'details';
+@import 'book-details';
+@import 'book-list';
diff --git a/Maquetado/scss/book-details.scss b/Maquetado/scss/book-details.scss
new file mode 100644
index 0000000..54ce1f2
--- /dev/null
+++ b/Maquetado/scss/book-details.scss
@@ -0,0 +1,51 @@
+@import 'colors';
+@import 'mixins';
+
+.front-page {
+  box-shadow: 3px 3px 7px $gray;
+  display: flex;
+  gap: 25px;
+  margin: 2%;
+  padding: 3%;
+
+  .image {
+    position: relative;
+
+    .badge-image {
+      position: absolute;
+      right: -12px;
+      top: -12px;
+      transform: rotate(15deg);
+    }
+  }
+
+  .description {
+    width: 100%;
+
+    .title {
+      border-bottom: 3px solid $earls-green;
+      margin-bottom: 30px;
+      padding-bottom: 1%;
+
+      .book-title {
+        @include font-theme(x-large);
+      }
+
+      .gender {
+        @include font-theme(large, $gray);
+      }
+    }
+
+    .subtitle {
+      @include font-theme(15px, $black, bold);
+    }
+
+    .content {
+      @include font-theme(15px, $gray, normal);
+    }
+
+    p {
+      margin-bottom: 20px;
+    }
+  }
+}
diff --git a/Maquetado/scss/book-list.scss b/Maquetado/scss/book-list.scss
new file mode 100644
index 0000000..787160a
--- /dev/null
+++ b/Maquetado/scss/book-list.scss
@@ -0,0 +1,24 @@
+@import 'colors';
+@import 'mixins';
+
+.book-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .item {
+    box-shadow: 3px 3px 7px $gray;
+    margin: 20px;
+    padding: 25px;
+
+    .book-title {
+      @include font-theme(medium);
+      margin-top: 8px;
+    }
+
+    .book-author {
+      @include font-theme(small, $gray, none);
+      margin-top: 5px;
+    }
+  }
+}
diff --git a/Maquetado/scss/details.scss b/Maquetado/scss/details.scss
deleted file mode 100644
index 1a7cd54..0000000
--- a/Maquetado/scss/details.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import 'colors';
-
-@mixin font-theme($size, $color: $black, $style: bold, $family: arial) {
-  color: $color;
-  font: $style $size $family;
-}
-
-body {
-  margin: 2%;
-}
-
-.front-page {
-  box-shadow: 3px 3px 7px $gray;
-  display: flex;
-  gap: 25px;
-  padding: 3%;
-}
-
-.image {
-  position: relative;
-}
-
-.badge-image {
-  position: absolute;
-  right: -12px;
-  top: -12px;
-  transform: rotate(15deg);
-}
-
-.description {
-  width: 100%;
-}
-
-.title {
-  border-bottom: 3px solid $earls-green;
-  margin-bottom: 30px;
-  padding-bottom: 1%;
-}
-
-.book-title {
-  @include font-theme(x-large);
-}
-
-.gender {
-  @include font-theme(large, $gray);
-}
-
-p {
-  margin-bottom: 20px;
-}
-
-.subtitle {
-  @include font-theme(15px, $black, bold);
-}
-
-.content {
-  @include font-theme(15px, $gray, normal);
-}
diff --git a/Maquetado/scss/mixins.scss b/Maquetado/scss/mixins.scss
new file mode 100644
index 0000000..650e065
--- /dev/null
+++ b/Maquetado/scss/mixins.scss
@@ -0,0 +1,4 @@
+@mixin font-theme($size, $color: $black, $style: bold, $family: arial) {
+  color: $color;
+  font: $style $size $family;
+}
diff --git a/Maquetado/views/book-list.html b/Maquetado/views/book-list.html
new file mode 100644
index 0000000..43afc95
--- /dev/null
+++ b/Maquetado/views/book-list.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>HTML & CSS Training</title>
+    <meta name="description" content="training" />
+    <meta name="author" content="Wolox" />
+    <link rel="stylesheet" type="text/css" href="../application.css" />
+  </head>
+  <body>
+    <article class="book-list">
+      <div class="item">
+        <img
+          src="../images/book-cover.png"
+          class="book-image"
+          alt="book-cover"
+          width="180"
+          height="250"
+        />
+        <div>
+          <p class="book-title">Título del libro</p>
+          <br />
+          <p class="book-author">Autor del libro</p>
+          <br />
+        </div>
+      </div>
+      <div class="item">
+        <img
+          src="../images/book-cover.png"
+          class="book-image"
+          alt="book-cover"
+          width="180"
+          height="250"
+        />
+        <div>
+          <p class="book-title">Título del libro</p>
+          <br />
+          <p class="book-author">Autor del libro</p>
+          <br />
+        </div>
+      </div>
+      <div class="item">
+        <img
+          src="../images/book-cover.png"
+          class="book-image"
+          alt="book-cover"
+          width="180"
+          height="250"
+        />
+        <div>
+          <p class="book-title">Título del libro</p>
+          <br />
+          <p class="book-author">Autor del libro</p>
+          <br />
+        </div>
+      </div>
+      <div class="item">
+        <img
+          src="../images/book-cover.png"
+          class="book-image"
+          alt="book-cover"
+          width="180"
+          height="250"
+        />
+        <div>
+          <p class="book-title">Título del libro</p>
+          <br />
+          <p class="book-author">Autor del libro</p>
+          <br />
+        </div>
+      </div>
+      <div class="item">
+        <img
+          src="../images/book-cover.png"
+          class="book-image"
+          alt="book-cover"
+          width="180"
+          height="250"
+        />
+        <div>
+          <p class="book-title">Título del libro</p>
+          <br />
+          <p class="book-author">Autor del libro</p>
+          <br />
+        </div>
+      </div>
+      <div class="item">
+        <img
+          src="../images/book-cover.png"
+          class="book-image"
+          alt="book-cover"
+          width="180"
+          height="250"
+        />
+        <div>
+          <p class="book-title">Título del libro</p>
+          <br />
+          <p class="book-author">Autor del libro</p>
+          <br />
+        </div>
+      </div>
+      <div class="item">
+        <img
+          src="../images/book-cover.png"
+          class="book-image"
+          alt="book-cover"
+          width="180"
+          height="250"
+        />
+        <div>
+          <p class="book-title">Título del libro</p>
+          <br />
+          <p class="book-author">Autor del libro</p>
+          <br />
+        </div>
+      </div>
+      <div class="item">
+        <img
+          src="../images/book-cover.png"
+          class="book-image"
+          alt="book-cover"
+          width="180"
+          height="250"
+        />
+        <div>
+          <p class="book-title">Título del libro</p>
+          <br />
+          <p class="book-author">Autor del libro</p>
+          <br />
+        </div>
+      </div>
+    </article>
+  </body>
+</html>
diff --git a/Maquetado/index.html b/Maquetado/views/index.html
similarity index 88%
rename from Maquetado/index.html
rename to Maquetado/views/index.html
index 4467ac9..ad9d73a 100644
--- a/Maquetado/index.html
+++ b/Maquetado/views/index.html
@@ -6,20 +6,20 @@
     <title>HTML & CSS Training</title>
     <meta name="description" content="training" />
     <meta name="author" content="Wolox" />
-    <link rel="stylesheet" type="text/css" href="application.css" />
+    <link rel="stylesheet" type="text/css" href="../application.css" />
   </head>
   <body>
     <article class="front-page">
       <div class="image">
         <img
-          src="images/book-cover.png"
+          src="../images/book-cover.png"
           class="book-image"
           alt="book-cover"
           width="180"
           height="250"
         />
         <img
-          src="images/badge.png"
+          src="../images/badge.png"
           class="badge-image"
           alt="badge"
           width="45"