diff --git a/images/menu-bar.png b/images/menu-bar.png
new file mode 100644
index 0000000..1b81866
Binary files /dev/null and b/images/menu-bar.png differ
diff --git a/images/menu.png b/images/menu.png
new file mode 100644
index 0000000..c8f355e
Binary files /dev/null and b/images/menu.png differ
diff --git a/index.html b/index.html
index 1b8846b..ba671e3 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
Ironhack News
+
@@ -16,6 +17,10 @@ Ironhack News
Tech
Sports
+
+
@@ -71,7 +76,6 @@ Article 3
-
diff --git a/styles/responsive.css b/styles/responsive.css
new file mode 100644
index 0000000..6d6b188
--- /dev/null
+++ b/styles/responsive.css
@@ -0,0 +1,147 @@
+@media screen and (max-width: 480px) {
+ .navbar {
+ display: none;
+ }
+ .newspaper-name {
+ border-bottom: none;
+ }
+
+ .mob-nav img {
+ display: block;
+ width: 32px;
+ margin: 0 auto;
+ }
+}
+
+@media screen and (min-width: 481px) and (max-width: 769px) {
+ .navbar {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .mob-nav img {
+ display: none;
+ }
+}
+
+@media screen and (min-width: 770px) {
+ .navbar {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ }
+
+ .mob-nav img {
+ display: none;
+ }
+}
+
+.main-article {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 40px;
+ align-items: flex-start;
+}
+
+.main-article .image img {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.main-article .image {
+ flex: 1;
+}
+.main-article .content {
+ flex: 1.5;
+}
+
+@media (max-width: 992px) {
+ .main-article {
+ flex-direction: column;
+ }
+ .main-article .image,
+ .main-article .content {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ .main-article {
+ gap: 10px;
+ }
+
+ .main-article .content h2 {
+ font-size: 1.4rem;
+ }
+
+ .main-article .content p {
+ font-size: 0.95rem;
+ line-height: 1.5;
+ }
+
+ .main-article .btn {
+ width: 100%;
+ }
+}
+
+@media screen and (min-width: 480px) and (max-width: 768px) {
+ .navbar {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .navbar li {
+ border-bottom: 1px solid white;
+ width: 100%;
+ border-right: none;
+ }
+
+ .mob-nav img {
+ display: none;
+ }
+}
+
+/* */
+
+@media screen and (min-width: 770px) {
+ .article {
+ width: 29%;
+ }
+}
+
+@media screen and (min-width: 481px) and (max-width: 769px) {
+ .article {
+ width: 48%;
+ margin-bottom: 20px;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .articles-container {
+ flex-direction: column;
+ padding: 10px;
+ }
+
+ .article {
+ width: 100%;
+ margin-bottom: 15px;
+ padding: 15px;
+ }
+
+ .article h2 {
+ font-size: 1.2rem;
+ }
+
+ .article p {
+ font-size: 0.9rem;
+ }
+
+ .btn {
+ width: 100%;
+ padding: 12px;
+ }
+}
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..8bb19b3 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 */
@@ -80,7 +90,7 @@ header {
list-style-type: none;
width: 100%;
display: flex;
- justify-content: flex-start;
+ justify-content: space-evenly;
}
.navbar li {
@@ -175,5 +185,5 @@ header {
.btn-blue {
background-color: #007bff;
}
-
+
/* Write your CSS below */