diff --git a/code/Abos.html b/code/Abos.html new file mode 100644 index 00000000..ebef15cc --- /dev/null +++ b/code/Abos.html @@ -0,0 +1,21 @@ + + + + + + + Document + + + Home + + +
+

Abos

+

...

+
+ +
+
+ + \ No newline at end of file diff --git a/code/Code/Abos.html b/code/Code/Abos.html new file mode 100644 index 00000000..ebef15cc --- /dev/null +++ b/code/Code/Abos.html @@ -0,0 +1,21 @@ + + + + + + + Document + + + Home + + +
+

Abos

+

...

+
+ +
+
+ + \ No newline at end of file diff --git a/code/Code/Images/Angebot1.jpg b/code/Code/Images/Angebot1.jpg new file mode 100644 index 00000000..bf550036 Binary files /dev/null and b/code/Code/Images/Angebot1.jpg differ diff --git a/code/Code/Images/Angebot2.jpg b/code/Code/Images/Angebot2.jpg new file mode 100644 index 00000000..cdf96810 Binary files /dev/null and b/code/Code/Images/Angebot2.jpg differ diff --git a/code/Code/Images/Angebot3.jpg b/code/Code/Images/Angebot3.jpg new file mode 100644 index 00000000..e325d965 Binary files /dev/null and b/code/Code/Images/Angebot3.jpg differ diff --git a/code/Code/Images/Angebot4.jpg b/code/Code/Images/Angebot4.jpg new file mode 100644 index 00000000..7934dabf Binary files /dev/null and b/code/Code/Images/Angebot4.jpg differ diff --git a/code/Code/Images/Angebot5.jpg b/code/Code/Images/Angebot5.jpg new file mode 100644 index 00000000..015c5790 Binary files /dev/null and b/code/Code/Images/Angebot5.jpg differ diff --git a/code/Code/Images/DSC_3865.jpg b/code/Code/Images/DSC_3865.jpg new file mode 100644 index 00000000..1aee8f70 Binary files /dev/null and b/code/Code/Images/DSC_3865.jpg differ diff --git a/code/Code/Images/DSC_6066.jpg b/code/Code/Images/DSC_6066.jpg new file mode 100644 index 00000000..c9a50050 Binary files /dev/null and b/code/Code/Images/DSC_6066.jpg differ diff --git a/code/Code/Images/Hero0.jpg b/code/Code/Images/Hero0.jpg new file mode 100644 index 00000000..c49ca3b6 Binary files /dev/null and b/code/Code/Images/Hero0.jpg differ diff --git a/code/Code/Images/Hero1_v1.jpg b/code/Code/Images/Hero1_v1.jpg new file mode 100644 index 00000000..881c83e6 Binary files /dev/null and b/code/Code/Images/Hero1_v1.jpg differ diff --git a/code/Code/Images/Hero2.jpg b/code/Code/Images/Hero2.jpg new file mode 100644 index 00000000..23bfd027 Binary files /dev/null and b/code/Code/Images/Hero2.jpg differ diff --git a/code/Code/Images/MYK1 2.jpg b/code/Code/Images/MYK1 2.jpg new file mode 100644 index 00000000..03b1d44f Binary files /dev/null and b/code/Code/Images/MYK1 2.jpg differ diff --git a/code/Code/Images/Yogadia_Logo.jpg b/code/Code/Images/Yogadia_Logo.jpg new file mode 100644 index 00000000..d9565e44 Binary files /dev/null and b/code/Code/Images/Yogadia_Logo.jpg differ diff --git a/code/Code/Klassen.html b/code/Code/Klassen.html new file mode 100644 index 00000000..9aa45c01 --- /dev/null +++ b/code/Code/Klassen.html @@ -0,0 +1,28 @@ + + + + + + + Document + + + Home + + +
+

Yoga in Zug

+

Starte jetzt deinen Yogakurs

+
+ +
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, amet.

+ +

"Ist das Licht des Yoga einmal angezündet, erlischt es nie mehr. Je intensiver du übst, desto heller wird die Flamme leuchten" + (Zitat von B.K.S. Iyengar)

+
+ Mehr Informationen + + Yoga room + + \ No newline at end of file diff --git a/code/Code/Kontakt.html b/code/Code/Kontakt.html new file mode 100644 index 00000000..ebef15cc --- /dev/null +++ b/code/Code/Kontakt.html @@ -0,0 +1,21 @@ + + + + + + + Document + + + Home + + +
+

Abos

+

...

+
+ +
+
+ + \ No newline at end of file diff --git a/code/Code/index.html b/code/Code/index.html new file mode 100644 index 00000000..b90483d6 --- /dev/null +++ b/code/Code/index.html @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + +
+ KLASSEN + ABOS + ÜBER MICH + KONTAKT +
+ + + +
+
+ Hero +
+

STARTE JETZT DEINE YOGA JOURNEY

+

Lorem ipsum dolor sit amet, consectetur adipisici

+ +
+
+
+ + + + +
+

YOGA ANGEBOT

+
+ +
+
+

INDOOR VINYASA YOGA

+ +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam + nonumy +

+ +
+ +
+

OUTDOOR YOGA

+ +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam + nonumy +

+ +
+ +
+

YOGA FÜR FIRMEN

+ +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam + nonumy +

+ +
+
+ + +
+
+ + + + + diff --git a/code/Code/style.css b/code/Code/style.css new file mode 100644 index 00000000..d540ebb9 --- /dev/null +++ b/code/Code/style.css @@ -0,0 +1,151 @@ +/***ALLGEMEIN***/ +@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap"); + +body { + font-family: "Abel", sans-serif; + color: black; + margin: 0; +} + +/***NAVIGATION***/ + +.menu-parent { + border: 0px solid transparent; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; +} + +.menu-logo { + width: 250px; + height: 80px; +} + +.menu-child a { + display: inline-block; + padding: 10px 15px; + margin: 0 5px; + text-decoration: none; + background: white; + color: rgb(5, 5, 5); + border-radius: 4px; +} + +.menu-child a:hover { + background: rgb(115, 14, 83); + color: white; +} + +/***HERO***/ + +.hero-picture { + height: 450px; + position: relative; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.hero-text { + text-align: center; + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); + color: rgb(115, 14, 83); +} + +.h1 { + font-size: 30pt; +} + +.h2 { + font-size: 15pt; + color: black; +} + +.button1 { + background-color: rgb(115, 14, 83); + color: rgb(245, 236, 242); + border: none; + height: 40px; + width: 200px; + font-size: 15pt; + border-radius: 4px; +} + +.button1:hover { + background-color: white; + color: rgb(115, 14, 83); +} + +/***BENEFITS***/ + +/***ANGEBOT***/ + +.angebot-titel { + padding: 130px; + height: 30px; + text-align: center; + background-color: weiss; +} + +.angebot-titel h1 { + font-size: 35pt; + color: rgb(115, 14, 83); +} + +.section1 { + margin: 0, 10px; + display: flex; + height: 550px; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: rgba(255, 166, 0, 0.218); +} + +.spalte { + margin: 60px 30px; + padding: 10px 30px; + width: 400px; + height: 500px; + background-color: weiss; + text-align: center; +} + +.spalte h2 { + font-size: 15pt; + color: black; +} + +.button2 { + background-color: rgb(115, 14, 83); + border: none; + color: rgb(245, 236, 242); + height: 40px; + width: 200px; + font-size: 15pt; + border-radius: 4px; +} + +.button2:hover { + background-color: white; + color: rgb(115, 14, 83); +} + +/***ÜBER MICH***/ + +/***FOOTER***/ +.footer { + background-color: rgb(5, 5, 5); + text-align: center; + margin: 100px solid; + padding: 50px; +} + +.footer-text { + color: white; + text-decoration: none; +} diff --git "a/code/Code/\303\234ber_mich.html" "b/code/Code/\303\234ber_mich.html" new file mode 100644 index 00000000..b569d70d --- /dev/null +++ "b/code/Code/\303\234ber_mich.html" @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + diff --git a/code/Klassen.html b/code/Klassen.html new file mode 100644 index 00000000..9aa45c01 --- /dev/null +++ b/code/Klassen.html @@ -0,0 +1,28 @@ + + + + + + + Document + + + Home + + +
+

Yoga in Zug

+

Starte jetzt deinen Yogakurs

+
+ +
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, amet.

+ +

"Ist das Licht des Yoga einmal angezündet, erlischt es nie mehr. Je intensiver du übst, desto heller wird die Flamme leuchten" + (Zitat von B.K.S. Iyengar)

+
+ Mehr Informationen + + Yoga room + + \ No newline at end of file diff --git a/code/Kontakt.html b/code/Kontakt.html new file mode 100644 index 00000000..c389f79b --- /dev/null +++ b/code/Kontakt.html @@ -0,0 +1,85 @@ + + + + + + + Document + + + + + + + + + + + +
+ KLASSEN + ABOS + ÜBER MICH + YOGA +
+ + + +
+
+

KONTAKT

+
+
+ +
+ +
+ +
+ +
+ + + + + + + + + + +
+ +
+
+ + +
+ FotoKlaudia +
+
+ + diff --git "a/code/U\314\210ber_mich.html" "b/code/U\314\210ber_mich.html" new file mode 100644 index 00000000..b569d70d --- /dev/null +++ "b/code/U\314\210ber_mich.html" @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + diff --git a/code/index.html b/code/index.html index b990bed9..9fb6b6d1 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,90 @@ - - + - + + - Project Name - - + + + - + + + +
+ KLASSEN + ABOS + ÜBER MICH + KONTAKT +
+ + + +
+
+ Yogabild +
+

STARTE DEINE YOGA JOURNEY

+

Lorem ipsum dolor sit amet, consectetur adipisici

+ +
+
+
+ + +
+

YOGA ANGEBOT

+
+ +
+
+

INDOOR VINYASA YOGA

+ +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam + nonumy +

+ +
+ +
+

OUTDOOR YOGA

+ + +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam + nonumy +

+ +
- Banana Bread +
+

YOGA FÜR FIRMEN

+ +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam + nonumy +

+ +
+
- --> -

Hello there! 👋🏼

+ + - \ No newline at end of file + diff --git a/code/style.css b/code/style.css index 313a9df6..95a8fc23 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,194 @@ -/* Here in the css file you'll write your styling. make sure to link the css file to the html file. If it's linked correctly you should see a light blue background. */ +/***ALLGEMEIN***/ +@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap"); body { - background-color: lightblue; + font-family: "Abel", sans-serif; + color: black; + margin: 0; +} + +/***NAVIGATION***/ + +.menu-parent { + border: 0px solid transparent; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + flex-wrap: nowrap; +} + +.menu-logo { + width: 250px; + height: 80px; +} + +.menu-child a { + display: inline-block; + padding: 10px 15px; + margin: 0 5px; + text-decoration: none; + background: white; + color: rgb(5, 5, 5); + border-radius: 4px; +} + +.menu-child a:hover { + background: rgb(115, 14, 83); + color: white; +} + +/*** responsive menu***/ + +/***HERO***/ + +.header-picture { + display: block; + background-image: url("Images/Hero1_v1.jpg"); + background-color: white; + object-fit: cover; + width: 100%; + height: 100vh; +} + +.hero-text { + text-align: center; + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); + color: rgb(115, 14, 83); +} + +.h1 { + font-size: 30pt; +} + +.h2 { + font-size: 15pt; + color: black; +} + +.button1 { + background-color: rgb(115, 14, 83); + color: rgb(245, 236, 242); + border: none; + height: 40px; + width: 200px; + font-size: 15pt; + border-radius: 4px; +} + +.button1:hover { + background-color: rgba(115, 14, 83, 0.434); + color: rgb(115, 14, 83); +} + +@media (max-width: 667px) { + .hero-picture { + display: block; + background-image: url("Images/Hero1_Mobile.jpg"); + background-color: white; + object-fit: cover; + margin: 10 0px; + } + + .hero-text h1 { + font-size: 20pt; + /*** white-space: nowrap;***/ + padding-bottom: 30px; + } + + .h2 { + display: none; + } + + .button1 { + width: 150px; + } +} + +/***ANGEBOT***/ + +.angebot-titel { + padding: 20px; + text-align: center; + background-color: weiss; +} + +@media (max-width: 667px) { + .angebot-titel { + margin: 1 0px; + padding: 0.5px; + background-color: white; + } +} + +.angebot-titel h1 { + font-size: 25pt; + color: rgb(115, 14, 83); +} + +.section1 { + margin: 20px 0; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: rgba(255, 166, 0, 0.218); + flex-shrink: shrink; +} + +.spalte { + margin: 60px 30px; + padding: 10px 30px; + width: 33.3%; + background-color: weiss; + text-align: center; +} + +.spalte h2 { + font-size: 15pt; + color: black; + height: 80px; +} + +.button2 { + background-color: rgb(115, 14, 83); + border: none; + color: rgb(245, 236, 242); + height: 40px; + width: 200px; + font-size: 15pt; + border-radius: 4px; +} + +.button2:hover { + background-color: rgba(115, 14, 83, 0.434); + color: rgb(115, 14, 83); +} + +@media (max-width: 667px) { + .section1 { + flex-direction: column; + flex-shrink: shrink; + } + + .spalte { + margin: 30px 15px; + width: 100%; + padding: 0; + } +} + +/***FOOTER***/ +.footer { + background-color: white; + text-align: center; + padding: 50px; +} + +.footer-text { + color: black; + text-decoration: none; } diff --git a/code/styleKontakt.css b/code/styleKontakt.css new file mode 100644 index 00000000..4676c8c2 --- /dev/null +++ b/code/styleKontakt.css @@ -0,0 +1,136 @@ +/***ALLGEMEIN***/ +@import url("https://fonts.googleapis.com/css2?family=Abel&display=swap"); + +body { + font-family: "Abel", sans-serif; + color: black; + margin: 0; +} + +/***NAVIGATION***/ + +.menu-parent { + border: 0px solid transparent; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + flex-wrap: nowrap; +} + +.menu-logo { + width: 250px; + height: 80px; +} + +.menu-child a { + display: inline-block; + padding: 10px 15px; + margin: 0 5px; + text-decoration: none; + background: white; + color: rgb(5, 5, 5); + border-radius: 4px; +} + +.menu-child a:hover { + background: rgb(115, 14, 83); + color: white; +} + +/*** responsive menu***/ + +/***HERO***/ + +.header-background { + display: block; + background-color: rgba(255, 166, 0, 0.218); + width: 100%; + margin: 20px auto; +} + +.h1 { + font-size: 30pt; + text-align: center; + padding-top: 30px; + padding-bottom: 30px; +} + +/***FORMULAR***/ + +* { + box-sizing: border-box; +} + +.flex-parent { + border: none; + height: 600px; + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: row; + flex-wrap: nowrap; +} + +.spalte1 { + margin: 10px; + width: auto; + height: 500px; +} + +.Spalte2 { + margin: 10px 0; + width: auto; + height: 690px; +} + +.form { + background-color: rgba(255, 166, 0, 0.218); + padding: 20px; + + margin: 0 auto; +} + +.fieldset { + border: none; + padding: 0px; +} + +label { + display: flex; + border-bottom: 1px solid rgba(0, 0, 0, 0.158); + align-items: center; + border-bottom: none; + margin: 5px auto; +} + +span { + width: 20%; + text-align: right; + margin-right: 20px; + flex-shrink: 0; +} + +input { + width: 100%; + padding: 15px; + outline: none; + appearance: none; + border: none; +} + +.button { + background-color: rgb(115, 14, 83); + border: none; + color: rgb(245, 236, 242); + height: 40px; + width: 340px; + font-size: 15pt; + border-radius: 4px; + margin: auto 10px auto 110px; +} + +.button:hover { + background-color: rgba(115, 14, 83, 0.434); + color: rgb(115, 14, 83); +}