Initial gender reveal invitation

public/baby/css/fonts.css

@@ -0,0 +1,12 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 28, 2024 */
+
+
+
+@font-face {
+    font-family: 'archer_gage_demoregular';
+    src: url('archer_gage-webfont.woff2') format('woff2'),
+         url('archer_gage-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}

public/baby/css/main.css

@@ -0,0 +1,257 @@
+*, *:before, *:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
+
+html,
+body {
+  font-size: 16px;
+}
+
+html,
+body,
+.invitation {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  position: relative;
+}
+
+section {
+  font-family: "Google Sans", sans-serif;
+  position: relative;
+  margin: 0 auto;
+  padding: 46px 0;
+  width: 100%;
+}
+
+section h2 {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 34px;
+  margin-top: 0;
+  line-height: 1.1;
+  letter-spacing: -1.5px;
+}
+
+section.sky-section {
+  height: 100vh;
+  padding: 0;
+  overflow: hidden;
+}
+
+/*section:not(.sky-section) {
+  width: 100;
+  margin: 0 auto;
+}*/
+
+.container {
+  padding-left: 22px;
+  padding-right: 22px;
+}
+
+.balloon--fg,
+.balloon--bg,
+.basket,
+.sky,
+.title {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.balloon--fg,
+.balloon--bg,
+.basket {
+  background: none;
+  width: min(90vw, 60vh);
+  height: calc(min(90vw, 60vh) * 1.34285714);
+  top: calc(min(90vw, 60vh) * 1.34285714 * -0.125);
+  right: calc(min(90vw, 60vh) * -0.125);
+}
+
+.basket {
+  animation: float-basket 2s ease-in-out infinite;
+  z-index: 5;
+}
+
+.balloon--fg {
+  animation: float-balloon--fg 2s ease-in-out infinite;
+  z-index: 6;
+}
+
+.balloon--bg {
+  animation: float-balloon--bg 2s ease-in-out infinite;
+  z-index: 4;
+}
+
+.balloon--fg > img,
+.balloon--bg > img,
+.basket > img,
+.title > img {
+  width: 100%;
+}
+
+.sky {
+  background-image: url("../img/bg--landscape.lossy.webp");
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  font-family: 'archer_gage_demoregular';
+  font-size: 2rem;
+  color: #492f1a;
+  z-index: 7;
+  left: 38%;
+  text-align: center;
+  padding-left: 40px;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 60vw;
+  max-width: 400px;
+}
+
+.img-landscape { display: block; }
+.img-portrait { display: none; }
+
+.details {
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
+}
+
+.google-map {
+  padding-bottom: 100%;
+  position: relative;
+}
+
+.google-map iframe {
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+  z-index: 4;
+}
+
+.when {
+  margin-bottom: 48px;
+  text-align: center;
+}
+
+.when .wedding-date {
+  font-family: "the-seasons", sans-serif;
+  font-weight: 700;
+  margin: 0;
+  display: block;
+  text-align: center;
+  color: #264592;
+  line-height: 1.4;
+  font-size: 2.125rem;
+  text-shadow: 0 0 1px #223473;
+  margin-bottom: 3px;
+}
+
+.when .wedding-countdown,
+.when .wedding-time {
+  margin: 0;
+  line-height: 1.5rem;
+  letter-spacing: 0rem;
+  color: rgb(171 166 159);
+  font-family: "Google Sans Text", sans-serif;
+  font-weight: 400;
+  text-align: center;
+  font-size: 1.25rem;
+}
+
+.breaker {
+  display: none;
+}
+
+@media only screen and (orientation: portrait) {
+  .sky { background-image: url("../img/bg--portrait.lossy.webp") }
+  .img-landscape { display: none; }
+  .img-portrait { display: block; }
+}
+
+@media only screen and (min-width: 900px) {
+  .title {
+    left: 50%;
+    text-align: center;
+    padding-left: 40px;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: 50vw;
+  }
+
+  .container,
+  .full-width-container {
+    margin: 0 auto;
+    width: 800px;
+  }
+}
+
+@media only screen and (min-width: 520px) {
+  .google-map {
+    padding-bottom: 60%;
+  }
+
+  .breaker {
+    display: inline;
+  }
+}
+
+@media screen and (max-width: 359px) {
+  section h2 {
+    font-size: 2.25rem;
+    margin-bottom: 22px;
+  }
+
+  .the-seasons {
+    font-size: 2.375rem;
+  }
+
+  .when {
+    margin-bottom: 38px;
+  }
+
+  .when .wedding-countdown,
+  .when .wedding-time {
+    font-size: 1rem;
+  }
+
+  .when .wedding-date {
+    font-size: 1.75rem;
+  }
+}
+
+@keyframes float-balloon--fg {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-30px) rotate(-2.5deg) translateX(5px);
+  }
+}
+
+@keyframes float-balloon--bg {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-30px) rotate(-2.5deg) translateX(5px);
+  }
+}
+
+@keyframes float-basket {
+  0%,
+  100% {
+    transform: translateY(10px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-30px) rotate(-5deg) translateX(10px);
+  }
+}

public/baby/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="shortcut icon" href="../assets/icons/favicon.ico" />
+
+    <title>Baby Argabioso &#124; Gender Reveal &amp; Baby Shower</title>
+
+    <link rel="stylesheet" href="https://use.typekit.net/yue6wsi.css" />
+    <link rel="stylesheet" href="../shared/css/fonts.css" />
+
+    <link rel="stylesheet" href="css/main.css" />
+    <link rel="stylesheet" href="css/fonts.css" />
+    <style>
+    </style>
+  </head>
+
+  <body>
+    <div class="invitation">
+      <section class="sky-section">
+        <div class="balloon--fg"><img src="img/balloon--fg.webp" /></div>
+        <div class="balloon--bg"><img src="img/balloon--bg.webp" /></div>
+        <div class="basket"><img src="img/basket.webp" /></div>
+        <div class="sky"></div>
+
+        <div class="title">
+          <img class="img-landscape" src="img/title--landscape.webp" />
+          <img class="img-portrait" src="img/title--portrait.webp" />
+        </div>
+      </section>
+
+      <section class="details">
+        <div class="container">
+          <h2>When and where is the event? 📌</h2>
+          <div class="when">
+            <span class="wedding-countdown"></span>
+            <span class="wedding-date">December 7, 2024</span>
+            <span class="wedding-time">5:30 PM. Penthouse M1 Level, Lancaster Hotel, <br class="breaker" />622 Shaw Boulevard, Mandaluyong City</span>
+          </div>
+        </div>
+        <div class="full-width-container">
+          <div class="google-map">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3861.269764328587!2d121.04754967558148!3d14.583698285900764!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c83949975521%3A0xe557f8939b6b1e98!2sLancaster%20Hotel%20Manila!5e0!3m2!1sen!2sph!4v1730129524273!5m2!1sen!2sph" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+          </div>
+        </div>
+      </section>
+    </div>
+  </body>
+</html>