From 825a8a8ffc96ba001e2abbd605a0f919de5b8eef Mon Sep 17 00:00:00 2001 From: "estefayiso@gmail.com" Date: Tue, 26 May 2020 20:34:22 -0500 Subject: [PATCH 1/4] Layout exercise --- 7-layouts/layout.html | 60 +++++++++++++++++++ 7-layouts/style.css | 135 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 195 insertions(+) create mode 100644 7-layouts/layout.html create mode 100644 7-layouts/style.css diff --git a/7-layouts/layout.html b/7-layouts/layout.html new file mode 100644 index 0000000..68e52b5 --- /dev/null +++ b/7-layouts/layout.html @@ -0,0 +1,60 @@ + + + + + Layout + + + + + + + + +
Studios Ghibli's movies
+ +
+
+
+ Princess Mononoke +

Princess Mononoke

+
+
+
+
+ Spirited away +

Spirited Away

+
+
+
+
+ Ponyo +

Ponyo

+
+
+
+
+ Arriety +

Arriety

+
+
+
+
+ Whisper of the heart +

Wishper of the heart

+
+
+
+
+ How's moving the castle +

How's moving the castle

+
+
+
+ + \ No newline at end of file diff --git a/7-layouts/style.css b/7-layouts/style.css new file mode 100644 index 0000000..2d1d08b --- /dev/null +++ b/7-layouts/style.css @@ -0,0 +1,135 @@ + +@media screen and (min-width: 545px){ + h1 { + font-size: 400%; + } + + h2 { + font-size: x-large; + width: 40%; + padding-bottom: 3%; + } + + p { + font-size: 130%; + } +} + +@media screen and (max-width: 1024px){ + article { + width: 40%; + } + + h1 { + font-size: xx-large; + } +} + +@media screen and (max-width: 544px){ + article { + width: 70%; + } + + h1 { + + font-size: 180%; + } + + h2 { + font-size: x-large; + width: 70%; + padding-bottom: 6%; + } + + p { + font-size: 70%; + } +} + +@media screen and (min-width: 869px){ + article { + padding-left: 10px; + padding-right: 10px; + width: 30%; + } + + h2 { + font-size: x-large; + width: 30%; + } +} + +article { + padding-left: 15px; + padding-right: 15px; +} + + +.banner { + align-items: center; + background-image: url(https://studioghiblimovies.com/wp-content/uploads/2018/11/164644889-ponyo-wallpapers-1024x554.jpg); + background-size: cover; + display: flex; + flex-flow: wrap row; + padding-top: 10%; + padding-bottom: 10%; + +} + +body { + background-color:#BCD470; +} + +.description_movie { + display: flex; + height: 80%; + width: 100%; +} + +header { + position: sticky; + top:3%; + background-color:#333332; + font-size:x-large; + height: 30px; +} + +header, p { + color: white; + font-family: Georgia, 'Times New Roman', Times, serif; +} + +h1 { + margin-left: 20px; + margin-right: 40px; + color: white; +} + +h2 { + align-self: flex-end; + background-color: #BCD470; + display: flex; + font-family: Georgia, 'Times New Roman', Times, serif; + justify-content: center; + position: absolute; + opacity: 0.7; +} + +img { + height: 100%; + width: 100%; +} + +main { + display: flex; + flex-flow: wrap row; + justify-content: center; + margin-top: 2%; +} + +p { + font-family: Georgia, 'Times New Roman', Times, serif; + padding-left: 50px; + width: 50%; +} + From cd7cfa32d06b514c8b4acbb6ad10b0540a83312d Mon Sep 17 00:00:00 2001 From: "estefayiso@gmail.com" Date: Mon, 1 Jun 2020 23:20:34 -0500 Subject: [PATCH 2/4] Changes --- 7-layouts/style.css | 51 +++++++++++++++------------------------------ 1 file changed, 17 insertions(+), 34 deletions(-) diff --git a/7-layouts/style.css b/7-layouts/style.css index 2d1d08b..724afde 100644 --- a/7-layouts/style.css +++ b/7-layouts/style.css @@ -1,17 +1,11 @@ - @media screen and (min-width: 545px){ - h1 { - font-size: 400%; - } - h2 { - font-size: x-large; width: 40%; padding-bottom: 3%; } - p { - font-size: 130%; + .paragraph { + font-size: 150%; } } @@ -28,28 +22,20 @@ @media screen and (max-width: 544px){ article { width: 70%; - } - - h1 { - + } + + h1 { font-size: 180%; } h2 { - font-size: x-large; - width: 70%; - padding-bottom: 6%; + font-size: x-large; + width: 70%; } - - p { - font-size: 70%; - } } @media screen and (min-width: 869px){ article { - padding-left: 10px; - padding-right: 10px; width: 30%; } @@ -64,16 +50,15 @@ article { padding-right: 15px; } - .banner { - align-items: center; background-image: url(https://studioghiblimovies.com/wp-content/uploads/2018/11/164644889-ponyo-wallpapers-1024x554.jpg); background-size: cover; + border: 2px solid; display: flex; flex-flow: wrap row; - padding-top: 10%; + justify-content: center; padding-bottom: 10%; - + padding-top: 10%; } body { @@ -83,26 +68,26 @@ body { .description_movie { display: flex; height: 80%; - width: 100%; } header { - position: sticky; - top:3%; background-color:#333332; + border: 2px solid tomato; font-size:x-large; height: 30px; + position: sticky; + top:3%; } -header, p { +header, .paragraph { color: white; font-family: Georgia, 'Times New Roman', Times, serif; } h1 { + color: white; margin-left: 20px; margin-right: 40px; - color: white; } h2 { @@ -127,9 +112,7 @@ main { margin-top: 2%; } -p { - font-family: Georgia, 'Times New Roman', Times, serif; +.paragraph { padding-left: 50px; width: 50%; -} - +} \ No newline at end of file From a6dca64f7437d7b6e90956f5e049726df12388a3 Mon Sep 17 00:00:00 2001 From: "estefayiso@gmail.com" Date: Tue, 2 Jun 2020 16:31:30 -0500 Subject: [PATCH 3/4] Changes --- 7-layouts/layout.html | 2 +- 7-layouts/style.css | 83 ++++++++++++------------------------------- 2 files changed, 24 insertions(+), 61 deletions(-) diff --git a/7-layouts/layout.html b/7-layouts/layout.html index 68e52b5..6b7b909 100644 --- a/7-layouts/layout.html +++ b/7-layouts/layout.html @@ -52,7 +52,7 @@

Wishper of the heart

How's moving the castle -

How's moving the castle

+

How's moving castle

diff --git a/7-layouts/style.css b/7-layouts/style.css index 724afde..36bcc7d 100644 --- a/7-layouts/style.css +++ b/7-layouts/style.css @@ -1,67 +1,33 @@ -@media screen and (min-width: 545px){ +@media screen and (max-width: 500px){ h2 { - width: 40%; - padding-bottom: 3%; + font-size: 130%; + width: 50%; } - .paragraph { - font-size: 150%; - } -} - -@media screen and (max-width: 1024px){ - article { - width: 40%; - } - - h1 { - font-size: xx-large; - } -} - -@media screen and (max-width: 544px){ - article { - width: 70%; - } - - h1 { - font-size: 180%; + .movies { + padding: 5px; + width: 50%; } - - h2 { - font-size: x-large; - width: 70%; - } } -@media screen and (min-width: 869px){ - article { - width: 30%; +@media screen and (max-width: 1024px) and (min-width:501px){ + h2, .movies { + width: 30%; } - h2 { - font-size: x-large; - width: 30%; + .paragraph { + font-size: 150%; } } -article { - padding-left: 15px; - padding-right: 15px; -} - .banner { background-image: url(https://studioghiblimovies.com/wp-content/uploads/2018/11/164644889-ponyo-wallpapers-1024x554.jpg); - background-size: cover; - border: 2px solid; display: flex; flex-flow: wrap row; justify-content: center; - padding-bottom: 10%; - padding-top: 10%; + padding: 5%; } - -body { +body, h2 { background-color:#BCD470; } @@ -72,31 +38,24 @@ body { header { background-color:#333332; - border: 2px solid tomato; - font-size:x-large; - height: 30px; position: sticky; top:3%; } -header, .paragraph { +header, h1, .paragraph { color: white; font-family: Georgia, 'Times New Roman', Times, serif; + font-size: x-large; } h1 { - color: white; - margin-left: 20px; - margin-right: 40px; + margin-right: 35px; } h2 { align-self: flex-end; - background-color: #BCD470; - display: flex; font-family: Georgia, 'Times New Roman', Times, serif; - justify-content: center; - position: absolute; + position: absolute; opacity: 0.7; } @@ -112,7 +71,11 @@ main { margin-top: 2%; } +.movies { + padding-left: 15px; + padding-right: 10px; +} + .paragraph { - padding-left: 50px; - width: 50%; + width: 65%; } \ No newline at end of file From 6b56948cee32515a27c8c4efc34328c8c634df51 Mon Sep 17 00:00:00 2001 From: "estefayiso@gmail.com" Date: Tue, 2 Jun 2020 16:33:18 -0500 Subject: [PATCH 4/4] Changes 2 --- 7-layouts/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/7-layouts/style.css b/7-layouts/style.css index 36bcc7d..a03ca93 100644 --- a/7-layouts/style.css +++ b/7-layouts/style.css @@ -10,7 +10,7 @@ } } -@media screen and (max-width: 1024px) and (min-width:501px){ +@media screen and (max-width: 1024px) and (min-width: 501px){ h2, .movies { width: 30%; } @@ -27,6 +27,7 @@ justify-content: center; padding: 5%; } + body, h2 { background-color:#BCD470; } @@ -39,7 +40,7 @@ body, h2 { header { background-color:#333332; position: sticky; - top:3%; + top: 3%; } header, h1, .paragraph {