W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>CSS Basic Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8" />
    <style>
        .section1 {
            margin:40px 10px;
            background-repeat: no-repeat;
            background-image:url("resources/images/flowers-hibiscus.png");
            background-position: center;
            min-height:240px;
            min-width:300px;
        }
        .section2 {
            margin:40px 10px;
            background-repeat: no-repeat;
            background-position: center;
            background-image:url("resources/images/flowers-tulip.png");
            min-height:240px;
            min-width:300px;
        }
        h2{
        color: #106070;
        }
        p {
           text-indent: 30px;
           text-align:justify;
        }
    </style>
</head>
<body>
    <h3>CSS Basic Example</h3>
    <section class="section1">
        <h2>Hibiscus Flower</h2>
        <p>Hibiscus is a large species of flowering plant in the mallow family, known for its large, 
            bright, trumpet-shaped flowers in vibrant colors such as red, pink, yellow, and white, 
            with popular types including tropical and hardy varieties.</p>
    </section>

<section class="section2">
        <h2>Tulip Flower</h2>
        <p>Tulips are spring flowers that belong to the lily family. Tulips originally come from Central 
            Asia and typically have two to six thick, bluish-green leaves and large, cup-shaped flowers 
            with three petals and three sepals.</p>
    </section>
</body>
</html>