Wether

<style>
.wether_box {
    min-height: 100px;
    background: #35394b;
    float: left;
    width: 100%;
    padding: 10px;
}
.title_area {
    float: left;
    width: 100%;
    border-bottom: 1px #fff solid;
}
span.ttl {
    width: 100%;
    float: left;
    padding: 10px 0px;
    font-weight: bold;
}
span.left_span {
    float: left;
    width: 50%;
    color: #909192;
}
span.right_span {
    float: right;
    width: 50%;
    color: #dda726;
    text-align: right;
}
.foot_wthr {
    float: left;
    width: 100%;
    text-align: left;
}
span.report_wethr {
    font-size: 25px;
    font-weight: bold;
}
img {
    margin: auto;
    display: inline;
}

</style

<?php

$url="http://apidev.accuweather.com/currentconditions/v1/227342.json?language=en&apikey=hoArfRosT1215";
$json=file_get_contents($url);
$data=json_decode($json,true);
$wthr=$data[0]['Temperature']['Metric']['Value'];
$imgid=$data[0]['WeatherIcon'];
$text=$data[0]['WeatherText'];
$image='https://apidev.accuweather.com/developers/Media/Default/WeatherIcons/'.$imgid.'-s.png';

?>



<div class="wether_box">
<div class="title_area">
<span class="ttl"> WEATHER</span>
<span class="left_span">Beirut</span>
<span class="right_span">Beirut</span>
</div>
<div class="foot_wthr">
<img src="https://apidev.accuweather.com/developers/Media/Default/WeatherIcons/16-s.png"><span class="report_wethr">12.2°C</span>
</div>
</div>