diff --git a/README.md b/README.md index 040e483..19a3099 100644 --- 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) diff --git a/css/code.css b/css/code.css index cdb0051..f49774c 100644 --- 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; diff --git a/css/position.css b/css/position.css new file mode 100644 index 0000000..94ae9b6 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/css/struktur.css b/css/struktur.css new file mode 100644 index 0000000..6a61d16 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index cc3ac5d..bc0db1b 100644 --- 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{ diff --git a/html/float.html b/html/float.html new file mode 100644 index 0000000..d6564dc --- /dev/null +++ b/html/float.html @@ -0,0 +1,88 @@ + + + + + + + + HTML Struktur + + + + + + + +
+
+ Mein logo + +
+
+ +
+

Inhalt strukturieren mit css

+
+

Float

+
+
+
+
+
+
+
+
+
+

Die Boxen

+ 
+<article>
+    <h2>Float</h2>
+    <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>
+  </article>
+
+
+

& Der Clearfix

+ 
+.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;
+}
+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/html/formular.html b/html/formular.html index a5dd7ff..b58cc9a 100644 --- a/html/formular.html +++ b/html/formular.html @@ -14,7 +14,7 @@
- Mein logo + Mein logo