diff --git a/README.md b/README.md index 60f55e53..83e7ef62 100644 --- 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 new file mode 100644 index 00000000..a7347bd4 Binary files /dev/null and b/code/audio/Gedicht.mp3 differ diff --git a/code/audio/Radiowerbung.mp3 b/code/audio/Radiowerbung.mp3 new file mode 100644 index 00000000..f5759415 Binary files /dev/null and b/code/audio/Radiowerbung.mp3 differ diff --git a/code/audio/Werbung Ecomat.mp3 b/code/audio/Werbung Ecomat.mp3 new file mode 100644 index 00000000..2ddff90d Binary files /dev/null and b/code/audio/Werbung Ecomat.mp3 differ diff --git a/code/audio/Werbung Merz.mp3 b/code/audio/Werbung Merz.mp3 new file mode 100644 index 00000000..b0e38179 Binary files /dev/null and b/code/audio/Werbung Merz.mp3 differ diff --git a/code/audio/Werbung Outletfactory.mp3 b/code/audio/Werbung Outletfactory.mp3 new file mode 100644 index 00000000..cf74cb90 Binary files /dev/null and b/code/audio/Werbung Outletfactory.mp3 differ diff --git a/code/images/main.jpg b/code/images/main.jpg new file mode 100644 index 00000000..0e3205e4 Binary files /dev/null and b/code/images/main.jpg differ diff --git a/code/images/model1.jpg b/code/images/model1.jpg new file mode 100644 index 00000000..0396a2b1 Binary files /dev/null and b/code/images/model1.jpg differ diff --git a/code/images/model2.jpg b/code/images/model2.jpg new file mode 100644 index 00000000..c012a06b Binary files /dev/null and b/code/images/model2.jpg differ diff --git a/code/images/model3.jpg b/code/images/model3.jpg new file mode 100644 index 00000000..fdfdd998 Binary files /dev/null and b/code/images/model3.jpg differ diff --git a/code/images/model4.jpg b/code/images/model4.jpg new file mode 100644 index 00000000..74ac40c8 Binary files /dev/null and b/code/images/model4.jpg differ diff --git a/code/images/model5.jpg b/code/images/model5.jpg new file mode 100644 index 00000000..8e0cd031 Binary files /dev/null and b/code/images/model5.jpg differ diff --git a/code/images/model6.jpg b/code/images/model6.jpg new file mode 100644 index 00000000..159bfe60 Binary files /dev/null and b/code/images/model6.jpg differ diff --git a/code/images/modrt1.jpg b/code/images/modrt1.jpg new file mode 100644 index 00000000..dfb86678 Binary files /dev/null and b/code/images/modrt1.jpg differ diff --git a/code/images/modrt2.jpg b/code/images/modrt2.jpg new file mode 100644 index 00000000..ac21109d Binary files /dev/null and b/code/images/modrt2.jpg differ diff --git a/code/images/modrt3.jpg b/code/images/modrt3.jpg new file mode 100644 index 00000000..4b780927 Binary files /dev/null and b/code/images/modrt3.jpg differ diff --git a/code/images/modrt4.jpg b/code/images/modrt4.jpg new file mode 100644 index 00000000..b59748a0 Binary files /dev/null and b/code/images/modrt4.jpg differ diff --git a/code/images/modrt5.jpg b/code/images/modrt5.jpg new file mode 100644 index 00000000..17d4a3a6 Binary files /dev/null and b/code/images/modrt5.jpg differ diff --git a/code/images/modrt6.jpg b/code/images/modrt6.jpg new file mode 100644 index 00000000..d88bf63e Binary files /dev/null and b/code/images/modrt6.jpg differ diff --git a/code/images/stage1.jpeg b/code/images/stage1.jpeg new file mode 100644 index 00000000..012120e2 Binary files /dev/null and b/code/images/stage1.jpeg differ diff --git a/code/images/stage2.jpeg b/code/images/stage2.jpeg new file mode 100644 index 00000000..0cb30a23 Binary files /dev/null and b/code/images/stage2.jpeg differ diff --git a/code/images/stage3.jpg b/code/images/stage3.jpg new file mode 100644 index 00000000..eef104ec Binary files /dev/null and b/code/images/stage3.jpg differ diff --git a/code/images/stage4.jpeg b/code/images/stage4.jpeg new file mode 100644 index 00000000..2ed3ec48 Binary files /dev/null and b/code/images/stage4.jpeg differ diff --git a/code/images/sugaring1.jpeg b/code/images/sugaring1.jpeg new file mode 100644 index 00000000..c8d24d83 Binary files /dev/null and b/code/images/sugaring1.jpeg differ diff --git a/code/images/sugaring2.jpeg b/code/images/sugaring2.jpeg new file mode 100644 index 00000000..3c7bbefa Binary files /dev/null and b/code/images/sugaring2.jpeg differ diff --git a/code/images/sugaring3.jpeg b/code/images/sugaring3.jpeg new file mode 100644 index 00000000..dc3d2665 Binary files /dev/null and b/code/images/sugaring3.jpeg differ diff --git a/code/images/sugaring4.jpeg b/code/images/sugaring4.jpeg new file mode 100644 index 00000000..f4d30581 Binary files /dev/null and b/code/images/sugaring4.jpeg differ diff --git a/code/images/sugaring5.jpeg b/code/images/sugaring5.jpeg new file mode 100644 index 00000000..c0a793da Binary files /dev/null and b/code/images/sugaring5.jpeg differ diff --git a/code/images/sugaring6.jpeg b/code/images/sugaring6.jpeg new file mode 100644 index 00000000..e1364486 Binary files /dev/null and b/code/images/sugaring6.jpeg differ diff --git a/code/images/theater1.jpg b/code/images/theater1.jpg new file mode 100644 index 00000000..d8a3d7f7 Binary files /dev/null and b/code/images/theater1.jpg differ diff --git a/code/images/theater2.jpg b/code/images/theater2.jpg new file mode 100644 index 00000000..d597f8f9 Binary files /dev/null and b/code/images/theater2.jpg differ diff --git a/code/images/theater3.jpg b/code/images/theater3.jpg new file mode 100644 index 00000000..d7e07e9e Binary files /dev/null and b/code/images/theater3.jpg differ diff --git a/code/images/theater4.jpg b/code/images/theater4.jpg new file mode 100644 index 00000000..5e59ca9c Binary files /dev/null and b/code/images/theater4.jpg differ diff --git a/code/images/theater5.jpg b/code/images/theater5.jpg new file mode 100644 index 00000000..c1dc11d7 Binary files /dev/null and b/code/images/theater5.jpg differ diff --git a/code/images/theater6.jpg b/code/images/theater6.jpg new file mode 100644 index 00000000..558787fc Binary files /dev/null and b/code/images/theater6.jpg differ diff --git a/code/index.html b/code/index.html index 805a75d1..96457900 100644 --- a/code/index.html +++ b/code/index.html @@ -2,17 +2,46 @@ - Project Name - - + + Simone Steiger + + -
- +
+

SIMONE STEIGER

+ + 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.
- -
- +
+
+
+ Home Staging +
+
+ Werbemodel +
+
+ Sprecherin +
+
+ Moderatorin +
+
+ Sugaring +
+
+ Schauspielerin +
+
+
+
tel: +41 78 788 28 78
+
mail: simone.steiger@gmx.ch
+
- + \ No newline at end of file diff --git a/code/model.html b/code/model.html new file mode 100644 index 00000000..38ed20cb --- /dev/null +++ b/code/model.html @@ -0,0 +1,41 @@ + + + + + + Simone Steiger + + + + +
+

Simone Steiger

+
+
+ +
+

Werbemodel

+

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:-)

+
+
+ + + + + + +
+
+
+
tel: +41 78 788 28 78
+
mail: simone.steiger@gmx.ch
+
+ + \ No newline at end of file diff --git a/code/moderation.html b/code/moderation.html new file mode 100644 index 00000000..bdb4592f --- /dev/null +++ b/code/moderation.html @@ -0,0 +1,41 @@ + + + + + + Simone Steiger + + + + +
+

Simone Steiger

+
+
+ +
+

Moderatorin

+

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.

+
+
+ + + + + + +
+
+
+
tel: +41 78 788 28 78
+
mail: simone.steiger@gmx.ch
+
+ + \ No newline at end of file diff --git a/code/sprecher.html b/code/sprecher.html new file mode 100644 index 00000000..a3909f76 --- /dev/null +++ b/code/sprecher.html @@ -0,0 +1,65 @@ + + + + + + Simone Steiger + + + + +
+

Simone Steiger

+
+
+ +
+

Sprecherin

+

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.

+
+
+
+ +

Gedicht

+
+
+ +

Radiowerbung Hochdeutsch

+
+
+ +

Ecomat Werbung Hochdeutsch

+
+
+ +

Merz Werbung Hochdeutsch

+
+
+ +

Outlet Werbung Schweizerdeutsch

+
+
+
+
+
tel: +41 78 788 28 78
+
mail: simone.steiger@gmx.ch
+
+ + \ No newline at end of file diff --git a/code/staging.html b/code/staging.html new file mode 100644 index 00000000..a9855516 --- /dev/null +++ b/code/staging.html @@ -0,0 +1,46 @@ + + + + + + Simone Steiger + + + + +
+

Simone Steiger

+
+
+ +
+

Home Staging

+

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.
+ Melde Dich bei mir und wir besprechen unverbindlich das weitere Vorgehen.

+
+
+ + + + + +
+
+
+
tel: +41 78 788 28 78
+
mail: simone.steiger@gmx.ch
+
+ + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 6992f5d0..8388dd67 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,163 @@ -/* If you can see a peach background, the css file is correctly linked. Feel free to change or remove this styling! */ +* { + box-sizing: border-box; +} body { - background-color: peachpuff; + margin: 0; + font-family: Cambria, Georgia, Times, serif; + font-size: 15px; +} + +.main { + display: flex; + height: 300px; + background-color: rgb(200, 240, 250); +} +h1 { + font-size: 28px; + color: rgb(5, 60, 115); + transform-origin: top left; + left: 0; + top: 0; + transform: rotate(-90deg) translate(-100%); + position: absolute; + left: 5%; +} +header img { + width: 45%; + object-fit: cover; + object-position: 70% 100%; + margin-left: 15%; +} +span { + width: 150px; + padding: 30px 0; + color: rgb(115, 5, 115); + font-size: 16px; + text-align: center; + position: absolute; + right: 8%; +} + +.ancillary { + background-color: rgb(200, 240, 250); + padding: 25px; + text-align: center; +} +h2 { + display: none; +} + +.content { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.talent { + display: flex; + justify-content: center; + align-items: center; + font-family: Kalam, cursive; + font-size: 20px; + border: double; + box-shadow: 10px 10px 20px rgb(230, 90, 230, 0.8) inset, 18px 18px 20px 10px rgb(100, 200, 225) inset; +} + +button { + background-color: rgb(100, 200, 225); + opacity: 0.7; + border: none; + margin: 20px 0px; + padding: 8px 15px; + border-radius: 15px; +} +button:hover { + opacity: 1; +} +a:link, a:visited { + color: black; + text-decoration: none; +} + +.text { + max-width: 75%; + padding: 20px; + text-align: center; + box-shadow: 2px 2px 10px rgb(230, 90, 230), 7px 7px 15px rgb(100, 200, 225); +} +h3 { + font-family: Kalam, cursive; + font-size: 20px; +} + +.gallery { + display: flex; + flex-direction: column; + align-items: center; + margin: 40px 0px; +} +.gallery img { + height: 250px; + object-fit: cover; +} +.audio { + border: solid; + border-width: 0.5px; + padding: 50px 10px; + text-align: center; +} + +footer { + display: flex; + justify-content: space-around; + background-color: rgb(200, 240, 250); + padding: 20px; +} + +@media (min-width: 668px) and (max-width: 1024px) { + + header img { + object-position: 100% 0; + } + + .text { + width: 50%; + } + + .gallery { + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + } + .gallery img { + max-width: 45%; + } } + +@media (min-width: 1025px) { + + header img { + object-position: 100% 0; + } + + h2 { + display: inline; + font-size: 22px; + color: rgb(5, 60, 115); + } + + .text { + width: 45%; + } + + .gallery { + flex-direction: row; + justify-content: center; + } + .gallery img { + max-width: 20%; + } +} \ No newline at end of file diff --git a/code/sugaring.html b/code/sugaring.html new file mode 100644 index 00000000..e6c1333e --- /dev/null +++ b/code/sugaring.html @@ -0,0 +1,40 @@ + + + + + + Simone Steiger + + + + +
+

Simone Steiger

+
+
+ +
+

Sugaring

+

Sie sind auf der Suche nach einer hautschonenden und sanften Methode für eine Haarentfernung? + Sugaring ist eine uralte Tradition, die schon von den alten Ägypterinnen angewendet wurde und + tausende von Jahren überlebt hat. Dabei werden die Haare mithilfe einer Zuckerpaste aus der Haut gezogen.

+
+
+ + + + + + +
+
+
+
tel: +41 78 788 28 78
+
mail: simone.steiger@gmx.ch
+
+ + \ No newline at end of file diff --git a/code/theater.html b/code/theater.html new file mode 100644 index 00000000..86c63e4b --- /dev/null +++ b/code/theater.html @@ -0,0 +1,42 @@ + + + + + + Simone Steiger + + + + +
+

Simone Steiger

+
+
+ +
+

Schauspielerin

+

Seit über 10 Jahren gehört das Theaterspielen zu meinem Leben und ich + liebe es von ganzem Herzen. In verschiedene Rollen zu schlüpfen und + sich mit diesen auseinander zu setzen macht mir nicht nur grossen Spass, + sondern bringt mich auch im Leben immer wieder weiter. + Ich bin immer offen für neue Produktionen und freue mich sehr auf Deine Anfrage.

+
+
+ + + + + + +
+
+ + + \ No newline at end of file