Technigo · SimoneStillhard · Oct 22, 2022 · HIPPIEKICK · Nov 7, 2022 · HIPPIEKICK
diff --git a/README.md b/README.md
@@ -1,12 +1,11 @@
-# Project Name
+# Project Simone Steiger
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+I wanted to create a portfolio site for my friend, with all the different talents she has to offer.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+My main problem was to make all the galleries of the subsites to behave similarly in the different media queries.
+Also I wasn't quite able to make the footer to always stick to the end of the page, especially when there is not so much content. 
 
 ## View it live
 

diff --git a/code/audio/Gedicht.mp3 b/code/audio/Gedicht.mp3
diff --git a/code/audio/Radiowerbung.mp3 b/code/audio/Radiowerbung.mp3
diff --git a/code/audio/Werbung Ecomat.mp3 b/code/audio/Werbung Ecomat.mp3
diff --git a/code/audio/Werbung Merz.mp3 b/code/audio/Werbung Merz.mp3
diff --git a/code/audio/Werbung Outletfactory.mp3 b/code/audio/Werbung Outletfactory.mp3
diff --git a/code/images/main.jpg b/code/images/main.jpg
diff --git a/code/images/model1.jpg b/code/images/model1.jpg
diff --git a/code/images/model2.jpg b/code/images/model2.jpg
diff --git a/code/images/model3.jpg b/code/images/model3.jpg
diff --git a/code/images/model4.jpg b/code/images/model4.jpg
diff --git a/code/images/model5.jpg b/code/images/model5.jpg
diff --git a/code/images/model6.jpg b/code/images/model6.jpg
diff --git a/code/images/modrt1.jpg b/code/images/modrt1.jpg
diff --git a/code/images/modrt2.jpg b/code/images/modrt2.jpg
diff --git a/code/images/modrt3.jpg b/code/images/modrt3.jpg
diff --git a/code/images/modrt4.jpg b/code/images/modrt4.jpg
diff --git a/code/images/modrt5.jpg b/code/images/modrt5.jpg
diff --git a/code/images/modrt6.jpg b/code/images/modrt6.jpg
diff --git a/code/images/stage1.jpeg b/code/images/stage1.jpeg
diff --git a/code/images/stage2.jpeg b/code/images/stage2.jpeg
diff --git a/code/images/stage3.jpg b/code/images/stage3.jpg
diff --git a/code/images/stage4.jpeg b/code/images/stage4.jpeg
diff --git a/code/images/sugaring1.jpeg b/code/images/sugaring1.jpeg
diff --git a/code/images/sugaring2.jpeg b/code/images/sugaring2.jpeg
diff --git a/code/images/sugaring3.jpeg b/code/images/sugaring3.jpeg
diff --git a/code/images/sugaring4.jpeg b/code/images/sugaring4.jpeg
diff --git a/code/images/sugaring5.jpeg b/code/images/sugaring5.jpeg
diff --git a/code/images/sugaring6.jpeg b/code/images/sugaring6.jpeg
diff --git a/code/images/theater1.jpg b/code/images/theater1.jpg
diff --git a/code/images/theater2.jpg b/code/images/theater2.jpg
diff --git a/code/images/theater3.jpg b/code/images/theater3.jpg
diff --git a/code/images/theater4.jpg b/code/images/theater4.jpg
diff --git a/code/images/theater5.jpg b/code/images/theater5.jpg
diff --git a/code/images/theater6.jpg b/code/images/theater6.jpg
diff --git a/code/index.html b/code/index.html
@@ -2,17 +2,46 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Project Name</title>
-    <link rel="stylesheet" href="./style.css" />
-    <!-- dont forget the meta tag for responsiveness -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Simone Steiger</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap');
+    </style>
   </head>
   <body>
-    <header>
-      <!-- If you want a header with a title, logo and a navbar, here is where you should add that. -->
+    <header class="main">
+      <h1>SIMONE STEIGER</h1>
+      <img src="./images/main.jpg">
+      <span>Mit viel Freude spreche ich Dokumentationen, Hörbücher, Werbetexte und
+        vieles mehr für Sie ein. Gerne moderiere ich Ihren Event. Auch für
+        Fernsehproduktionen oder als Werbemodel bin ich buchbar.</span>
     </header>
-
-    <main class="">
-      <!-- The main container to use as the flex parent for your card layout, the main content of the site should be in here.  -->
+    <main class="content">
+      <div class="gallery">
+        <div class="talent" style="width: 200px; height: 250px;">
+          <a href="./staging.html">Home Staging</a>
+        </div>
+        <div class="talent" style="width: 290px; height: 250px;">
+          <a href="./model.html">Werbemodel</a>
+        </div>
+        <div class="talent" style="width: 240px; height: 250px;">
+          <a href="./sprecher.html">Sprecherin</a>
+        </div>
+        <div class="talent" style="width: 200px; height: 250px;">
+          <a href="./moderation.html">Moderatorin</a>
+        </div>
+        <div class="talent" style="width: 290px; height: 250px;">
+          <a href="./sugaring.html">Sugaring</a>
+        </div>
+        <div class="talent" style="width: 240px; height: 250px">
+          <a href="./theater.html">Schauspielerin</a>
+        </div>
+      </div>
     </main>
+    <footer>
+      <div>tel: +41 78 788 28 78</div>
+      <div>mail: [email protected]</div>
+    </footer>
   </body>
-</html>
+</html>
diff --git a/code/model.html b/code/model.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Simone Steiger</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap');
+    </style>
+  </head>
+  <body>
+    <header class="ancillary">
+      <h2>Simone Steiger</h2> 
+    </header>
+    <main class="content">
+      <button class="button">
+        <a href="./index.html">HOME</a>
+      </button>
+      <div class="text">
+        <h3>Werbemodel</h3>
+        <p>Die Vielseitigkeit des Modeln für Fotos oder TV Werbung macht mir extrem grosse Freude
+          und ich finde es total aufregend in kurzer Zeit eine ganz neue Rolle einzunehmen.
+          Durch meine Art ist eine Zusammenarbeit mit mir sehr effizient und unkompliziert.
+          Freue mich bereits jetzt schon auf den nächsten Auftrag:-)</p>
+      </div>
+      <div class="gallery">
+        <img src="./images/model4.jpg">
+        <img src="./images/model6.jpg">
+        <img src="./images/model5.jpg">
+        <img src="./images/model2.jpg">
+        <img src="./images/model3.jpg">
+        <img src="./images/model1.jpg">
+      </div>
+    </main>
+    <footer>
+      <div>tel: +41 78 788 28 78</div>
+      <div>mail: [email protected]</div>
+    </footer>
+  </body>
+</html>
diff --git a/code/moderation.html b/code/moderation.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Simone Steiger</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap');
+    </style>
+  </head>
+  <body>
+    <header class="ancillary">
+      <h2>Simone Steiger</h2>  
+    </header>
+    <main class="content">
+      <button class="button">
+        <a href="./index.html">HOME</a>
+      </button>
+      <div class="text">
+        <h3>Moderatorin</h3>
+        <p>In verschiedene Rollen zu schlüpfen macht mir grossen Spass.
+          Durch meine authentische und emphatische Art ist auch das Moderieren
+          total mein Ding. Ich bin immer offen für neue Produktionen und
+          freue mich sehr auf Deine Anfrage.</p>
+      </div>
+      <div class="gallery">
+        <img src="./images/modrt2.jpg">
+        <img src="./images/modrt1.jpg">
+        <img src="./images/modrt5.jpg">
+        <img src="./images/modrt4.jpg">
+        <img src="./images/modrt6.jpg">
+        <img src="./images/modrt3.jpg">
+      </div>
+    </main>
+    <footer>
+      <div>tel: +41 78 788 28 78</div>
+      <div>mail: [email protected]</div>
+    </footer>
+  </body>
+</html>
diff --git a/code/sprecher.html b/code/sprecher.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Simone Steiger</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap');
+    </style>
+  </head>
+  <body>
+    <header class="ancillary">
+      <h2>Simone Steiger</h2>
+    </header>
+    <main class="content">
+      <button class="button">
+        <a href="./index.html">HOME</a>
+      </button>
+      <div class="text">
+        <h3>Sprecherin</h3>
+        <p>Alle die mich kennen, wissen, dass ich sehr gerne spreche;-)
+          Deshalb liess ich mich bei der Speech Academy Schweiz zur Sprecherin ausbilden.
+          Über Hörspiel, Werbung, Kommentar und Synchron; alles macht mir grossen Spass
+          und ich freue mich sehr auf eine spannende Zusammenarbeit.</p>
+      </div>
+      <div class="gallery">
+        <div class="audio">
+          <audio controls style="width: 270px; height: 40px;">
+            <source src="./audio/Gedicht.mp3" type="audio/mpeg">
+          </audio>
+          <p>Gedicht</p>
+        </div>
+        <div class="audio">
+          <audio controls style="width: 270px; height: 40px;">
+            <source src="./audio/Radiowerbung.mp3" type="audio/mpeg">
+          </audio>
+          <p>Radiowerbung Hochdeutsch</p>
+        </div>
+        <div class="audio">
+          <audio controls style="width: 270px; height: 40px;">
+            <source src="./audio/Werbung Ecomat.mp3" type="audio/mpeg">
+          </audio>
+          <p>Ecomat Werbung Hochdeutsch</p>
+        </div>
+        <div class="audio">
+          <audio controls style="width: 270px; height: 40px;">
+            <source src="./audio/Werbung Merz.mp3" type="audio/mpeg">
+          </audio>
+          <p>Merz Werbung Hochdeutsch</p>
+        </div>
+        <div class="audio">
+          <audio controls style="width: 270px; height: 40px;">
+            <source src="./audio/Werbung Outletfactory.mp3" type="audio/mpeg">
+          </audio>
+          <p>Outlet Werbung Schweizerdeutsch</p>
+        </div>
+      </div>
+    </main>
+    <footer>
+      <div>tel: +41 78 788 28 78</div>
+      <div>mail: [email protected]</div>
+    </footer>
+  </body>
+</html>
diff --git a/code/staging.html b/code/staging.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Simone Steiger</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap');
+    </style>
+  </head>
+  <body>
+    <header class="ancillary">
+      <h2>Simone Steiger</h2> 
+    </header>
+    <main class="content">
+      <button class="button">
+        <a href="./index.html">HOME</a>
+      </button>
+      <div class="text">
+        <h3>Home Staging</h3>
+        <p>Hast Du Lust Dein Zuhause umzugestalten, frischen Wind hineinzubringen
+          oder möchtest Du einfach nur Ballast abwerfen und entrümpeln?
+          Leider kommst Du alleine einfach nicht in die Gänge oder Dir fehlen
+          die kreativen Ideen oder das räumliche Vorstellungsvermögen?
+          Dann bist Du bei mir genau richtig. Ich begleite und unterstütze Dich gerne.
+          Auch richte ich Musterwohnung ein oder gestalte Deine Geschäftsräume.<br> 
+          Melde Dich bei mir und wir besprechen unverbindlich das weitere Vorgehen.</p>
+      </div>
+      <div class="gallery">
+        <img src="./images/stage3.jpg">
+        <img src="./images/stage2.jpeg">
+        <iframe width="480" height="270" src="https://www.youtube.com/embed/cIi89wHNmTE" 
+            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
+            clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+        </iframe>
+        <img src="./images/stage1.jpeg">
+        <img src="./images/stage4.jpeg">
+      </div>
+    </main>
+    <footer>
+      <div>tel: +41 78 788 28 78</div>
+      <div>mail: [email protected]</div>
+    </footer>
+  </body>
+</html>