From c8768ca0dace2f3b47ca0f860d21e85972751a57 Mon Sep 17 00:00:00 2001 From: Raul Galicia Date: Fri, 28 Aug 2020 18:58:49 -0500 Subject: [PATCH 1/2] =?UTF-8?q?Creaci=C3=B3n=20de=20primeros=20archivos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- estilos.css | 0 index.html | 12 ++++++++++++ 2 files changed, 12 insertions(+) create mode 100644 estilos.css create mode 100644 index.html diff --git a/estilos.css b/estilos.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..3aa059e --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + + Challenge CSS 05 + + + + + \ No newline at end of file From 9a0f2a8977df6a168da466e62f821bd2d11c49da Mon Sep 17 00:00:00 2001 From: Raul Galicia Date: Sat, 29 Aug 2020 20:26:13 -0500 Subject: [PATCH 2/2] Reto CSS 05 terminado --- estilos.css | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 32 +++++++++++++++- 2 files changed, 136 insertions(+), 1 deletion(-) diff --git a/estilos.css b/estilos.css index e69de29..217a74f 100644 --- a/estilos.css +++ b/estilos.css @@ -0,0 +1,105 @@ +body { + margin: 0; + padding: 0; + background-color: #E5E5E5; + font-family: 'Poppins', sans-serif; +} + +.main-album { + display: flex; + flex-wrap: wrap; + width: 350px; + height: 170px; + background-color: #fff; + border-radius: 5px; + box-shadow: 1px 2px #ccc; +} + +.album { + display: flex; + width: inherit; + height: 65%; + box-shadow: 0 1px #ccc; + +} + +.album-cover { + width: 35%; + height: 100%; + background-image: url(https://direct.rhapsody.com/imageserver/images/alb.236486660/500x500.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + margin: 0; +} + +.album-info { + width: 67%; + margin: 0; + padding: 10px; + padding-left: 20px; +} + +.album-info-title { + margin: 0; +} + +.title1 { + font-weight: normal; + font-size: 22px; +} + +.title2 { + font-weight: 300; + font-size: 13px; + color: #656565; +} + +.rating { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + padding: 0 15px 10px 15px; +} + +.rating p { + margin: 0; + font-size: 13px; + font-weight: 300; + color: #656565; +} + +/* De aquí en adelante aún no lo domino por completo */ + +.rating-score:not(:checked) > input { + position:absolute; + top:-9999px; +} +.rating-score:not(:checked) > label { + float:right; + width:1em; + margin: 5px; + overflow:hidden; + white-space:nowrap; + cursor:pointer; + font-size: 20px; + color:#ccc; +} +.rating-score:not(:checked) > label:before { + content: '★ '; +} +.rating-score > input:checked ~ label { + color: #ffc700; +} +.rating-score:not(:checked) > label:hover, +.rating-score:not(:checked) > label:hover ~ label { + color: #deb217; +} +.rating-score > input:checked + label:hover, +.rating-score > input:checked + label:hover ~ label, +.rating-score > input:checked ~ label:hover, +.rating-score > input:checked ~ label:hover ~ label, +.rating-score > label:hover ~ input:checked ~ label { + color: #c59b08; +} \ No newline at end of file diff --git a/index.html b/index.html index 3aa059e..6a91444 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,39 @@ + Challenge CSS 05 - +
+
+
+
+
+

Rozes

+

Under the grave
(2016)

+
+
+
+

Rate this album

+
+ + + + + + + + + + + + + + + +
+
+
\ No newline at end of file