來找設計師一起 side project，前後端 / UIUX 皆可ㄛ。配對單連結：
https://docs.google.com/spreadsheets/d/1-6YCUfqaB7dQLQa34pbuCHgYvXU3eYZ0dvDcPszhE4g/edit?usp=sharing

印度氣象局官網：https://mausam.imd.gov.in/#.

prototype 大家自己玩玩看，應該會每天更新ㄅ:
https://xd.adobe.com/view/bd7fd57a-8e2f-44b0-bc26-322e98708133-e82c/

今天要來處理互動式地圖，還有footer這兩個地方，今天公司沒啥事做，爽！

地圖互動

互動式地圖的部分，我會先準備素材，再加上 hover, toggle 等等的效果。

用鋼筆工具圈起來

用鋼筆工具將我想要顯示預報資訊的區域圈起來（雖然我不太確定這裡是不是新德里）

hover 效果

然後模擬出 hover 的效果。
將整個地圖變成一個 component ，然後在 hover 的時候，將地圖透明度降到 50%，並且加上紅色的顯示區域。

prototyping 軟體沒有辦法非常完整，就簡單的意思有到就好（唉因為我也算半個前端，別太費力弄原型細節，反正都是我要刻）。

toggle 效果

當 toogle 的時候，會切換成紅色的選取區域，可以視情況調整為「一整塊區域」還是「一個點」。

加上 color bar

最後加上Color bar，這一塊我還沒有做各點城市的天氣概況，這個偏細節，明天再慢慢弄。

footer - 產品

再來是 footer ，原本的 footer 資訊跟上面重複許多，所以我把第一欄整個刪掉，只留下二三四欄，並做資訊的整理。

原本長相

產品的部分有點看不太清楚原本是什麼樣子，不過看起來就是 4 項產品，加上不同的下載類別，有一個再加上影片。

考慮顏色

考慮了一下顏色，決定讓他們 hover 的時候提供一點顏色反饋，預設是白色。

一些樣式選擇

嘗試了一些排列樣式，這塊偏向 UI 面，我覺得不用太刁鑽，別太奇怪或難以辨識就好。

又嘗試了一些樣式，後來發現還是將他並排比較省空間，也比較彈性，最後就選擇了以下這個形式。

完成

中間是 justify-content: space-between ，這樣子文字不要太長都是可以容納的，若太長則變為兩行，高度變寬，也可以接受。

footer - contact

將 topbar 的社群連結全部下移，然後發現些神奇的事情。

連到免費的 wordPress 網站

footer contact 很有趣，點選最右邊很像 Messenger 的 icon ，他會連到一個免費 wordpress 網站...(網址為.wordpress.com 結尾)

https://imdweather1875.wordpress.com/
一個國家級的網站出現這個有點奇怪啊><

內容看起來是一些公佈事項和新聞，這一項其實我會 prefer 把它拿掉，塞到下面的 link，但最後還是整塊放到 footer 的 contact 裡面。

所以最後的長相大概是像這樣子，下一篇就來將完整的資訊放入。

大家要找 side project 可以自己填喔，
今天先這樣 拜拜～