From 8bd4ac668a1d7b3ed3bc99f41a28337a6cd31344 Mon Sep 17 00:00:00 2001
From: Ekaitz Zarraga <ekaitz@elenq.tech>
Date: Wed, 25 Jan 2023 16:46:03 +0100
Subject: Use flexbox for boxes

---
 css/style.css | 12 ++++++++++++
 index.html    | 27 +++++++++++++++++++++------
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index 50720ae..1fed4ea 100644
--- a/css/style.css
+++ b/css/style.css
@@ -24,3 +24,15 @@ body{
   margin: 0.2rem;
   font-size: 1rem;
 }
+
+.day-forecast{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.day-forecast-text{
+  min-width: 200px;
+}
+.day-forecast-image{
+  padding: 1em;
+}
diff --git a/index.html b/index.html
index cbcd508..5308d31 100644
--- a/index.html
+++ b/index.html
@@ -36,16 +36,31 @@
         <article class="forecast">
             <h1>Weather forecast for Seattle</h1>
             <article class="day-forecast">
-                <h2>03 March 2018</h2>
-                <p>Rain.</p>
+                <div class="day-forecast-text">
+                    <h2>03 March 2018</h2>
+                    <p>Heavy rain.</p>
+                </div>
+                <div class="day-forecast-image">
+                    <img src="img/lluvia.png"/>
+                </div>
             </article>
             <article class="day-forecast">
-                <h2>04 March 2018</h2>
-                <p>Periods of rain.</p>
+                <div class="day-forecast-text">
+                    <h2>04 March 2018</h2>
+                    <p>Heavy rain.</p>
+                </div>
+                <div class="day-forecast-image">
+                    <img src="img/lluvia.png"/>
+                </div>
             </article>
             <article class="day-forecast">
-                <h2>05 March 2018</h2>
-                <p>Heavy rain.</p>
+                <div class="day-forecast-text">
+                    <h2>05 March 2018</h2>
+                    <p>Heavy rain.</p>
+                </div>
+                <div class="day-forecast-image">
+                    <img src="img/lluvia.png"/>
+                </div>
             </article>
         </article>
 
-- 
cgit v1.2.3