Merge pull request #5 from wolox-training/book-detail-structure

Book detail: title and shadow
wolox-training · Jun 10, 2019 · 2b1310e · 2b1310e
2 parents 76f25e1 + 33f19f7
commit 2b1310e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/maquetado/index.html b/maquetado/index.html
@@ -10,24 +10,24 @@
 </head>
 <body>
   <div class="book-container row">
-    <img src="./assets/book-cover.png" class="book-cover"/>
-    <div class="column book-info-container">
-      <div class="row book-title-info-container">
-        <h1 class="book-title bold height">Título del libro</h1>
-        <h2 class="book-gender height">(género)</h2>
-      </div>
-      <div class="row">
-        <h3 class="book-detail-name bold height">Autor del libro:</h3>
-        <h3 class="book-detail-value height">Nombre del autor del libro</h3>
-      </div>
-      <div class="row">
-        <h3 class="book-detail-name bold height">Editorial:</h3>
-        <h3 class="book-detail-value height">Nombre de la editorial</h3>
-      </div>
-      <div class="row">
-        <h3 class="book-detail-name bold height">Año de publicación:</h3>
-        <h3 class="book-detail-value height">Año de publicación</h3>
-      </div>
+    <img src="./assets/book-cover.png" class="book-cover">
+      <div class="column book-info-container">
+        <div class="row book-title-container">
+          <h1 class="book-title bold height">Título del libro</h1>
+          <h2 class="book-gender height">(género)</h2>
+        </div>
+          <div class="row">
+            <h3 class="book-detail-name bold height">Autor del libro:</h3>
+            <h3 class="book-detail-value height">Nombre del autor del libro</h3>
+          </div>
+          <div class="row">
+            <h3 class="book-detail-name bold height">Editorial:</h3>
+            <h3 class="book-detail-value height">Nombre de la editorial</h3>
+          </div>
+          <div class="row">
+            <h3 class="book-detail-name bold height">Año de publicación:</h3>
+            <h3 class="book-detail-value height">Año de publicación</h3>
+          </div>
     </div>
   </div>
 </body>

diff --git a/maquetado/scss/colors.scss b/maquetado/scss/colors.scss
@@ -1 +1,4 @@
 $gray: #828282;
+$earls-green: #BED23C;
+$black-05: rgba(0,0,0,0.5);
+$white : #FFF;
diff --git a/maquetado/scss/styles.scss b/maquetado/scss/styles.scss
@@ -3,7 +3,11 @@
 }
 
 .book-container {
-  padding: 10px;
+  background-color: $white;
+  box-shadow: 4px 4px 10px 0 $black-05;
+  max-width: 1000px;
+  padding: 20px;
+  width: 100%;
 }
 
 .book-cover {
@@ -36,8 +40,18 @@
   margin-right: 100px;
 }
 
-.book-title-info-container {
+.book-title-container {
   align-items: baseline;
+  margin-bottom: 40px;
+  position: relative;
+  &::after {
+    content:'';
+    border-bottom: 4px solid $earls-green;
+    bottom: 20px;
+    height: 4px;
+    position: absolute;
+    width: 100%;
+  }
 }
 
 .book-title {