From 4c93dfb76da8fe57b9f8e10a9d6b9b9295af3add Mon Sep 17 00:00:00 2001 From: Bernardo Aguayo Ortega Date: Sat, 25 Jul 2020 21:44:22 -0500 Subject: [PATCH 1/3] finish set up --- src/index.css | 0 src/index.html | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 src/index.css create mode 100644 src/index.html diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..96338f7 --- /dev/null +++ b/src/index.html @@ -0,0 +1,48 @@ + + + + + + + challenge-CSS-05 + + + + + + + + +
+ +
+
+ +
+
+

+
+

+

+
+
+
+ + +
+

+
+ + + + + + +
+
+ +
+ + + + \ No newline at end of file From 5d071e96c470fcf4354af58ebfb7ecf005f6a699 Mon Sep 17 00:00:00 2001 From: Bernardo Aguayo Ortega Date: Sat, 25 Jul 2020 21:49:20 -0500 Subject: [PATCH 2/3] first css styles (general styles) --- src/index.css | 32 ++++++++++++++++++++++++++++++++ src/index.html | 10 +++++----- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/src/index.css b/src/index.css index e69de29..d2e7d86 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,32 @@ +/*google fonts*/ + +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); + +/* + google fonts uses + font-family: 'Roboto', sans-serif; +*/ + + +/*general styles*/ + +* { + margin: 0; + padding: 0; +} + +html { + font-size: 10px; + color: lightgray; + font-family: 'Roboto', sans-serif; +} + +img { + width: 100%; +} + +body {} + +main { + box-shadow: 2px 2px 2px 2px2 #000000; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 96338f7..10b6675 100644 --- a/src/index.html +++ b/src/index.html @@ -17,20 +17,20 @@
- + song image
-

+

Rozes

-

-

+

Under the Grave

+

(2016)

-

+

Rate this album

From 9798f6791f3880a31cb694f6854940f3f39bacf9 Mon Sep 17 00:00:00 2001 From: Bernardo Aguayo Ortega Date: Sat, 25 Jul 2020 22:52:15 -0500 Subject: [PATCH 3/3] finish resposnive --- src/index.css | 216 ++++++++++++++++++++++++++++++++++++++++++++++++- src/index.html | 4 +- 2 files changed, 215 insertions(+), 5 deletions(-) diff --git a/src/index.css b/src/index.css index d2e7d86..4a81799 100644 --- a/src/index.css +++ b/src/index.css @@ -17,7 +17,7 @@ html { font-size: 10px; - color: lightgray; + color: gray; font-family: 'Roboto', sans-serif; } @@ -25,8 +25,218 @@ img { width: 100%; } -body {} +body { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: #e5e5e5; +} main { - box-shadow: 2px 2px 2px 2px2 #000000; + box-shadow: 2px 2px 4px #000000; + background-color: white; +} + +h1 { + font-weight: 400; + color: black; +} + +.up { + display: flex; +} + +.up-info { + border-bottom: lightgray .1rem solid; +} + +.down { + display: flex; + justify-content: space-between; +} + + +/*small and medium device*/ + +@media screen and (min-width:320px) and (max-width:424px) { + /*up section*/ + /*up figure*/ + .up figure { + max-width: 10rem; + } + /*up info*/ + .up-info { + min-width: 14rem; + padding: 0 3rem; + padding-top: 1rem; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + } + .up-info h1 { + font-size: 2rem; + } + .up-info div { + padding: 1rem 0; + } + .up-info p { + font-size: 1.3rem; + } + /*down section*/ + .down { + padding: 2rem; + align-items: center; + } + .down p { + font-size: 1.5rem; + } + .stars { + font-size: 2rem; + } + .stars i { + padding: 0 .2rem; + } +} + + +/*large mobil*/ + +@media screen and (min-width:425px) and (max-width:767px) { + html { + font-size: 13px; + } + /*up section*/ + /*up figure*/ + .up figure { + max-width: 10rem; + } + /*up info*/ + .up-info { + min-width: 14rem; + padding: 0 3rem; + padding-top: 1rem; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + } + .up-info h1 { + font-size: 2rem; + } + .up-info div { + padding: 1rem 0; + } + .up-info p { + font-size: 1.3rem; + } + /*down section*/ + .down { + padding: 2rem; + align-items: center; + } + .down p { + font-size: 1.5rem; + } + .stars { + font-size: 2rem; + } + .stars i { + padding: 0 .2rem; + } +} + + +/*tablet*/ + +@media screen and (min-width:768px) and (max-width:1023px) { + html { + font-size: 24px; + } + /*up section*/ + /*up figure*/ + .up figure { + max-width: 10rem; + } + /*up info*/ + .up-info { + min-width: 14rem; + padding: 0 3rem; + padding-top: 1rem; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + } + .up-info h1 { + font-size: 2rem; + } + .up-info div { + padding: 1rem 0; + } + .up-info p { + font-size: 1.3rem; + } + /*down section*/ + .down { + padding: 2rem; + align-items: center; + } + .down p { + font-size: 1.5rem; + } + .stars { + font-size: 2rem; + } + .stars i { + padding: 0 .2rem; + } +} + + +/*desktop*/ + +@media screen and (min-width:1024px) and (max-width:1440px) { + html { + font-size: 32px; + } + /*up section*/ + /*up figure*/ + .up figure { + max-width: 10rem; + } + /*up info*/ + .up-info { + min-width: 14rem; + padding: 0 3rem; + padding-top: 1rem; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + } + .up-info h1 { + font-size: 2rem; + } + .up-info div { + padding: 1rem 0; + } + .up-info p { + font-size: 1.3rem; + } + /*down section*/ + .down { + padding: 2rem; + align-items: center; + } + .down p { + font-size: 1.5rem; + } + .stars { + font-size: 2rem; + } + .stars i { + padding: 0 .2rem; + } } \ No newline at end of file diff --git a/src/index.html b/src/index.html index 10b6675..db0aa9b 100644 --- a/src/index.html +++ b/src/index.html @@ -17,7 +17,7 @@
- song image + song image

Rozes

@@ -31,7 +31,7 @@

Rozes

Rate this album

-
+