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
+
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;
+ }
+}