From 11519c0be427286bfd72e405f342b9dcf17a83b1 Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Tue, 22 Jul 2025 17:23:41 +0200 Subject: [PATCH 1/6] Iteration 1 done. Gray borders not aligned yet --- styles/style.css | 70 +++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 63 insertions(+), 7 deletions(-) diff --git a/styles/style.css b/styles/style.css index 9571ab1..3c333f8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,18 +4,28 @@ html { box-sizing: border-box; font-size: 16px; } - -*, *:before, *:after { + +*, +*:before, +*:after { box-sizing: inherit; } - -body, h1, h2, h3, h4, h5, h6, p, ol, ul { + +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { margin: 0; padding: 0; font-weight: lighter; } - /* DO NOT REMOVE - Styling for the label showing the viewport width */ .viewport-dimensions { position: fixed; @@ -27,7 +37,7 @@ body, h1, h2, h3, h4, h5, h6, p, ol, ul { padding: 5px 8px; font-size: 14px; } - + /* STYLES */ /* Fonts */ @@ -119,6 +129,7 @@ header { width: 50%; padding: 0 20px; height: auto; + /* border: 1px solid black; */ } .main-article .content { @@ -175,5 +186,50 @@ header { .btn-blue { background-color: #007bff; } - + /* Write your CSS below */ +@media (width < 760px) { + + .navbar { + flex-direction: column; + align-items: center; + } + + .navbar li { + border-bottom: 1px solid #ffffff; + width: 100%; + } + + main { + /* flex-wrap: wrap; */ + /* background-color: yellow; */ + } + + .main-article { + flex-direction: column; + align-items: center; + /* background-color: red; */ + } + + .main-article .image { + width: 100%; + height: auto; + } + + .main-article .content { + width: 100%; + /* width: 200px; */ + /* border: 1px solid black; */ + } + + .articles-container { + display: flex; + flex-direction: column; + align-items: center; + /* border: 1px solid black; */ + /* background-color: green; */ + } + .article { + width: 90%; + } +} From 2e236b69d5ac9a78bb6238b3988abb07a2a9fccb Mon Sep 17 00:00:00 2001 From: Alejandro Duque Date: Tue, 22 Jul 2025 17:02:19 +0100 Subject: [PATCH 2/6] Iteration 2 complete --- styles/style.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/styles/style.css b/styles/style.css index 3c333f8..dd4bccc 100644 --- a/styles/style.css +++ b/styles/style.css @@ -233,3 +233,21 @@ header { width: 90%; } } + + +@media (min-width: 760px) and (max-width: 1024px) { + .navbar{ + flex-direction: row; + align-items: center; + justify-content: space-evenly; + } + .articles-container { + flex-wrap: wrap; + justify-content: space-between; + gap: 20px; + } + .article { + width: 45%; + + } +} From bab2f73f251e987f18eed9bd054da353974ef795 Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Tue, 22 Jul 2025 18:31:42 +0200 Subject: [PATCH 3/6] Iteration 3 done. Clicking on the menu icon does not have any effect, as it was not requested --- index.html | 1 + styles/style.css | 40 ++++++++++++++++++++++++++++++++-------- 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 1b8846b..f7b1d0e 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@

Ironhack News

  • Tech
  • Sports
    • + menu icon diff --git a/styles/style.css b/styles/style.css index dd4bccc..79babf7 100644 --- a/styles/style.css +++ b/styles/style.css @@ -86,11 +86,19 @@ header { border-bottom: 1px solid white; } +nav img { + display: none; + width: 2.5em; + height: 2.5em; + padding: 0.3em; +} + .navbar { list-style-type: none; width: 100%; display: flex; justify-content: flex-start; + background-color: blue } .navbar li { @@ -112,6 +120,8 @@ header { font-weight: bold; } + + /* Articles */ .main-article { margin: 20px; @@ -188,8 +198,22 @@ header { } /* Write your CSS below */ -@media (width < 760px) { +@media (width < 480px) { + nav img { + display: block; + } + nav{ + display: flex; + justify-content: center; + align-items: center; + } + .navbar { + display: none; + /* height: 10px; */ + } +} +@media (width < 760px) { .navbar { flex-direction: column; align-items: center; @@ -222,7 +246,7 @@ header { /* border: 1px solid black; */ } - .articles-container { + .articles-container { display: flex; flex-direction: column; align-items: center; @@ -230,24 +254,24 @@ header { /* background-color: green; */ } .article { - width: 90%; - } + width: 90%; + } } - -@media (min-width: 760px) and (max-width: 1024px) { - .navbar{ +@media (min-width: 760px) and (max-width: 1024px) { + .navbar { flex-direction: row; align-items: center; justify-content: space-evenly; } + .articles-container { flex-wrap: wrap; justify-content: space-between; gap: 20px; } + .article { width: 45%; - } } From 0560a262f00dc0256a195225bb88cd946b7d357a Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Tue, 22 Jul 2025 18:52:18 +0200 Subject: [PATCH 4/6] Changes trying to make the hovering display the menu. Not working --- index.html | 2 +- styles/style.css | 37 +++++++++++++++++++++++++++---------- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index f7b1d0e..a99c658 100644 --- a/index.html +++ b/index.html @@ -10,13 +10,13 @@

    Ironhack News

    diff --git a/styles/style.css b/styles/style.css index 79babf7..3017ae1 100644 --- a/styles/style.css +++ b/styles/style.css @@ -98,7 +98,7 @@ nav img { width: 100%; display: flex; justify-content: flex-start; - background-color: blue + /* background-color: blue; */ } .navbar li { @@ -120,8 +120,6 @@ nav img { font-weight: bold; } - - /* Articles */ .main-article { margin: 20px; @@ -199,17 +197,36 @@ nav img { /* Write your CSS below */ @media (width < 480px) { + + nav { + display: flex; + justify-content: center; + align-items: center; +} + + .navbar { + display: none; + } + nav img { display: block; } - nav{ - display: flex; - justify-content: center; - align-items: center; + + nav img:hover { + border: 1px solid white; } - .navbar { - display: none; - /* height: 10px; */ + + nav:hover { + background-color: pink; + } + + nav:hover .navbar{ + display: block; + position: absolute; + background-color: white; + top: 100%; /* debajo del ícono */ + left: 0; + z-index: 999; } } From db01fc5863e04261d82f11061446589ff9e17e4a Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Tue, 22 Jul 2025 19:16:50 +0200 Subject: [PATCH 5/6] Final version. Iteration 2 for tablet corrected --- styles/style.css | 36 ++++++++++++------------------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/styles/style.css b/styles/style.css index 3017ae1..cdba337 100644 --- a/styles/style.css +++ b/styles/style.css @@ -197,12 +197,11 @@ nav img { /* Write your CSS below */ @media (width < 480px) { - nav { - display: flex; - justify-content: center; - align-items: center; -} + display: flex; + justify-content: center; + align-items: center; + } .navbar { display: none; @@ -211,23 +210,6 @@ nav img { nav img { display: block; } - - nav img:hover { - border: 1px solid white; - } - - nav:hover { - background-color: pink; - } - - nav:hover .navbar{ - display: block; - position: absolute; - background-color: white; - top: 100%; /* debajo del ícono */ - left: 0; - z-index: 999; - } } @media (width < 760px) { @@ -276,15 +258,21 @@ nav img { } @media (min-width: 760px) and (max-width: 1024px) { + .navbar { + width: 100%; flex-direction: row; - align-items: center; - justify-content: space-evenly; + justify-content: center; + } + .navbar li { + width: 100%; + align-self: center; } .articles-container { flex-wrap: wrap; justify-content: space-between; + align-items: center; gap: 20px; } From bb6d1842dae19db064e3f9b90296ccaedc301e8e Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Wed, 23 Jul 2025 09:17:52 +0200 Subject: [PATCH 6/6] hovering over the menu icon does open the menu --- styles/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index cdba337..d74e80e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -210,6 +210,14 @@ nav img { nav img { display: block; } + + nav:hover img { + display: none; + } + + nav:hover .navbar { + display: block; + } } @media (width < 760px) { @@ -258,7 +266,6 @@ nav img { } @media (min-width: 760px) and (max-width: 1024px) { - .navbar { width: 100%; flex-direction: row;