summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/style.css12
-rw-r--r--index.html27
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>