diff options
| -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> |