adding weather snippet to weather component

closes #157

added the following code to weather.component.html & weather.component.css

HTML Code:

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 col-md-4 col-sm-12 col-xs-12">
            <div class="card p-4">
                <div class="d-flex">
                    <h6 class="flex-grow-1">London</h6>
                    <h6>16:08</h6>
                </div>
                <div class="d-flex flex-column temp mt-5 mb-3">
                    <h1 class="mb-0 font-weight-bold" id="heading"> 13° C </h1> <span class="small grey">Stormy</span>
                </div>
                <div class="d-flex">
                    <div class="temp-details flex-grow-1">
                        <p class="my-1"> <img src="https://i.imgur.com/B9kqOzp.png" height="17px"> <span> 40 km/h </span> </p>
                        <p class="my-1"> <i class="fa fa-tint mr-2" aria-hidden="true"></i> <span> 84% </span> </p>
                        <p class="my-1"> <img src="https://i.imgur.com/wGSJ8C5.png" height="17px"> <span> 0.2h </span> </p>
                    </div>
                    <div> <img src="https://i.imgur.com/Qw7npIg.png" width="100px"> </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

html,
body {
    height: 100%
}

* {
    padding: 0px;
    margin: 0px
}

body {
    background-color: #a5a5b1;
    display: grid;
    place-items: center
}

.card {
    background-color: #ffffff;
    border-radius: 50px;
    color: #6f707d;
    font-family: 'Marcellus', serif
}

#heading {
    font-size: 55px;
    color: #2b304d
}

.temp {
    place-items: center
}

.temp-details>p>span,
.grey {
    color: #a3acc1;
    font-size: 12px
}

.fa {
    color: #a5a5b1
}

*:focus {
    outline: none
}

barrycumbie / animated-octo-adventure

adding weather snippet to weather component #164

Test