From a5a9881797cd78130e2ffbde49897be79159762f Mon Sep 17 00:00:00 2001 From: Alvaro Date: Mon, 1 Sep 2025 16:41:35 +0200 Subject: [PATCH] solve lab --- index.html | 131 +++++++++----------- styles/style.css | 305 +++++++++++++++++++++++++++-------------------- 2 files changed, 236 insertions(+), 200 deletions(-) diff --git a/index.html b/index.html index 1b8846b..bbf0df1 100644 --- a/index.html +++ b/index.html @@ -1,80 +1,67 @@ - - - - Ironhack News - - - -
-

Ironhack News

- -
+ + + + Ironhack News + + + -
-
-
- Article 1 Image -
-
-

Main Article

-

- This is the first article's content. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. Morbi ac lacinia nibh, nec faucibus - enim. Nullam quis lorem posuere, hendrerit tellus eget, tincidunt - ipsum. Nam nulla tortor, elementum in elit nec, fermentum dignissim - sapien. Sed a mattis nisi, sit amet dignissim elit. Sed finibus eros - sit amet ipsum scelerisque interdum. Curabitur justo nibh, -

- -
+
+

Ironhack News

+ + menu +
+ +
+
+
+ Main article +
+
+

Main Article

+

This is the first article’s content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac lacus nibh, nec faucibus enim. Nullam quis lorem posuere, hendrerit tellus eget, tincidunt ipsum. Nam luctus tortor, elementum in elit nec, fermentum dignissim sapien.

+ Read more +
+
+ +
+
+ Article 1 +

Article 1

+

This is the second article content. Lorem ipsum dolor sit amet…

+ Read more
-
-
- Article 1 Image -

Article 1

-

- This is the second article's content. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. -

- -
+
+ Article 2 +

Article 2

+

This is the third article content. Lorem ipsum dolor sit amet…

+ Read more +
-
- Article 2 Image -

Article 2

-

- This is the third article's content. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. -

- -
+
+ Article 3 +

Article 3

+

This is the fourth article content. Lorem ipsum dolor sit amet…

+ Read more +
+
+
-
- Article 3 Image -

Article 3

-

- This is the third article's content. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. -

- -
- -
+ - - - - - - - +
+ + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 9571ab1..3bd8fea 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,179 +1,228 @@ -/* CSS RESET - do not remove */ -/* Reset default browser styles and provide a consistent starting point */ -html { - box-sizing: border-box; - font-size: 16px; -} - -*, *:before, *:after { - box-sizing: inherit; -} - -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; - top: 0; - right: 0; - background-color: #ee4545; - color: #fff; - font-weight: 500; - padding: 5px 8px; - font-size: 14px; + box-sizing: border-box; } - -/* STYLES */ -/* Fonts */ body { - font-family: "Helvetica", sans-serif; + font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; + line-height: 1.5; + background: #f5f5f5; + color: #333; } -/* Basic styles */ -main { - max-width: 1000px; - margin: 0 auto; - padding: 10px 20px; - display: flex; - flex-direction: column; - align-items: center; +img { + max-width: 100%; + height: auto; + display: block; } -/* Font sizes */ -p { - font-size: 1em; +a { + text-decoration: none; + color: inherit; } -h1 { - font-size: 3em; +.btn { + display: inline-block; + padding: 10px 14px; + border-radius: 6px; + background: #2d6cdf; + color: #fff; + text-decoration: none; + margin-top: 10px; } -h2 { - font-size: 2em; - margin-bottom: 1em; -} -h3 { - font-size: 1.5em; -} - -/* Header and Navbar */ -header { - background-color: #333; +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background: #222; color: #fff; - text-align: center; + padding: 1rem 20px; } -.newspaper-name { - font-size: 24px; - padding: 10px; - border-bottom: 1px solid white; +.brand { + font-weight: 700; + padding: 0; } -.navbar { - list-style-type: none; - width: 100%; +.nav-list { display: flex; - justify-content: flex-start; + list-style: none; + gap: 2rem; } -.navbar li { - width: 130px; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - border-right: 1px solid #ffffff; +.nav-list li a { + padding: 12px 0; + color: #fff; + background: transparent; + border: none; } -.navbar li:last-child { - border-right: none; +.menu-icon { + display: none; } -.navbar a { - text-decoration: none; - color: #fff; - font-weight: bold; +main { + max-width: 1100px; + margin: 20px auto; + padding: 0 20px; } -/* Articles */ .main-article { - margin: 20px; - padding: 20px; - border: 1px solid #ccc; - display: flex; + background: #fff; + border: 1px solid #e6e6e6; + border-radius: 8px; + padding: 16px; + box-shadow: 0 2px 6px rgba(0,0,0,.06); + margin-bottom: 20px; } .main-article img { - width: 100%; - height: auto; + border-radius: 6px; + margin-bottom: 15px; } -.main-article .image { - width: 50%; - padding: 0 20px; - height: auto; +.grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; } -.main-article .content { - width: 50%; - padding: 0 20px; - height: auto; +.card { + background: #fff; + border: 1px solid #e6e6e6; + border-radius: 8px; + padding: 16px; + box-shadow: 0 2px 6px rgba(0,0,0,.06); } -.articles-container { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - flex-direction: row; - align-items: center; - padding: 20px; +.card img { + border-radius: 6px; + margin-bottom: 10px; } -.article { - width: 29%; - padding: 20px; - border: 1px solid #ccc; +.card h3 { + margin: 12px 0 6px; } -.article img { - width: 100%; - height: auto; +.footer { + background: #222; + color: #fff; + text-align: center; + padding: 15px; + margin-top: 40px; } -.article h2 { - font-size: 20px; - margin-top: 10px; -} -.article p { - margin-top: 10px; -} -.btn { - background-color: #333; - color: #fff; - padding: 10px 20px; - border: none; - border-radius: 5px; - font-size: 1em; - font-weight: bold; - text-decoration: none; - margin-top: 30px; + +@media (max-width: 1024px) { + main { + max-width: 900px; + } + + + .main-article { + display: flex; + align-items: center; + gap: 20px; + } + + .main-article .image { + flex: 1; + } + + .main-article .content { + flex: 1; + } + + .main-article img { + margin-bottom: 0; + } + + .grid { + grid-template-columns: repeat(2, 1fr); + } } -.btn:hover { - background-color: #555; + + + +@media (max-width: 760px) { + main { + max-width: 520px; + } + + + .navbar { + flex-direction: column; + align-items: flex-start; + padding: 12px 16px; + } + + .nav { + width: 100%; + } + + .nav-list { + flex-direction: column; + width: 100%; + gap: 0; + } + + .nav-list li { + list-style: none; + } + + .nav-list li a { + display: block; + width: 100%; + padding: 12px 16px; + background: #333; + border-top: 1px solid #555; + } + + + .main-article { + flex-direction: column; + align-items: flex-start; + } + + + .grid { + grid-template-columns: 1fr; + } } -.btn-blue { - background-color: #007bff; + + + + +@media (max-width: 480px) { + .navbar { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .nav { + display: none; + } + + .menu-icon { + display: block; + width: 24px; + height: auto; + cursor: pointer; + } + + .brand { + padding-left: 0; + } } - -/* Write your CSS below */ + + + +#vw-badge{position:fixed;top:6px;right:6px;background:#ff4971;color:#fff;font:12px/1.2 Arial,sans-serif;padding:4px 8px;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.25);z-index:9999} \ No newline at end of file