diff options
| author | Ekaitz Zarraga <ekaitz@elenq.tech> | 2023-01-25 16:46:03 +0100 |
|---|---|---|
| committer | Ekaitz Zarraga <ekaitz@elenq.tech> | 2023-01-25 16:46:12 +0100 |
| commit | 8bd4ac668a1d7b3ed3bc99f41a28337a6cd31344 (patch) | |
| tree | 15afeca0f8251fc45b798dd126f040b84dabc66f | |
| parent | 49d09432980747f7713f1b5131b0573d15916920 (diff) | |
Use flexbox for boxes
| -rw-r--r-- | css/style.css | 12 | ||||
| -rw-r--r-- | 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; +} @@ -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> |