Metainformationen zur Seite
  •  

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung 		Vorhergehende Überarbeitung
farbige_kaesten_individuell [2021/07/25 09:00]
Christian Mayr 		— (aktuell)
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 == 
- 
-<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>