Metainformationen zur Seite
  •  

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

— entwicklung:html:gestaltung:farbige_kaesten_individuell [2021/07/25 11:47] (aktuell)
Christian Mayr angelegt
Zeile 1: Zeile 1:
 +====== Farbige Kästen, individuell ======
  
 +Mit individuell gestalteten farbigen Kästen kann man Informationen hervorheben oder Texte strukturieren.
 +Diese Kästen funktionieren [[Bootstrap]].
 +
 +===== Tippbox =====
 +pbox
 +
 +<html>
 +<!-- 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 -->
 +</html>
 +
 +<code>
 +<!-- 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 -->
 +</code>
 +
 +==== Denkbox ====
 +
 +<html>
 +<!-- 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 -->
 +</html>
 +
 +<code>
 +<!-- 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 -->
 + </code>
 +
 +==== Aufgabenbox ====
 +
 +<html>
 +
 +    <!-- 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 -->
 +</html>
 +
 +<code>
 +
 +    <!-- 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 -->
 +</code>
 +
 +==== Abhak-Box ====
 +
 +<html>
 + <!-- 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 -->
 +</html>
 +
 +<code>
 + <!-- 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 -->
 +</code>