-
-
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> |
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! 😊
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!