Scritpt clima tempo com css e html layout

Montar layout de clima tempo responsivo pois vai ficar em uma TV de 50 polegadas.

Resultado final que precisa ficar : http://prntscr.com/jz4iwv

Código base - Esse código já puxa as informações do clima tempo e não sei montar o layout em cima dele.

<!--Weather Widget courtesy of www.tititudorancea.com-->
<style type="text/css">.TTWS {font:60px Verdana, Arial, Helvetica, sans-serif;color:white}
.TTWST {font:bold 0px Verdana, Arial, Helvetica, sans-serif; margin-bottom:6px}
.TTWSB {line-height:130%;clear:both; margin-bottom:42px}
.mti {float:left; margin-right:8px; width:86px; height:77px; background-color:0; background-repeat:no-repeat}
.mtxp {text-align:right;margin:0;padding:0;font-style:italic;font-size:42px}
</style>
<div style="position:relative;background-color:0">
<div id="w_div">&nbsp;</div>
<script type="text/javascript" src="https://tools.tititudorancea.com/weather.js?place=porto_alegre_brazil&lang=pt&big=no&fcstlink=no"></script>

<div align="center" style="font:60px Arial, sans-serif;color:#000000; margin-top:16px">&nbsp;</div>
</div>
<!--end of Weather Widget-->