css charts

PHOTO EMBED

Wed Sep 18 2024 08:14:07 GMT+0000 (Coordinated Universal Time)

Saved by @osama911

<!-- 1 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wedding Event</title>
    <style>
        body {
            margin: 0;
            font-family: sans-serif;
        }

        h2 {
            text-align: center;
            padding: 20px 0;
        }

        #container {
            position: relative;
        }

        .image {
            width: 100%;
        }

        #overlay {
            overflow: hidden;
            transition: 1s ease;
            width: 0px;
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.7);
        }

        #text {
            text-align: justify;
            transform: translate(-270px, -100px);
            position: absolute;
            top: 0;
            left: 0;
            padding: 20px;
            color: white;
        }

        #container:hover #overlay {
            width: 100%;
        }
    </style>
</head>
<body>
    <h2>Wedding Event</h2>
    <div id="container">
        <img src="image.jpg" alt="Wedding" class="image">
        <div id="overlay">
            <div id="text">
                <p>A wedding is a ceremony where two people or a couple are united in marriage. Wedding traditions and customs vary greatly between cultures, ethnic groups, religions, countries, and social classes. Most wedding ceremonies involve an exchange of marriage vows by the couple, presentation of a gift (offering, ring(s), symbolic item, flowers, money), and a public proclamation of marriage by an authority figure or celebrant. Special wedding garments are often worn, and the ceremony is sometimes followed by a wedding reception. Music, poetry, prayers or readings from religious texts or literature are also commonly incorporated into the ceremony.</p>
            </div>
        </div>
    </div>
</body>
</html>


<!-- 2 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Events & Promotions</title>
    <style>
        body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h2 {
    text-align: center;
    margin: 20px 0;
}

#title {
    margin: 20px;
    padding: 10px;
    background-color: #ddd;
    text-align: center;
    transform: rotate(-90deg);
    transform-origin: top left;
    display: inline-block;
}

.divContent {
    margin: 20px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

        </style>
</head>
<body>
    <h2>EVENTS & PROMOTIONS</h2>

    <div id="title">Wedding Event</div>
    <div class="divContent">
        We intricately craft each and every proceeding of your wedding, be it a Christian nuptials or a Hindu vivaha or a Muslim nikkah. Our experts have hands-on experience in bringing your dreams to life, right from wedding cards design till the return gifts to the guests. Wedding is your day to indulge in pure love and happiness. Don't make it the day for your peak of tensions and hassles. We, as the leading wedding planners in the town, listen to and understand your budget and expectations for your princess's wedding.
    </div>

    <div id="title">Corporate Event</div>
    <div class="divContent">
        The first impression is the best impression, they say. We toil to bring that effect to your event among the public and to trend the industry. Be it corporate meetings, business seminars, award presentations or trade shows, we enrich it with fresh thinking, energetic personality and wealth of experience that we possess. You would experience the finest showcase of the event with us, to meet the needs of your esteemed clients.
    </div>

    <div id="title">Birthday Party</div>
    <div class="divContent">
        Planning a birthday party? Whether a wild party with friends or a crazy party for the kids, Most importantly, Purple7 helps you gather that ever-important catering services will be arranged as per your requirements and budget. Engage your guests in a variety of events. Host the party with a lively anchor. And we provide with many more options to make your birthday 'the talk of the town'.
    </div>
</body>
</html>
content_copyCOPY