<! doctype html > < html lang = " en " > < head > < meta charset = " UTF-8 " /> < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " /> < title > Weather App < /title > < /head > < style > body { display : flex ; justify - content : center ; align - items : center ; margin : 0 ; height : 100 vh ; background - color : lightblue ; font - family : Arial ; } # container { border : 1 px solid black ; display : flex ; flex - direction : column ; justify - content : center ; align - items : center ; padding : 30 px ; border - radius : 10 px ; background - color : white ; /* text-align: center; */ box - shadow : 0 px 0 px 10 px gray ; } # input_btn { justify - content : center ; align - items : center ; padding : 20 px ; margin : 20 px ; width : 250 px ; font - size : 16 px ; } button { padding : 10 px 20 px ; font - size : 16 px ; cursor : pointer ; border : none ; background - color : blue ; color : white ; border - radius : 5 px ; }…