diff --git a/.~lock.MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.odt# b/.~lock.MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.odt#
new file mode 100644
index 0000000000000000000000000000000000000000..cc2ceecf93a4c255f49734db184b474ddfad6642
--- /dev/null
+++ b/.~lock.MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.odt#
@@ -0,0 +1 @@
+,DESKTOP-EFCPCT8/user,DESKTOP-EFCPCT8,30.05.2022 22:11,file:///C:/Users/user/AppData/Roaming/LibreOffice/4;
\ No newline at end of file
diff --git a/MartinHustoles_MarcelKehrberg_Web_Portfolio.zip b/MartinHustoles_MarcelKehrberg_Web_Portfolio.zip
new file mode 100644
index 0000000000000000000000000000000000000000..ae670008e4ae57c2fe73999be841dfc85b53e4c1
Binary files /dev/null and b/MartinHustoles_MarcelKehrberg_Web_Portfolio.zip differ
diff --git a/MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.odt b/MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.odt
index cb7d694961e3c163aad0ca983be8d4441fd7096f..547019b155065db43378ac5a6501d0dbdfaf1416 100644
Binary files a/MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.odt and b/MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.odt differ
diff --git a/MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.pdf b/MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..374f83d188bd14b27056444f0e1d66bdc5339b0c
Binary files /dev/null and b/MartinHustoles_MarcelKehrberg_Web_Portfolio_Bewertung.pdf differ
diff --git a/index.html b/index.html
index 7f34287d3c5e4123849255a9bec7b537216ea7cb..88677654ae759ba15713b8e8be4600c3177fc3e6 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8"> <!--utf-8 fuer Umlaute-->
<link rel="stylesheet" href="style.css">
- <link rel="icon" href="medien/icon.svg">
+ <link rel="icon" href="Medien/icon.svg">
<title>SpeculativeAI</title>
</head>
<body>
@@ -16,7 +16,7 @@
-->
<main id="scroll_main">
- <section id="page1" class="scroll_snap_item">
+ <section id="page1" class="scroll_snap_item"> <!-- Teaser-Seite -->
<div class="zentriert">
<div class="header"> <!--Navigation-->
@@ -37,11 +37,11 @@
</div>
</section>
- <section id="page2" class="scroll_snap_item">
+ <section id="page2" class="scroll_snap_item"> <!-- Was sollte man wissen (1/2) -->
<div class="container">
<div class="item1">
- <img class="Bild2" src="Medien/BL2.jpg" alt="Light-Object"> <!--Selbst erstellte Bilder-->
+ <img class="Bild2" src="Medien/BL2.jpg" alt="Licht-Object"> <!--Selbst erstellte Bilder-->
<p>
Kugelförmiges Lichtobjekt mit 95m Led-Schlauch,
Mikrofon und Mikroprozessor der die Schallsignale verarbeitet.
@@ -63,7 +63,7 @@
</div>
</section>
- <section id="page3" class="scroll_snap_item">
+ <section id="page3" class="scroll_snap_item"> <!-- Was sollte man wissen (2/2) -->
<div class="container2">
<div class="video2">
@@ -79,7 +79,7 @@
</div>
<div>
- <p> <!--Beschreibung des Kunstwerkes-->
+ <p>
Die SpeculativeAI Serie ist ein von Birk Schmithüsen erschaffenes Kunstwerk,
worin 2 verschiedene Kugeln mithilfe von Licht- und Schallsignalen untereinander
kommunizieren. Dies wird durch ein Neuronales Netzwerk ermöglicht, das über eine
@@ -93,7 +93,7 @@
</div>
</section>
- <section id="page4" class="scroll_snap_item">
+ <section id="page4" class="scroll_snap_item"> <!-- Aufgabe c,d und e-->
<div class="container3">
<div>
@@ -103,7 +103,7 @@
<p>SystemFailed</p>
<p>KlangNetz</p>
<p>Persoenlichkeitsmonitor</p>
- <a href="https://www.birkschmithuesen.com/_works">https://www.birkschmithuesen.com/_works</a>
+ <a href="https://www.birkschmithuesen.com/_works" target="_blank">https://www.birkschmithuesen.com/_works</a>
</div>
<div>
<img class="Bild3" src="Medien/Birk_Schmithuesen.jpg" alt="Creator">
@@ -113,7 +113,7 @@
</section>
</main>
- <div id="back_to_top">
+ <div id="back_to_top"> <!-- Einfache Navigation um an den Anfang zu gelangen -->
<a href="#page1">
<img src="Medien/Pfeil.svg" alt="Seitenanfang" width="75" height="75">
</a>
diff --git a/style.css b/style.css
index 275fab4abb7f00c2c8692ba13144992f2ef1502c..4715a85c1dda8ebb66d791aca642103ae4b64e52 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');
*{
- font-family: 'Electrolize', sans-serif; /*Ausgewaehlte Font*/
+ font-family: 'Electrolize', sans-serif; /*Ausgewaehlte Font. Quelle: Google Fonts*/
font-size: 110%;
user-select: none;
scroll-behavior: smooth; /*Damit die Schnellauswahl oben auf der ersten Seite nicht sofort runter springt*/
@@ -43,7 +43,7 @@ body{
}
.Bild1{
- width: 45rem;
+ width: 37vw;
border-radius: 0.5rem;
filter: blur(2px);
transition: 0.2s ease-out;
@@ -56,7 +56,7 @@ body{
}
.Bild2{
- width: 20rem;
+ width: 20vw;
border-radius: 0.5rem;
}
@@ -90,9 +90,10 @@ body{
#video1{
background-color:black;
border-radius: 0.5rem;
+ padding: 0.5rem;
}
-.video2{
+.video2{
border-radius: 4rem;
overflow: hidden;
transition: 0.2s ease-out;
@@ -106,7 +107,8 @@ body{
transform: scale(1.05);
}
.video2 video{
- width: 20rem;
+ width: 20vw;
+
}
#scroll_main{
@@ -162,6 +164,10 @@ body{
margin: 2rem;
}
+.container3 a{
+ text-decoration: none;
+}
+
/*
Farbe von Hintergruenden und den Texten auf jewheils jeder Seite.
(Es macht keinen Sinn schwarzen Text auf einem schwarzem Hintergrund darzustellen.)
@@ -186,9 +192,10 @@ Farbe von Hintergruenden und den Texten auf jewheils jeder Seite.
color:black;
}
+
#back_to_top{
position: fixed;
- right:2rem;
+ right:3rem;
bottom:2rem;
transition: 0.1s ease-out;
}