feat: Add content for components page
- New elements in sections part - Reindent
This commit is contained in:
parent
c98ebb44ca
commit
4d00d34d63
3 changed files with 461 additions and 452 deletions
|
|
@ -15,7 +15,7 @@ tags:
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<div id="begin" class="demo__intro">
|
<div class="demo__intro">
|
||||||
Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
|
Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
|
||||||
<article>
|
<article>
|
||||||
<p>Es wirken nur die Eigenschaften des
|
<p>Es wirken nur die Eigenschaften des
|
||||||
|
|
@ -243,7 +243,7 @@ tags:
|
||||||
<p>
|
<p>
|
||||||
<a class="a_button_text" href="#textlevel">↥</a>
|
<a class="a_button_text" href="#textlevel">↥</a>
|
||||||
(Zum Anfang des Abschnitts springen)
|
(Zum Anfang des Abschnitts springen)
|
||||||
<a class="a_button_text" href="#begin">⇫</a>
|
<a class="a_button_text" href="#">⇫</a>
|
||||||
(Zum Anfang der Seite springen)</p>
|
(Zum Anfang der Seite springen)</p>
|
||||||
</nav>
|
</nav>
|
||||||
<nav class="nav_center_old">
|
<nav class="nav_center_old">
|
||||||
|
|
|
||||||
|
|
@ -16,204 +16,226 @@ tags:
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<section class="sec_main_center">
|
<section class="sec_main_center">
|
||||||
<header class="header_txt">
|
<header class="header_txt">
|
||||||
<h1>Medienformat Abfragen</h1>
|
<h1>Medienformat Abfragen</h1>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
<div class="demo__query_example">Umbruch bei </div>
|
<div class="demo__query_example">Umbruch bei </div>
|
||||||
<div class="demo__queries">
|
<div class="demo__queries">
|
||||||
<p class="query_phoneUp">Telefone und größer</p>
|
<p class="query_phoneUp">Telefone und größer</p>
|
||||||
<p class="query_phoneOnly">Nur Telefone</p>
|
<p class="query_phoneOnly">Nur Telefone</p>
|
||||||
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
|
<p class="query_tabletPortaitOnly">Nur Schreibtafeln hochkant</p>
|
||||||
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
<p class="query_tabletPortraitUp">Schreibtafeln und größer</p>
|
||||||
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
<p class="query_tabletLandscapeOnly">Schreibtafeln im Querformat</p>
|
||||||
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
<p class="query_tabletLandscapeUp">Schreibtafeln quer und größer</p>
|
||||||
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
<p class="query_desktopOnly">Nur Arbeitsplatzrechner</p>
|
||||||
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
<p class="query_desktopUp">Arbeitsplatzrechner und größer</p>
|
||||||
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
<p class="query_bigDesktopUp">Richtige Monitore und größer</p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="sec_main_center">
|
<section class="sec_main_center">
|
||||||
<header class="header_txt">
|
<header class="header_txt">
|
||||||
<h1>Übersicht aller Elemente</h1>
|
<h1>Übersicht aller Elemente</h1>
|
||||||
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p>
|
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p>
|
||||||
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
|
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
|
||||||
</header>
|
</header>
|
||||||
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}</code></pre>
|
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{<tag>}+h4{Varianten}</code></pre>
|
||||||
<article>
|
<article>
|
||||||
<h1 id="sections">Bereiche</h1>
|
<h1 id="sections">Bereiche</h1>
|
||||||
<p>Elemente:</p>
|
<p>Elemente:</p>
|
||||||
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
|
||||||
<h2><body></h2>
|
<h2><body></h2>
|
||||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
||||||
<h2><article></h2>
|
<h2><article></h2>
|
||||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
<article>Ein Artikel.</article>
|
||||||
<h2><section></h2>
|
<h2><section></h2>
|
||||||
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
|
<section>Ein Bereich.</section>
|
||||||
<h4>Varianten</h4>
|
<h4>Varianten</h4>
|
||||||
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
<pre class="pre_code"><code>section.sec_main_center</code></pre>
|
||||||
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
<section class="sec_main_center">
|
||||||
<h2><h3></h2>
|
<p class="float_right">Ende.</p>
|
||||||
<h2><h4></h2>
|
<p>Zentrierter Bereich.</p>
|
||||||
<h2><footer></h2>
|
</section>
|
||||||
<div style="position:relative;height:256px;background-color:#b7e0f0;">
|
<pre class="pre_code"><code>section.sec_main_status</code></pre>
|
||||||
{{ footer.pinned() }}
|
<section class="sec_main_status">Status-Bereich</section>
|
||||||
</div>
|
<h2><nav></h2>
|
||||||
</article>
|
<nav>Navigation</nav>
|
||||||
<article>
|
<h2><aside></h2>
|
||||||
<h1 id="grouping">Gruppierung</h1>
|
<p>Fließt um andere Inhalte. Klassen zur Positionierung und Kombination mit <code>.bside</code>.</p>
|
||||||
<p>Elemente:</p>
|
<pre class="pre_code"><code>aside.right+div.bside</code></pre>
|
||||||
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
|
<section>
|
||||||
<h2><p></h2>
|
<aside class="right">Seitenbereich, recht ausgerichtet.</aside>
|
||||||
<h4>Varianten</h4>
|
<div class="bside">Hauptbereich</div>
|
||||||
<pre class="pre_code"><code>p.txt_center</code></pre>
|
</section>
|
||||||
<pre class="pre_code"><code>p.txt_right</code></pre>
|
<h2><h*></h2>
|
||||||
<pre class="pre_code"><code>p.column_2</code></pre>
|
<h1>Überschrift 1</h1>
|
||||||
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
|
<h2>Überschrift 2</h2>
|
||||||
<h2><hr></h2>
|
<h3>Überschrift 3</h3>
|
||||||
<h4>Varianten</h4>
|
<h4>Überschrift 4</h4>
|
||||||
<pre class="pre_code"><code>hr.hr_hidden</code></pre>
|
<h5>Überschrift 5</h5>
|
||||||
<pre class="pre_code"><code>hr.hr_dotted</code></pre>
|
<hgroup>
|
||||||
<pre class="pre_code"><code>hr.space_even_half</code></pre>
|
<h6>Überschrift 6</h6>
|
||||||
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
|
<p>Mit Absatz innerhalb von <code><hgroup></code>.</p>
|
||||||
<h2><blockquote></h2>
|
</hgroup>
|
||||||
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
|
<h2><footer></h2>
|
||||||
<h2><figure></h2>
|
<div style="position:relative;height:256px;background-color:#b7e0f0;">
|
||||||
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
{{ footer.pinned() }}
|
||||||
<h2><div></h2>
|
</div>
|
||||||
<pre class="pre_code"><code>div.div_info>p</code></pre>
|
</article>
|
||||||
<h4>Varianten</h4>
|
<article>
|
||||||
</article>
|
<h1 id="grouping">Gruppierung</h1>
|
||||||
<article>
|
<p>Elemente:</p>
|
||||||
<h1 id="tabularData">Tabellen</h1>
|
<pre>// p // address // hr // pre // blockquote // ol // ul // li // dl // dt // dd // figure // figcaption // main // div</pre>
|
||||||
<p>Elemente:</p>
|
<h2><p></h2>
|
||||||
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
|
<h4>Varianten</h4>
|
||||||
<h2><table></h2>
|
<pre class="pre_code"><code>p.txt_center</code></pre>
|
||||||
<h4>Varianten</h4>
|
<pre class="pre_code"><code>p.txt_right</code></pre>
|
||||||
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
|
<pre class="pre_code"><code>p.column_2</code></pre>
|
||||||
<table class="width_full table_fix">
|
<pre class="pre_code"><code>p.column_3.column_line</code></pre>
|
||||||
<thead>
|
<h2><hr></h2>
|
||||||
<tr>
|
<h4>Varianten</h4>
|
||||||
<th class="cell_pre" scope="col"></th>
|
<pre class="pre_code"><code>hr.hr_hidden</code></pre>
|
||||||
<th scope="col">Kopfzeile</th>
|
<pre class="pre_code"><code>hr.hr_dotted</code></pre>
|
||||||
<th scope="col">A</th>
|
<pre class="pre_code"><code>hr.space_even_half</code></pre>
|
||||||
<th scope="col">B</th>
|
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
|
||||||
</tr>
|
<h2><blockquote></h2>
|
||||||
</thead>
|
<pre class="pre_code"><code>blockquote>p+p.quote_source</code></pre>
|
||||||
<tbody>
|
<h2><figure></h2>
|
||||||
<tr>
|
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
|
||||||
<td class="cell_pre">Vorspalte</td>
|
<h2><div></h2>
|
||||||
<td>Eine</td>
|
<pre class="pre_code"><code>div.div_info>p</code></pre>
|
||||||
<td></td>
|
<h4>Varianten</h4>
|
||||||
<td></td>
|
</article>
|
||||||
</tr>
|
<article>
|
||||||
<tr>
|
<h1 id="tabularData">Tabellen</h1>
|
||||||
<td class="cell_pre">1</td>
|
<p>Elemente:</p>
|
||||||
<td></td>
|
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
|
||||||
<td>erweiterte</td>
|
<h2><table></h2>
|
||||||
<td></td>
|
<h4>Varianten</h4>
|
||||||
</tr>
|
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
|
||||||
<tr>
|
<table class="width_full table_fix">
|
||||||
<td class="cell_pre">2</td>
|
<thead>
|
||||||
<td></td>
|
|
||||||
<td></td>
|
|
||||||
<td>Tabelle</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
|
|
||||||
<table class="width_full table_stripe table_fix table_free">
|
|
||||||
<tr>
|
<tr>
|
||||||
|
<th class="cell_pre" scope="col"></th>
|
||||||
|
<th scope="col">Kopfzeile</th>
|
||||||
|
<th scope="col">A</th>
|
||||||
|
<th scope="col">B</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_pre">Vorspalte</td>
|
||||||
|
<td>Eine</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_pre">1</td>
|
||||||
|
<td></td>
|
||||||
|
<td>erweiterte</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="cell_pre">2</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
<td>Tabelle</td>
|
<td>Tabelle</td>
|
||||||
<td></td>
|
</tr>
|
||||||
<td></td>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
|
||||||
|
<table class="width_full table_stripe table_fix table_free">
|
||||||
|
<tr>
|
||||||
|
<td>Tabelle</td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>ohne</td>
|
||||||
|
<td>Rahmen</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td>jedoch</td>
|
||||||
|
<td>mit</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td>Streifen</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
|
||||||
|
<table>
|
||||||
|
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Bezeichnung</th>
|
||||||
|
<th scope="col">Menge</th>
|
||||||
|
<th scope="col">Wert</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Alpha</td>
|
||||||
|
<td>1</td>
|
||||||
|
<td class="txt_right">8990</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>ohne</td>
|
<td>Bravo</td>
|
||||||
<td>Rahmen</td>
|
<td>10</td>
|
||||||
<td></td>
|
<td class="txt_right">1</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<td>Charlie</td>
|
||||||
<td>jedoch</td>
|
<td>1</td>
|
||||||
<td>mit</td>
|
<td class="txt_right">1</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
||||||
<td></td>
|
<td class="txt_right" title=">9000">9001</td>
|
||||||
<td>Streifen</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</tfoot>
|
||||||
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
|
</table>
|
||||||
<table>
|
</article>
|
||||||
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
|
<article>
|
||||||
<thead>
|
<h1 id="forms">Formulare</h1>
|
||||||
<tr>
|
<p>Elemente:</p>
|
||||||
<th scope="col">Bezeichnung</th>
|
<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
|
||||||
<th scope="col">Menge</th>
|
<h2><input></h2>
|
||||||
<th scope="col">Wert</th>
|
<div class="flex_column_wrap">
|
||||||
</tr>
|
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||||
</thead>
|
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||||
<tbody>
|
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
||||||
<tr>
|
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||||
<td>Alpha</td>
|
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
||||||
<td>1</td>
|
</div>
|
||||||
<td class="txt_right">8990</td>
|
<h4>Varianten</h4>
|
||||||
</tr>
|
<div id="capsCheck">
|
||||||
<tr>
|
<form action="">
|
||||||
<td>Bravo</td>
|
<input type="password" onkeypress="capLock(event)"/>
|
||||||
<td>10</td>
|
<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
|
||||||
<td class="txt_right">1</td>
|
<input type="text"/>
|
||||||
</tr>
|
<span id="error">Caps Lock is ON.</span>
|
||||||
<tr>
|
</form>
|
||||||
<td>Charlie</td>
|
</div>
|
||||||
<td>1</td>
|
<h2><select></h2>
|
||||||
<td class="txt_right">1</td>
|
<select name="F">
|
||||||
</tr>
|
<option value="0">
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<th colspan="2" class="txt_right" scope="row">Summe</th>
|
|
||||||
<td class="txt_right" title=">9000">9001</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<h1 id="forms">Formulare</h1>
|
|
||||||
<p>Elemente:</p>
|
|
||||||
<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
|
|
||||||
<h2><input></h2>
|
|
||||||
<div class="flex_column_wrap">
|
|
||||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
|
||||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
|
||||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
|
||||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
|
||||||
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
|
||||||
</div>
|
|
||||||
<h4>Varianten</h4>
|
|
||||||
<div id="capsCheck">
|
|
||||||
<form action="">
|
|
||||||
<input type="password" onkeypress="capLock(event)"/>
|
|
||||||
<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
|
|
||||||
<input type="text"/>
|
|
||||||
<span id="error">Caps Lock is ON.</span>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<h2><select></h2>
|
|
||||||
<select name="F">
|
|
||||||
<option value="0">
|
|
||||||
Plain list</option>
|
Plain list</option>
|
||||||
<option value="1" selected="selected">
|
<option value="1" selected="selected">
|
||||||
Fancy list</option>
|
Fancy list</option>
|
||||||
<option value="2">
|
<option value="2">
|
||||||
Table list</option>
|
Table list</option>
|
||||||
</select>
|
</select>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
|
|
@ -243,7 +265,7 @@ tags:
|
||||||
.visibility = 'hidden';
|
.visibility = 'hidden';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function capsDetect() {
|
function capsDetect() {
|
||||||
const body = document.getElementsByTagName('body')[0];
|
const body = document.getElementsByTagName('body')[0];
|
||||||
const capsWarning = document.getElementById('error');
|
const capsWarning = document.getElementById('error');
|
||||||
|
|
|
||||||
|
|
@ -15,304 +15,291 @@ tags:
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
<!-- {{ page.fileSlug }}.page -->
|
||||||
<div id="begin" class="">
|
<section class="sec_main_center">
|
||||||
<section class="sec_main_center">
|
<header class="header_txt">
|
||||||
<header class="header_txt">
|
<h1>Sammlung formatierter Elemente</h1>
|
||||||
<h1>Sammlung formatierter Elemente</h1>
|
<p>Die Elemente werden fortlaufend komplexer</p>
|
||||||
<p>Die Elemente werden fortlaufend komplexer</p>
|
</header>
|
||||||
</header>
|
<article>
|
||||||
<article>
|
<h2><h3></h2>
|
||||||
<h2><h3></h2>
|
<h4>Beispiele</h4>
|
||||||
<h4>Beispiele</h4>
|
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
||||||
<pre class="pre_code"><code>h3.txt_color_dark+p</code></pre>
|
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
||||||
<h3 class="txt_color_dark">Dunkle Überschrift</h3>
|
<p>Mit normalem Textabsatz</p>
|
||||||
<p>Mit normalem Textabsatz</p>
|
<h2><h4></h2>
|
||||||
<h2><h4></h2>
|
<h4>Beispiele</h4>
|
||||||
<h4>Beispiele</h4>
|
<pre class="pre_code"><code>a>h4</code></pre>
|
||||||
<pre class="pre_code"><code>a>h4</code></pre>
|
<a href="">
|
||||||
<a href="">
|
<h4>Überschrift als Block-Verweis</h4>
|
||||||
<h4>Überschrift als Block-Verweis</h4>
|
</a>
|
||||||
</a>
|
<h2><section></h2>
|
||||||
<h2><section></h2>
|
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||||
<pre class="pre_code"><code>section>div.float_space_left>img^p+p</code></pre>
|
<section class="overflow">
|
||||||
<section class="overflow">
|
<div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
|
||||||
<div class="float_space_left demo__avatar"><img src="{{ pageBase }}art/demo/flag_websafe_128x80.gif" width="256" height="160" alt="Fahne von interaktionsweise"></div>
|
<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
|
||||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p>
|
<p>+49 (0)123 1337 0000<br>
|
||||||
<p>+49 (0)123 1337 0000<br>
|
<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
|
||||||
<a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a>
|
</p>
|
||||||
</p>
|
</section>
|
||||||
</section>
|
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
||||||
<pre class="pre_code"><code>div.space_left_fourth</code></pre>
|
<div class="space_left_fourth">
|
||||||
<div class="space_left_fourth">
|
<hr/>
|
||||||
<hr/>
|
<p>Eingerückter Inhalt</p>
|
||||||
<p>Eingerückter Inhalt</p>
|
<hr/>
|
||||||
<hr/>
|
</div>
|
||||||
</div>
|
<pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre>
|
||||||
<pre class="pre_code"><code>nav>ul>(li>a.a_button{punkt $})*4nav>ul>(li>a.a_button_border{stufe $})*4</code></pre>
|
<div class="overflow">
|
||||||
<div class="overflow">
|
<nav class="float_space_left">
|
||||||
<nav class="float_space_left">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_border">Stufe 1</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_border">Stufe 2</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_border">Stufe 3</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_border">Stufe 4</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
|
|
||||||
<nav class="nav_horizontal">
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Abschnitt 1</a>
|
<a href="" class="a_button" data-hippie-button-value="1">Erster Punkt</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Abschnitt 2</a>
|
<a href="" class="a_button" data-hippie-button-value="2">Zweiter Punkt</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Abschnitt 3</a>
|
<a href="" class="a_button" data-hippie-button-value="3">Dritter Punkt</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Abschnitt 4</a>
|
<a href="" class="a_button" data-hippie-button-value="4">Vierter Punkt</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="overflow">
|
<nav>
|
||||||
<nav class="nav_center_old">
|
<ul>
|
||||||
<ul>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button_border">Stufe 1</a>
|
||||||
<a href="" class="a_button">Typ 1</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button_border">Stufe 2</a>
|
||||||
<a href="" class="a_button">Typ 2</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button_border">Stufe 3</a>
|
||||||
<a href="" class="a_button">Typ 3</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button_border">Stufe 4</a>
|
||||||
<a href="" class="a_button">Typ 4</a>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
</ul>
|
</nav>
|
||||||
</nav>
|
</div>
|
||||||
</div>
|
<pre class="pre_code"><code>nav.nav_horizontal>ul>(li>a.a_button{abschnitt $})*4nav.nav_center_old>ul>(li>a.a_button{typ $})*4</code></pre>
|
||||||
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
<nav class="nav_horizontal">
|
||||||
<header class="header_page demo__header header_fancy">
|
<ul>
|
||||||
<h1>Aufmacher</h1>
|
<li>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
<a href="" class="a_button">Abschnitt 1</a>
|
||||||
<nav class="nav_separate_right">
|
</li>
|
||||||
<ul>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button">Abschnitt 2</a>
|
||||||
<a href="" class="a_button">Mensch</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="" class="a_button">Abschnitt 3</a>
|
||||||
<a href="" class="a_button">Pflanze</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
</ul>
|
<a href="" class="a_button">Abschnitt 4</a>
|
||||||
</nav>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="overflow">
|
||||||
|
<nav class="nav_center_old">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 2</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 3</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Typ 4</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
||||||
|
<header class="header_page demo__header header_fancy">
|
||||||
|
<h1>Aufmacher</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||||
|
<nav class="nav_separate_right">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Mensch</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Pflanze</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class="nav_right">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Blau</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Gelb</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
||||||
|
<div class="box_space h_basic">
|
||||||
|
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
||||||
<nav class="nav_right">
|
<nav class="nav_right">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Blau</a>
|
<a href="" class="a_button">Eins</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Gelb</a>
|
<a href="" class="a_button">Zwei</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<pre class="pre_code"><code>header.header_page>nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
|
<div class="pos_abs pin_bottom width_full">
|
||||||
<div class="box_space h_basic">
|
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
||||||
<header id="js_demo_fix" class="header_page demo__header header_fix">
|
<footer id="js_demo_stop" class="demo_footer">
|
||||||
<nav class="nav_right">
|
<nav class="nav_column nav_separate">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Eins</a>
|
<a href="" class="a_button_text">Alpha</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="" class="a_button">Zwei</a>
|
<a href="" class="a_button_text">Bravo</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Charlie</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button_text">Delta</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
<p class="txt_center demo__credits">
|
||||||
<div class="pos_abs pin_bottom width_full">
|
<i class="i_bright">👨💻</i>
|
||||||
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
|
|
||||||
<footer id="js_demo_stop" class="demo_footer">
|
|
||||||
<nav class="nav_column nav_separate">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_text">Alpha</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_text">Bravo</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_text">Charlie</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="" class="a_button_text">Delta</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<p class="txt_center demo__credits">
|
|
||||||
<i class="i_bright">👨💻</i>
|
|
||||||
mit
|
mit
|
||||||
<i class="i_bright">❤</i>
|
<i class="i_bright">❤</i>
|
||||||
von
|
von
|
||||||
<a href="https://interaktionsweise.de">Interaktionsweise</a>
|
<a href="https://interaktionsweise.de">Interaktionsweise</a>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
</div>
|
||||||
<div class="flex_child"></div>
|
<div class="flex">
|
||||||
<div class="flex_child"></div>
|
<div class="flex_child"></div>
|
||||||
<div class="flex_child"></div>
|
<div class="flex_child"></div>
|
||||||
<div class="flex_child"></div>
|
<div class="flex_child"></div>
|
||||||
<div class="flex_child"></div>
|
<div class="flex_child"></div>
|
||||||
</div>
|
<div class="flex_child"></div>
|
||||||
<div class="flex_column_wrap">
|
</div>
|
||||||
<div class="flex_column"><input value="Undefiniert"/></div>
|
<div class="flex_column_wrap">
|
||||||
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
<div class="flex_column"><input value="Undefiniert"/></div>
|
||||||
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
|
||||||
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
|
||||||
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
<div class="flex_column"><input type="button" value="Auswählen"></div>
|
||||||
</div>
|
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
|
||||||
<form method="get">
|
</div>
|
||||||
<p class="label">
|
<form method="get">
|
||||||
Show me a
|
<p class="label">
|
||||||
<select name="F">
|
Show me a
|
||||||
<option value="0">
|
<select name="F">
|
||||||
Plain list</option>
|
<option value="0">Plain list</option>
|
||||||
<option value="1" selected="selected">
|
<option value="1" selected="selected">Fancy list</option>
|
||||||
Fancy list</option>
|
<option value="2">Table list</option>
|
||||||
<option value="2">
|
</select>
|
||||||
Table list</option>
|
Sorted by
|
||||||
</select>
|
<select name="C">
|
||||||
Sorted by
|
<option value="N" selected="selected">Name</option>
|
||||||
<select name="C">
|
<option value="M">Date Modified</option>
|
||||||
<option value="N" selected="selected">
|
<option value="S">Size</option>
|
||||||
Name</option>
|
<option value="D">Description</option>
|
||||||
<option value="M">
|
</select>
|
||||||
Date Modified</option>
|
<select name="O">
|
||||||
<option value="S">
|
<option value="A" selected="selected">Ascending</option>
|
||||||
Size</option>
|
<option value="D">Descending</option>
|
||||||
<option value="D">
|
</select>
|
||||||
Description</option>
|
<select name="V">
|
||||||
</select>
|
<option value="0" selected="selected">in Normal order</option>
|
||||||
<select name="O">
|
<option value="1">in Version order</option>
|
||||||
<option value="A" selected="selected">
|
</select>
|
||||||
Ascending</option>
|
Matching
|
||||||
<option value="D">
|
<input type="text" name="P" value="*"/>
|
||||||
Descending</option>
|
<input type="submit" name="X" value="Go"/>
|
||||||
</select>
|
</p>
|
||||||
<select name="V">
|
</form>
|
||||||
<option value="0" selected="selected">
|
|
||||||
in Normal order</option>
|
|
||||||
<option value="1">
|
|
||||||
in Version order</option>
|
|
||||||
</select>
|
|
||||||
Matching
|
|
||||||
<input type="text" name="P" value="*"/>
|
|
||||||
<input type="submit" name="X" value="Go"/>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<h2>Gruppierung</h2>
|
<h2>Gruppierung</h2>
|
||||||
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
<pre class="pre_code"><code>ul.list_link>(li>a>img)*2+li>a</code></pre>
|
||||||
<ul class="list_link">
|
<ul class="list_link">
|
||||||
<li>
|
<li>
|
||||||
<a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
|
<a href=""><img src="{{ pageBase }}art/letter.gif" alt="">name@domain.tld</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="">Work</a>
|
<a href="">Work</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="">Projects</a>
|
<a href="">Projects</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>Tabellen</h2>
|
<h2>Tabellen</h2>
|
||||||
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
|
<pre class="pre_code"><code>table.table_link>thead>tr>th{&nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre>
|
||||||
<table class="table_link js_pop">
|
<table class="table_link js_pop">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th> </th>
|
<th> </th>
|
||||||
<th>Ab / Zy</th>
|
<th>Ab / Zy</th>
|
||||||
<th>Neu / Alt</th>
|
<th>Neu / Alt</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
|
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
|
||||||
<td class="cell_link">
|
<td class="cell_link">
|
||||||
<a href="" target="_blank">Name</a>
|
<a href="" target="_blank">Name</a>
|
||||||
<a href="" target="_blank">URL</a>
|
<a href="" target="_blank">URL</a>
|
||||||
</td>
|
</td>
|
||||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="cell_text">
|
<td class="cell_text">
|
||||||
<div class="shorten">Beschreibung</div>
|
<div class="shorten">Beschreibung</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
|
<td class="cell_icon" rowspan="2"><img src="/art/bullet.gif" alt="" width="16" height="16"></td>
|
||||||
<td class="cell_link">
|
<td class="cell_link">
|
||||||
<a href="" target="_blank">Name</a>
|
<a href="" target="_blank">Name</a>
|
||||||
<a href="" target="_blank">URL</a>
|
<a href="" target="_blank">URL</a>
|
||||||
</td>
|
</td>
|
||||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="cell_text">
|
<td class="cell_text">
|
||||||
<div class="shorten">Beschreibung</div>
|
<div class="shorten">Beschreibung</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<h2>Eingebettet</h2>
|
<h2>Eingebettet</h2>
|
||||||
<div class="demo__flag">
|
<div class="demo__flag">
|
||||||
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
||||||
<desc>Background flag</desc>
|
<desc>Background flag</desc>
|
||||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue