Farbige Kästen, individuell

Mit individuell gestalteten farbigen Kästen kann man Informationen hervorheben oder Texte strukturieren. Diese Kästen funktionieren Bootstrap.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<!-- Tippbox -->
    <p dir="ltr" style="text-align: left;"><br></p>
    <div class="container">
        <div style="position: relative; top: -30px; right: -15px; float: right;">
            <img src="https://moodle-files.alp.dillingen.de/LFO_MEBIS/imageassets/circleidea.svg" width="80px">
        </div>
        <div style="border-radius: 10px; background-color: #003C8120; padding: 20px; margin: 30px 0 20px 5px">
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et
                magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel
                eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo
                luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        </div>
    </div>
    <!-- Tippbox Ende -->

Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.

<!-- Denkbox -->
    <p dir="ltr" style="text-align: left;"><br></p>
    <div class="container">
        <div style="position: relative; top: -40px; right: 30px; float: left;">
            <img src="https://moodle-files.alp.dillingen.de/LFO_MEBIS/imageassets/circlethink.svg" width="80px">
        </div>
        <div style="border-radius: 10px; background-color: #FFD10030; padding: 20px; margin: 30px 0 20px 5px">
            <p>Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis
                parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna.
                Etiam porta sem malesuada magna mollis euismod.</p>
        </div>
    </div>
    <!-- Denkbox Ende -->
 

Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.

    <!-- Aufgabenbox -->
    <p dir="ltr" style="text-align: left;"><br></p>
    <div class="container">
        <div style="position: relative; top: -40px; right: 30px; float: left;">
            <img src="https://moodle-files.alp.dillingen.de/LFO_MEBIS/imageassets/circlepointer.svg" width="80px">
        </div>
        <div style="border-radius: 10px; background-color: #88cf4530; padding: 20px; margin: 30px 0 20px 5px">
            <p>Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis
                parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor
                ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna.
                Etiam porta sem malesuada magna mollis euismod.</p>
        </div>
    </div>
    <!-- Aufgabenbox Ende -->

Ich habe das Kapitel vollständig bearbeitet.

 <!-- Abhakbox -->

    <div class="container">
        <div style="position: relative; top: -50px; right: 0px; float: right;">
            <img src="https://moodle-files.alp.dillingen.de/LFO_MEBIS/imageassets/check_arrow.svg" width="160px">
        </div>
        <div style="border-radius: 10px; background-color: #4bba7730; padding: 20px; margin: 60px 80px 20px 5px">
            <p>Ich habe das Kapitel vollständig bearbeitet.</p>
        </div>
    </div>

    <!-- Abhakbox Ende -->