Skip to content

Commit 938a6d2

Browse files
nadjascodejourneynadjascodejourney
authored
Add files via upload
1 parent b4045ef commit 938a6d2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1847
-0
lines changed

‎1-pager mit bookmarks.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Single Page Website</title>
5+
<link rel="stylesheet" href="/css/navigation.css">
6+
7+
<style>
8+
/* Das sorgt dafür, daß jede section mindestens 100% der Browserfenster-Höhe ausfüllt (vh = viewport height). Kann entfernt werden, wenn genügend Inhalt in die sections eingefügt wurde. Das ist an sich auch gut für Versuchszwecke, um zu sehen, dass die Seite tatsächlich springt anhand der Sprungmarken */
9+
section {min-height: 100vh}
10+
</style>
11+
12+
</head>
13+
14+
<body>
15+
16+
<header id="home">
17+
<!--damit Sprung auf Startseite mit Header geht, wenn man auf Home klickt-->
18+
19+
</header>
20+
21+
<nav>
22+
<!-- Füge hier eine Navigation mit Links ein, die zu den einzelnen sections springen! (bookmark jumps) -->
23+
<a href="#home">Home</a>
24+
<a href="#kompetenzen">Kompetenzen</a>
25+
<a href="#projekte">Projekte</a>
26+
<a href="#lebenslauf">Lebenslauf</a>
27+
<a href="#kontakt">Kontakt</a>
28+
</nav>
29+
30+
<h1>Navigation mit Bookmark Jumps</h1> <!--damit Sprung auf Hauptüberschrift geht, wenn man auf Home klickt, könnte man auch hier hinter h1 die id einfügen-->
31+
32+
<main>
33+
34+
<section>
35+
<h2>Home</h2> <!--hier soll später nicht mehr "home" stehen-->
36+
</section>
37+
38+
<section>
39+
<h2 id="kompetenzen">Kompetenzen</h2>
40+
</section>
41+
42+
<section>
43+
<h2 id="projekte">Projekte</h2>
44+
</section>
45+
46+
<section>
47+
<h2 id="lebenslauf">Lebenslauf</h2>
48+
</section>
49+
50+
<section>
51+
<h2 id="kontakt">Kontakt</h2>
52+
</section>
53+
54+
<a href="#home">Nach oben zu home springen</a>
55+
56+
57+
</main>
58+
59+
</body>
60+
</html>

‎Externe Inhalte einbinden.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Wie man ein Youtubevideo einbindet</title>
5+
</head>
6+
<body>
7+
8+
<h1>Videos und andere externe Inhalte einbinden</h1>
9+
<h2>Internetseite</h2>
10+
<!--Eine Internetseite einbinden:-->
11+
<iframe src="https://digitalcareerinstitute.org/de/" frameborder="0" width="400" height="500"></iframe>
12+
<br><br>
13+
<h2>Youtubevideo</h2>
14+
<!--Ein Youtubevideo einbinden:-->
15+
<iframe width="560" height="315" src="https://www.youtube.com/embed/zxz2wOjGouE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
16+
<br><br>
17+
<h2>Googlekarte</h2>
18+
<!--Eine Googlekarte einbinden:-->
19+
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2695.426039351311!2d19.055134220578797!3d47.501093627483485!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4741dc6b08381989%3A0x132a0cac000c1cbd!2s12%20Revay%20Hotel!5e0!3m2!1sen!2sde!4v1689774091039!5m2!1sen!2sde" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
20+
<br><br>
21+
22+
23+
</body>
24+
</html>

‎audio-video.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Neue Elemente in HTML5: Video und Audio</title>
5+
</head>
6+
<body>
7+
<h1>Wir betten eine Audiodatei und ein Video ein</h1>
8+
<audio controls autoplay>
9+
<source src="audio/summer-walk-152722.mp3">
10+
</audio>
11+
<br><br>
12+
<video width="300" controls>
13+
<source src="video/171877 (1080p).mp4">
14+
</video>
15+
</body>
16+
</html>

‎background.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body{
2+
background-image: url(../bilder/Vogel.jpg);
3+
background-size: cover;
4+
background-position: center;
5+
background-repeat: no-repeat;
6+
background-attachment: fixed;
7+
}
8+
section {
9+
background-color: rgba(255, 255, 255, 0.192);
10+
/*damit sich Transparenz nur auf Textbereich bezieht, wird hier auf die section bezogen*/
11+
padding: 30px;
12+
margin:70px;
13+
}

‎background.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<title>Hintergrundeigenschaften</title>
5+
<link rel="stylesheet" href="css/background.css">
6+
</head>
7+
<body>
8+
9+
<section>
10+
11+
<h1>Hintergrundeigenschaften ausprobieren</h1>
12+
13+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, inventore corporis. Sequi dicta, non dignissimos consequatur iusto, qui tenetur quam quae impedit vel laboriosam nam deleniti eligendi perspiciatis! Vitae eligendi modi nam! Libero iusto quis sint ipsum! Consequuntur, nemo. Sint accusantium veniam iusto dignissimos quibusdam asperiores. Placeat atque culpa eveniet veniam autem tenetur sed, architecto minima libero. Culpa iure nihil reprehenderit assumenda quis atque repellat consequatur eveniet eligendi voluptatem voluptas veniam iste quibusdam nostrum ullam optio voluptatum possimus, animi delectus, dolores harum ut. Similique commodi et repellat nemo veniam earum, odit laboriosam ex nesciunt esse rem animi consequuntur quia quisquam perspiciatis aliquam impedit optio explicabo unde quaerat assumenda fugiat voluptates! Aspernatur, iusto? Id temporibus, iusto saepe libero distinctio sed et nobis quos vel nisi, culpa aliquam asperiores nesciunt. Adipisci vitae quaerat modi delectus, nisi fugit odio reprehenderit numquam explicabo voluptas cupiditate velit. Accusamus, iusto. Labore delectus perferendis vitae adipisci, vero non corrupti est perspiciatis dolorum numquam dolorem totam rerum eos amet nobis reprehenderit a, quasi veniam? Quis illo laudantium molestiae! Cum, obcaecati architecto eum doloremque accusantium accusamus illum error repellendus explicabo modi exercitationem ipsum minus veritatis. Quisquam ipsam dolorum pariatur atque modi necessitatibus fuga perferendis impedit, mollitia sunt, quo corrupti. Hic, amet reprehenderit! Molestias sed, distinctio velit quis minima totam praesentium ipsam! Repudiandae molestias adipisci consequuntur eum exercitationem fugit ab. Aliquam velit eos qui numquam sint saepe cum quibusdam. Ad, dolor ex. Quis, officiis necessitatibus accusamus molestiae nobis dicta veritatis nostrum iusto ut natus optio, asperiores eaque sint mollitia dolores, consequuntur autem possimus voluptas. Eum nulla dignissimos, facilis vero tempora, obcaecati maiores doloribus magni quia, aliquam similique! Earum inventore exercitationem nostrum eum natus deleniti ea perferendis vitae minus ratione maiores illo modi odit porro animi, omnis saepe quaerat. Officiis culpa architecto voluptate quidem sint totam reiciendis maiores reprehenderit nobis repellat, facere quia perspiciatis, ipsum quos qui, esse distinctio provident. Laborum vitae repellendus reiciendis commodi cum, consequuntur atque quibusdam omnis officia quam magnam sunt repellat, minima labore. Facere pariatur nam perferendis sunt nobis! Blanditiis nam harum inventore neque quo, voluptas quos tempore modi at iste eaque temporibus officia autem possimus distinctio, ut ex similique libero! Deserunt doloremque odio dolore minima sint labore, sunt optio, unde tenetur dicta sit odit quae velit soluta a illo modi ad nostrum molestias. At facilis inventore nostrum ullam quisquam numquam assumenda ut ducimus laudantium fugit, totam necessitatibus earum eaque, beatae libero aut obcaecati? Facilis, voluptatem itaque vel recusandae ipsum in molestiae numquam. Et consectetur nihil, iusto porro deleniti eius dicta beatae ullam ut, illum laborum vitae? Beatae maxime consequatur, pariatur illo in similique praesentium omnis ipsa doloribus eius iusto asperiores, quam perspiciatis dolorem? Natus veritatis, tenetur aut placeat odio ipsam temporibus ullam illo ea commodi possimus recusandae quidem debitis obcaecati et aliquam consectetur dolor explicabo quia facere? Aliquam excepturi architecto ipsam necessitatibus velit quibusdam quos, commodi porro atque provident maxime repellendus voluptas eligendi nostrum error possimus impedit quasi? Voluptas quo, assumenda quibusdam soluta porro quidem architecto libero! Enim similique at maiores sit, repellendus dicta culpa fugit ex eaque, rerum optio, expedita cum laboriosam corrupti quod est eveniet? Similique nobis beatae cumque ipsum. Voluptate molestiae perspiciatis necessitatibus quo saepe rem eum amet ipsum obcaecati sequi qui excepturi ipsam, non laborum, sint, officiis quidem. Porro repellendus et, amet minus quidem nobis iste veniam hic doloremque ipsa beatae, voluptatem sint voluptates a? Culpa quos, possimus cum enim vero molestiae autem dolor sunt ad consequatur provident, eveniet accusantium reiciendis numquam fugiat quasi facere quis laudantium nisi delectus. Vel, qui. Accusamus necessitatibus officiis sequi! Quod commodi obcaecati ducimus at fugiat ipsam iusto accusamus voluptatum rem omnis perspiciatis, molestias qui saepe modi quae adipisci nihil facilis vitae atque sed quia reiciendis? In facilis nulla consectetur illum aperiam? Commodi consectetur velit enim vero dolorum rem nihil quaerat quae alias iure animi inventore omnis praesentium beatae ad cupiditate aut aliquid magni, itaque fugit laboriosam ipsum illo et suscipit! Laudantium deserunt possimus ducimus nobis nam. Unde illum enim, quaerat error doloremque quos iusto magnam odit explicabo cum beatae quasi fugiat, quidem, cumque modi eligendi tenetur delectus veniam! Libero ratione sed aliquid repellat cumque eos ipsum reiciendis, tenetur sint, dolore, tempora perferendis unde! Veritatis, recusandae. Odit enim quis minima aut illo error, at labore itaque corrupti. Repudiandae illo, eum hic aut earum laudantium veritatis. Molestiae quis, beatae voluptatibus incidunt corporis voluptate blanditiis alias dolores, minus veritatis tenetur, aliquam a neque ad. Quidem illum itaque beatae, quas eaque consectetur nemo soluta! Vel iste labore similique nam incidunt. Repellendus quas atque fugit ullam accusamus explicabo voluptas natus numquam, debitis architecto, fuga quisquam cupiditate neque error quam! Optio quos, a pariatur consectetur blanditiis dignissimos iure, iste quia dolorum dolor eius. Consequuntur, accusantium enim. Perspiciatis enim saepe itaque! Quasi odio alias eum corporis maiores! Quam veniam reprehenderit voluptas autem fuga libero ex tempora harum ipsa nam? Minus, deleniti repellat. Laborum excepturi optio dolor alias aspernatur iusto voluptatum voluptatem ea reprehenderit provident obcaecati odio rerum, cupiditate fuga ipsa eveniet ipsam facere modi fugiat nihil, error sunt, quibusdam consequatur. Illum ipsa ut tempora ullam commodi nihil vel eius enim provident assumenda eos culpa aspernatur consequatur dicta, quaerat quia quos hic corrupti vero magnam inventore fuga? Iste numquam laborum omnis facilis amet est temporibus, blanditiis exercitationem qui explicabo vero eos assumenda provident earum harum veniam voluptatibus, itaque aperiam maxime architecto. Sed, ad quod. Fugiat dicta commodi molestias dignissimos eligendi aspernatur hic ipsa architecto, veritatis dolore. Dolorum velit accusamus harum, sequi adipisci, dicta voluptate dolor architecto aliquid iusto, quam perspiciatis ab eaque eligendi? Doloremque odit atque fuga iste sequi, consequuntur sed voluptate eligendi distinctio, minus molestiae iure aliquid, beatae vel facere cupiditate ipsam quo. Assumenda, possimus. Repellendus, ea dignissimos. Odio repellendus tenetur obcaecati doloremque ducimus impedit vel ipsam, assumenda recusandae placeat itaque architecto ut provident optio vero, veniam saepe est ratione quo quae. Voluptatum atque mollitia blanditiis vel libero, quos delectus reiciendis. Reprehenderit accusantium nesciunt cum et nostrum beatae, tempore natus? Iste, esse voluptate nihil possimus reprehenderit neque. Minus, a ut cupiditate aperiam repellendus veniam sint ullam laboriosam voluptatem alias distinctio amet, quas atque.</p>
14+
15+
</section>
16+
17+
</body>
18+
</html>

‎box-model-uebung.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.box-1 {
2+
border: 2px dashed black;
3+
padding: 50px;
4+
width: 500px;
5+
margin-top: 5px;
6+
margin-bottom: 10px;
7+
min-height: 100px;
8+
}
9+
10+
.box-2 {
11+
padding: 10px;
12+
margin: 30px;
13+
border-left: 5px;
14+
border-right: 5px;
15+
border-top: 5px;
16+
border-bottom: 5px;
17+
border-style: dotted;
18+
19+
}
20+
21+
.box-3 {
22+
border-left: 2px dashed rgb(177, 30, 30);
23+
border-right: 2px dashed #201eb1;
24+
border-top: 2px dashed magenta;
25+
border-bottom: 2px dashed #e77c18;
26+
padding: 100px;
27+
width: 400px;
28+
min-height: 100px;
29+
margin: 20px auto;
30+
text-align: center; /*um meinen Text direkt zentriert unter das bild zu setzen*/
31+
}
32+
33+
.box-3 img {
34+
display: block; /*weil bild ein inlinelement ist und sonst nicht zentriert werden kann*/
35+
width: 100%; /*bezieht sich auf das Elternelement -> die Box*/
36+
;
37+
margin: 20px auto;
38+
}

‎box-model-uebung.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>box-model</title>
5+
<link rel="stylesheet" href="css/box-model-uebung.css">
6+
</head>
7+
<body>
8+
9+
<h1>Das CSS Box Model</h1>
10+
11+
<div class="box-1">
12+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum ipsa autem a corrupti accusamus, atque aliquam totam laboriosam aliquid ut, beatae non sed provident culpa! Delectus quam ad aut nulla enim ducimus magnam ea commodi, officiis earum fugit maxime recusandae vitae illum ipsum, rerum consequuntur culpa. Eveniet in ab quibusdam!
13+
</p>
14+
</div><br>
15+
16+
<div class="box-2">
17+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem minus eos impedit facilis eligendi suscipit aliquid ratione ducimus quod explicabo.</p>
18+
</div><br>
19+
20+
<div class="box-3">
21+
<img src="bilder/Katze.jpg" alt="Katzenbild">
22+
<p>Das ist eine schöne Katze.</p>
23+
</div><br>
24+
25+
26+
</body>
27+
</html>

‎box-model.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<title>CSS Box Model</title>
5+
<style>
6+
7+
/*Gib den sections unterschiedliche margins, borders und paddings*/
8+
9+
.box1 {
10+
padding: 30px;
11+
border: 2px dashed;
12+
margin: 50px;
13+
}
14+
15+
.box2 {
16+
padding: 25px;
17+
border: 10px dotted;
18+
margin: 30px;
19+
}
20+
21+
.box3 {
22+
padding: 5px;
23+
border: 20px;
24+
border-style: double;
25+
margin: 70px;
26+
}
27+
28+
/*Die Paragraphen sollten ihre eigenen borders haben, halb so groß (in der Breite) wie die sections sein und innerhalb der sections zentriert werden*/
29+
30+
p {
31+
display: block;
32+
text-align: center;
33+
}
34+
35+
.p1 {
36+
border: 1px;
37+
border-width: 1px;
38+
}
39+
40+
.p2 {
41+
border: 5px;
42+
border-width: 5px;
43+
}
44+
45+
.p3 {
46+
border: 10px;
47+
border-width: 10px;
48+
}
49+
</style>
50+
51+
</head>
52+
<body>
53+
<section class="box1">
54+
<p class="p1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit commodi sit tempore soluta similique veritatis consequatur sed blanditiis minus dolor.</p>
55+
56+
<p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio natus nihil porro commodi nobis velit debitis culpa consequatur laboriosam incidunt.</p>
57+
</section>
58+
59+
<section class="box2">
60+
<p class="p2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit commodi sit tempore soluta similique veritatis consequatur sed blanditiis minus dolor.</p>
61+
62+
<p class="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio natus nihil porro commodi nobis velit debitis culpa consequatur laboriosam incidunt.</p>
63+
</section>
64+
65+
<section class="box3">
66+
<p class="p3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit commodi sit tempore soluta similique veritatis consequatur sed blanditiis minus dolor.</p>
67+
68+
<p class="p3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio natus nihil porro commodi nobis velit debitis culpa consequatur laboriosam incidunt.</p>
69+
</section>
70+
71+
</body>
72+
</html>

‎css-basics.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<title>css basics mit internem stylesheet</title>
5+
6+
<style>
7+
body {background-color: rgb(160, 233, 233);}
8+
h1 {color: blue; margin: 20px}
9+
.andere-textfarbe {color: darkgreen;}
10+
section {
11+
padding: 10px;
12+
margin: 20px;
13+
}
14+
15+
</style>
16+
17+
</head>
18+
<body>
19+
<h1>CSS Basics Aufgabe</h1>
20+
21+
<section>
22+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed dignissimos modi magnam voluptate saepe, impedit laboriosam? Reiciendis aliquid quam asperiores.</p>
23+
<p class="andere-textfarbe">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil maiores nemo sit dignissimos culpa? Iste quam fugiat cupiditate eligendi laborum?</p>
24+
25+
</section>
26+
27+
<section>
28+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, error?</p>
29+
<p class="andere-textfarbe">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, reiciendis.</p>
30+
31+
</section>
32+
33+
<section>
34+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis nisi ab, accusamus illo ullam eum suscipit tenetur ratione minus inventore, doloremque, eligendi aliquid aspernatur voluptate commodi sed ipsum aliquam dolorem.</p>
35+
<p class="andere-textfarbe">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem adipisci, facilis labore amet suscipit molestias, optio quos enim quia doloremque omnis? Possimus ea voluptatem, nesciunt deleniti nihil dicta provident obcaecati.</p>
36+
37+
</section>
38+
39+
</body>
40+
</html>

‎css-einbinden.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
body{
2+
background-color: aquamarine;
3+
color: orangered;
4+
}
5+
p{
6+
color:green;
7+
}

‎css-einbinden.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>css einbinden - 3 Methoden</title>
5+
<!--Man sollte sich für einen Einbindungsweg entscheiden, nicht mischen!-->
6+
7+
<!--Internes Stylesheet-->
8+
<style>
9+
p{color:red;}
10+
</style>
11+
12+
<!--Externes Stylesheet-->
13+
<link rel="stylesheet" href="css/css-einbinden.css">
14+
15+
</head>
16+
<body>
17+
18+
<!--Inline Style-->
19+
<h1 style="color:blueviolet;">CSS einbinden - 3 Methoden</h1>
20+
21+
<h2>Überschrift für den Text</h2>
22+
23+
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore, nesciunt sapiente eveniet quibusdam, quae nam nihil laboriosam aliquid illo non inventore maxime cumque. Id ipsum similique necessitatibus, non autem repellendus!</p>
24+
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)