adb.study
/
webdesign-Becker_Ehricht_Fleck_Minkowitsch_Pfau
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
master
adb-sh 2 years ago
commit 9d2bb4b860
17 changed files with 2522 additions and 0 deletions
Show Stats Download Patch File Download Diff File

5
Gruppenmitglieder.txt
Unescape Escape View File

@ -0,0 +1,5 @@
Alban Becker
Leon Ehricht
Luca Nicolas Fleck
Niklas Minkowitsch
Lukas Pfau (730134)

289
css/animations.css
Unescape Escape View File

@ -0,0 +1,289 @@
/* ---------------Animationen Startseite----------------- */
:root {
--width1: calc(100% - 100px);
--width2: 0px;
--width3: calc(100% - 200px);
}
/* ---------------Beispiel auf der Startseite--------------*/
#beispiel{
background-color: aqua;
color: black;
border: 3px solid rgb(255, 0, 0);
border-radius: 0.4em;
animation-timing-function: ease;
width: 100px;
height: 100px;
animation-name: beispiel;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
text-align: center;
align-self: end;
position: relative;
}
@keyframes beispiel {
0% {
transform: rotate(0deg);
left:var(--width2);
}
25% {
transform: rotate(90deg);
left:var(--width2);
background-color: blue;
border-color: orange;
}
50% {
transform: scale(1.5);
background-color: blueviolet;
border-color: green;
transform: rotate(180deg);
left:var(--width1);
}
75% {
transform: rotate(270deg);
left:var(--width1);
background-color: red;
border-color: lightblue;
}
100% {
background-color: yellow;
border-color: pink;
transform: rotate(360deg);
left:var(--width2);
}
}
/* -----------------Animationen Beispiele--------------------------- */
/* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/
#stempel1{
color: red;
border: 2px solid red;
padding: 10px;
width: 120px;
text-align: center;
font-size: 25px;
position: relative;
animation-name: stempel1;
animation-duration: 5s;
animation-fill-mode: forwards;
}
@keyframes stempel1 {
0%{
transform: scale(1) rotate(10deg)
}
50%{
transform: scale(1.5) rotate(30deg);
}
100%
{
transform: scale(1) rotate(10deg)
}
}
/* ---------------Beispiel 1 für die animation duration--------------- */
#beispiel6 {
color: red;
border: 2px solid yellow;
padding: 10px;
width: 100px;
height: px;
text-align: center;
font-size: 25px;
position: relative;
animation-name: beispiel6;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes beispiel6 {
0%{
transform: scale(1);
left:var(--width2);
}
50%{
transform: scale(1.5);
left:var(--width3);
}
100%
{
transform: scale(1);
left:var(--width2);
}
}
/* ---------------Beispiel 1 für die animation duration ---------------*/
#beispiel7 {
color: red;
border: 2px solid yellow;
padding: 10px;
width: 100px;
height: px;
text-align: center;
font-size: 25px;
position: relative;
animation-name: beispiel7;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes beispiel7 {
0%{
transform: scale(1);
left:var(--width2);
}
50%{
transform: scale(1.5);
left:var(--width3);
}
100%
{
transform: scale(1);
left:var(--width2);
}
}
/*--------------- Beispiel 1 für die animation direction ---------------*/
#beispiel4 {
color: red;
border: 2px solid yellow;
border-radius: 0.4em;
padding: 10px;
width: 100px;
height: px;
text-align: center;
font-size: 25px;
position: relative;
animation-name: beispiel4;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
}
@keyframes beispiel4 {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%
{
transform: rotate(360deg)
}
}
/*--------------- Beispiel 2 für die animation direction ---------------*/
#beispiel5 {
color: red;
border: 2px solid yellow;
border-radius: 0.4em;
padding: 10px;
width: 100px;
text-align: center;
font-size: 25px;
position: relative;
animation-name: beispiel5;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
@keyframes beispiel5 {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%
{
transform: rotate(360deg)
}
}
/*--------------- Beispiel 1 für die animation timing funktion ---------------*/
#beispiel1 {
color: red;
border: 2px solid yellow;
padding: 10px;
width: 100px;
text-align: center;
font-size: 25px;
position: relative;
animation-name: beispiel1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes beispiel1 {
0%{
transform: scale(1);
left:var(--width2);
}
50%{
transform: scale(1.5);
left:var(--width3);
}
100%
{
transform: scale(1);
left:var(--width2);
}
}
/*--------------- Beispiel 2 für die animation timing funktion ---------------*/
#beispiel2 {
color: red;
border: 2px solid yellow;
padding: 10px;
width: 100px;
text-align: center;
font-size: 25px;
position: relative;
animation-name: beispiel2;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes beispiel2 {
0%{
transform: scale(1);
left:var(--width2);
}
50%{
transform: scale(1.5);
left:var(--width3);
}
100%
{
transform: scale(1);
left:var(--width2);
}
}

95
css/flexbox.css
Unescape Escape View File

@ -0,0 +1,95 @@
/*--------------allgemeines-Screen-------------------*/
#example1 {
display: flex;
}
#example2 {
display: flex;
flex-direction: column;
}
/*--------------eigenschaften-Screen-------------------*/
#example3 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#example4 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 600px;
}
#example5 {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#example6 {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
#example7 {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-content: space-between;
min-height: 300px;
}
#example8 {
display: flex;
flex-flow: row nowrap;
overflow-x: scroll;
}
#example9 {
display: flex;
flex-flow: column nowrap;
max-height: 600px;
overflow-y: scroll;
}
/*--------------unterelemente-Screen-------------------*/
#example10 {
display: flex;
flex-flow: row nowrap;
}
#example10 > p {
flex-grow: 1;
}
#example11 {
display: flex;
flex-flow: row nowrap;
}
#example11 > p {
flex-basis: 100px;
}
#example12 {
display: flex;
flex-flow: row nowrap;
}
#example12 > p {
flex-basis: 40px;
flex-shrink: 0;
}
#example13 {
display: flex;
flex-flow: row nowrap;
}
#example13 > p {
flex-basis: 40px;
flex-shrink: 1;
}

102
css/grid.css
Unescape Escape View File

@ -0,0 +1,102 @@
/*--------------allgemeines-Screen-------------------*/
#example1 {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
#example2 {
display: grid;
grid-template-columns: auto;
}
#example3 {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
#item1 {
grid-column-start: 1;
grid-column-end: 3;
}
/*--------------container-Screen-------------------*/
#example4 {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
#example5 {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 150px 100px 200px;
}
#example6 {
display: grid;
grid-template-columns: 50px 50px 50px;
justify-content: space-evenly;
}
#example7 {
display: grid;
grid-template-columns: 50px 50px 50px;
justify-content: center;
}
#example8 {
display: grid;
grid-template-columns: auto auto auto;
}
#item2 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
#item3 {
grid-column: 1 / span 3;
}
/*--------------items-Screen-------------------*/
#example9 {
display: grid;
grid-template-columns: auto auto auto auto;
}
#item4 {
grid-area: 1 / 2 / 4 / 4;
}
#example10 {
display: grid;
grid-template-areas:
'header header header header header header'
'nav main main main aside aside'
'nav footer footer footer footer footer';
gap: 10px;
}
#item5 {
grid-area: header;
}
#item6 {
grid-area: nav;
}
#item7 {
grid-area: main;
}
#item8 {
grid-area: aside;
}
#item9 {
grid-area: footer;
}

117
css/layout.css
Unescape Escape View File

@ -0,0 +1,117 @@
/* ---------- Farben ---------- */
:root {
--primary: #1D2026;
--secondary: #2e3137;
--accent: darkslategrey;
}
/* ---------- Basic Layout ---------- */
body {
background-color: var(--primary);
color: aliceblue;
font-family: Montserrat, sans-serif;
margin: 0;
font-size: 18px;
display: grid;
gap: 0em;
grid-template-columns: 10% 1fr 10%;
grid-template-rows: 1fr 1fr 1fr 1fr 80px;
height: 100vh;
}
header {
grid-row: 1;
grid-column: 2/3;
}
main {
grid-row: 4;
grid-column: 2/3;
padding: 8px 100px 8px 100px;
background-color: var(--secondary);
}
footer {
padding: 15px;
background-color: var(--accent);
grid-row: 5/6;
grid-column: 1/4;
}
/* ----- Classes ----- */
.navigationbar {
grid-row: 2;
grid-column: 1/4;
background-color: var(--accent);
padding: 5px;
display: flex;
align-items: center;
}
.navigationbar a{
color: aliceblue;
padding: 10px;
margin-left: 5px;
text-decoration: none;
transition: 400ms;
text-align: center;
flex-grow: 1;
}
.navigationbar a:hover{
background: darkgray;
}
.navigationbar:nth-of-type(2) {
grid-row: 3;
grid-column: 2/3;
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
.code-example {
margin: 4px;
padding: 8px;
border-radius: 0.4em;
background-color: rgba(40, 40, 40, 0.8);
max-width: 550px;
}
.visual-example {
background-color: gray;
border: 2px solid;
margin: 4px;
max-width: 400px;
}
.visual-example > p {
background-color: darkolivegreen;
padding: 20px;
border: 2px solid aliceblue;
text-align: center;
}
.explanation {
background-color: rgba(28, 33, 38, 0.8);
padding: 8px;
margin: 4px;
border-left: 6px solid aliceblue;
border-radius: 0.4em;
}
/* ----- Responsivnes der Seite ----- */
@media (max-width: 600px) {
main {
grid-column: 1/5;
padding: 8px;
}
.navigationbar {
flex-direction: column;
}
.navigationbar:nth-of-type(2) {
grid-column: 1/5;
}
}

119
css/text_styling.css
Unescape Escape View File

@ -0,0 +1,119 @@
/*--------------Veränderung der Textgröße--------------*/
#font-sizePX{
font-size: 20px;
}
#font-sizePR{
font-size: 120%;
}
#font-sizeCM{
font-size: 1cm;
}
#font-sizeS{
font-size: smaller;
}
#font-sizeM{
font-size: medium;
}
#font-sizeL{
font-size: larger;
}
/*--------------Veränderung der Textart--------------*/
#font-familyA{
font-family: Arial;
}
#font-familyG{
font-family: Georgia;
}
#font-familyLH{
font-family: Lucida Handwriting;
}
/*--------------Schriftfarbe ändern--------------*/
#colorW{
color: red;
}
#colorZ{
color: rgb(81, 132, 109);
}
/*--------------Schrift stylen--------------*/
#font-styleI{
font-style: italic;
}
#font-styleO{
font-style: oblique;
}
/*--------------Schriftdicke verändern--------------*/
#font-weightB{
font-weight: bold;
}
#font-weightZ{
font-weight: 700;
}
/*--------------Schrift Variante ändern--------------*/
#font-variant{
font-variant: small-caps;
}
/*--------------Textausrichtung ändern--------------*/
#text-alignL{
text-align: left;
}
#text-alignR{
text-align: right;
}
#text-alignC{
text-align: center;
}
#text-alignJ{
text-align: justify;
}
/*--------------Textgestaltung--------------*/
#text-decorationU{
text-decoration: underline;
}
#text-decorationO{
text-decoration: overline;
margin: 4px;;
}
#text-decorationLT{
text-decoration: line-through;
}
/*--------------Wort- und Zeichenabstände verändern--------------*/
#word-spacingMM{
word-spacing: 3mm;
}
#word-spacingPX{
word-spacing: 10px;
}
#word-spacingREM{
word-spacing: 1rem;
}
/*--------------Texte einrücken--------------*/
#text-indentMM{
text-indent: 10mm
}
#text-indentPX{
text-indent: 20px;
}
#text-indentREM{
text-indent: 1rem;
}
/*--------------Texte transvormieren--------------*/
#text-transformC{
text-transform: capitalize
}
#text-transformU{
text-transform: uppercase
}
#text-transformL{
text-transform: lowercase
}
#text-transformN{
text-transform: none
}

114
screens/animation/animations.html
Unescape Escape View File

@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animationen</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/animations.css">
</head>
<body>
<header>
<h1>Animationen</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="animations.html">Animation Einführung</a>
<a href="keyframes.html">Animations Funktionen</a>
</nav>
<main>
<article>
<section>
<h2>
Animationen mit CSS
</h2>
<p>
Mit Animationen und den dazugehörenden Funktionen wie zum Beispiel @keyframes
lassen sich relativ einfach Objekte erstellen,
die sich über die Webseite bewegen.
</p>
<p>
Schrift kann außerdem gedreht und verschoben werden. <br>
Dadurch erscheint eine Webseite viel dynamischer und visuel ansprechender.
</p>
</section>
<section>
<div id="beispiel"></div>
<br>
<div class="code-example">
<code>
#example2 { <br>
&emsp;#beispiel{ <br>
&emsp;&emsp;background-color: aqua; <br>
&emsp;&emsp;color: black; <br>
&emsp;&emsp;border: 3px solid rgb(255, 0, 0); <br>
&emsp;&emsp;border-radius: 0.4em; <br>
&emsp;&emsp;animation-timing-function: ease; <br>
&emsp;&emsp;width: 100px; <br>
&emsp;&emsp;height: 100px; <br>
&emsp;&emsp;animation-name: beispiel; <br>
&emsp;&emsp;animation-duration: 5s; <br>
&emsp;&emsp;animation-iteration-count: infinite; <br>
&emsp;&emsp;animation-direction: alternate; <br>
&emsp;&emsp;text-align: center; <br>
&emsp;&emsp;align-self: end; <br>
&emsp;&emsp;&position: relative; <br>
&emsp;} <br>
<br>
&emsp;@keyframes beispiel { <br>
&emsp;&emsp;0% { <br>
&emsp;&emsp;&emsp;transform: rotate(0deg); <br>
&emsp;&emsp;&emsp;left:var(--width2); <br>
&emsp;&emsp;} <br>
<br>
&emsp;&emsp;25% { <br>
&emsp;&emsp;&emsp;transform: rotate(90deg); <br>
&emsp;&emsp;&emsp;left:var(--width2); <br>
&emsp;&emsp;&emsp;background-color: blue; <br>
&emsp;&emsp;&emsp;border-color: orange; <br>
&emsp;&emsp;} <br>
<br>
&emsp;&emsp;50% { <br>
&emsp;&emsp;&emsp;transform: scale(1.5); <br>
&emsp;&emsp;&emsp;background-color: blueviolet; <br>
&emsp;&emsp;&emsp;border-color: green; <br>
&emsp;&emsp;&emsp;transform: rotate(180deg); <br>
&emsp;&emsp;&emsp;left:var(--width1); <br>
&emsp;&emsp;} <br>
<br>
&emsp;&emsp;75% { <br>
&emsp;&emsp;&emsp;transform: rotate(270deg); <br>
&emsp;&emsp;&emsp;left:var(--width1); <br>
&emsp;&emsp;&emsp;background-color: red; <br>
&emsp;&emsp;&emsp;border-color: lightblue; <br>
&emsp;&emsp;} <br>
<br>
&emsp;&emsp;100% { <br>
&emsp;&emsp;&emsp;background-color: yellow; <br>
&emsp;&emsp;&emsp;border-color: pink; <br>
&emsp;&emsp;&emsp;transform: rotate(360deg); <br>
&emsp;&emsp;&emsp;left:var(--width2); <br>
&emsp;&emsp;} <br>
&emsp;} <br>
}
</code>
</div>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Leon Ehricht</p>
</footer>
</body>
</html>

252
screens/animation/keyframes.html
Unescape Escape View File

@ -0,0 +1,252 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/animations.css">
</head>
<body>
<header>
<h1>Animationen</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="animations.html">Animation Einführung</a>
<a href="keyframes.html">Animations Funktionen</a>
</nav>
<main>
<article>
<section>
<h2>
CSS @Keyframes
</h2>
<p>
Mit der Funktion @Keyframes lassen sich Objekte
auf einer Webseite Animieren. Diese Objekte können sich dann wie gewünscht
auf der Seite bewegen, drehen und blinken.
</p>
</section>
<section>
<div class="code-example">
<code>
#example1 { <br> &emsp;@keyframes stempel1 { <br>
&emsp;&emsp;0%{ <br>
&emsp;&emsp;&emsp;transform: scale(1) rotate(10deg)<br>
&emsp;&emsp;}<br>
&emsp;&emsp;50%{<br>
&emsp;&emsp;&emsp;transform: scale(1.5) rotate(30deg);<br>
&emsp;&emsp;}<br>
&emsp;&emsp;100%{<br>
&emsp;&emsp;&emsp;transform: scale(1) rotate(10deg)<br>
&emsp;&emsp;}<br>
&emsp;} <br>
}
</code>
</div>
<p id="stempel1">Genehmigt</p>
</section>
</article>
<article>
<section>
<h2>
Animation Delay
</h2>
<p>
Mit der Funktion "animation-delay" wird die Verzögerung angegeben, nach der die Animation beginnen
soll,
nachdem zum Beispiel die Webseite geladen wurde. <br>
Die Zeit wird hierbei in Sekunden angegeben.
</p>
</section>
<section>
<div class="code-example">
<code>
#example2 { <br>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-delay: 5s; <br>
&emsp;}<br>
}
</code>
</div>
</section>
</article>
<article>
<section>
<h2>
Animation Duration
</h2>
<p>
Mit der Funktion "animation-duration" kann die Zeitspanne angegeben werden,
die die Animation laufen soll.<br>
Auch hier wird die Zeit in Sekunden angegeben.
</p>
</section>
<section>
<div class="code-example">
<code>
#example3 { <br>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-druration: 5s; <br>
&emsp;}<br>
}
</code>
</div>
<p id="beispiel6">
Example
</p>
<p id="beispiel7">
Example
</p>
<p class="explanation">
Bei diesem Beispiel dauert die erste Animation 5 Sekunden und die zweite 10 Sekunden.
</p>
</section>
</article>
<article>
<section>
<h2>
Animation Iteration Count
</h2>
<p>
Durch die Funktion "animation-iteration-count" lässt sich die Anzahl an Durchläufen angeben.
Dadurch läuft die Animation eine bestimmte Anzahl Malen.
</p>
</section>
<section>
<div class="code-example">
<code>
#example4 { <br>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-iteration-count: infinit; <br>
&emsp;}<br>
}
</code>
</div>
</section>
</article>
<article>
<section>
<h2>
Animation Direction
</h2>
<p>
Die "animation-direction" Funktion bringt die Möglichkeit mit sich,
die Animation vorwärts oder Rückwärts abzuspielen.
Es ist auch Möglich die Animation erst Vorwärts
und dann Rückwärts oder andres herum abzuspielen.
</p>
</section>
<section>
<div class="code-example">
<code>
#example5 { <br>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-direction: normal; <br>
&emsp;}<br>
}
</code>
</div>
<p id="beispiel4">
Example
</p>
<p id="beispiel5">
Example
</p>
<p class="explanation">
Hier dreht sich die erste Animation nach rechts
(normal) und die zweite nach links (reverse).
</p>
</section>
</article>
<article>
<section>
<h2>
Animation Timing-Function
</h2>
<p>
Mit "animation-timing-function" lässt sich bestimmen,
ob sich die Animation am Anfang, am Ende oder in der Mitte schneller
oder langsamer bewegt.
Außerdem kann die Animation auch immer gleichschnell durchlaufen.
</p>
</section>
<section>
<div class="code-example">
<code>
#example6 { <br>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-timing-function: linear; <br>
&emsp;}<br>
}
</code>
</div>
<p id="beispiel1">
Example
</p>
<p id="beispiel2">
Example
</p>
<p class="explanation">
Die erste Animation bewegt sich immer gleich schnell (linear)
und die zweite am Anfang und am Ende schneller als in der Mitte (ease).
</p>
</section>
</article>
<article>
<section>
<h2>
Animation Fill-Mode
</h2>
<p>
Durch die "animation-fill-mode" Funktion kann
die Animation einen Style bekommen
ohne das die Animation abgespielt wird. Es ist möglich zum Beispiel
das erste oder letzte Bild als dauerhaften Style
für die stillstehende Animation zu nehmen.
</p>
</section>
<section>
<div class="code-example">
<code>
#example7 { <br>
&emsp;#beispiel {<br>
&emsp;&emsp;position: relative;<br>
&emsp;&emsp;animation-name: stempel1;<br>
&emsp;&emsp;animation-fill-mode: forwards; <br>
&emsp;}<br>
}
</code>
</div>
</section>
</article>
</main>
<footer>
<p> Erstellt von: Leon Ehricht</p>
</footer>
</body>
</html>

84
screens/flexbox/allgemeines.html
Unescape Escape View File

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox-Allgemein</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/flexbox.css">
</head>
<body>
<header>
<h1>Flexbox-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav>
<main>
<article>
<h2 id="anchor10">Allgemeines</h2>
<p>
Die Flexbox ist eine Styling-Option, mit der das Layout der Seite angepasst wird. Die Flexbox ordnet
alle Unterelemente eines Bereichs in einer Reihe an.
</p>
<section>
<h3 id="anchor11">Eine Flexbox erzeugen</h3>
<div class="code-example">
<code>
#example1 { <br> &emsp; display: flex; <br> }
</code>
</div>
<div class="visual-example" id="example1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
<p class="explanation">
Dieser Code erstellt eine Flexbox für das Div-Element mit der ID example1. Die p-Elemente innerhalb
des Divs werden in einer Reihe angezeigt.
</p>
</section>
<section>
<h3 id="anchor12">flex-direction</h3>
<div class="code-example">
<code>
#example2 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> }
</code>
</div>
<div class="visual-example" id="example2">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
<p class="explanation">
Die flex-direction gibt an, in welche Richtung die Elemente in der Flexbox angeordnet werden.
<code>column</code> ordnet Elemente untereinander an, <code>row</code> nebeneinander.
<code>column-reverse</code> und <code>row-reverse</code>
bewirken das gleiche mit umgekehrter reihenfolge der Elemente.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Niklas Minkowitsch</p>
</footer>
</body>
</html>

195
screens/flexbox/eigenschaften.html
Unescape Escape View File

@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox-Eigenschaften</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/flexbox.css">
</head>
<body>
<header>
<h1>Flexbox-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav>
<main>
<article>
<h2 id="anchor20">Eigenschaften</h2>
<p>
Es gibt verschiedene Eigenschaften, mit denen Flexboxen angepasst werden können.
</p>
<section>
<h3 id="anchor21">flex-wrap</h3>
<h4>Mit horizontaler Anordnung</h4>
<div class="code-example">
<code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap: wrap; <br> }</code>
</div>
<div class="visual-example" id="example3">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<h4>Mit vertikaler Anordnung</h4>
<div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> &emsp; flex-wrap: wrap; <br> &emsp; max-height: 600px; <br> }</code>
</div>
<div class="visual-example" id="example4">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<p class="explanation">
Die Eigenschaft <code>flex-wrap</code> bestimmt, ob Elemente die über den Platz in der Hauptrichtung
hinaus gehen in einer neuen Zeile / Spalte platziert werden sollen.
Der Standard-Wert ist <code>nowrap</code>, <code>wrap</code> aktiviert das Wrapping.
</p>
<h3 id="anchor22">flex-flow</h3>
<div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height: 600px; <br> }</code>
</div>
<p class="explanation">
<code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und
<code>flex-wrap</code> in einer Zeile zusammenfasst.
</p>
</section>
<section>
<h3 id="anchor23">justify-content</h3>
<div class="code-example">
<code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: center; <br> }</code>
</div>
<div class="visual-example" id="example5">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>
<div class="code-example">
<code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> }</code>
</div>
<div class="visual-example" id="example6">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>
<p class="explanation">
Über <code>justify-content</code> lässt sich die Ausrichtung der Elemente entlang der Hauptachse der
Flexbox einstellen. <br> <br>
Diese Werte können gesetzt werden: <br>
<code>
&emsp; - flex-start <br>
&emsp; - flex-end <br>
&emsp; - center <br>
&emsp; - space-around <br>
&emsp; - space-between <br>
&emsp; - space-evenly <br>
</code>
</p>
</section>
<section>
<h3 id="anchor24">align-content</h3>
<div class="code-example">
<code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code>
</div>
<div class="visual-example" id="example7">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<p class="explanation">
<code>align-content</code> funktioniert wie <code>justify-content</code>, bestimmt allerdings die
nicht-Hauptachse (z.B. wenn Wrapping stattfindet). <br> <br>
Diese Werte können gesetzt werden: <br>
<code>
&emsp; - stretch <br>
&emsp; - center <br>
&emsp; - flex-start <br>
&emsp; - flex-end <br>
&emsp; - space-around <br>
&emsp; - space-between <br>
&emsp; - space-evenly <br>
</code>
</p>
</section>
<section>
<h3 id="anchor25">overflow</h3>
<div class="code-example">
<code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x: scroll; <br> }</code>
</div>
<div class="visual-example" id="example8">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
<p>p11</p>
<p>p12</p>
</div>
<div class="code-example">
<code>#example9 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column nowrap; <br> &emsp; max-height: 600px; <br> &emsp; overflow-y: scroll; <br> }</code>
</div>
<div class="visual-example" id="example9">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
<p>p11</p>
<p>p12</p>
</div>
<p class="explanation">
Die overflow-Eigenschaft beschreibt, was passiert wenn Elemente den Rahmen der Flexbox
überschreiten. <code>visible</code> ist die Standard-option, <code>scroll</code>
erzeugt eine Scroll-leiste und <code>hidden</code> versteckt Elemente die nicht mehr in die Box
passen.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Niklas Minkowitsch</p>
</footer>
</body>
</html>

101
screens/flexbox/unterelemente.html
Unescape Escape View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox-Unterelemente</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/flexbox.css">
</head>
<body>
<header>
<h1>Flexbox-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav>
<main>
<article>
<h2 id="anchor30">Eigenschaften der Unterelemente</h2>
<p>
Diese Eigenschaften werden auf die Elemente innerhalb der Flexbox angewendet.
</p>
<section>
<h3 id="anchor31">flex-grow</h3>
<div class="code-example">
<code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example10 > p { <br> &emsp; flex-grow: 1; <br> }</code>
</div>
<div class="visual-example" id="example10">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<p class="explanation">
Mit <code>flex-grow</code> wird bestimmt, ob die Elemente in der Box auf den zur verfügung stehenden
Platz anwachsen sollen. 1 = ja, 0 = nein.
</p>
</section>
<section>
<h3 id="anchor32">flex-basis</h3>
<div class="code-example">
<code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code>
</div>
<div class="visual-example" id="example11">
<p>p1</p>
<p>p2</p>
</div>
<p class="explanation">
Diese Eigenschaft stellt die feste Größe der Elemente ein, sollten <code>flex-grow</code> und
<code>flex-shrink</code> nicht gesetzt sein.
</p>
</section>
<section>
<h3 id="anchor33">flex-shrink</h3>
<div class="code-example">
<code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code>
</div>
<div class="visual-example" id="example12">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<div class="code-example">
<code>#example13 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example13 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 1; <br> }</code>
</div>
<div class="visual-example" id="example13">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<p class="explanation">
<code>flex-shrink</code> stellt ein, ob die Elemente nach möglichkeit schrumpfen sollen, um den
Rahmen der Flexbox nicht zu überschreiten. 1 = ja, 0 = nein.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Niklas Minkowitsch</p>
</footer>
</body>
</html>

120
screens/grid/allgemeines.html
Unescape Escape View File

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid-Allgemein</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/grid.css">
</head>
<body>
<header>
<h1>Grid-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="container.html">Container</a>
<a href="items.html">Items</a>
</nav>
<main>
<article>
<h2>Allgemeines</h2>
<p>
Das Grid-Layout ermöglicht es Websiten einfacher zu gestalten, indem Reihen und Spalten genutzt und
ineinander verschachtelt werden können,
um die Objeket der Seite so anzuordnen, wie es gewünscht wird.
</p>
<section>
<h3>Display Eigenschaft</h3>
<p>
Ein HTML element wird zu einem Grid-Container, wenn die "display"-Eigenschaft auf "grid" oder
"inline-grid" gesetzt ist.
Alle untergeordneten Elemente des Containers, werden automatisch "grid items".
</p>
<div class="code-example">
<code>
.grid-container { <br> &emsp; display: grid; <br> }
</code>
</div>
<br>
<div class="code-example">
<code>
.grid-container { <br> &emsp; display: inline-grid; <br> }
</code>
</div>
</section>
<section>
<h3>Grid Reihen und Spalten</h3>
<p>
Die Vertikalen Linien eines grid items nennt man Spalten und die horizontalen Linien nennt man
Reihen.
</p>
<div class="visual-example" id="example1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
<p class="explanation">
Eine optisch angeordnete Reihe von P-Elementen.
</p>
<br>
<div class="visual-example" id="example2">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
<p class="explanation">
Eine optisch angeordnete Spalte von P-Elementen.
</p>
</section>
<section>
<h3>Grid Linien</h3>
<p>
Die sogenannten "grid lines" sind die Linien zwischen den grid items im grid container.
Die Linien zwischen Reihen nennt man "row lines" und die Linien zwischen Spalten nennt man "column
lines".
Man kann die Linien ansprechen um items im Grid-Container gezielt zu platzieren.
</p>
<div class="code-example">
<code>
.p1 { <br> &emsp; grid-column-start: 1; <br> &emsp; grid-column-end: 3; <br>}
</code>
</div>
<div class="visual-example" id="example3">
<p id="item1">p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<p class="explanation">
Der p1 Container fängt hier bei der "column line" 1 ganz links an und hört bei der "column line" 3
auf.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Lukas Pfau</p>
</footer>
</body>
</html>

147
screens/grid/container.html
Unescape Escape View File

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid-Container</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/grid.css">
</head>
<body>
<header>
<h1>Grid-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="container.html">Container</a>
<a href="items.html">Items</a>
</nav>
<main>
<article>
<h2>Grid Container</h2>
<p>
Grid Container sind der fundamentale Bestandteil des Grid-Layouts. Sie sind das übergeordnete Element
über den Grid items.
Der Contaienr gibt an, wie die Items angeordnet werden sollen.
</p>
<section>
<h3>Grid-Templates</h3>
<p>
Die grid-template eigenschaften können als "grid-template-columns" und als "grid-template-rows"
verwendet werden.
Die Anzahl der zur Eigenschaft hinzugefügten werten zeigt an, wie viele Reihen/Spalten gewünscht
sind. Man kann diese auch spezifiezieren
um so die Breite/Höhe zu bestimmen. Bei Dem Wert "auto" wird der Wert automatisch angepasst. Wenn
alle den Wert "auto" besitzen
teilen sich alle Spalten/Reihen gleichmäßig auf.
</p>
<div class="code-example">
<code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; gap: 10px;<br>}
</code>
</div>
<div class="visual-example" id="example4">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
</div>
<p class="explanation">
Dieses Beispiel erstellt ein grid mit 3 Spalten. Wenn zu der "grid-template-columns" Eigenschaft
noch weitere Werte hinzugefügt werden würden,
könnte man weitere Spalten erstellen.
</p>
<br>
<div class="code-example">
<code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; grid-template-rows: 150px 100px 200px;<br>}
</code>
</div>
<div class="visual-example" id="example5">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
</div>
<p class="explanation">
Hier wird die "grid-template-rows" Eigenschaft verwendet um die Höhe der jeweiligen Reihen
anzupassen.
</p>
</section>
<section>
<h3>Align/Justify Content</h3>
<p>
Die justify-content und align-content Eigenschafften sind dazu da, die grid items im grid container
anzuordnen.
Dabei ist justify-content dazu da, das gesammte grid auszurichten. Während align-content nur
vertikal das grid anordnet
</p>
<div class="code-example">
<code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br> &emsp; justify-content: space-evenly <br>}
</code>
</div>
<div class="visual-example" id="example6">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<p class="explanation">
Hier wird die "justify-content" Eigenschaft verwendet um die grid items gleichmäßig zu verteilen.
</p>
<br>
<div class="code-example">
<code>
.grid-container { <br>
&emsp; display: grid; <br>
&emsp; grid-template-columns: 50px 50px 50px; <br>
&emsp; justify-content: center <br>}
</code>
</div>
<div class="visual-example" id="example7">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
</div>
<p class="explanation">
Hier wird die "justify-content" Eigenschaft verwendet um die grid items zu zentrieren.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Lukas Pfau</p>
</footer>
</body>
</html>

157
screens/grid/items.html
Unescape Escape View File

@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid-Items</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/grid.css">
</head>
<body>
<header>
<h1>Grid-Layout</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="container.html">Container</a>
<a href="items.html">Items</a>
</nav>
<main>
<article>
<h2>Grid Item</h2>
<p>
Ein grid item ist ein objekt in einem grid container. Standartgemäß ist ein grid item genau über eine
Spalte und Reihe breit.
Man kann die grid items aber so gestalten, dass sie auch mehrere Spalten und Reihen breit/hoch sind.
</p>
<section>
<h3>Grid-column/row Eigenschaft</h3>
<p>
Mit der grid-row/grid-column Eigenschaft kann man genau bestimmen wie sich die grid items verhalten.
Start und endpunkte mit grid-(column/row)-(start/end) festlegen. Oder aber den Anfanspunkt festlegen
und bestimmenwie weit
sich das bestimmte element ausbreiten darf.
</p>
<div class="code-example">
<code>
.grid-container { <br>
&emsp; display: grid; <br>
&emsp; grid-template-columns: auto auto auto;<br>
} <br>
<br>
.p1 { <br>
&emsp; grid-column-start: 1; <br>
&emsp; grid-column-end: 3; <br>
&emsp; grid-row-start: 1; <br>
&emsp; grid-row-end: 3; <br>
} <br>
<br>
.p4 { <br>
&emsp; grid-column: 1 / span 3; <br>
}
</code>
</div>
<div class="visual-example" id="example8">
<p id="item2">p1</p>
<p>p2</p>
<p>p3</p>
<p id="item3">p4</p>
</div>
<p class="explanation">
Hier werden p1 und p4 jeweils so gestaltet das sie sich jeweils über mehrere Spalten/Reihen
ausbreiten.
</p>
</section>
<section>
<h3>Grid-area Eigenschaft</h3>
<p>
Grid area kann als Shortcut für grid-row-start/end und grid-column-start/end genutzt werden.
</p>
<div class="code-example">
<code>
.grid-container { <br>
&emsp; display: grid; <br>
&emsp; grid-template-columns: auto auto auto auto;<br>
} <br>
<br>
.p1 { <br>
&emsp; grid-area: 1 / 2 / 4 / 4 <br>
} <br>
<br>
</code>
</div>
<div class="visual-example" id="example9">
<p>p1</p>
<p id="item4">p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
<p>p11</p>
</div>
<p class="explanation">
Bei diesem Beispiel nutzt p2 grid-area, um sich den Platz von eigentlich 5 weiteren p Elementen zu
nehmen.
</p>
</section>
<section>
<h3>Grid Areas benennen</h3>
<p>
Es ist auch möglich die einzelnen Bereiche zu benennen und einzeln zuzuordnen, mit der
"grid-template-areas" Eigenschaft.
</p>
<div class="code-example" id="example10">
<code>
#item5 { grid-area: header; } <br>
#item6 { grid-area: nav; } <br>
#item7 { grid-area: main; } <br>
#item8 { grid-area: aside; } <br>
#item9 { grid-area: footer; } <br>
<br>
.grid-container { <br>
&emsp; display: grid; <br>
&emsp; grid-template-areas: <br>
&emsp; 'header header header header header header' <br>
&emsp; 'nav main main main aside aside' <br>
&emsp; 'nav footer footer footer footer footer'; <br>
&emsp; gap: 10px; <br>
} <br>
<br>
</code>
</div>
<div class="visual-example" id="example10">
<p id="item5">header</p>
<p id="item6">nav</p>
<p id="item7">main</p>
<p id="item8">aside</p>
<p id="item9">footer</p>
</div>
<p class="explanation">
Hier wird mit Hilfe von grid-template-areas, direkt Bereiche erzeugt indem die Items in den
Bereichen aufgerufen werden,
in denen sie auftauchen sollen.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Lukas Pfau</p>
</footer>
</body>
</html>

101
screens/home.html
Unescape Escape View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="../css/layout.css">
</head>
<body>
<header>
<h1>Home</h1>
</header>
<nav class="navigationbar">
<a href="home.html">Home</a>
<a href="flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="grid/allgemeines.html">Grid-Layout</a>
<a href="text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="animation/animations.html">Animationen</a>
</nav>
<main>
<article>
<h2>
Prüfungsleistung WebDesigne WiSe 2022/2023
</h2>
<section>
<h3>
Gruppenmitglieder
</h3>
<ul>
<li>Niklas Minkowitsch</li>
<li>Leon Ehricht</li>
<li>Lukas Pfau</li>
<li>Luca Fleck</li>
<li>Alban Becker</li>
</ul>
</section>
<section>
<h3>
Aufgabenstellung
</h3>
<p>
Erstellt ein Webprojekt mit Informationen zu den folgenden Themen: <br>
</p>
<ul>
<li>Flexbox-Layout</li>
<li>Grid-Layout</li>
<li>Text-Styling mit CSS</li>
<li>CSS position-Eigenschaft</li>
<li>Animationen mit CSS</li>
</ul>
</section>
<section>
<h3>
Anforderungen an die technische Umsetzung
</h3>
<ul>
<li>Korrekter Aufbau der HTML-Strukturen</li>
<li>Nutzung passender semantischer HTML-Tags</li>
<li>Nutzung passender CSS-Selektoren und aussagekräftiger CSS-Klassennamen in IDs</li>
<li>In den Beispielen: Nutzung der CSS-Eigenschaften, die beschrieben werden</li>
<li>Saubere, einheitliche Formatierung des HTMLs (Einrückungen)</li>
</ul>
<p>
Für jede dieser fünf Anforderungen gibt es maximal acht Punkte, so dass damit insg. 40 Punkte von
100 erreicht werden können.
</p>
</section>
<section>
<h3>Präsentation der Ergbenisse</h3>
<p>
Vorstellung 15 - 20 min am 06.01.2023 zwischen 8:15 und 15:30 (d.h. in den Zeitslots der Vorlesung und
der Labore an dem Freitag). Alle Gruppenteilnehmer*innen müssen sich an der Vorstellung beteiligen;
geht auch über Discord.
</p>
<p>
In der Präsentation soll mit Folien (z.B. mit Powerpoint, Keynote, Open/Libre-Office oder auch mit
HTML erstellt) vorgestellt werden was ihr erarbeitet habt. Geht dabei auf die Inhalte und die technische
Umsetzung ein.
</p>
<p>
Es gibt jeweils max 5 Punkte für:
</p>
<ul>
<li>Einhaltung des Zeitkontingents</li>
<li>Visuelle Präsentation</li>
<li>Aufbau der Präsentation</li>
<li>Inhalt</li>
</ul>
<p>
So können für die Präsentation maximal 20 Punkte von 100 erreicht werden.
</p>
</section>
</article>
</main>
<footer>
<code>Abgabe zum 05.01.2023</code>
</footer>
</body>
</html>

129
screens/text_styling/allgemeines.html
Unescape Escape View File

@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling-Allgemein</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/text_styling.css">
</head>
<body>
<header>
<h1>Text-Styling</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="beispiele.html">Weitere Beispiele</a>
</nav>
<main>
<article>
<h2>Allgemeines</h2>
<p>
Zu beginn des Zeitalters des Internets wurden die Texte auf Webseiten zunächst nur über die innerhalb
des
Programmes in dem die Webseite erstellt wird
gegebennen Möglichkeiten bearbeitet um den Wünschen des Webssitenbesitzers zu entsprechen. Heutzutage
ist diese
Methode jedoch stark veralltet. Die gängigste
arte eine Webseite zu erstellen ist den Hauptkörper der Webseite in der Programmiersprache HTML zu
erstellen und
die Textoptik dann mithilfe eines zusätzlichen
CSS Protokolls zu überarbeiten. Dabei gibt es drei verschiedene Möglichkeiten den Text zu bearbeiten.
Diese sind
in form der Größe, der Schriftart und
der Textfarbe und so funktionieren die drei verschiedenen bearbeitungsfunktionen:
</p>
<section>
<h3>
Veränderung der Textgröße
</h3>
<p>
Mit hilf von Css lässt sich ganz einfach über verschiedene Wertekategorien die Größe von Schriften
verändern.
Einige Beispiele für
die verschiedenen Mäßeinheiten sind Pixel(px), root-Element(rem), Elemente(em), Prozente der
standart
Schriftgröße(%) oder sogar Centimeter(cm).<br>
Zum ändern der Schriftgröße definiert man hierfür den Abschnitt bei dem man die Schriftart ändern
möchte und
nutz dann den befehl "font-size".
Anschließend gibt man ein in welcher Parameterform man die Schriftgröße veränder will und einen Wert
auf welchen
man sie verändern. Danach endet man den CSS befehl mit einem Semikolon.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{font-size: 20px;}<br>
&emsp;#Text2{font-size: 120%;}<br>
&emsp;#Text3{font-size: 1cm;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtPixel &lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtVorgegebene Größen&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtProzent&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="font-sizePX">Pixel </li>
<li id="font-sizePR">Vorgegebene Größen</li>
<li id="font-sizeCM">Prozent</li>
</ol>
<p class="explanation">
Neben diesen Größenenheiten gibt es auch noch von CSS vorgegebene größen. Hierfür nutzt man dann
statt einem
Parameter mit Wert einfach eine der Vorgegeben Größenstufen,
indem man sie als Wort hinschreibt.
</p>
<br>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{font-size: smaller;}<br>
&emsp;#Text2{font-size: medium;}<br>
&emsp;#Text3{font-size: large;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtPixel &lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtVorgegebene Größen&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtProzent&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="font-sizeS">Pixel </li>
<li id="font-sizeM">Vorgegebene Größen</li>
<li id="font-sizeL">Prozent</li>
</ol>
<p class="explanation">
So lässt sich grob und schnell die Schrifgröße des textes auf des
webseite auf die passende Größe einstellen.
</p>
<br>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Luca Nicolas Fleck</p>
</footer>
</body>

395
screens/text_styling/beispiele.html
Unescape Escape View File

@ -0,0 +1,395 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling-Beispiele</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/text_styling.css">
</head>
<body>
<header>
<h1>Text-Styling</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="beispiele.html">Weitere Beispiele</a>
</nav>
<main>
<article>
<h2>Weitere Beispiele</h2>
<section>
<h3>
Veränderung der Textart
</h3>
<p>
Ebenfalls möglich, ist das ändern der Schriftart über CSS. Im Grunde verhält es sich hierbei
ähnlich, wie das ändern der Schriftgröße.
Der unterschied liegt hierbei darin, dass es anstatt vieler verschiedener Option zur Einstellung der
größe eine Auswahl verschiedener schrifftarten gibt.
Die Schriftarten sind hierbei die selben, wie bei den Standartmäßig verwendeten Schreibprogrammen
wie Word oder Open Office.
Zum ändern der Schriftart definiert man hierfür den Abschnitt, bei dem man die Schriftart ändern
möchte und nutz dann den befehl "font-family".
Daraus folgt ein doppelpunkt und hinter diesen schreibt man den Namen der gewünschten Schriftart.
Zum Abschluss ein Semikolon und die Schriftart wurde erfolgreich geändert.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{font-family: Arial;}<br>
&emsp;#Text2{font-family: Helvetica;}<br>
&emsp;#Text3{font-family: sans-serif;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtArial&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtGeorgia&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtLucida Handwriting&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="font-familyA">Arial</li>
<li id="font-familyG">Georgia</li>
<li id="font-familyLH">Lucida Handwriting</li>
</ol>
</section>
<section>
<h3>
Schriftfarbe ändern
</h3>
<p>
Auch die Farbe der Schrift lässt sich CSS verändern. Dafür steht dem Nutzer ein großteil des
sichtbaren Farbspektrum zur Verfügung.
Um die Farbe zu ändern nutzt man die "color" Anweisung auf einen vorherdefinierten Bereich der
Website.
Dahinter gibt man dann die gewünschte Farbe an. Dafür gibt es zwei Möglichkeiten. Entweder man
schreibt einfach den Namen der Farbe und die
standart Version der gewünschten Farbe wird genutzt oder man gibt die RGB Werte einer Farbe an um
einen genauen Farbton zur erhalten.
Danach bendet man die Anweisung wieder mit einem Semikolon.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Farbe1{color: Rot;}<br>
&emsp;#Farbe2{color: rgb(81, 132, 109);}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Farbe1"&gtRot&lt/li&gt<br>
&emsp;&emsp;&ltli id="Farbe2"&gtRGB&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="colorW">Rot</li>
<li id="colorZ">RGB</li>
</ol>
</section>
<section>
<h3>
Schrift stylen
</h3>
<p>
Zusätzlich kann man mit hilfe der "font-styles" Anweisung das aussehen der Schrift verändern um
gewisse Anschnitte eines textes hervor zu heben.
Dafür kann man entweder den italic oder den onlique stle verwenden in dem man sie wie die anderern
font Anweisungen anwendet.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Style1{font-style: italic}<br>
&emsp;#Style2{font-style: onlique}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Style1"&gtitalic&lt/li&gt<br>
&emsp;&emsp;&ltli id="Style2"&gtoblique&lt/li&gt<br>
&emsp;&emsp;&ltli&gtnormal&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="font-styleI">italic</li>
<li id="font-styleO">oblique</li>
<li>normal</li>
</ol>
</section>
<section>
<h3>
Schriftdicke verändern
</h3>
<p>
Mit der Anweisung "font-weight" lässt sich lässt sich die Dicke des Schrift verstellen. Auch hierbei
gibt es zwei möglichkeiten die Werte anzugeben.
Entweder man nutz einen der vorgefährtigten Werte von CSS oder man gibt den Wert in einer Zahl an.
Dabei gehen die Werte von 100 bis 900 in 100ter schritten
während die Standart dicke der Schrift bei 400 liegt. Anzuwenden ist die Anweisung wie die
vorherigen Module.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{font-weight: bold}<br>
&emsp;#Text2{font-weight: 700}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Style1"&gtitalic&lt/li&gt<br>
&emsp;&emsp;&ltli id="Style2"&gtoblique&lt/li&gt<br>
&emsp;&emsp;&ltli&gtnormal&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="font-weightB">bold</li>
<li id="font-weightZ">700</li>
<li>normal</li>
</ol>
</section>
<section>
<h3>
Schrift Variante ändern
</h3>
<p>
Mit der Anweisung "font-variant" kann man die art der Schrift zwischen normal und small-caps
verändern.
Die Anweisung ist wie die anderen Anweisungen.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{font-variant: normal}<br>
&emsp;#Text2{font-variant: small-cap}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Style1"&gtnormal&lt/li&gt<br>
&emsp;&emsp;&ltli id="Style2"&gtsmall-cap&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="Text1">normal</li>
<li id="Text2">small-cap</li>
</ol>
</section>
<section>
<h3>
Textausrichtung ändern
</h3>
<p>
Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig, Rechtsseitig und Blocksats ändern.
Die Anweisung ist wie die anderen Anzuwenden.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Align1{text-align: left}<br>
&emsp;#Align2{text-align: right}<br>
&emsp;#Align3{text-align: center}<br>
&emsp;#Align4{text-align: justify}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Align1"&gtleft&lt/li&gt<br>
&emsp;&emsp;&ltli id="Align2"&gtright&lt/li&gt<br>
&emsp;&emsp;&ltli id="Align3"&gtcenter&lt/li&gt<br>
&emsp;&emsp;&ltli id="Align4"&gtjustify&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="text-alignL">left</li>
<li id="text-alignR">right</li>
<li id="text-alignC">center</li>
<li id="text-alignJ">justify</li>
</ol>
</section>
<section>
<h3>
Textgestaltung
</h3>
<p>
Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift Hinzufügen.
Die Anweisung wird ausgeführt wie die Vorherigen.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{text-decoration: underline;}<br>
&emsp;#Text2{text-decoration: overline;}<br>
&emsp;#Text3{text-decoration:: line-trough;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtunderline&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtoverline&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtline-trough&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="text-decorationU">underline</li>
<li id="text-decorationO">overline</li>
<li id="text-decorationLT">line trough</li>
</ol>
</section>
<section>
<h3>
Wort- und Zeichenabstände verändern
</h3>
<p>
Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die Größe der Wörter verändert
erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das man den abstand nicht in Prozenten(%)
angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{word-spacing: 3mm;}<br>
&emsp;#Text2{word-spacing: 1px;}<br>
&emsp;#Text3{word-spacing: 1rem;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gt3 milimeter&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gt10 pixel&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gt1 root-Element&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="word-spacingMM">3 Milimeter</li>
<li id="word-spacingPX">10 Pixel</li>
<li id="word-spacingREM">1 root-Element</li>
</ol>
<p class="explanation">
Die Anweisung "letter-spacing" funktioniert genauso, nur dass sie den Abstand zwischen einzelnen Zeichen,
also jedem einzelnen Buchstaben, verändert anstatt zwischen den ganzen Wörtern.
</p>
</section>
<section>
<h3>
Texte einrücken
</h3>
<p>
Über die Anweisung "text-indent" kann der Nutzer Zeilen einrücken.
Die einheiten zum eingebn sind hierbei die gleichen wie beim word- und letter-spacing.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{text-indent: 10mm;}<br>
&emsp;#Text2{text-indent: 20px;}<br>
&emsp;#Text3{text-indent: 1rem;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gt10 milimeter&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gt20 pixel&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gt1 root-Element&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="text-indentMM">10 Milimeter</li>
<li id="text-indentPX">20 Pixel</li>
<li id="text-indentREM">1 root-Element</li>
</ol>
</section>
<section>
<h3>
Texte transvormieren
</h3>
<p>
Nun zur letzten Anweisung zum Stylen von Texten in CSS. Mit "text-transform" kann der Nutzer Regeln für den Text festlegen,
die dann für alle Wörter gelten. Die Regeln die angewendet werden können sind:
</p>
<ol>
<li>Capitalize: Der erste Buchstabe jedes Wortes wir zu einem Großbuchstaben.</li>
<li>Uppercase: Alle Buchstaben werden Großbuchstaben</li>
<li>Lowercase: Alle Buchstaben werden Kleinbuchstaben</li>
<li>None: Regeln werden aufgehoben.</li>
</ol>
<p>
Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der rechtschreibung für Leute,
mit Problemen in der Groß- und Kleinschreibung übergehen, da es so zu einem Stilmittel wird.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{text-transform: capitalize}<br>
&emsp;#Text2{text-transform: uppercase}<br>
&emsp;#Text3{text-transform: lowercase}<br>
&emsp;#Text4{text-transform: none}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtcapitalize the letters&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtuppercase&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtLowercase The Letters&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtno rules&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</code>
</div>
<br>
<ol class="visual-example">
<li id="text-transformC">capitalize the letters</li>
<li id="text-transformU">uppercase</li>
<li id="text-transformL">Lowercase The Letters</li>
<li id="text-transformN">no rules</li>
</ol>
</section>
<p>
Nun weißt du alles was es über das Gestalten eines textes mit CSS zu wissen gibt.
</p>
</article>
</main>
<footer>
<p>Erstellt von: Luca Nicolas Fleck</p>
</footer>
</body>
Write Preview
Loading…
Cancel
Save