HTML-Prototype der OTH-Regensburg

<div class="o-container">
  <main class="o-container__content">
    <div class="frame-space-after-large" id="c1000">
      <h2>Grid 1 column</h2>
      <div class="o-grid">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c2000">
      <h2>Grid 1 column fullwidth</h2>
      <div class="o-grid">
        <div class="o-outbreak-fullwidth" style="background-color: #ED7366">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c2500">
      <h2>Grid 1 column outdent inverted</h2>
      <div class="o-grid">
        <div class="o-outbreak-inverted" style="background-color: #ED7366">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c3000">
      <h2>Grid 2 column</h2>
      <div class="o-grid o-grid-1-1@tablet">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c4000">
      <h2>Grid 2 column with horizontal indent (left & right)</h2>
      <div class="o-grid o-grid-1-1@tablet">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c5000">
      <h2>Grid 1/2 column</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-2@desktop o-grid--gap-sidebar@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c6000">
      <h2>Grid 1/2 column outdent left</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-2@desktop o-grid--gap-sidebar@desktop">
        <div class="o-outbreak-left" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c7000">
      <h2>Grid 1/2 column outdent right</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-2@desktop o-grid--gap-sidebar@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div class="o-outbreak-right" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c8000">
      <h2>Grid 2/1 column</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-2-1@desktop o-grid--gap-sidebar@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c9000">
      <h2>Grid 2/1 column outdent left</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-2-1@desktop o-grid--gap-sidebar@desktop">
        <div class="o-outbreak-left" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c10000">
      <h2>Grid 2/1 column outdent right</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-2-1@desktop o-grid--gap-sidebar@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div class="o-outbreak-right" style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c11000">
      <h2>Grid 3 column</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-1-1@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c12000">
      <h2>Grid 4 column</h2>
      <div class="o-grid o-grid-1-1@tablet o-grid-1-1-1-1@desktop">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
    <div class="frame-space-after-large" id="c13000">
      <h2>Grid 3-7 column</h2>
      <div class="o-grid o-grid-3-7@tablet">
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
        <div style="background-color: #ED7366">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi atque cumque dolorem eaque eveniet in, ipsum, magni minus, neque nostrum officiis quasi quidem ratione saepe sapiente sequi vel? Recusandae!</div>
      </div>
    </div>
  </main>
</div>