Browse Source

combine sections

master
Stephanie Gredell 3 weeks ago
parent
commit
6214d04f16
  1. 13
      index.html
  2. 27
      style.css

13
index.html

@ -12,12 +12,6 @@
<body> <body>
<div class="dashboard"> <div class="dashboard">
<section class="game_section weather_section">
<h2 class="section_title">Weather</h2>
<img class="weather_icon" src="sunny.png" alt="Weather">
<p class="weather_label" data-bind="weather">sunny</p>
</section>
<section class="game_section"> <section class="game_section">
<h2 class="section_title">Supplies</h2> <h2 class="section_title">Supplies</h2>
@ -75,9 +69,14 @@
</section> </section>
<section class="game_section day_section"> <section class="game_section day_section">
<h2 class="section_title">Game</h2> <div class="weather_display">
<img class="weather_icon" src="sunny.png" alt="Weather">
<p class="weather_label" data-bind="weather">sunny</p>
</div>
<div class="game_stats">
<p class="section_hint">Cups sold: <span data-bind="cups_sold">0</span></p> <p class="section_hint">Cups sold: <span data-bind="cups_sold">0</span></p>
<p class="section_hint">Earnings: <span data-bind="total_earnings" data-format="currency">$0.00</span></p> <p class="section_hint">Earnings: <span data-bind="total_earnings" data-format="currency">$0.00</span></p>
</div>
<button class="start_day_btn">Start Day</button> <button class="start_day_btn">Start Day</button>
</section> </section>
</div> </div>

27
style.css

@ -54,28 +54,35 @@ body {
margin-top: auto; margin-top: auto;
} }
/* Weather Section */ /* Weather display in game section */
.weather_section { .weather_display {
text-align: center; display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 8px;
} }
.weather_icon { .weather_icon {
width: 80px; width: 48px;
height: 80px; height: 48px;
object-fit: contain; object-fit: contain;
margin: 8px auto;
display: block;
} }
.weather_label { .weather_label {
font-family: 'Fredoka', sans-serif; font-family: 'Fredoka', sans-serif;
font-size: 18px; font-size: 20px;
font-weight: 500; font-weight: 600;
color: #5C4632; color: #5C4632;
text-transform: capitalize; text-transform: capitalize;
margin: 0; margin: 0;
} }
.game_stats {
text-align: center;
margin-bottom: 8px;
}
.game_list { .game_list {
list-style: none; list-style: none;
margin: 8px 0; margin: 8px 0;
@ -204,7 +211,7 @@ body {
} }
.game_section .section_hint { .game_section .section_hint {
font-size: 13px; font-size: 15px;
margin: 2px 0 8px; margin: 2px 0 8px;
} }

Loading…
Cancel
Save