From 95e3590473716c054fb096ec1ebd1ed0e5cb50ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Felipe=20Burbano?= Date: Sat, 29 Aug 2020 09:44:02 -0500 Subject: [PATCH 1/6] Create a basic structure and start point --- css/normalize.css | 349 ++++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 23 +++ index.html | 15 ++ 3 files changed, 387 insertions(+) create mode 100644 css/normalize.css create mode 100644 css/style.css create mode 100644 index.html diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..b6eb821 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..2f11ecd --- /dev/null +++ b/css/style.css @@ -0,0 +1,23 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +:root { + --body_color: #e5e5e5; + --text_color: #515151; +} + +body { + border: 1px solid red; + background-color: var(--body_color); + box-sizing: border-box; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center ; + font-family: 'Roboto', sans-serif; +} + +.shelf { + width: 360px; + height: auto; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..8b6a6d0 --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + Challenge CSS 05 + + + + +
+ +
+ + \ No newline at end of file From f317d7ad367c2d05563603cc4c3d3e6c772cf876 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Felipe=20Burbano?= Date: Sat, 29 Aug 2020 10:00:10 -0500 Subject: [PATCH 2/6] Add a card layout --- index.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 8b6a6d0..b39dae2 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,20 @@
- +
+
+ Album picture +
+
+

Rozes

+

Under the grape

+

(2016)

+
+
+

Rate this album

+
stars
+
+
\ No newline at end of file From 40fec3286da9202e1fc7928b23a515688c37704c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Felipe=20Burbano?= Date: Sat, 29 Aug 2020 10:03:55 -0500 Subject: [PATCH 3/6] Add cover album --- assets/rozes_under_the_grape.jpg | Bin 0 -> 21164 bytes index.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 assets/rozes_under_the_grape.jpg diff --git a/assets/rozes_under_the_grape.jpg b/assets/rozes_under_the_grape.jpg new file mode 100644 index 0000000000000000000000000000000000000000..8127555d21e7c1f2620346abbfc564b58b3d91ca GIT binary patch literal 21164 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 K!XyG7=l|Jp9BwTD literal 0 HcmV?d00001 diff --git a/index.html b/index.html index b39dae2..e4cf68d 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
- Album picture + Album picture

Rozes

From f06504f69edfda7374204a6fdbcf582b30d101a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Felipe=20Burbano?= Date: Sat, 29 Aug 2020 11:19:40 -0500 Subject: [PATCH 4/6] Styled a card image and card text --- css/style.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 6 +++--- 2 files changed, 61 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 2f11ecd..2535433 100644 --- a/css/style.css +++ b/css/style.css @@ -5,10 +5,13 @@ --text_color: #515151; } +* { + box-sizing: border-box; +} + body { border: 1px solid red; background-color: var(--body_color); - box-sizing: border-box; width: 100vw; height: 100vh; display: flex; @@ -21,3 +24,57 @@ body { width: 360px; height: auto; } + +.card { + background-color: white; + border: 1px solid #d8d8d8; + border-radius: 8px; + display: flex; + flex-wrap: wrap; +} + +.card__img { + border: 1px solid red; + min-width: 100px; + max-width: 300px; + width: 30% +} + +.card__img img { + width: 100%; + height: auto; +} + +.card__texts { + border: 1px solid goldenrod; + width: 70%; + padding: 16px; + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.card__texts > * { + margin: 0; + display: flex; + flex-direction: column; + align-content: space-between; + justify-content: space-around; +} + +.card__title { + border: 1px solid olive; + +} + +.card__text { + border: 1px solid orangered; + + font-size: .8em; + color: var(--text_color); +} + +.card__rate { + border: 1px solid blueviolet; + width: 100%; +} \ No newline at end of file diff --git a/index.html b/index.html index e4cf68d..66bc30f 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,9 @@ Album picture
-

Rozes

-

Under the grape

-

(2016)

+

Rozes

+

Under the grape

+

(2016)

Rate this album

From 744c8301833cb4e54e8e7945c23b5ac6ef98f02d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Felipe=20Burbano?= Date: Sat, 29 Aug 2020 17:53:31 -0500 Subject: [PATCH 5/6] positioned elements in card rate section --- css/style.css | 8 ++++++++ index.html | 4 ++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 2535433..8f722e5 100644 --- a/css/style.css +++ b/css/style.css @@ -77,4 +77,12 @@ body { .card__rate { border: 1px solid blueviolet; width: 100%; + padding: 8px; + display: flex; + align-content: center; + justify-content: space-between; +} + +.card__rating { + border: 1px solid saddlebrown; } \ No newline at end of file diff --git a/index.html b/index.html index 66bc30f..6c33e9c 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@

Rozes

(2016)

-

Rate this album

-
stars
+

Rate this album

+
stars
From 33daeefb3b48250fa3a0851a232cfff462526f56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Felipe=20Burbano?= Date: Sat, 29 Aug 2020 18:26:37 -0500 Subject: [PATCH 6/6] add rating stars --- css/style.css | 57 ++++++++++++++++++++++++++++++++++++++++----------- index.html | 9 +++++++- 2 files changed, 53 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 8f722e5..3ddc3eb 100644 --- a/css/style.css +++ b/css/style.css @@ -34,7 +34,6 @@ body { } .card__img { - border: 1px solid red; min-width: 100px; max-width: 300px; width: 30% @@ -46,12 +45,12 @@ body { } .card__texts { - border: 1px solid goldenrod; width: 70%; padding: 16px; display: flex; flex-direction: column; justify-content: space-around; + border-bottom: 1px solid var(--body_color); } .card__texts > * { @@ -62,20 +61,12 @@ body { justify-content: space-around; } -.card__title { - border: 1px solid olive; - -} - .card__text { - border: 1px solid orangered; - font-size: .8em; color: var(--text_color); } .card__rate { - border: 1px solid blueviolet; width: 100%; padding: 8px; display: flex; @@ -84,5 +75,47 @@ body { } .card__rating { - border: 1px solid saddlebrown; -} \ No newline at end of file + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.card__rating input { + display: none; +} + +.card__rating label { + display: block; + cursor: pointer; + width: 24px; + margin-left: 8px; +} + +.card__rating label::before { + content: '\f005'; + font-family: fontAwesome; + position: relative; + display: block; + font-size: 24px; + color: var(--body_color); +} + +.card__rating label::after { + content: '\f005'; + font-family: fontAwesome; + position: absolute; + display: block; + font-size: 24px; + color: goldenrod; + opacity: 0; + top: 7px; + transition: .5; + text-shadow: 0 2px 5px rgba(0, 0, 0, .5); +} + +.card__rating label:hover::after, +.card__rating label:hover ~ label::after, +.card__rating input:checked ~ label::after { + opacity: 1; +} \ No newline at end of file diff --git a/index.html b/index.html index 6c33e9c..8ba7b0b 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Challenge CSS 05 + @@ -20,7 +21,13 @@

Rozes

Rate this album

-
stars
+
+ + + + + +