Dieses Tutorial zeigt Ihnen, wie Sie eine Website im Notizbuch-Stil nur mit CSS erstellen.
Zuerst beginnen wir mit der Erstellung eines grundlegenden Wrappers, indem wir festlegen, dass das body-Tag die folgenden CSS-Eigenschaften haben soll
body {
background-color: #f5f5f5;
width: 600px;
margin: 0 auto;
padding: 0;
}Als nächstes erstellen wir eine unsortierte Liste, ich nenne meine list
.list {
color: #555;
font-size: 22px;
padding: 0 !important;
width: 500px;
font-family: courier, monospace;
border: 1px solid #dedede;
}Der Grund, warum padding:0; wichtig ist, liegt daran, dass später im Tutorial, wenn wir die roten Notizbuchlinien hinzufügen, die Dinge durcheinander geraten. Die Breite kann beliebig festgelegt werden; ich habe nur 600px gewählt, weil es am besten passt. Eine weitere wichtige Eigenschaft hier ist der Rahmen. Das sorgt für ein schönes und sauberes Aussehen.
Als nächstes stylen wir die li's
.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
text-indent: 25px;
height: auto;
padding: 10px;
text-transform: capitalize;
}Das ist ziemlich selbsterklärend. Achten Sie darauf, border-bottom: 1px dotted #ccc; hinzuzufügen. Das gibt dem Ganzen meiner Meinung nach wirklich das "Notizbuchpapier"-Thema.
Wenn Sie möchten, können Sie die Pseudoklasse :hover auf li verwenden, um es noch sauberer aussehen zu lassen. Wer schätzt nicht einen schönen Hover-Effekt?
.list li:hover {
background-color: #f0f0f0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}Hier ist unser bisheriger HTML-Code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Theme: Notepad</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>Notes</h4>
<ul id="List">
<li>Eat Breakfeast</li>
<li>Feed Pugsly, the cow</li>
<li>Sit Down</li>
<li>Eat lunch</li>
<li>Call mom</li>
<li>Tweet about feeding my cow, pugsly</li>
<li>Join a hangout in google+</li>
<li>Prepare Dinner</li>
<li>Eat Dinner</li>
<li>Get ready for bed</li>
<li>Go to bed</li>
</ul>
</body>
</html>Zuletzt fügen wir die vertikalen roten Linien hinzu
.lines {
border-left: 1px solid #ffaa9f;
border-right: 1px solid #ffaa9f;
width: 2px;
float: left;
height: 495px;
margin-left: 40px;
}Das ist wahrscheinlich das schönste an diesem Tutorial, aber auch das, was ich am meisten hasse, da es keine Möglichkeit gab, es so zu machen, dass es sich von selbst anpasst, wenn Sie ein neues Listenelement hinzufügen. Also müssen Sie jedes Mal, wenn Sie ein neues li hinzufügen, die Höhe der roten Linien anpassen – was eine große Plage ist. Abgesehen davon stellen Sie sicher, dass Sie eine width von 2px angeben, sonst ist es nur eine Linie.
Eine letzte Sache: Sie müssen text-indent von 25px zu den Listenelementen hinzufügen, damit der Text nicht direkt neben den roten Linien gerendert wird.
Wenn Sie bereit sind, die roten Linien hinzuzufügen, fügen Sie diesen Code **vor** dem <ul> ein.
<div class="lines"></div>Ihr endgültiges CSS wird so aussehen
body {
background-color: #f5f5f5;
width: 600px;
margin: 0 auto;
padding: 0;
}
h4 {
color: #cd0000;
font-size: 42px;
letter-spacing: -2px;
text-align: left;
}
.list {
color: #555;
font-size: 22px;
padding: 0 !important;
width: 500px;
font-family: courier, monospace;
border: 1px solid #dedede;
}
.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
text-indent: 25px;
height: auto;
padding: 10px;
text-transform: capitalize;
}
.list li:hover {
background-color: #f0f0f0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
.lines {
border-left: 1px solid #ffaa9f;
border-right: 1px solid #ffaa9f;
width: 2px;
float: left;
height: 495px;
margin-left: 40px;
}
Hier ist eine Demo des abgeschlossenen Designs
Gute Arbeit, Allen. Mach weiter so!
Das ist genau das, was ich mir 1998 vorgestellt habe, bevor ich mit dem Webdesign begann. Damals erkannte ich, wie schwierig es sein würde.
Danke, dass du es einfach aussehen lässt!
In diesem Fall ist text-indent eine schlechte Lösung. Bei langen, mehrzeiligen Texten klebt er an den roten Linien. Polsterung links mit der Summe aus linkem Rand und Polsterung löst das Problem.
14 Jahre alt? Ich dachte, ich wäre der Einzige!
Ich auch!
Ich auch
Jemand sollte eine Website für junge Teenager erstellen, die sich für Webentwicklung interessieren, um gemeinsam an zufälligen Dingen zu arbeiten :)
also bin ich nicht der einzige?
15 hier!
Also bin ich definitiv nicht die Einzige.
Wir sind viele!
Wow! Und ich dachte, ich wäre der einzige CSS-Entwickler in meinem Alter. @kevin: stimme zu
Ich habe selbst mit 15 angefangen im Frontend-Design/-Entwicklung, jetzt mache ich das schon über 10 Jahre! Schön zu hören, dass junge Leute immer noch sehr stark in der Frontend-Entwicklung involviert sind. Man kann als Frontend-Entwickler viel Geld verdienen, und es macht Spaß! Viel Erfolg an alle auf diesem Gebiet.
Versuchen Sie, keine großgeschriebenen Buchstaben in Klassen und IDs einzufügen, das macht die Arbeit auf Linux-Servern einfacher :D
Übrigens bin ich 15, wir sollten diesen Blog wirklich starten. Vielleicht mache ich das, sobald ich mit einigen Kundenprojekten fertig bin
Ja, ich bin 17 und mache seit 5 Jahren Webentwicklung. Wenn jemand diesen Blog starten möchte, werde ich auf jeden Fall mitmachen. Ich habe schon meinen eigenen Blog erstellt, aber ich hasste das Design, also möchte ich Teil von etwas Größerem sein.
@Ryan: Es geht los! Ich poste es, sobald ich fertig bin.
Es ist toll zu sehen, dass so viele Leute in meinem Alter das tun, was mich interessiert. Wenn jemand Interesse hat, meine Website ist alexforey.com, die ich selbst von Grund auf neu geschrieben habe.
Jedenfalls möchte ich mich nur vielmals bedanken, diese Art von Inhalten ist heute wirklich wichtig im Web, und vielen Dank an CSS-Tricks, dass sie das ermöglicht haben.
@Ian: Okay, lass mich wissen, was du hast. Ich arbeite auch an einer Version mit ein paar Freunden. Wir werden sehen, wer gewinnt ;)
Weiß jemand, ob dieser Blog tatsächlich erstellt wurde? :)
Ich bin erst 13, aber ich habe mit 9 angefangen.
Sehr schönes Tutorial Allen, danke dafür.
@Miles, ich weiß genau, was du meinst… ich wollte dasselbe.
Wow, so gut war ich vor drei Jahren definitiv nicht! Haha.
Respekt dafür, Herr Allen.
Eine Idee, die ich hatte, war,
.list::beforestatt.lineszu schreiben. So müssen wir kein zusätzliches Element hinzufügen. Fügen Sie einfach einen weiteren Parametercontent:'';zum CSS hinzu und Sie sind fertig.Dann können Sie .list auf position:relative setzen und :before auf height:100%; und Sie müssen sich keine Sorgen mehr machen, die Höhe von .lines jedes Mal zu ändern, wenn ein Listenelement hinzugefügt oder entfernt wird.
Und ich bin erst 16 und dachte, ich wäre der Einzige. . .
Ein sehr guter Artikel und ich liebe das Ergebnis. Ich möchte Chris hier tatsächlich danken. Ich habe ziemlich früh mit der Webentwicklung angefangen und ich glaube, der einzige Blog, an den ich mich oft erinnere, war Eric Meyers. Es ist also großartig zu sehen, dass alles, was Sie hier tun, nicht nur anderen jungen Entwicklern hilft (ich bin jetzt 18, also nicht mehr ganz so jung!), sondern ihnen auch die Möglichkeit gibt, hier einen Artikel zu veröffentlichen.
Ich sehe ein paar verschiedene Wege, das zu tun. Welcher Weg ist Ihrer Meinung nach besser?
Ein Vorschlag, den ich machen würde, sind die roten Linien. Ein 4px Doppelrahmen wäre wahrscheinlich gut.
Ich dachte, ich würde mich mal an einigen Updates versuchen =)
http://jsfiddle.net/chriscoyier/KVjFQ/42/
Unterschiede
Ich könnte mir vorstellen, dass eine unterhaltsame Entwicklererweiterung davon das Hinzufügen des `contenteditable`-Attributs zu Listenelementen und das Speichern der Änderungen in einer Datenbank wäre.
Nochmal vielen Dank, Allen!
Es wäre cool, wenn es eine einfache Möglichkeit gäbe, allen Listenpunkten ein "title"-Attribut mit ihrem Inhalt zu geben, sodass beim Überfliegen von Punkten, die zu lang sind, der vollständige Inhalt angezeigt wird.
Zusätzliches Update: Verwenden Sie `border-left: 4px double #ffaa9f;` anstelle der beiden separaten Rahmen. Sie benötigen dafür auch keine Breite.
BH
Anstatt text-indent, das nur auf die erste Zeile angewendet wird, sollten Sie wahrscheinlich padding-left verwenden, um den Text unabhängig von seiner Länge hinter Ihre roten Linien zu schieben.
Die Möglichkeit einer mehrzeiligen li bedeutet auch, dass Sie die Erstellung der Linien durch den Rahmen überdenken sollten. Eine Lösung (mit CSS3) könnte die Verwendung von linearen Hintergrundverläufen sein, die auf Ihre Zeilenhöhe abgestimmt sind.
Wenn ich darüber nachdenke, könnten Sie diese roten Linien mit der gleichen Technik wie für das ul erstellen und die .lines div komplett entfernen.
Was denkst du?
Danke euch allen für die Kommentare, ich hoffe, ich werde in Zukunft besser und dies war nur ein kleines Nebenprojekt.
@Chris –
Ich schätze es sehr, dass Sie mich auf Ihrer Website vorstellen; das bedeutet mir wirklich viel!
@Chris Coyier
Sie können das Pseudoelement entfernen und durch einen Farbverlaufshintergrund auf dem .list-Block ersetzen
background:linear-gradient(left, #f5f5f5 0%, #f5f5f5 24px, #ffaa9f 25px, #f5f5f5 26px,#f5f5f5 27px, #ffaa9f 28px,#f5f5f5 29px, #f5f5f5 100%) ;
linear-gradient benötigt möglicherweise ein Präfix für Ihren Browser.
Wäre es möglich, Haken/Kreuze/irgendeine Art von Symbolen hinzuzufügen, um es wie eine unvollständig ausgefüllte Checkliste aussehen zu lassen?
… als Hintergrundbild auf der li
Das gefällt mir.
Eine Möglichkeit, die roten Linien automatischer zu erstellen, wäre die Verwendung einer Daten-URI im CSS. Das benötigte Bild ist so klein, dass es meiner Meinung nach gut in diesen Fall passt, obwohl es technisch gesehen kein "reines" CSS ist, da man es ohne ein spezielles Werkzeug nicht wirklich bearbeiten kann.
Wenn Sie dies direkt in die Demo einfügen, erhalten Sie einige seltsame Effekte beim Hovern aufgrund der Übergänge, die auf "all" gesetzt sind, und das Bild passt beim Hovern nicht ganz – alles leicht zu beheben.
entsprechende Breite in .list:before ;) qiqiqiqi…
Danke ☻
Verdammt, 14 Jahre alt und hat schon ein besseres Design als ich, jetzt bin ich deprimiert.
Es scheint, als könnten Sie die beiden linken Rahmen (den äußeren Notizrahmen & die doppelten roten Linien) mit dem
outline-Attribut realisieren (was meiner Meinung nach CSS3 ist).Dies würde es den roten Linien ermöglichen, mit dem Container mitzuwachsen, und die Notwendigkeit der leeren
diventfernen.Ich bin keineswegs ein Designer und habe keine Ahnung, wie die Unterstützung für
outlinebei den heutigen Browsern aussieht. Diese Jungs wissen mehr darüber als ich!Allen, ich wollte mir deine Seite ansehen, aber ich bekomme für alles außer der Startseite eine (gut gemachte) 404-Seite.
Das tut mir sehr leid und ich weiß, dass es schlecht aussieht! Sehen Sie, ich bin gerade erst am 2. dieses Monats gestartet und war so in Dinge vertieft, dass ich all diese Artikel nicht schreiben konnte. Außerdem gestalte ich http://allenlawson.net neu, also wenn sich das Aussehen ändert, werden die Artikel geschrieben, online und funktionsfähig sein.
Vielen Dank.
Die Seite sieht großartig aus.
Ich bin neugierig, einige deiner Artikel zu lesen. Insbesondere der über deine Entscheidung, WordPress nicht zu verwenden.
Haben Sie ein geschätztes Datum für den Relaunch?
Das Gleiche hier, ich würde gerne deine Artikel lesen! Hoffe, du kannst deine Seite bald hochfahren, Allen.
Noch einen Schritt weiter… http://dabblet.com/gist/1896726
Danke für den besten Artikel…. Das ist fantastisch…
Ich musste die ID `ul id=List` zu `ul class=list` ändern, damit es funktioniert
Al
Toller Artikel, obwohl es einen Bug im HTML-Code gibt. Schade, dass Allens Seite kaputt ist, ich hätte gerne einige seiner Artikel gelesen.
wow chris, schönes Timing, ich habe das bullet.planimus.com vor etwa 2 Tagen gemacht!! :( und es hat mir Höllenqualen bereitet.
Es ist immer wunderbar, CSS zu sehen, wo früher ein Bild verwendet worden wäre.
Dieses Ding ist fehlerhaft… was passiert, wenn der Text nicht in eine Zeile passt… der Container dehnt sich aus, was in einem Originalnotizbuch nicht sein kann :). Sie müssen es so gestalten, dass, wenn der Text überläuft, er in die nächste Zeile geht und die Liste darunter zur nächsten Zeile verschiebt.
Tolles Tutorial!
Ich bin selbst ein 16-jähriger Webentwickler/Designer und hoffe, eines Tages hier auf diesem Blog vorgestellt zu werden (ich werde ein oder zwei Artikel schreiben und sie Chris per E-Mail schicken, um zu sehen, was er denkt).
Ich neige dazu, den meisten Punkten zuzustimmen, die gemacht wurden, um die Liste von einer festen Breite abzuhalten und die .lines div in ein Pseudoelement zu ändern – aber ansonsten gute Arbeit!
Cool, danke dafür!
Ihr Blog lädt wirklich mit erstaunlicher Geschwindigkeit. Der obige CSS-Trick ist wirkungsvoll, er sieht sehr schön aus. Er sieht gut aus für persönliche Blogs, denke ich.
Ich weiß nicht, wie es anderen geht, aber ich war enttäuscht, als ich die Liste nicht anklicken und bearbeiten konnte. Diese Idee schreit nach "content editable" und einer raffinierten HTML5-Speicherlösung, um das zu speichern, was der Benutzer ändert.
Ich weiß, dass das nicht die ursprüngliche Idee war, es ist nur das, was mir in den Sinn kommt, es ist das, was mein Unterbewusstsein erwartet hat.
Ursprünglich habe ich in meinem Design "content editable" hinzugefügt. Ich habe es wieder entfernt, kurz bevor ich die Datei an Chris geschickt habe, weil es mir einfach nicht gefallen hat. Meine ganze Idee war, eine Liste im Notizbuch-Stil zu erstellen, ich habe mich nicht auf die Funktionalität konzentriert. Aber ja, dieses Projekt schreit nach HTML5 und CSS3.
Gut gemacht, Allen. Ich habe mit 15 Jahren mit der Webentwicklung angefangen, war aber in diesem Alter bei weitem nicht so gut. Nett!
Es ist wirklich toll zu sehen, dass auch die *junge Web-Community* angefangen hat, beizutragen. Obwohl ich jetzt 18 bin, habe ich nie daran gedacht, so etwas zu machen.
Hut ab vor deinem Kind :)
Perfekt, genau das, was ich gesucht habe!
Habe gerade ein wenig an deinem Code getüftelt :)
CSS hinzugefügt
.choose { float: right;
position: relative;}
.checkbox {
content: “”;
width: 0.55em;
height: 1em;
top: 50%;
left: auto;
-webkit-transform: rotate(45deg) skew(5deg);
-webkit-transform-origin: 50% 50%;
-moz-transform: rotate(45deg) skew(5deg);
-moz-transform-origin: 50% 50%;
-o-transform:rotate(45deg) skew(5deg);
-o-transform-origin:50% 50%;
-ms-transform: rotate(45deg) skew(5deg);
-ms-transform-origin: 50% 50%;
right: 1.1em;
border: .35em solid;
border-top: none;
border-left: none;
margin-top: -0.35em;
margin-right: 0.5em;
border-color: #DDD;
}
.checked { border-color: #06AB06;}
.strikeout { text-decoration: line-through;}
HTML hinzugefügt: fügen Sie hinzu <div class=”choose”>
<div name=”option” value=”done” class=”checkbox”></div>
</div> innerhalb jeder <li>
JS (jQuery) hinzugefügt
$(“.list”).find(“.checkbox”).each(function(i, el) {
$(this).click(function(){
$(this).toggleClass(‘checked’);
$(this).parent().parent().toggleClass(‘strikeout’);
});
});
Probieren Sie es aus :) gute Arbeit, Allen :D
Beeindruckende Arbeit für einen "Jungspund"! Oder auch für einen "Altmeister".
Sie müssen Polsterung nicht vermeiden, verwenden Sie einfach background-origin, um den Hintergrund richtig relativ zur Content-Box zu positionieren.
Ich habe vor 2 Monaten eine ähnliche Demo gemacht: http://dabblet.com/gist/1560717
Ich habe eine ähnliche Seite für meine Apache-Verzeichnisindizes mit CSS-Verläufen & mehreren Hintergrundbildern erstellt
CSS-Demos
Gute Arbeit Allen. Glückwunsch und weiter so!
Es gibt einen viel besseren Weg, dies zu tun, der keine Höhenänderung erfordert und keine Dummy-div benötigt.
ul{list-style:none;padding:0;background:#ffe;box-shadow:0 0 7px #000}
li{height:36px;border-bottom:solid 1px #bba}
li:before{content:””;border-right:2px solid #ffaa9f;width:60px;float:left;height:100%;margin-right:10px}
Probieren Sie es bei jeder Liste aus =)
Tolles Tutorial! Ich kann es kaum erwarten, mit dieser Idee zu spielen…
Hallo Allen, ich werde keine Kommentare zu möglichen Verbesserungen abgeben etc. zu diesem großartigen Beitrag, den Sie verfasst haben. Was ich Ihnen ausdrücken möchte, ist, dass Sie 14 Jahre alt sind, an einem echten Durchbruchsmoment in der Webtechnologie. Sie haben eine klare Leidenschaft dafür, und mit 14 Jahren entwickeln, denken und lösen Sie Probleme mit dieser Technologie. Nutzen Sie diese Gelegenheit, machen Sie weiter mit dieser Arbeit und Sie werden absolut erfolgreich sein. In vier Jahren sind Sie 18, wenn Sie das jetzt mit 14 tun und weiter aufbauen und entwickeln, werden Sie zu diesem Zeitpunkt ein ernsthafter Experte sein, ein echter Experte.
Gut gemacht, es ist so gut zu sehen, dass die Web-Community Sie zu Recht ermutigt.
PS: Sie sollten das Buch "Outliers" und insbesondere die 10.000-Stunden-Regel lesen, Ihre Generation hat eine erstaunliche Zukunft, das Timing ist erstaunlich für Sie.
Kommentare wie dieser halten mich am Laufen (; hat definitiv meinen Tag gemacht.
Zu denken, dass ich vor 14 Jahren meine erste Website erstellt habe. Großartig, inspirierende junge Köpfe zu sehen. Mach weiter so.
Eine sehr gute Idee, Listen als Linien zu verwenden. Ich würde jedoch lieber Farbverläufe als Papierlinien verwenden. Aber die Verwendung von Listen als Hilfselement gibt uns eine neue Idee: **Hey, wir können das als eine Art kleines Menü verwenden, wenn wir einen Anker-Tag einfügen** :)
PS: Ähm.. ich glaube, Sie meinen
<ul class="list">anstelle von<ul id="list">Hallo Allen, ich bin so aufgeregt und überrascht. Als ich 14 Jahre alt war, war ich nicht so gut wie du. Du wirst ein Experte und wirst in Zukunft die Fähigkeit haben, Unterschiede in der Webtechnologie zu machen. Mach weiter so mit wundervoller Arbeit. In 4 Jahren wirst du ein extrem erfahrener Entwickler sein. Gute Arbeit.
:)
Toller Trick Mann, sehr schöner Effekt!
-Chris
Ihre Lösung ist meiner Meinung nach nicht die beste – erstens scheint sie in FF10 etwas fehlerhaft zu sein, da die "lines"-div kürzer ist als die Liste selbst. Warum nicht einfach den grauen Umriss auf das Element legen, ihm einen linken Abstand von 40px geben und den Elementen einen linken "doppelten" roten Rahmen? So braucht man das .lines-Element gar nicht. Und der text-indent scheint auch nicht ganz wie erwartet zu funktionieren, wenn der Text auf mehrere Zeilen aufgeteilt ist, vielleicht wäre padding besser?
Ich mag, wie einfach das Design aussieht…
Ich habe dies in Google Chrome getestet, wird dies auch mit IE6 kompatibel sein?
ie6? wow, wirklich?
Ziemlich cool, ein klassisches Thema auf einem modernen Gerät sieht toll aus.
Ich werde nie genug Zeit haben, so etwas zu entwickeln, auch wenn ich darüber nachdenke.
Dank der Demografie (unter anderem) für junge Leute, die genug Zeit UND Vorstellungskraft dafür haben.
Cooler Beitrag. Yep.
Nur zur Information: Mit 14 Jahren habe ich gemalt.
Computer waren für Sci-Fi-Filme.
http://kougiland.com/css3-notebook.html
Das von einem 14-Jährigen zu hören, ist ziemlich verlockend. Nicht nur das Ergebnis ist großartig, sondern auch das CSS ist optimiert. Weiter so, Allen!
Wow… 14 Jahre alt? Ich habe mit 16 Jahren mit der Webentwicklung angefangen. Tolle Arbeit, Allen!
Du bist großartig
Hallo Allen,
Ich bekomme die Linie nicht hin, es wird nur eine Liste von Texten mit rotem Rand angezeigt. Dein Code sieht nicht aus wie auf dem obigen Bild….
Schöner Artikel. Genau danach habe ich gesucht. Vielen Dank.
Ich persönlich hätte eine Listenposition von 'outside' verwendet, damit der Textumbruch die gleiche linke Ausrichtung hat. Ansonsten ein schöner Effekt, Chris!
Beste Grüße,
Dan DiGangi
@ddigangi
Hallo Freunde,
Meine Anforderung ist, dass ich Text in ein Textbereich-Feld eingeben muss, aber es soll wie eine Seite in einem Notizbuch aussehen… Können Sie mir bei dieser Anforderung helfen?
Die Linien könnten auch mit ::after gemacht werden, um die zusätzliche DIV zu vermeiden
http://jsfiddle.net/codepo8/KVjFQ/1953/
Das habe ich von einem großartigen Redner bei Converge SE gelernt
Gibt es noch andere junge (14-jährige) Webentwickler aus Großbritannien? Ich spreche fließend CSS/HTML/JS (inkl. jQuery)/PHP. Wenn Sie ähnliche Talente haben, fügen Sie mich auf Twitter hinzu (@tompntn) und wir können uns gegenseitig helfen und unsere Arbeit besprechen usw… Ich weiß, es ist ein langer Schuss, aber einen Versuch wert :)
Ich bin 13 und kenne: HTML5, CSS3, JavaScript, jQuery und ASP.NET. Ich lebe in Deutschland, bin Amerikaner. Ich mache eine Website, auf der junge Teenager Webentwicklung und mehr lernen können. Ich habe zwei Mitarbeiter, die auch 13 sind. Willst du dem Coding-Team beitreten?
@Tom Pointon das bedeutet dich xD