diff --git a/README.md b/README.md index 60f55e53..71e54d4b 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ -# Project Name +# Wedding page Lea und Marc -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. +Wedding website including sign up for wedding. ## 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? +html and css only +next step would be adding some js. ## View it live -Have you deployed your project somewhere? Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +currently on https://leaundmarc.netlify.app/ +with domain: https://leaundmarc.ch diff --git a/code/example-recipe-background.png b/code/example-recipe-background.png deleted file mode 100644 index 36451c0f..00000000 Binary files a/code/example-recipe-background.png and /dev/null differ diff --git a/code/index.html b/code/index.html deleted file mode 100644 index b990bed9..00000000 --- a/code/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - Project Name - - - - - -

Hello there! 👋🏼

- - \ No newline at end of file diff --git a/code/style.css b/code/style.css deleted file mode 100644 index 313a9df6..00000000 --- a/code/style.css +++ /dev/null @@ -1,5 +0,0 @@ -/* 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. */ - -body { - background-color: lightblue; -} diff --git a/home.html b/home.html new file mode 100644 index 00000000..53571f15 --- /dev/null +++ b/home.html @@ -0,0 +1,592 @@ + + + + + + Lea und Marc + + + + + +
+

Lea & Marc 4. Mai 2024

+ +
+

Lea und Marc

+
+

Lea

+

«Was ChatGPT über mich schreibt»

+

+ Heute ist der grosse Tag für unsere bezaubernde Braut mit dem Jahrgang + 1994! Sie ist Lehrerin, eine echte Meisterin im Skifahren, in + Gesellschaftsspielen, beim Puzzeln und in vielen anderen Abenteuern + des Lebens. Unsere Braut ist unternehmungslustig und meistert auf der + Skipiste die schwarzen Abfahrten genauso gut wie schwierige + Schülerfragen in der Schule. Und bei Gesellschaftsspielen hat sie ein + Talent dafür, die Siegesserie ihrer Gegner regelmässig zu + unterbrechen. Sie liebt es, knifflige Rätsel zu lösen und beweist, + dass Geduld und Ausdauer immer gewinnen. Als Bücherwurm verbringt sie + Stunden in fantastischen Welten und begibt sich ständig in neue + Abenteuer. Dank ihrer musikalischen Seele entdeckt sie andauernd neue + Melodien, die sie durch den Tag begleiten. Unvergesslich sind auch die + Kaffeetreffen mit Freunden, bei denen sie Geschichten austauscht, + lacht und die Welt mit ihrer herzlichen Persönlichkeit erhellt. Lasst + uns gemeinsam anstossen und diese einzigartige Braut feiern, die + sowohl die Herzen ihrer Mitmenschen berührt, als auch das Leben mit + ihrer Energie und Liebe bereichert. Möge eure Ehe genauso + abenteuerlich, bunt und harmonisch sein wie das Leben unserer + wundervollen Braut. Auf die Braut! 🏂🎲📚🎶☕💍😄 +

+

Marc

+

«Was ChatGPT über mich schreibt»

+

+ Bald ist der grosse Tag, an dem unser 30-jähriger Wirbelwind unter die + Haube kommt! Dieser sportliche Draufgänger könnte den Olymp besteigen, + aber er hat sich entschieden, das Herz unserer bezaubernden Braut zu + erobern, und das ist ein noch grösseres Abenteuer! Mit einem + Volleyball in der einen und einem Snowboard in der anderen Hand, + stürzte er sich in dieses Ehe-Abenteuer. Und wenn es um Spass geht, + ist er der unangefochtene Meister des Humors. Kein Witz ist vor ihm + sicher, und sein Lachen ist unglaublich ansteckend. Wir können uns + alle auf eine Hochzeit freuen, die von Lachen, Liebe und sicherlich + auch ein wenig Bier begleitet wird. Also hebt eure Gläser und lasst + uns diesen unvergesslichen Tag feiern. Denn unser Bräutigam hat + bewiesen, dass er nicht nur auf dem Volleyballfeld und auf der Piste + eine Legende ist, sondern auch im Herzen seiner wunderbaren Braut. + Prost auf die Liebe und das Abenteuer, das vor uns liegt! Möge deine + Ehe genauso aufregend sein wie deine sportlichen Abenteuer und genauso + lustig wie deine besten Witze! 🏐🏂🍻😄 +

+
+
+ +
+
+
+

Tagesablauf

+
+
+
+ +
+
+
+

Anmeldung

+

+ Bitte meldet euch bis am 29. Februar 2024 mit folgendem + Formular, damit wir den Apéro und das Fest planen können. +

+
+ +
+

Anmeldeangaben

+
    +
  • +
    + + + + +
    + + +
    +
    +
    • + +
  • +
    + +
    + +
    + + + +
    +
    • +
+

Zusätzliche Angaben Fest

+

+ Gerne empfangen wir die geladenen Gäste in festlicher Kleidung. Um + den Abend mit euch in vollen Zügen geniessen zu können, bitten wir + euch, eure Kinder nach dem Apéro betreuen zu lassen. +

+
    +
  • +
    + + + +
    +
    • +
  • +
    + + +
    +
    • +
+
+ +
+
+
+
+
+

Unsere Trauzeugen

+ +

+ —> Hast du Fragen oder möchtest unseren speziellen Tag mitgestalten? + Dann melde dich bei unseren Trauzeugen. +

+
+
+

Wunschliste für unsere Hochzeit

+

+ Bist du kreativ? Dann lassen wir uns gerne überraschen.
+ Ansonsten weisst du vielleicht, dass wir unsere Hochzeitsreise im Norden + verbringen wollen. Hierfür freuen wir uns über einen Zustupf:
+ IBAN: CH87 0690 0056 3962 1010 0.
+ Hirschenstrasse 14c, 9200 Gossau +

+ +
+ + + + diff --git a/images/2H6A6411.jpg b/images/2H6A6411.jpg new file mode 100644 index 00000000..4ad8c11b Binary files /dev/null and b/images/2H6A6411.jpg differ diff --git a/images/Abendessen.jpg b/images/Abendessen.jpg new file mode 100644 index 00000000..3428e1b4 Binary files /dev/null and b/images/Abendessen.jpg differ diff --git a/images/Ardillo.jpg b/images/Ardillo.jpg new file mode 100644 index 00000000..03630522 Binary files /dev/null and b/images/Ardillo.jpg differ diff --git a/images/Bier.jpg b/images/Bier.jpg new file mode 100644 index 00000000..21a38ded Binary files /dev/null and b/images/Bier.jpg differ diff --git a/images/Fahrzeug.jpg b/images/Fahrzeug.jpg new file mode 100644 index 00000000..39d5aa37 Binary files /dev/null and b/images/Fahrzeug.jpg differ diff --git a/images/Front 1.jpg b/images/Front 1.jpg new file mode 100644 index 00000000..e57abbe1 Binary files /dev/null and b/images/Front 1.jpg differ diff --git a/images/Reise.jpg b/images/Reise.jpg new file mode 100644 index 00000000..d0626f35 Binary files /dev/null and b/images/Reise.jpg differ diff --git a/images/Simea.jpg b/images/Simea.jpg new file mode 100644 index 00000000..f292a5d5 Binary files /dev/null and b/images/Simea.jpg differ diff --git a/images/Snacks.jpg b/images/Snacks.jpg new file mode 100644 index 00000000..94b239c9 Binary files /dev/null and b/images/Snacks.jpg differ diff --git a/images/SuccessBild.jpg b/images/SuccessBild.jpg new file mode 100644 index 00000000..6e70051a Binary files /dev/null and b/images/SuccessBild.jpg differ diff --git a/images/Tank.JPG b/images/Tank.JPG new file mode 100644 index 00000000..51f78ae6 Binary files /dev/null and b/images/Tank.JPG differ diff --git a/images/Uebernachtung.jpg b/images/Uebernachtung.jpg new file mode 100644 index 00000000..4af999a2 Binary files /dev/null and b/images/Uebernachtung.jpg differ diff --git "a/images/grAktivita\314\210t.jpg" "b/images/grAktivita\314\210t.jpg" new file mode 100644 index 00000000..f0efe55e Binary files /dev/null and "b/images/grAktivita\314\210t.jpg" differ diff --git "a/images/klAktivita\314\210t.jpg" "b/images/klAktivita\314\210t.jpg" new file mode 100644 index 00000000..95da70ec Binary files /dev/null and "b/images/klAktivita\314\210t.jpg" differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..d2fcd67d --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + + Lea und Marc + + + + + +
+ + + + +
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..1d700b80 --- /dev/null +++ b/style.css @@ -0,0 +1,662 @@ +@import url("https://fonts.googleapis.com/css2?family=Cookie&family=Domine&family=Open+Sans:wght@400;700&display=swap"); + +body { + margin: 0 auto; + max-width: 1440px; + background-color: rgb(250, 249, 246); +} +/* evt. Header einfügen mit background-size: cover, und height 2527 beim Bild Save the date */ + +/*rot rgb (138 156 86) +ocker rgb (138 156 86) +headings rgb(161, 13, 40, 0.9) +topheading: rgb(124, 6, 51) +top-heading grün: rgb(74 70 42) +rest: rgb (138 156 86)*/ + +.enter-password { + /*border: 2px solid rgb(138 156 86);*/ + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; + padding: 20px; + box-sizing: border-box; + max-width: 500px; + margin: auto; + margin-top: 50px; +} +.PW-text { + text-align: center; +} + +h1 { + color: rgb(138 156 86); + font-size: 36px; +} + +header { + background-image: url("./images/Front\ 1.jpg"); + height: 500px; + background-size: cover; +} +.top-heading { + color: rgb(63 71 39); + font-size: 60px; + font-weight: bolder; + margin: 0; + text-align: center; + padding-top: 50px; + font-family: "Cookie", cursive; +} +.section-image { + background-image: url("./images/2H6A6411.jpg"); + height: 545px; + background-size: cover; + background-repeat: no-repeat; + margin-bottom: 20px; +} +.top-image { + max-width: 5400px; + background-position: top; + width: 100%; + max-height: 400px; + overflow: hidden; + /* es braucht nur width 100% damit das Bild wieder sauber dargestellt wird */ +} +nav { + display: flex; + align-items: center; + justify-content: center; + font-family: "Open Sans", sans-serif; +} + +nav a { + display: inline-block; + padding: 10px 15px; + background: rgb(138 156 86); + color: rgb(250, 249, 246); + font-weight: semi-bold; + text-decoration: none; + border-radius: 10px; + margin: 0 5px; +} + +nav a:hover { + background: rgb(138 156 86); + color: rgb(63 71 39); +} +h2 { + text-align: center; + background-color: rgb(138 156 86); + padding: 20px; + margin: 0; + font-family: "Domine", serif; + color: rgb(250, 249, 246); +} +h3 { + text-align: center; + color: rgb(138 156 86); + padding: 15px; + margin: 0px; + font-family: "Domine", serif; +} +h4 { + text-align: center; + padding: 10px; + margin: 0px; + font-family: "Domine", serif; + color: rgb(63 71 39); +} +p { + text-align: center; + max-width: 70ch; + margin: auto; + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 20px; + font-family: "Open Sans", sans-serif; + color: rgb(63 71 39); +} +.container { + max-width: 1200px; + margin-left: auto; + margin-right: auto; +} +.row { + display: flex; + margin-bottom: 50px; + gap: 50px; +} + +.center { + justify-content: center; + gap: 40px; +} + +/*.column { + flex: 1 1 0%; + display: flex; + flex-direction: column; + align-items: center; +}*/ +.Formular { + display: flex; + justify-content: center; +} +form { + margin-bottom: 20px; +} + +.column-anmeldung { + flex: 1 1 0%; + display: flex; + flex-direction: column; +} +.anmeldung-for { + margin: 5px; +} +.row-anmeldung { + display: flex; + gap: 50px; + padding-left: 0px; + margin-top: 0px; +} + +div { + color: rgb(63 71 39); +} +fieldset { + border: 0px; + padding: 0px; +} +.food { + display: flex; +} +input[type="text"] { + width: 100%; + box-sizing: border-box; + border: 1px solid grey; + border-radius: 4px; + padding: 5px; + outline: none; + margin-top: 5px; + box-shadow: rgb(138 156 86 / 57%) 3px 3px; + color: rgb(63 71 39); +} +input[type="password"] { + width: 100%; + box-sizing: border-box; + border: 1px solid grey; + border-radius: 4px; + padding: 5px; + outline: none; + margin-top: 20px; + box-shadow: rgb(138 156 86 / 57%) 3px 3px; + color: rgb(63 71 39); +} + +input[type="email"] { + width: 100%; + box-sizing: border-box; + border: 1px solid; + border-color: grey; + border-radius: 4px; + padding: 5px; + outline: none; + margin-top: 5px; + box-shadow: rgb(138 156 86 / 57%) 3px 3px; +} + +textarea { + resize: none; + width: 100%; + padding: 5px; + border-radius: 3px; + box-sizing: border-box; + outline: none; + margin-top: 5px; + box-shadow: rgb(138 156 86 / 57%) 3px 3px; + font-family: "Open Sans", sans-serif; +} +select { + width: 100%; + padding: 1px; + margin-top: 5px; + border-radius: 4px; + outline: none; + box-shadow: rgb(138 156 86 / 57%) 3px 3px; + font-family: "Open Sans", sans-serif; + font-size: 15px; + color: rgb(63 71 39); +} +select:focus { + color: rgb(63 71 39); +} + +input[type="text"]:focus { + border: 1px solid rgb(138 156 86); +} +input[type="email"]:focus { + border: 1px solid rgb(138 156 86); +} +textarea:focus { + border: 1px solid rgb(138 156 86); +} + +input[type="radio"] { + appearance: none; + display: inline-block; + border-radius: 50%; + width: 16px; + height: 16px; + border: 1px solid darkgrey; + outline: none; + box-shadow: rgb(138 156 86 / 57%) 1px 1px; + margin-right: 10px; +} + +[type="radio"]:checked { + background: rgb(138 156 86); + border: 4px solid whitesmoke; + box-shadow: rgb(138 156 86 / 57%) 1px 1px; + outline: 1px solid darkgray; +} +input[type="radio"]:focus { + background: rgb(138 156 86); + border: 4px solid whitesmoke; + box-shadow: rgb(138 156 86 / 57%) 1px 1px; + outline: 1px solid darkgray; +} + +input[type="checkbox"] { + appearance: none; + display: inline-block; + vertical-align: middle; + border: 1px solid darkgray; + width: 16px; + height: 16px; + outline: none; + box-shadow: rgb(138 156 86 / 57%) 1px 1px; + margin-right: 10px; +} + +[type="checkbox"]:checked { + background: rgb(138 156 86); + border: 4px solid whitesmoke; + box-shadow: rgb(138 156 86 / 57%) 1px 1px; + outline: 1px solid darkgray; +} +.place { + display: flex; +} +.ort { + box-sizing: none; +} + +.Absenden { + display: flex; + justify-content: center; +} +.button-submit { + padding: 8px 16px; + border: none; + border-radius: 10px; + background-color: rgb(138 156 86); + color: rgb(250, 249, 246); + cursor: pointer; + font-family: "Open Sans", sans-serif; + font-size: 16px; +} +.button-submit:hover { + color: rgb(63 71 39); +} +.column-50 { + flex: 1 1 100%; + display: flex; +} +.Trauzeuge-left { + display: flex; + flex-direction: column; + align-items: center; +} + +.round-image { + height: 200px; + width: 200px; + border-radius: 50%; + object-fit: cover; + object-position: right; + text-align: center; + padding: 10px; +} +a { + color: rgb(138 156 86); + text-align: center; +} +.maillink { + color: rgb(250, 249, 246); + font-size: 15px; + text-decoration: none; + font-family: "Open Sans", sans-serif; +} +.maillink:hover { + color: rgb(63 71 39); +} +/*.maillink2 { + color: black; + text-decoration: none; +} +.maillink2:hover { + text-decoration: underline; +}*/ +.tellink { + font-size: 15px; + text-decoration: none; + font-family: "Open Sans", sans-serif; +} +.tellink:hover { + text-decoration: underline; +} +.mailbutton { + background-color: rgb(138 156 86); + border-radius: 10px; + border: none; + width: 150px; + padding: 8px 16px; +} +.contact-mail { + display: flex; + align-items: center; + gap: 10px; +} +.material-icons-round.red { + color: rgb(138 156 86); +} + +.wunsch-left { + width: 33%; +} + +.image-wunsch { + margin: auto; + width: 175px; + height: 300px; + object-fit: cover; + padding: 10px; + border-radius: 10px 25% 20px; +} + +.material-icons { + font-family: "Material Icons"; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; +} +.material-icons-round.white { + color: #ffffff; +} +.icons { + background-color: rgb(138 156 86); + padding: 20px; + border: rgb(138 156 86); + height: 50px; + width: 50px; + border-radius: 50%; + margin: 20px; + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; +} +.icons .icon { + font-size: 36px; +} + +ul { + list-style: none; +} + +.menu { + display: inline-flex; + margin-right: 10px; + padding-bottom: 10px; +} + +li { + display: flex; + justify-content: center; + gap: 0px; +} + +.schedule { + display: flex; + align-items: center; + flex-direction: column; + padding-left: 0; +} +.schedule-point { + display: flex; + padding-bottom: 20px; + align-items: center; +} +.time { + font-size: large; +} +.schedule-text { + margin-top: 0px; +} + +.ablauf-text { + flex: 0 0 350px; + display: flex; + flex-direction: column; + align-items: center; +} + +iframe { + height: 200px; + width: 400px; + border-radius: 10px 25% 20px; +} + +.wunsch-container { + max-width: 225px; + display: flex; + align-content: flex-end; + flex-wrap: wrap; + justify-content: space-evenly; +} +.wunsch-text { + margin: auto; + max-width: 250px; +} +.Wunschliste { + display: flex; + flex-wrap: wrap; + padding-left: 0px; + max-width: 750px; + margin: auto; +} + +.wishlist { + padding-bottom: 20px; + width: 33%; +} +footer { + background-color: rgb(138 156 86); + height: 50px; + display: flex; + align-items: center; + justify-content: center; +} +.footer-text { + color: #ffffff; +} + +label { + display: block; + box-sizing: border-box; + margin: 5px; + width: 100%; + font-family: "Open Sans", sans-serif; +} +.success { + /*border: 2px solid rgb(138 156 86);*/ + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; + padding: 20px; + box-sizing: border-box; + max-width: 500px; + margin: auto; + margin-top: 50px; +} +.SuccessText { + text-align: center; + padding-top: 20px; +} +.SuccessImage { + width: 450px; +} +.button-success { + padding: 8px 16px; + border: none; + border-radius: 10px; + background-color: rgb(138 156 86); + color: rgb(250, 249, 246); + cursor: pointer; + font-family: "Open Sans", sans-serif; + font-size: 16px; + align-content: center; + margin-top: 20px; +} +.button-success:hover { + color: rgb(63 71 39); +} +/*Mobile*/ + +@media (max-width: 667px) { + .text-trauzeugen { + margin-top: 0px; + } + .schedule-point { + flex-wrap: wrap; + max-width: 330px; + } + .icons .icon { + font-size: 30px; + } + + .row-anmeldung { + flex-wrap: wrap; + gap: 0px; + } + + label { + padding-left: 10px; + padding-right: 10px; + } + + iframe { + width: 330px; + } + .wishlist { + flex-wrap: wrap; + padding: 0px; + width: 100%; + } + + .icons { + margin: auto; + width: 44px; + height: 44px; + } + + header { + height: 250px; + } + .section-image { + height: 250px; + } + .top-heading { + padding-top: 10px; + font-size: 47px; + } + .scroll { + white-space: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + nav { + justify-content: flex-start; + } + .menu { + margin-right: 0px; + } + .column-50 { + flex-wrap: wrap; + } + .row { + padding-left: 0px; + } + .image-wunsch { + padding: 0px; + } + .footer-text { + padding-top: 10px; + } + + .SuccessImage { + width: 300px; + } + .SuccessText { + padding-left: 0px; + padding-right: 0px; + } +} +/*Tablet*/ +@media (min-width: 668px) and (max-width: 1024px) { + .scroll { + white-space: nowrap; + overflow-x: auto; + } + + .menu { + align-content: flex-start; + } + .navigation { + display: flex; + align-content: flex-start; + padding-left: 0px; + } + .top-heading { + padding-top: 20px; + } + .schedule-point { + flex-wrap: wrap; + } + label { + padding-left: 10px; + padding-right: 10px; + } + .row-anmeldung { + flex-wrap: wrap; + gap: 0px; + } + .wishlist { + width: 50%; + } + .Wunschliste { + max-width: 500px; + } +} diff --git a/success.html b/success.html new file mode 100644 index 00000000..920db0d3 --- /dev/null +++ b/success.html @@ -0,0 +1,30 @@ + + + + + + Lea und Marc + + + + + +
+

Deine Anmeldung war erfolgreich!

+

+ Wir freuen uns darauf, diesen Tag mit dir/euch zu verbringen! +

+ Bild erfolgreiche Anmeldung + + +
+ + diff --git a/success.js b/success.js new file mode 100644 index 00000000..1ddb0bb2 --- /dev/null +++ b/success.js @@ -0,0 +1,14 @@ +window.addEventListener("load", function () { + const form = document.getElementById("Anmeldeformular"); + form.addEventListener("submit", function (e) { + e.preventDefault(); + const data = new FormData(form); + const action = e.target.action; + fetch(action, { + method: "POST", + body: data, + }).then(() => { + alert("Success!"); + }); + }); +});