diff --git a/index.html b/index.html index 1b8846b..26a5111 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@

Ironhack News

  • Tech
  • Sports
  • + Menu diff --git a/styles/style.css b/styles/style.css index 9571ab1..0b39a60 100644 --- a/styles/style.css +++ b/styles/style.css @@ -177,3 +177,104 @@ header { } /* Write your CSS below */ + +@media screen and (max-width: 760px) { + .navbar { + flex-direction: column; + align-items: center; + } + + .navbar li { + width: 100%; + border-right: none; + border-bottom: 1px solid #ffffff; + } + + .navbar li:last-child { + border-bottom: none; + } + + .main-article { + flex-direction: column; + margin: 10px; + padding: 10px; + } + + .main-article .image, + .main-article .content { + width: 100%; + padding: 0; + } + + .articles-container { + flex-direction: column; + align-items: center; + padding: 10px; + } + + .article { + width: 100%; + margin-bottom: 20px; + } +} + + +@media screen and (min-width: 761px) and (max-width: 1024px) { + .navbar { + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .navbar li { + width: 120px; + border-right: 1px solid #ffffff; + border-bottom: none; + } + + .navbar li:last-child { + border-right: none; + } + + .main-article { + flex-direction: column; + margin: 15px; + padding: 15px; + } + + .main-article .image, + .main-article .content { + width: 100%; + padding: 0; + } + + .articles-container { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + padding: 15px; + } + + .article { + width: 48%; + margin-bottom: 15px; + } +} + +.menu-icon { + display: none; + width: 30px; + height: 30px; + cursor: pointer; +} + +@media screen and (max-width: 760px) { + .navbar { + display: none; + } + + .menu-icon { + display: block; + margin: 10px auto; + } +}