<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article</title>
</head>
<body>
    <article class="day-forecast">
        <h1>Weather forecast for India</h1>
    </article>
    <article class="forecast">
        <h2> 29th Dec 2021</h2>
        <p> Cloudy</p>
    </article>

    <article class="forecast">
        <h2> 30th Dec 2021</h2>
        <p> Sunny</p>
    </article>

    <article class="forecast">
        <h2> 31st Dec 2021</h2>
        <p> Cloudy</p>
    </article>

    <article class="forecast">
        <h2> 1st Jan 2022</h2>
        <p> Cloudy</p>
    </article>

    <article class="forecast">
        <h2> 2nd Jan 2022</h2>
        <p> Cloudy</p>
    </article>

</body>
</html>
.day-forecast{
    margin: 0;
    padding: .3rem;
    background-color: aqua;
    font:1rem 'Fira Sans' , sans-serif;

}

.day-forecast>h1,
.forecast {
    margin: 05rem;
    padding: .3rem;
    font-size: 1.2rem;
}

.forecast{
    background: right/contain content-box border-box no-repeat url('/media/examples/rain.svg') white;
}

.forecast>h2,
.day-forecast>p{
    margin: .2rem;
    font-size: 1rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.