css

2020-03-03 15:55:35 +01:00 · 2020-03-03 15:50:24 +01:00
15 changed files with 567 additions and 75 deletions
--- a/README.md
+++ b/README.md
@ -20,32 +20,42 @@
 * [Can I use](https://www.caniuse.com/)
 * [codepen](https://codepen.io/)
 * [jsfiddle](https://jsfiddle.net/)
- * [Google Search Console](https://search.google.com/search-console)
- * [Cross Browser testing](https://www.browserling.com/)
- * [Browser Test](https://html5test.com/)
+* [Google Search Console](https://search.google.com/search-console)
+* [Cross Browser testing](https://www.browserling.com/)
+* [Browser Test](https://html5test.com/)

- ### Interne Links
- * [Semantische Tags](html/semantik.html)
- * [Seitenstruktur](html/struktur.html)
- * [Kopfbereich](html/header.html)
- * [Formulare](html/formular.html)
- * [Navigation](html/navigation.html)
+### Interne Links
+* [Semantische Tags](html/semantik.html)
+* [Seitenstruktur](html/struktur.html)
+* [Kopfbereich](html/header.html)
+* [Formulare](html/formular.html)
+* [Navigation](html/navigation.html)

- ## CSS
- ### CSS Lernen
- * [CSS-Grundlagen](https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/CSS_basics)
- * [CSS lernen W3C](https://www.w3.org/Style/CSS/learning.de.html)
- * [CSS Tutorial](https://www.w3schools.com/css/)
- * [Selfhtml CSS](https://wiki.selfhtml.org/wiki/CSS/Tutorials)
- * [CSS Übersicht](https://t3n.de/magazin/flexibler-als-gedacht-was-du-mit-248427/)
- * [Leitfaden Animationen](https://www.webdesign-journal.de/css3-animationen-leitfaden/)
+## CSS
+### CSS Lernen
+* [CSS-Grundlagen](https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/CSS_basics)
+* [CSS lernen W3C](https://www.w3.org/Style/CSS/learning.de.html)
+* [CSS Tutorial](https://www.w3schools.com/css/)
+* [Selfhtml CSS](https://wiki.selfhtml.org/wiki/CSS/Tutorials)
+* [CSS Übersicht](https://t3n.de/magazin/flexibler-als-gedacht-was-du-mit-248427/)
+* [Leitfaden Animationen](https://www.webdesign-journal.de/css3-animationen-leitfaden/)

- ### CSS (minimal) Frameworks
- * [Milligram](https://milligram.io/)
- * [minicss](https://minicss.org/)
- * [Pure.css](https://purecss.io/)
- * [TentCSS](https://css.sitetent.com/)
- * [Skeleton](http://getskeleton.com/)
- * [A Modern CSS Reset](https://hankchizljaw.com/wrote/a-modern-css-reset/) (Nur Reset-Funktion)
+### CSS (minimal) Frameworks
+* [Milligram](https://milligram.io/)
+* [minicss](https://minicss.org/)
+* [Pure.css](https://purecss.io/)
+* [TentCSS](https://css.sitetent.com/)
+* [Skeleton](http://getskeleton.com/)
+* [A Modern CSS Reset](https://hankchizljaw.com/wrote/a-modern-css-reset/) (Nur Reset-Funktion)

+### CSS Inhalte positionieren
+* [CSS float – Positionieren und Umfließen](https://www.mediaevent.de/css/position-float.html)
+* [CSS position](https://www.mediaevent.de/css/position.html)
+* [Flexbox](https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/)
+
+### Interne Links
+* [float](html/float.html)
+* [position](html/position)
+* [flexbox](html/flex.html)
+* [grid](html/grid.html)

--- a/css/code.css
+++ b/css/code.css
@ -34,7 +34,7 @@ code[class*="language-"],
 pre[class*="language-"] {
 	color: #657b83; /* base00 */
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	font-size: 1em;
+	font-size: .9em;
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;
--- a/css/position.css
+++ b/css/position.css
@ -0,0 +1,29 @@
+.bigbox{
+    width: 100%;
+    border: 2px solid yellowgreen;
+    padding: 1em 1em 0 1em;
+    position: relative;
+    min-height: 400px;
+}
+.box{
+    width: 32%;
+    height: 150px;
+    background-color: yellowgreen;
+    margin: 0 2% 2% 0;
+    overflow:auto;
+}
+.relative{
+    position: relative;
+}
+.absolute{
+    position: absolute;
+    bottom: -40px;
+    right: -40px;
+}
+.fixed{
+    position: fixed;
+}
+.sticky{
+    position: sticky;
+    top: 0;
+}
--- a/css/struktur.css
+++ b/css/struktur.css
@ -0,0 +1,22 @@
+.bigbox{
+    width: 100%;
+    border: 2px solid yellowgreen;
+    padding: 1em 1em 0 1em;
+}
+.box{
+    width: 32%;
+    height: 150px;
+    background-color: yellowgreen;
+    margin: 0 2% 2% 0;
+    overflow:auto;
+}
+.floatleft{
+    float: left;
+}
+.clearfix:after {
+    content: ".";
+    clear: both;
+    display: block;
+    visibility: hidden;
+    height: 0px;
+}
--- a/css/style.css
+++ b/css/style.css
@ -11,13 +11,15 @@ header, footer{
    background: #ddd
 }
 header{
-background: linear-gradient(178deg,  #000 0%,#000 70%,#fff 70%,#fff 100%);
+    background:#000;
+    clip-path: polygon(0 0, 100% 0, 100% 60%, 0 200px);
 }
 footer{
-    background: linear-gradient(2deg,  #000 0%,#000 70%,#fff 70%,#fff 100%);
+    background:#000;
+    clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 200px);
    }
 header img{
-    padding-top: 62px;
+    padding-top: 2px;
    float: left;
 }
 nav ul{
--- a/html/float.html
+++ b/html/float.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Die HTML Struktur in Webseiten">
+    <title>HTML Struktur</title>
+    <link rel="stylesheet" href="../css/reset.css">
+    <link rel="stylesheet" href="../css/code.css">
+    <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="../css/struktur.css">
+</head>
+
+<body>
+    <header>
+        <div class="wrapper">
+            <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
+            <nav role="navigation">
+                <ul>
+                    <li><a href="float.html">Float</a></li>
+                    <li><a href="position.html">Position</a></li>
+                    <li><a href="flexbox.html">Flexbox</a></li>
+                    <li><a href="grid.html">Grid</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <main role="main" class="wrapper">
+        <h1>Inhalt strukturieren mit css</h1>
+        <article>
+            <h2>Float</h2>
+                <div class="bigbox">
+                <div class="box floatleft"></div>
+                <div class="box clearfix"></div>
+                <div class="box floatleft"></div>
+                <div class="box floatleft"></div>
+                <div class="box clearfix"></div>
+            </div>
+        </article>
+        <article class="">
+            <h2>Die Boxen</h2>
+            <pre class="line-numbers language-html">
+<code class="language-html">&lt;article&gt;
+    &lt;h2&gt;Float&lt;/h2&gt;
+    &lt;div class=&quot;box floatleft&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;box clearfix&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;box floatleft&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;box floatleft&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;box clearfix&quot;&gt;&lt;/div&gt;
+  &lt;/article&gt;
+</code>
+</pre>
+            <h2>& Der Clearfix</h2>
+            <pre class="line-numbers language-html">
+<code class="language-css">.box{
+    width: 32%;
+    height: 150px;
+    background-color: yellowgreen;
+    margin: 0 2% 2% 0;
+    overflow:auto;
+}
+.floatleft{
+    float: left;
+}
+.clearfix:after {
+    content: ".";
+    clear: both;
+    display: block;
+    visibility: hidden;
+    height: 0px;
+}
+</code>
+</pre>
+
+
+    </main>
+
+    <footer>
+        <div class="wrapper">
+            <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
+        </div>
+    </footer>
+    <script src="../js/code.js"></script>
+</body>
+
+</html>
--- a/html/formular.html
+++ b/html/formular.html
@ -14,7 +14,7 @@
 <body>
  <header>
    <div class="wrapper">
-      <img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
+      <img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes">
      <nav role="navigation">
        <ul>
          <li><a href="../index.html">Home</a></li>
--- a/html/formulare.html
+++ b/html/formulare.html
@ -15,7 +15,7 @@
 <body>
  <header>
    <div class="wrapper">
-      <a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
+      <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
      <nav role="navigation">
        <ul>
          <li><a href="semantik.html">Semantik</a></li>
--- a/html/header.html
+++ b/html/header.html
@ -13,7 +13,7 @@
 <body>
  <header>
    <div class="wrapper">
-      <a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
+      <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
      <nav role="navigation">
        <ul>
          <li><a href="semantik.html">Semantik</a></li>
--- a/html/navigation.html
+++ b/html/navigation.html
@ -14,7 +14,7 @@
 <body>
  <header>
    <div class="wrapper">
-      <a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
+      <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
      <nav role="navigation">
        <ul>
          <li><a href="semantik.html">Semantik</a></li>
--- a/html/position.html
+++ b/html/position.html
@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Die HTML Struktur in Webseiten">
+    <title>HTML Struktur</title>
+    <link rel="stylesheet" href="../css/reset.css">
+    <link rel="stylesheet" href="../css/code.css">
+    <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="../css/position.css">
+</head>
+
+<body>
+    <header>
+        <div class="wrapper">
+            <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
+            <nav role="navigation">
+                <ul>
+                    <li><a href="float.html">Float</a></li>
+                    <li><a href="position.html">Position</a></li>
+                    <li><a href="flexbox.html">Flexbox</a></li>
+                    <li><a href="grid.html">Grid</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <main role="main" class="wrapper">
+        <h1>Inhalt positionieren mit css</h1>
+        <article>
+            <h2>Float</h2>
+                <div class="bigbox relative">
+                <div class="box fixed"></div>
+                <div class="box absolute"></div>
+                <div class="box sticky"></div>
+            </div>
+        </article>
+        <article class="">
+            <h2>Die Boxen</h2>
+            <pre class="line-numbers language-html">
+<code class="language-html">&lt;article&gt;
+    &lt;h2&gt;Float&lt;/h2&gt;
+        &lt;div class=&quot;bigbox relative&quot;&gt;
+            &lt;div class=&quot;box fixed&quot;&gt;&lt;/div&gt;
+            &lt;div class=&quot;box absolute&quot;&gt;&lt;/div&gt;
+            &lt;div class=&quot;box sticky&quot;&gt;&lt;/div&gt;
+        &lt;/div&gt;
+&lt;/article&gt;
+</article>
+</code>
+</pre>
+            <h2>& Die Positionen</h2>
+            <pre class="line-numbers language-html">
+<code class="language-css">.relative{
+    position: relative;
+}
+.absolute{
+    position: absolute;
+    bottom: -40px;
+    right: -40px;
+}
+.fixed{
+    position: fixed;
+}
+.sticky{
+    position: sticky;
+    top: 0;
+}
+</code>
+</pre>
+
+
+    </main>
+
+    <footer>
+        <div class="wrapper">
+            <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
+        </div>
+    </footer>
+    <script src="../js/code.js"></script>
+</body>
+
+</html>
--- a/html/semantik.html
+++ b/html/semantik.html
@ -14,7 +14,7 @@
 <body>
  <header>
    <div class="wrapper">
-      <a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
+      <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
      <nav role="navigation">
        <ul>
          <li><a href="semantik.html">Semantik</a></li>
--- a/html/struktur.html
+++ b/html/struktur.html
@ -14,7 +14,7 @@
 <body>
  <header>
    <div class="wrapper">
-      <a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
+      <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
      <nav role="navigation">
        <ul>
          <li><a href="semantik.html">Semantik</a></li>
--- a/img/logo.svg
+++ b/img/logo.svg
@ -1,28 +1,267 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="248.69" height="36.218" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
- <metadata>
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title/>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <g transform="translate(-225.65 -514.25)">
-  <path d="m248.22 549.91h-4.625l-0.501-0.278-11.423-22.4 0.279 22.121c0 0.39-0.167 0.557-0.557 0.557h-5.182c-0.39 0-0.557-0.167-0.557-0.557v-33.989c0-0.39 0.167-0.558 0.557-0.558h4.681l0.501 0.279 11.366 22.622-0.223-22.343c0-0.39 0.167-0.558 0.557-0.558h5.126c0.334 0 0.557 0.168 0.557 0.558v33.989c1e-3 0.39-0.166 0.557-0.556 0.557z"/>
-  <path d="m301.26 520.66h-6.073c-0.39 0-0.558 0.168-0.558 0.558v28.139c0 0.39-0.167 0.557-0.557 0.557h-5.238c-0.39 0-0.558-0.167-0.558-0.557v-28.139c0-0.39-0.167-0.558-0.557-0.558h-6.073c-0.39 0-0.557-0.167-0.557-0.557v-4.736c0-0.39 0.167-0.558 0.557-0.558h19.613c0.334 0 0.557 0.168 0.557 0.558v4.736c1e-3 0.39-0.166 0.557-0.556 0.557z"/>
-  <path d="m256.86 520.66c-0.39 0-0.557-0.167-0.557-0.557v-4.736c0-0.39 0.167-0.558 0.557-0.558h19.613c0.334 0 0.557 0.168 0.557 0.558v4.736c0 0.39-0.167 0.557-0.557 0.557h-19.613z"/>
-  <path d="m256.86 535.06c-0.39 0-0.557-0.167-0.557-0.558v-4.735c0-0.391 0.167-0.558 0.557-0.558h19.613c0.334 0 0.557 0.167 0.557 0.558v4.735c0 0.391-0.167 0.558-0.557 0.558h-19.613z"/>
-  <path d="m256.86 550.01c-0.39 0-0.557-0.167-0.557-0.558v-4.736c0-0.39 0.167-0.557 0.557-0.557h19.613c0.334 0 0.557 0.167 0.557 0.557v4.736c0 0.391-0.167 0.558-0.557 0.558h-19.613z"/>
-  <path d="m331.43 520.66c-0.39 0-0.557-0.167-0.557-0.557v-4.736c0-0.39 0.167-0.558 0.557-0.558h19.613c0.334 0 0.558 0.168 0.558 0.558v4.736c0 0.39-0.167 0.557-0.558 0.557h-19.613z"/>
-  <path d="m331.43 535.06c-0.39 0-0.557-0.167-0.557-0.558v-4.735c0-0.391 0.167-0.558 0.557-0.558h19.613c0.334 0 0.558 0.167 0.558 0.558v4.735c0 0.391-0.167 0.558-0.558 0.558h-19.613z"/>
-  <path d="m331.43 550.01c-0.39 0-0.557-0.167-0.557-0.558v-4.736c0-0.39 0.167-0.557 0.557-0.557h19.613c0.334 0 0.558 0.167 0.558 0.557v4.736c0 0.391-0.167 0.558-0.558 0.558h-19.613z"/>
-  <path d="m310.9 524.12c0 2.618 2.563 3.398 6.463 5.183 5.962 2.729 8.748 5.794 8.748 11.311 0 5.906-4.067 9.862-10.363 9.862h-2.229c-3.176 0-5.572-0.892-7.243-2.619-1.839-1.895-2.563-3.51-2.563-4.067 0-0.111 0.112-0.278 0.334-0.39l4.848-2.396c0.111-0.056 0.167-0.056 0.278-0.056 0.39 0 0.502 0.558 1.059 1.672 0.613 1.17 2.006 2.006 3.288 2.006h2.229c2.173 0 4.012-1.783 4.012-4.012 0-2.786-2.34-3.789-5.962-5.517-6.129-2.953-9.25-5.46-9.25-10.977 0-5.906 4.123-9.862 10.364-9.862h0.836c2.563 0 4.568 0.557 6.352 1.839 2.174 1.561 3.566 4.067 3.566 4.736 0 0.223-0.111 0.334-0.334 0.445l-4.848 2.396c-0.111 0.056-0.223 0.056-0.279 0.056-0.278 0-0.39-0.335-0.724-0.836-1.059-1.783-2.005-2.786-3.733-2.786h-0.836c-2.174 1e-3 -4.013 1.728-4.013 4.012z"/>
-  <path d="m362.93 524.12c0 2.618 2.562 3.398 6.463 5.183 5.962 2.729 8.748 5.794 8.748 11.311 0 5.906-4.067 9.862-10.363 9.862h-2.229c-3.176 0-5.571-0.892-7.243-2.619-1.839-1.895-2.563-3.51-2.563-4.067 0-0.111 0.111-0.278 0.335-0.39l4.848-2.396c0.11-0.056 0.166-0.056 0.278-0.056 0.39 0 0.501 0.558 1.059 1.672 0.613 1.17 2.006 2.006 3.287 2.006h2.229c2.173 0 4.011-1.783 4.011-4.012 0-2.786-2.34-3.789-5.961-5.517-6.13-2.953-9.25-5.46-9.25-10.977 0-5.906 4.123-9.862 10.363-9.862h0.837c2.562 0 4.568 0.557 6.352 1.839 2.173 1.561 3.566 4.067 3.566 4.736 0 0.223-0.112 0.334-0.335 0.445l-4.848 2.396c-0.111 0.056-0.223 0.056-0.278 0.056-0.278 0-0.39-0.335-0.725-0.836-1.059-1.783-2.006-2.786-3.732-2.786h-0.837c-2.174 1e-3 -4.012 1.728-4.012 4.012z"/>
-  <path d="m388.77 524.12c0 2.618 2.562 3.398 6.463 5.183 5.962 2.729 8.748 5.794 8.748 11.311 0 5.906-4.067 9.862-10.363 9.862h-2.229c-3.176 0-5.571-0.892-7.243-2.619-1.839-1.895-2.563-3.51-2.563-4.067 0-0.111 0.111-0.278 0.335-0.39l4.847-2.396c0.111-0.056 0.167-0.056 0.279-0.056 0.39 0 0.501 0.558 1.059 1.672 0.613 1.17 2.006 2.006 3.287 2.006h2.229c2.173 0 4.011-1.783 4.011-4.012 0-2.786-2.34-3.789-5.961-5.517-6.13-2.953-9.25-5.46-9.25-10.977 0-5.906 4.123-9.862 10.363-9.862h0.837c2.562 0 4.568 0.557 6.352 1.839 2.173 1.561 3.565 4.067 3.565 4.736 0 0.223-0.111 0.334-0.334 0.445l-4.848 2.396c-0.111 0.056-0.223 0.056-0.278 0.056-0.278 0-0.391-0.335-0.725-0.836-1.059-1.783-2.006-2.786-3.732-2.786h-0.837c-2.174 1e-3 -4.012 1.728-4.012 4.012z"/>
-  <path d="m414.62 549.91h-5.293c-0.39 0-0.558-0.167-0.558-0.557v-33.989c0-0.39 0.168-0.558 0.558-0.558h5.293c0.335 0 0.558 0.168 0.558 0.558v33.989c0 0.39-0.167 0.557-0.558 0.557z"/>
-  <path d="m434.57 550.47h-2.73c-6.296 0-10.363-3.956-10.363-9.862v-16.494c0-5.906 4.123-9.862 10.363-9.862h2.73c6.24 0 10.364 3.956 10.364 9.862v16.493c0 5.907-4.124 9.863-10.364 9.863zm3.956-26.356c0-2.284-1.728-4.012-3.956-4.012h-2.73c-2.229 0-4.012 1.783-4.012 4.012v16.493c0 2.229 1.783 4.012 4.012 4.012h2.73c2.229 0 3.956-1.728 3.956-4.012v-16.493z"/>
-  <path d="m473.79 549.91h-4.625l-0.502-0.278-11.422-22.399 0.278 22.121c0 0.39-0.167 0.557-0.557 0.557h-5.183c-0.39 0-0.558-0.167-0.558-0.557v-33.99c0-0.39 0.168-0.558 0.558-0.558h4.681l0.502 0.279 11.366 22.622-0.224-22.344c0-0.39 0.168-0.558 0.558-0.558h5.127c0.334 0 0.557 0.168 0.557 0.558v33.989c1e-3 0.391-0.166 0.558-0.556 0.558z"/>
- </g>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="161.70619"
+   height="167.76018"
+   id="svg3100">
+  <defs
+     id="defs3102" />
+  <metadata
+     id="metadata3105">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-253.43263,-328.48209)"
+     id="layer1">
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.6351603,0.1991215,-0.09470033,0.2109479,185.96851,373.25579)"
+       id="path3222"
+       style="fill:#357ddc;fill-opacity:0.94880545;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.2297727,0.170759,-0.2994242,0.2979973,426.96591,330.10709)"
+       id="path3218"
+       style="fill:#357ddc;fill-opacity:0.93856656;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(-0.1669504,0.468035,-0.306322,-0.09969231,540.35911,335.74521)"
+       id="path3214"
+       style="opacity:0.71333331;fill:#357ddc;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.5394432,-0.1377578,0.07152933,0.2626392,197.09521,441.30451)"
+       id="path3228"
+       style="fill:#357ddc;fill-opacity:0.80204779;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(-0.249509,0.06414988,0.2107149,-0.3660959,268.44091,460.70366)"
+       id="path3230"
+       style="fill:#357ddc;fill-opacity:0.85665529;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.5608774,-0.285215,0.1606382,0.2780113,104.42621,330.47145)"
+       id="path3232"
+       style="fill:#357ddc;fill-opacity:0.80204779;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.4004941,0.570933,-0.209068,0.1151997,236.49561,279.91046)"
+       id="path3236"
+       style="fill:#357ddc;fill-opacity:0.96245734;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.3230466,0.02648021,0.2813081,0.3708258,114.60531,350.56291)"
+       id="path3240"
+       style="fill:#357ddc;fill-opacity:0.8498294;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.6648437,-0.03037009,-0.089525,0.1486878,193.94621,290.82055)"
+       id="path3246"
+       style="fill:#357ddc;fill-opacity:0.80204779;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.8866246,-0.3866832,0.3058338,0.7222688,13.374014,236.55146)"
+       id="path3248"
+       style="fill:#aac617;fill-opacity:0.96928328;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.5405738,0.08131298,-0.093849,0.623914,190.83471,184.38378)"
+       id="path3250"
+       style="fill:#357ddc;fill-opacity:0.81911262;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.3444504,0.3223194,-0.4083626,0.4364016,417.28331,212.6603)"
+       id="path3268"
+       style="fill:#357ddc;fill-opacity:0.77133107;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.5807842,0.1684338,-0.3277768,0.696969,262.92951,114.82725)"
+       id="path3270"
+       style="fill:#357ddc;fill-opacity:0.54266214;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.1860606,-0.09518036,0.1387591,0.4066016,167.44841,331.50792)"
+       id="path3272"
+       style="fill:#357ddc;fill-opacity:0.88054612;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.2606896,-0.1139332,0.3171469,0.5278153,237.50031,230.13759)"
+       id="path3274"
+       style="fill:#357ddc;fill-opacity:0.92491467;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(-0.1617321,0.5523791,-0.3013921,-0.08579323,394.45011,282.4195)"
+       id="path3276"
+       style="fill:#357ddc;fill-opacity:0.80204779;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.3131909,0.2626897,-0.3571044,0.4257564,431.77821,246.88752)"
+       id="path3278"
+       style="fill:#357ddc;fill-opacity:0.89411765;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.576679,0,0,0.7445862,252.45391,162.76157)"
+       id="path3280"
+       style="fill:#357ddc;fill-opacity:0.76109212;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.4297423,0.4256934,-0.3901908,0.2962222,323.60291,262.02824)"
+       id="path3282"
+       style="fill:#357ddc;fill-opacity:0.93856656;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.3854384,-0.2077531,0.1192511,0.2809704,235.18441,424.76217)"
+       id="path3284"
+       style="fill:#357ddc;fill-opacity:0.93174056;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.1653783,0.4484061,-0.689699,-0.3624948,564.24921,354.88282)"
+       id="path3286"
+       style="fill:#357ddc;fill-opacity:0.90102383;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.3460455,-0.1096987,0.1328538,0.4763457,144.60471,291.80472)"
+       id="path3292"
+       style="fill:#357ddc;fill-opacity:0.79863485;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.5804456,0.1334872,-0.08965201,0.3329778,206.26481,345.83492)"
+       id="path3266"
+       style="fill:#357ddc;fill-opacity:0.74061435;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.4669151,-0.06727667,0.03135761,0.2176288,215.18181,440.42625)"
+       id="path3300"
+       style="fill:#357ddc;fill-opacity:0.77133107;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.2023734,-0.2884313,0.3140235,0.2983684,221.39591,330.18056)"
+       id="path3302"
+       style="fill:#357ddc;fill-opacity:0.77133107;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.4187643,-0.317146,0.155389,0.4438546,126.89941,317.94908)"
+       id="path3304"
+       style="fill:#357ddc;fill-opacity:0.85665529;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.2227693,0.3863466,-0.5054982,0.2237615,436.51541,178.25561)"
+       id="path3306"
+       style="fill:#aac617;fill-opacity:0.85665529;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.6462689,0,0,0.5989641,190.07281,226.89962)"
+       id="path3314"
+       style="fill:#aac617;fill-opacity:0.93174056;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.7026094,0,0,0.6289968,161.20441,237.07947)"
+       id="path3258"
+       style="fill:#357ddc;fill-opacity:0.77815701;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.5193662,0,0,0.5976674,226.25231,214.07679)"
+       id="path3318"
+       style="fill:#aac617;fill-opacity:0.77815701;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.5663469,0,0,0.7229495,242.71071,176.05171)"
+       id="path3320"
+       style="fill:#aac617;fill-opacity:0.77815701;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.0931211,-0.1869411,0.5624399,0.1401824,151.83401,335.49063)"
+       id="path3322"
+       style="fill:#aac617;fill-opacity:0.94880545;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.4005792,0.4399622,-0.3904178,0.3252122,387.24361,160.68764)"
+       id="path3298"
+       style="fill:#357ddc;fill-opacity:0.85665529;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.06715962,-0.5576775,0.6076769,-0.06318344,95.849714,522.84764)"
+       id="path3326"
+       style="fill:#aac617;fill-opacity:0.94880545;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.1767474,-0.4196153,0.5241122,0.2317793,151.15851,384.92311)"
+       id="path3330"
+       style="fill:#aac617;fill-opacity:0.61433447;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.07458754,0.2884836,-0.4063421,0.4114391,507.84601,262.49273)"
+       id="path3332"
+       style="fill:#357ddc;fill-opacity:0.77815701;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.7851225,-0.09260653,0.1576182,0.6167836,91.480114,294.9369)"
+       id="path3334"
+       style="fill:#357ddc;fill-opacity:0.80204779;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.2567108,-0.1169959,0.1923747,0.422106,147.27761,335.69257)"
+       id="path3336"
+       style="fill:#357ddc;fill-opacity:0.80204779;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.456292,0.1325984,0.08352785,0.5387994,146.75581,235.56413)"
+       id="path3338"
+       style="fill:#357ddc;fill-opacity:0.7303754;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.2093202,0.1041797,-0.1367674,0.4310886,403.14531,277.79814)"
+       id="path3342"
+       style="fill:#357ddc;fill-opacity:0.80204779;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(-0.2066094,-0.08283283,0.3867742,-0.2193089,234.06651,427.06482)"
+       id="path3344"
+       style="fill:#aac617;fill-opacity:0.7849829;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.1545074,-0.4455748,0.5763078,0.2441118,83.123914,458.55602)"
+       id="path3348"
+       style="fill:#aac617;fill-opacity:0.94880545;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(-0.2884477,-0.1352404,0.3103089,-0.377515,254.87691,518.18364)"
+       id="path3350"
+       style="fill:#aac617;fill-opacity:0.94880545;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(-0.03026503,-0.8942672,0.8933717,-0.04962147,43.831714,640.70504)"
+       id="path3352"
+       style="fill:#aac617;fill-opacity:0.94880545;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(-0.02242205,-0.4029946,0.4775571,-0.08920781,165.07271,475.27224)"
+       id="path3235"
+       style="fill:#aac617;fill-opacity:0.7849829;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(-0.1142305,-0.7450656,0.5663341,-0.06592782,222.51651,588.96514)"
+       id="path3310"
+       style="fill:#aac6ed;fill-opacity:0.86689417;fill-rule:evenodd;stroke:none;display:inline" />
+    <path
+       d="m 262.63966,318.48636 a 14.142136,14.142136 0 1 1 -28.28427,0 14.142136,14.142136 0 1 1 28.28427,0 z"
+       transform="matrix(0.06079246,0.4765934,-0.6261724,0.2185602,548.90251,253.82123)"
+       id="path3341"
+       style="fill:#aac617;fill-opacity:0.77815701;fill-rule:evenodd;stroke:none;display:inline" />
+  </g>
 </svg>
--- a/index.html
+++ b/index.html
@ -14,17 +14,17 @@
 <body>
  <header>
    <div class="wrapper">
-    <a href="index.html"><img src="img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
-    <nav role="navigation">
-      <ul>
-        <li><a href="html/semantik.html">Semantik</a></li>
-        <li><a href="html/header.html">Head</a></li>
-        <li><a href="html/struktur.html">Struktur</a></li>
-        <li><a href="html/navigation.html">Navigation</a></li>
-        <li><a href="html/formulare.html">Formular</a></li>
-      </ul>
-    </nav>
-  </div>
+      <a href="index.html"><img src="img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
+      <nav role="navigation">
+        <ul>
+          <li><a href="html/semantik.html">Semantik</a></li>
+          <li><a href="html/header.html">Head</a></li>
+          <li><a href="html/struktur.html">Struktur</a></li>
+          <li><a href="html/navigation.html">Navigation</a></li>
+          <li><a href="html/formulare.html">Formular</a></li>
+        </ul>
+      </nav>
+    </div>
  </header>

  <main role="main" class="wrapper">
@ -87,14 +87,31 @@
      <li><a href="https://purecss.io/">Pure.css</a></li>
      <li><a href="https://css.sitetent.com/">TentCSS</a></li>
      <li><a href="http://getskeleton.com/">Skeleton</a></li>
-      <li></li><a href="https://hankchizljaw.com/wrote/a-modern-css-reset/">A Modern CSS Reset</a> (Nur Reset-Funktion)
+      <li><a href="https://hankchizljaw.com/wrote/a-modern-css-reset/">A Modern CSS Reset</a> (Nur Reset-Funktion)
      </li>
    </ul>
+    <h3 class="mume-header" id="css-inhalte-positionieren">CSS Inhalte positionieren</h3>
+    <ul>
+      <li><a href="https://www.mediaevent.de/css/position-float.html">CSS float &#x2013; Positionieren und
+          Umflie&#xDF;en</a></li>
+      <li><a href="https://www.mediaevent.de/css/position.html">CSS position</a></li>
+      <li><a href="https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/">Flexbox</a></li>
+    </ul>
+    <h3 class="mume-header" id="interne-links-1">Interne Links</h3>
+
+    <ul>
+      <li><a href="file:///home/andy/cloud/schule/webdev/html/float.html">float</a></li>
+      <li><a href="file:///home/andy/cloud/schule/webdev/html/position">position</a></li>
+      <li><a href="file:///home/andy/cloud/schule/webdev/html/flex.html">flexbox</a></li>
+      <li><a href="file:///home/andy/cloud/schule/webdev/html/grid.html">grid</a></li>
+    </ul>
+
  </main>

  <footer>
-  <div class="wrapper">
-    <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p></div>
+    <div class="wrapper">
+      <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
+    </div>
  </footer>
  <script src="js/code.js"></script>
 </body>
Author	SHA1	Message	Date
Andy	29151c4458	css	2020-03-03 15:55:35 +01:00
andy	b44d483c1c	css	2020-03-03 15:50:24 +01:00