-
-
Save matthieua/7947403b259cf9ecd1b73da0298edfad to your computer and use it in GitHub Desktop.
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<title>Weather App</title> | |
<style> | |
h1, | |
h2, | |
h3 { | |
text-align: center; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
h1 { | |
color: #1a64d6; | |
font-size: 34px; | |
line-height: 48px; | |
margin: 0; | |
} | |
h2 { | |
margin: 0; | |
font-size: 34px; | |
line-height: 48px; | |
font-weight: 400; | |
} | |
ul { | |
padding: 0; | |
} | |
li { | |
list-style: none; | |
text-align: center; | |
padding: 10px 0; | |
border-radius: 10px; | |
transition: all 200ms ease-in-out; | |
max-width: 400px; | |
margin: 0 auto; | |
} | |
li:hover { | |
background: #fffbef; | |
} | |
p { | |
font-size: 18px; | |
opacity: 0.7; | |
text-align: center; | |
font-family: monospace; | |
} | |
button { | |
display: block; | |
margin: 20px auto; | |
border: 1px solid #1a64d6; | |
background: #1a64d6; | |
color: #fff; | |
font-size: 16px; | |
line-height: 22px; | |
padding: 16px 24px; | |
border-radius: 30px; | |
transition: all 200ms ease; | |
box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0; | |
cursor: pointer; | |
} | |
button:hover { | |
background: white; | |
color: #1a64d6; | |
border: 1px solid #1a64d6; | |
} | |
</style> | |
</head> | |
<body> | |
<h1> | |
🌤 | |
<br /> | |
Currently 21° in Tokyo | |
</h1> | |
<h2>13° / <strong>23°</strong></h2> | |
<ul> | |
<li> | |
<h3> | |
🌧Tomorrow | |
</h3> | |
<p>10° / <strong>22°</strong></p> | |
</li> | |
<li> | |
<h3> | |
🌥 Saturday | |
</h3> | |
<p>15° / <strong>17°</strong></p> | |
</li> | |
<li> | |
<h3> | |
☀️ Sunday | |
</h3> | |
<p>25° / <strong>28°</strong></p> | |
</li> | |
</ul> | |
<button> | |
Change city | |
</button> | |
<p> | |
Coded by Matt Delac | |
</p> | |
</body> | |
</html> |
Originally I was going to make a div and span of everything, thank god I inspected Matt's code while doing mine because I definitely would've over-engineered 😅 Can't wait for the next lesson!
Shortcut key to open emoji picker on vs code: "windows" + "."
thank you so much for this opportunity matt, although i used span a lot and i couldnt get the pink box hovering i'm grateful for what i learnt thisweek
My weather page did not come out the exact same as Matt's but it looks so good. I think that I coded the emojis incorrectly. Here is my solution.
<style> body { font-size: 20px; display: block; margin: 0 auto; text-align: center; } ``` h1 { color: blue; text-align: center; } h2 { font-weight: normal; } button { color: white; background-color: blue; border: 10px solid blue; border-radius: 60px; display: block; margin: 0 auto; margin-bottom: 50px; transition: all 150ms ease-in-out; } button:hover { cursor: pointer; background: white; color: blue; } p:hover { cursor: pointer; background: bisque; } ``` </style> 🌤Currently 21 ° in Tokyo
13 °/ 23°
** 🌧 Tomorrow **
10 °/ ** 22°**** 🌥 Saturday **
15 °/ 17°** ☀ Sunday **
25 °/ 28°Change city
Coded By Tiara Goodman
where did you get colorful emoji, mine are black!
I ended up with 112 lines but in comparison, my code is a bit repetitive, but it is part of learning!
It was bit challenging as a beginner, but I tried and I'm proud of myself for that
quite challenging but managed after a second attempt
It was a really nice first challenge. There are some optimising opportunities in mine which I will definitely take away.
This was challenging but fun. I enjoyed every bit of it. especially trying to re-create
This one was challenging for me. Especially making the emojis colored was impossible. BTW, The way I did all the homework (the code) didn't match even once🤭 It is a wonderful progress though🙌 Thanks, Matt!
Yoh really struggle with this one I just hope its OKAY
I Enjoyed this first challenge. Got lost for a bit but worked out in the end.
I struggled to add the hovering shadow effect on my first weeks Homework and the emojis gave me a hard time but other than that, I think it was pretty decent.
What a fun project. my original code l failed to put the weather symbols, l didn't even think of using emojis and spent a whole 3 hours!!! Re did it in 30 minutes.
This project was fun! the Emoji stressed me out a bit but once I got that sorted it was quite smooth. Thanks Matt!
Hi, I still cannot get the emoji to work on my code. Can someone please help me understand what I need to do to get my emoji up and running. Thank you!
I had fun with the week 1 homework though I got confused at some point but it still came out well
Week 2 was fun. I think I am getting better
I hope I pass the homework. I struggled with it. I am sure there are a few things I did differently
i struggled with the shading,but i really had fun and it has been a long and exciting week for me.
This time it was more difficult than always. I will train again after this task. It's really not easy to connect everything. But thanks Matt! It's fun! 😊
🌤
Currently 21° in Nigeria
13° / 23°
🌧Tomorrow
10° / 22°
🌥 Saturday
15° / 17°
☀️ Sunday
25° / 28°
Change city
Coded by Mabel Agada E.