79 lines
1.3 KiB
HTML
79 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
font-size: xx-large;
|
|
width: 100%;
|
|
height: 500px;
|
|
background: lightblue;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
}
|
|
#time, #current-temp, #lows, #highs {
|
|
background: red;
|
|
position: absolute;
|
|
}
|
|
#time {
|
|
left: 40px;
|
|
top: 40px;
|
|
}
|
|
#current-temp {
|
|
right: 40px;
|
|
top: 40px;
|
|
background: red;
|
|
}
|
|
#lows {
|
|
bottom: 40px;
|
|
left: 40px;
|
|
}
|
|
#highs {
|
|
bottom: 40px;
|
|
right: 40px;
|
|
}
|
|
|
|
#top-alert {
|
|
background: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div id="time">
|
|
10:04 AM
|
|
</div>
|
|
<div id="current-temp">
|
|
big 50F
|
|
</div>
|
|
<div id="lows">
|
|
low of 20F
|
|
</div>
|
|
<div id="highs">
|
|
high of 900F
|
|
</div>
|
|
<div id="top-alert">
|
|
Happy spring!
|
|
</div>
|
|
<div id="second-alert">
|
|
Today is a good day to start planting!
|
|
</div>
|
|
<div>
|
|
There's a frost coming up, probably a long one. It might a good time to do final harvest!
|
|
</div>
|
|
<div>
|
|
Monday is probably going to be the last frost. Get ready to plant!
|
|
</div>
|
|
<div>
|
|
Very high chance of rain today. You won't need to water.
|
|
</div>
|
|
<div>
|
|
Tonight it will go down to 20F. That's below freezing.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |