add info on parking

.gitignore

@@ -0,0 +1 @@
+.vscode

assets/css/main.min.css

@@ -1,3 +1,4 @@
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
 *,
 *::before,
 *::after {
@@ -53,13 +54,32 @@
     font-weight: normal;
     font-style: normal;
 }
+@font-face {
+    font-family: "Chevalier";
+    src: url("fonts/Chevalier-Becker-Stripes.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "Americana";
+    src: url("fonts/Americana-Font-Regular.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "Belluccia";
+    src: url("fonts/Belluccia.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
 :root {
-    --c-bg: #fdfdfd;
+    --c-bg: rgb(255,254,247);
     --c-cta: #ebf2f9;
     --c-text: #203650;
-    --f-sans: "DM Sans", sans-serif;
+    --f-sans: sans-serif;
-    --f-serif: "Lora", serif;
+    --f-serif: "Chevalier", serif;
-    --f-family: var(--f-sans);
+    --f-script: "Belluccia", cursive;
+    --f-family: var(--f-serif);
     --f-size: 18px;
     --f-height: 32px;
     --f-weight: 400;
@@ -105,7 +125,7 @@ main {
 }
 .intro {
     width: 100%;
-    height: 70vh;
+    height: 30vh;
     display: -webkit-box;
     display: flex;
     -webkit-box-pack: center;
@@ -113,6 +133,15 @@ main {
     -webkit-box-align: center;
     align-items: center;
 }
+.intro {
+    font-family: var(--f-script);
+    text-align: center;
+    transform: rotate(-10deg);
+}
+.intro h1 {
+    font-size: 60px;
+    line-height: 30px;
+}
 .intro-letter {
     display: inline-block;
     height: 35vh;
@@ -179,8 +208,14 @@ strong {
     padding-top: 0.35rem;
     padding-bottom: 0.35rem;
 }
+[data-font="sans"] {
+    font-family: var(--f-sans);
+}
 [data-font="serif"] {
-    font-family: lora;
+    font-family: var(--f-serif);
+}
+[data-font="script"] {
+    font-family: var(--f-script);
 }
 [data-font="custom"] {
     font-family: var(--f-custom);
@@ -190,7 +225,7 @@ strong {
     line-height: 1.3rem;
     padding-bottom: 0.35rem;
     padding-top: 0.35rem;
-    font-style: italic;
+
 }
 .divider {
     display: block;
@@ -306,3 +341,16 @@ strong {
 .caption * {
     font-size: inherit;
 }
+
+hr {
+    margin: 24px 0;
+    border: 0;
+    text-align: center;
+    
+    &:before {
+      content: "\2022 \2022 \2022 \2022 \2022 \2022 \2022";
+      font-size: 12px;
+      letter-spacing: .5rem;
+      color: black;
+    }
+  }

assets/event.ics

@@ -0,0 +1,35 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//ical.marudot.com//iCal Event Maker
+CALSCALE:GREGORIAN
+BEGIN:VTIMEZONE
+TZID:America/Chicago
+LAST-MODIFIED:20231222T233358Z
+TZURL:https://www.tzurl.org/zoneinfo-outlook/America/Chicago
+X-LIC-LOCATION:America/Chicago
+BEGIN:DAYLIGHT
+TZNAME:CDT
+TZOFFSETFROM:-0600
+TZOFFSETTO:-0500
+DTSTART:19700308T020000
+RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=2SU
+END:DAYLIGHT
+BEGIN:STANDARD
+TZNAME:CST
+TZOFFSETFROM:-0500
+TZOFFSETTO:-0600
+DTSTART:19701101T020000
+RRULE:FREQ=YEARLY;BYMONTH=11;BYDAY=1SU
+END:STANDARD
+END:VTIMEZONE
+BEGIN:VEVENT
+DTSTAMP:20240118T220149Z
+UID:1705615291976-58522@ical.marudot.com
+DTSTART;TZID=America/Chicago:20240413T163000
+DTEND;TZID=America/Chicago:20240413T235500
+SUMMARY:🧔🏻‍♂️👩🏻‍🦱🎉 Tony and Melanie's Wedding
+URL:https://wedding.correa.co
+DESCRIPTION:Anthony Correa and Melanie Harmon invite you to join in the celebration of their marriage.
+LOCATION:2022 W North Ave\, Chicago\, Illinois
+END:VEVENT
+END:VCALENDAR

index.html

@@ -5,7 +5,8 @@
     <!-- Meta -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-    
+    <meta property="og:title" content="Anthony and Melanie's Wedding" />
+    <meta property="og:image" content="/assets/images/preview.png" />
     <!-- Favicons and other styls -->
     <link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
@@ -23,58 +24,65 @@
     <link href="assets/css/main.min.css" rel="stylesheet">
 
     <!-- Site Title -->
-    <title>Wedding Template</title>
+    <title>Tony and Melanie</title>
 
 
 </head>
 <body>
     <section class="intro">
-        <div class="intro-letters">
+        <div>
-            <img class="intro-letter" loading="lazy" src="assets/images/letters/A.png">
+            <h1 data-size="large">Anthony Correa</h1>
-            <img class="intro-letter" loading="lazy" src="assets/images/letters/F.png">
+            and
-        </figure>
+            <h1 data-size="large">Melanie Harmon</h1>
+        </div>
     </section>
     <main>
         <div class="text">
-            <p data-size="large" data-font="serif">You're getting married!</p>
+            <p data-size="small" data-font="serif">
-            <p data-size="small">First of all, congratulations! It's always nice to learn that couples are moving forwards in their lives together.</p>
+                Invite you to join in the <br>
-            <p data-size="small">Second, thank you for considering using a website to let people know about your wedding. A simple website is an enviromentally friendly way to promote your wedding.</p>
+                celebration of their marriage
-            <p data-size="small">Our goal with this template was to design a site that was elegant and quick to browse and didn't make heavy use of pictures.</p>
+            </p>
-            <p data-size="small"><a data-style="cta" href="https://gum.co/621-wedding" target="_blank" data-gumroad-single-product="true">Buy the template</a></p>
         </div>
-        <div class="divider" data-style="4a" data-size="small"></div>
+        <hr>
         <div class="text">
-            <p data-size="large">September 2nd, 2019</p>
+            <p data-size="large">
+                April 13, 2024 <br>
+                4:30 PM <br>
+            </p>
         </div>
-        <div class="divider" data-style="4b" data-size="small"></div>
+        <hr>
         <div class="text">
-            <p data-size="large">The template</p>
+            <img class="photo" src="assets/images/the-robey-hotel-chicago-corner-milwaukee-damen-north-avenue.jpg">
-            <p data-size="small">This is a static HTML template. Doesn't use a backend and doesn't use JS. It's just HTML and CSS and you can easily customize it by hand. Just to make it extra clear: this is <strong>NOT</strong> a WordPress theme.</p>
+            <p data-size="small">
-            <p data-size="small">We tried our best to make it as easier as possible for you to customize it but we're happy to assist you via email if you need help.</p>
+                The Hall at The Robey Hotel<br>
-            <p data-size="small">The template includes:</p>
+                2022 W North Ave<br>
-            <ul>
+                Chicago, Illinois<br>
-                <li>18 Illustrations</li>
+                <a data-style="cta" data-size="large" class="bi bi-map" href="https://maps.app.goo.gl/FqseDYG9Lf28pCWm9"></a>
-                <li>Illustrated Initials</li>
+            </p>
-                <li>Two Typefaces</li>
+            <p data-font="sans">
-                <li>Call To Action Button</li>
+                <b>Parking</b><br>
-                <li>Basic Text styling</li>
+                <span data-font="sans">
-            </ul>
+                    <span>Valet: pull up to the main entrance at 2018 W North Avenue, and the bellman will come out to park your car. Valet parking costs $50 for 0-24 hours.</span>
+                    <span>Paid Street Parking: North Avenue, Damen Avenue</span>
+                    <span>Free Street parking: North Avenue past Leavitt Street & Hoyne</span>
+                </>                
+            </p>
+            <p>Formal Attire<br>Cocktails and Reception to Follow</p>
         </div>
-        <div class="divider" data-style="1" data-size="small"></div>
+        <hr>
-        <figure class="album">
-            <img class="photo" src="assets/images/wedding.jpg">
-            <figcaption class="caption">Image by <a href="https://unsplash.com/@jeremywongweddings" target="_blank">@jeremywongweddings</a></figcaption>
-        </figure>
-        <div class="divider" data-style="2" data-size="small"></div>
         <div class="text">
-            <p data-size="large">Documentation and Instructions</p>
+            Please RSVP by March 13, 2024
-            <p data-size="small">Since we all know that documentation sucks, we included instructions on how to edit the template directly into the code.</p>
+            <p data-size="small"><a data-style="cta" href="https://docs.google.com/forms/d/1f-oG7DJJHyeZLK6e5EsSb9hc5JajeyU9JJ9Alv7Mc0w/edit" target="_blank">RSVP</a></p>
-            <p data-size="small">You'll find detailed instructions on how to change every component of the template. And if something is not clear or you're after something custom get in touch via email and I'm sure we'll find a solution.</p>
-            <p data-size="small"><a data-style="cta" href="https://gum.co/621-wedding" target="_blank" data-gumroad-single-product="true">Buy the template</a></p>
         </div>
+        <div class="text" data-font="sans"><a data-style="cta" class="bi bi-calendar" href="assets/event.ics"> Add to calendar</a></div>
+        <hr>
+        <div class="text">
+            Your presence is more than enough, but if you're looking for gift ideas, we are registered here:
+            <a data-style="cta" href="https://www.myregistry.com/wedding-registry/melanie-harmon-and-tony-correa-chicago-il/4081939">myregistry.com</a>
+        </div>
+        <hr>
         <footer class="initials">
-            <img class="initial" src="assets/images/letters/F.png">
+            <h1 data-size="large" data-font="script">T+M</h1>
-            <img class="initial" src="assets/images/letters/A.png">
         </footer>
     </main>