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 @@ + + + + + + HTML & CSS Training + + + + + +
+
+ book-cover +
+

Título del libro

+
+

Autor del libro

+
+
+
+
+ book-cover +
+

Título del libro

+
+

Autor del libro

+
+
+
+
+ book-cover +
+

Título del libro

+
+

Autor del libro

+
+
+
+
+ book-cover +
+

Título del libro

+
+

Autor del libro

+
+
+
+
+ book-cover +
+

Título del libro

+
+

Autor del libro

+
+
+
+
+ book-cover +
+

Título del libro

+
+

Autor del libro

+
+
+
+
+ book-cover +
+

Título del libro

+
+

Autor del libro

+
+
+
+
+ book-cover +
+

Título del libro

+
+

Autor del libro

+
+
+
+
+ + 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 @@ HTML & CSS Training - +
book-cover