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

fix style

Browse Source
This commit is contained in:
adb-sh 2023-01-05 02:06:54 +01:00
parent 614733ef64
commit a0b133679b
17 changed files with 1826 additions and 1715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
css/animations.css
View File

@ -6,7 +6,7 @@
} }
/* ---------------Beispiel auf der Startseite--------------*/ /* ---------------Beispiel auf der Startseite--------------*/
#beispiel{ #beispiel {
background-color: aqua; background-color: aqua;
color: black; color: black;
border: 3px solid rgb(255, 0, 0); border: 3px solid rgb(255, 0, 0);
@ -26,12 +26,12 @@
@keyframes beispiel { @keyframes beispiel {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
left:var(--width2); left: var(--width2);
} }
25% { 25% {
transform: rotate(90deg); transform: rotate(90deg);
left:var(--width2); left: var(--width2);
background-color: blue; background-color: blue;
border-color: orange; border-color: orange;
@ -42,13 +42,13 @@
background-color: blueviolet; background-color: blueviolet;
border-color: green; border-color: green;
transform: rotate(180deg); transform: rotate(180deg);
left:var(--width1); left: var(--width1);
} }
75% { 75% {
transform: rotate(270deg); transform: rotate(270deg);
left:var(--width1); left: var(--width1);
background-color: red; background-color: red;
border-color: lightblue; border-color: lightblue;
} }
@ -57,13 +57,14 @@
background-color: yellow; background-color: yellow;
border-color: pink; border-color: pink;
transform: rotate(360deg); transform: rotate(360deg);
left:var(--width2); left: var(--width2);
} }
} }
/* -----------------Animationen Beispiele--------------------------- */ /* -----------------Animationen Beispiele--------------------------- */
/* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/ /* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/
#stempel1{ #stempel1 {
color: red; color: red;
border: 2px solid red; border: 2px solid red;
padding: 10px; padding: 10px;
@ -77,16 +78,15 @@
} }
@keyframes stempel1 { @keyframes stempel1 {
0%{ 0% {
transform: scale(1) rotate(10deg) transform: scale(1) rotate(10deg)
} }
50%{ 50% {
transform: scale(1.5) rotate(30deg); transform: scale(1.5) rotate(30deg);
} }
100% 100% {
{
transform: scale(1) rotate(10deg) transform: scale(1) rotate(10deg)
} }
} }
@ -107,20 +107,19 @@
} }
@keyframes beispiel6 { @keyframes beispiel6 {
0%{ 0% {
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
50%{ 50% {
transform: scale(1.5); transform: scale(1.5);
left:var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
} }
@ -140,20 +139,19 @@
} }
@keyframes beispiel7 { @keyframes beispiel7 {
0%{ 0% {
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
50%{ 50% {
transform: scale(1.5); transform: scale(1.5);
left:var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
} }
@ -175,16 +173,15 @@
} }
@keyframes beispiel4 { @keyframes beispiel4 {
0%{ 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50%{ 50% {
transform: rotate(180deg); transform: rotate(180deg);
} }
100% 100% {
{
transform: rotate(360deg) transform: rotate(360deg)
} }
} }
@ -206,22 +203,20 @@
} }
@keyframes beispiel5 { @keyframes beispiel5 {
0%{ 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50%{ 50% {
transform: rotate(180deg); transform: rotate(180deg);
} }
100% 100% {
{
transform: rotate(360deg) transform: rotate(360deg)
} }
} }
/*--------------- Beispiel 1 für die animation timing funktion ---------------*/ /*--------------- Beispiel 1 für die animation timing funktion ---------------*/
#beispiel1 { #beispiel1 {
color: red; color: red;
@ -238,20 +233,19 @@
} }
@keyframes beispiel1 { @keyframes beispiel1 {
0%{ 0% {
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
50%{ 50% {
transform: scale(1.5); transform: scale(1.5);
left:var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
} }
@ -271,19 +265,18 @@
} }
@keyframes beispiel2 { @keyframes beispiel2 {
0%{ 0% {
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
50%{ 50% {
transform: scale(1.5); transform: scale(1.5);
left:var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
} }

16
css/layout.css
View File

@ -1,4 +1,3 @@
/* ---------- Farben ---------- */ /* ---------- Farben ---------- */
:root { :root {
--primary: #1D2026; --primary: #1D2026;
@ -49,7 +48,7 @@ footer {
align-items: center; align-items: center;
} }
.navigationbar a{ .navigationbar a {
color: aliceblue; color: aliceblue;
padding: 10px; padding: 10px;
margin-left: 5px; margin-left: 5px;
@ -59,7 +58,7 @@ footer {
flex-grow: 1; flex-grow: 1;
} }
.navigationbar a:hover{ .navigationbar a:hover {
background: darkgray; background: darkgray;
} }
@ -70,6 +69,12 @@ footer {
border-bottom: 4px solid var(--primary); border-bottom: 4px solid var(--primary);
} }
code {
padding: .25rem .75rem;
border-radius: .35rem;
background-color: rgba(40, 40, 40, 0.8);
}
.code-example { .code-example {
margin: 4px; margin: 4px;
padding: 8px; padding: 8px;
@ -78,6 +83,11 @@ footer {
max-width: 550px; max-width: 550px;
} }
.code-example code {
padding: 0;
background-color: rgba(40, 40, 40, 0.8);
}
.visual-example { .visual-example {
background-color: gray; background-color: gray;
border: 2px solid; border: 2px solid;

62
css/position.css Normal file
View File

@ -0,0 +1,62 @@
section.examples .example-box {
background-color: #3268aa;
border: 3px solid #88ff9c;
height: 3rem;
width: 3rem;
border-radius: .3rem;
margin: .5rem;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
}
section.examples .example-box.active {
border: 3px solid #d73f3f;
}
.visual-example {
display: flex;
flex-direction: row;
position: relative;
padding: .5rem;
}
#example1 .active {
position: static;
top: 1rem;
left: 1rem;
}
#example2 .active {
position: relative;
top: 1rem;
left: 1rem;
}
#example3 .active {
position: absolute;
top: 1rem;
left: 1rem;
}
#example4 .active {
position: fixed;
top: 1rem;
left: 1rem;
}
#example5 {
overflow: scroll;
}
#example5 .active {
position: sticky;
left: 1rem;
right: 1rem;
}
#example5 .wrapper {
display: flex;
border: 2px solid #d73f3f;
}

90
css/text_styling.css
View File

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

22
screens/animation/animations.html
View File

@ -11,22 +11,22 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Animationen</h1> <h1>Animationen</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a> <a href="animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="animations.html">Animation Einführung</a> <a href="animations.html">Animation Einführung</a>
<a href="keyframes.html">Animations Funktionen</a> <a href="keyframes.html">Animations Funktionen</a>
</nav> </nav>
<main> <main>
<article> <article>
<section> <section>
<h2> <h2>
@ -105,10 +105,10 @@
</div> </div>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Leon Ehricht</p> <p>Erstellt von: Leon Ehricht</p>
</footer> </footer>
</body> </body>
</html> </html>

22
screens/animation/keyframes.html
View File

@ -11,22 +11,22 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Animationen</h1> <h1>Animationen</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a> <a href="animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="animations.html">Animation Einführung</a> <a href="animations.html">Animation Einführung</a>
<a href="keyframes.html">Animations Funktionen</a> <a href="keyframes.html">Animations Funktionen</a>
</nav> </nav>
<main> <main>
<article> <article>
<section> <section>
<h2> <h2>
@ -243,10 +243,10 @@
</div> </div>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p> Erstellt von: Leon Ehricht</p> <p> Erstellt von: Leon Ehricht</p>
</footer> </footer>
</body> </body>
</html> </html>

22
screens/flexbox/allgemeines.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Flexbox-Layout</h1> <h1>Flexbox-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a> <a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a> <a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2 id="anchor10">Allgemeines</h2> <h2 id="anchor10">Allgemeines</h2>
<p> <p>
@ -75,10 +75,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Niklas Minkowitsch</p> <p>Erstellt von: Niklas Minkowitsch</p>
</footer> </footer>
</body> </body>
</html> </html>

46
screens/flexbox/eigenschaften.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Flexbox-Layout</h1> <h1>Flexbox-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a> <a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a> <a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2 id="anchor20">Eigenschaften</h2> <h2 id="anchor20">Eigenschaften</h2>
<p> <p>
@ -37,7 +37,8 @@
<h3 id="anchor21">flex-wrap</h3> <h3 id="anchor21">flex-wrap</h3>
<h4>Mit horizontaler Anordnung</h4> <h4>Mit horizontaler Anordnung</h4>
<div class="code-example"> <div class="code-example">
<code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap: wrap; <br> }</code> <code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap:
wrap; <br> }</code>
</div> </div>
<div class="visual-example" id="example3"> <div class="visual-example" id="example3">
<p>p1</p> <p>p1</p>
@ -51,7 +52,8 @@
</div> </div>
<h4>Mit vertikaler Anordnung</h4> <h4>Mit vertikaler Anordnung</h4>
<div class="code-example"> <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> <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>
<div class="visual-example" id="example4"> <div class="visual-example" id="example4">
<p>p1</p> <p>p1</p>
@ -70,7 +72,8 @@
</p> </p>
<h3 id="anchor22">flex-flow</h3> <h3 id="anchor22">flex-flow</h3>
<div class="code-example"> <div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height: 600px; <br> }</code> <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height:
600px; <br> }</code>
</div> </div>
<p class="explanation"> <p class="explanation">
<code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und <code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und
@ -80,7 +83,8 @@
<section> <section>
<h3 id="anchor23">justify-content</h3> <h3 id="anchor23">justify-content</h3>
<div class="code-example"> <div class="code-example">
<code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: center; <br> }</code> <code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: center; <br> }</code>
</div> </div>
<div class="visual-example" id="example5"> <div class="visual-example" id="example5">
<p>p1</p> <p>p1</p>
@ -89,7 +93,8 @@
<p>p4</p> <p>p4</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> }</code> <code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: flex-end; <br> }</code>
</div> </div>
<div class="visual-example" id="example6"> <div class="visual-example" id="example6">
<p>p1</p> <p>p1</p>
@ -114,7 +119,8 @@
<section> <section>
<h3 id="anchor24">align-content</h3> <h3 id="anchor24">align-content</h3>
<div class="code-example"> <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> <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>
<div class="visual-example" id="example7"> <div class="visual-example" id="example7">
<p>p1</p> <p>p1</p>
@ -144,7 +150,8 @@
<section> <section>
<h3 id="anchor25">overflow</h3> <h3 id="anchor25">overflow</h3>
<div class="code-example"> <div class="code-example">
<code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x: scroll; <br> }</code> <code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x:
scroll; <br> }</code>
</div> </div>
<div class="visual-example" id="example8"> <div class="visual-example" id="example8">
<p>p1</p> <p>p1</p>
@ -161,7 +168,8 @@
<p>p12</p> <p>p12</p>
</div> </div>
<div class="code-example"> <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> <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>
<div class="visual-example" id="example9"> <div class="visual-example" id="example9">
<p>p1</p> <p>p1</p>
@ -186,10 +194,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Niklas Minkowitsch</p> <p>Erstellt von: Niklas Minkowitsch</p>
</footer> </footer>
</body> </body>
</html> </html>

34
screens/flexbox/unterelemente.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Flexbox-Layout</h1> <h1>Flexbox-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a> <a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a> <a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2 id="anchor30">Eigenschaften der Unterelemente</h2> <h2 id="anchor30">Eigenschaften der Unterelemente</h2>
<p> <p>
@ -36,7 +36,8 @@
<section> <section>
<h3 id="anchor31">flex-grow</h3> <h3 id="anchor31">flex-grow</h3>
<div class="code-example"> <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> <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>
<div class="visual-example" id="example10"> <div class="visual-example" id="example10">
<p>p1</p> <p>p1</p>
@ -51,7 +52,8 @@
<section> <section>
<h3 id="anchor32">flex-basis</h3> <h3 id="anchor32">flex-basis</h3>
<div class="code-example"> <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> <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>
<div class="visual-example" id="example11"> <div class="visual-example" id="example11">
<p>p1</p> <p>p1</p>
@ -65,7 +67,8 @@
<section> <section>
<h3 id="anchor33">flex-shrink</h3> <h3 id="anchor33">flex-shrink</h3>
<div class="code-example"> <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> <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>
<div class="visual-example" id="example12"> <div class="visual-example" id="example12">
<p>p1</p> <p>p1</p>
@ -76,7 +79,8 @@
<p>p6</p> <p>p6</p>
</div> </div>
<div class="code-example"> <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> <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>
<div class="visual-example" id="example13"> <div class="visual-example" id="example13">
<p>p1</p> <p>p1</p>
@ -92,10 +96,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Niklas Minkowitsch</p> <p>Erstellt von: Niklas Minkowitsch</p>
</footer> </footer>
</body> </body>
</html> </html>

22
screens/grid/allgemeines.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Grid-Layout</h1> <h1>Grid-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="container.html">Container</a> <a href="container.html">Container</a>
<a href="items.html">Items</a> <a href="items.html">Items</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Allgemeines</h2> <h2>Allgemeines</h2>
<p> <p>
@ -111,10 +111,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Lukas Pfau</p> <p>Erstellt von: Lukas Pfau</p>
</footer> </footer>
</body> </body>
</html> </html>

31
screens/grid/container.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Grid-Layout</h1> <h1>Grid-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="container.html">Container</a> <a href="container.html">Container</a>
<a href="items.html">Items</a> <a href="items.html">Items</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Grid Container</h2> <h2>Grid Container</h2>
<p> <p>
@ -48,7 +48,8 @@
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; gap: 10px;<br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
&emsp; gap: 10px;<br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example4"> <div class="visual-example" id="example4">
@ -70,7 +71,8 @@
<br> <br>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; grid-template-rows: 150px 100px 200px;<br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
&emsp; grid-template-rows: 150px 100px 200px;<br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example5"> <div class="visual-example" id="example5">
@ -99,7 +101,8 @@
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br> &emsp; justify-content: space-evenly <br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br>
&emsp; justify-content: space-evenly <br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example6"> <div class="visual-example" id="example6">
@ -138,10 +141,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Lukas Pfau</p> <p>Erstellt von: Lukas Pfau</p>
</footer> </footer>
</body> </body>
</html> </html>

22
screens/grid/items.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Grid-Layout</h1> <h1>Grid-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="container.html">Container</a> <a href="container.html">Container</a>
<a href="items.html">Items</a> <a href="items.html">Items</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Grid Item</h2> <h2>Grid Item</h2>
<p> <p>
@ -148,10 +148,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Lukas Pfau</p> <p>Erstellt von: Lukas Pfau</p>
</footer> </footer>
</body> </body>
</html> </html>

18
screens/home.html
View File

@ -8,18 +8,18 @@
<link rel="stylesheet" href="../css/layout.css"> <link rel="stylesheet" href="../css/layout.css">
</head> </head>
<body> <body>
<header> <header>
<h1>Home</h1> <h1>Home</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="home.html">Home</a> <a href="home.html">Home</a>
<a href="flexbox/allgemeines.html">Flexbox-Layout</a> <a href="flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="grid/allgemeines.html">Grid-Layout</a> <a href="grid/allgemeines.html">Grid-Layout</a>
<a href="text_styling/allgemeines.html">Text-Styling</a> <a href="text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animation/animations.html">Animationen</a> <a href="animation/animations.html">Animationen</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2> <h2>
Prüfungsleistung WebDesigne WiSe 2022/2023 Prüfungsleistung WebDesigne WiSe 2022/2023
@ -93,9 +93,9 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<code>Abgabe zum 05.01.2023</code> <code>Abgabe zum 05.01.2023</code>
</footer> </footer>
</body> </body>
</html> </html>

26
screens/text_styling/allgemeines.html
View File

@ -11,22 +11,22 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Text-Styling</h1> <h1>Text-Styling</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a> <a href="allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="beispiele.html">Weitere Beispiele</a> <a href="beispiele.html">Weitere Beispiele</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Allgemeines</h2> <h2>Allgemeines</h2>
<p> <p>
@ -81,7 +81,7 @@
</div> </div>
<br> <br>
<ol class="visual-example"> <ol class="visual-example">
<li id="font-sizePX">Pixel </li> <li id="font-sizePX">Pixel</li>
<li id="font-sizePR">Vorgegebene Größen</li> <li id="font-sizePR">Vorgegebene Größen</li>
<li id="font-sizeCM">Prozent</li> <li id="font-sizeCM">Prozent</li>
</ol> </ol>
@ -111,7 +111,7 @@
</div> </div>
<br> <br>
<ol class="visual-example"> <ol class="visual-example">
<li id="font-sizeS">Pixel </li> <li id="font-sizeS">Pixel</li>
<li id="font-sizeM">Vorgegebene Größen</li> <li id="font-sizeM">Vorgegebene Größen</li>
<li id="font-sizeL">Prozent</li> <li id="font-sizeL">Prozent</li>
</ol> </ol>
@ -122,8 +122,8 @@
<br> <br>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Luca Nicolas Fleck</p> <p>Erstellt von: Luca Nicolas Fleck</p>
</footer> </footer>
</body> </body>

43
screens/text_styling/beispiele.html
View File

@ -11,22 +11,22 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Text-Styling</h1> <h1>Text-Styling</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a> <a href="allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="beispiele.html">Weitere Beispiele</a> <a href="beispiele.html">Weitere Beispiele</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Weitere Beispiele</h2> <h2>Weitere Beispiele</h2>
<section> <section>
@ -208,7 +208,8 @@
Textausrichtung ändern Textausrichtung ändern
</h3> </h3>
<p> <p>
Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig, Rechtsseitig und Blocksats ändern. 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. Die Anweisung ist wie die anderen Anzuwenden.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -243,7 +244,8 @@
Textgestaltung Textgestaltung
</h3> </h3>
<p> <p>
Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift Hinzufügen. 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. Die Anweisung wird ausgeführt wie die Vorherigen.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -275,8 +277,10 @@
Wort- und Zeichenabstände verändern Wort- und Zeichenabstände verändern
</h3> </h3>
<p> <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 Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die
erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das man den abstand nicht in Prozenten(%) 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). angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).
</p> </p>
<div class="code-example"> <div class="code-example">
@ -303,7 +307,8 @@
<li id="word-spacingREM">1 root-Element</li> <li id="word-spacingREM">1 root-Element</li>
</ol> </ol>
<p class="explanation"> <p class="explanation">
Die Anweisung "letter-spacing" funktioniert genauso, nur dass sie den Abstand zwischen einzelnen Zeichen, 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. also jedem einzelnen Buchstaben, verändert anstatt zwischen den ganzen Wörtern.
</p> </p>
</section> </section>
@ -344,7 +349,8 @@
Texte transvormieren Texte transvormieren
</h3> </h3>
<p> <p>
Nun zur letzten Anweisung zum Stylen von Texten in CSS. Mit "text-transform" kann der Nutzer Regeln für den Text festlegen, 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: die dann für alle Wörter gelten. Die Regeln die angewendet werden können sind:
</p> </p>
<ol> <ol>
@ -354,7 +360,8 @@
<li>None: Regeln werden aufgehoben.</li> <li>None: Regeln werden aufgehoben.</li>
</ol> </ol>
<p> <p>
Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der rechtschreibung für Leute, 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. mit Problemen in der Groß- und Kleinschreibung übergehen, da es so zu einem Stilmittel wird.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -388,8 +395,8 @@
Nun weißt du alles was es über das Gestalten eines textes mit CSS zu wissen gibt. Nun weißt du alles was es über das Gestalten eines textes mit CSS zu wissen gibt.
</p> </p>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Luca Nicolas Fleck</p> <p>Erstellt von: Luca Nicolas Fleck</p>
</footer> </footer>
</body> </body>