Compare commits
10 Commits
f200394b62
...
fd49b410c0
| Author | SHA1 | Date | |
|---|---|---|---|
fd49b410c0
|
|||
|
185eb04273
|
|||
|
f56ecd621e
|
|||
|
599f0abc11
|
|||
|
025ca311b3
|
|||
|
a7ba2d6aa5
|
|||
|
cd7c71cdf0
|
|||
|
931857e350
|
|||
|
c985b3335b
|
|||
|
62806cf395
|
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.vscode
|
||||
55
assets/css/main.min.css
vendored
55
assets/css/main.min.css
vendored
@@ -53,13 +53,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-cta: #ebf2f9;
|
||||
--c-text: #203650;
|
||||
--f-sans: "DM Sans", sans-serif;
|
||||
--f-serif: "Lora", serif;
|
||||
--f-family: var(--f-sans);
|
||||
--f-sans: "Americana", sans-serif;
|
||||
--f-serif: "Chevalier", serif;
|
||||
--f-script: "Belluccia", cursive;
|
||||
--f-family: var(--f-serif);
|
||||
--f-size: 18px;
|
||||
--f-height: 32px;
|
||||
--f-weight: 400;
|
||||
@@ -105,7 +124,7 @@ main {
|
||||
}
|
||||
.intro {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
height: 30vh;
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
@@ -113,6 +132,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;
|
||||
@@ -180,7 +208,10 @@ strong {
|
||||
padding-bottom: 0.35rem;
|
||||
}
|
||||
[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 +221,7 @@ strong {
|
||||
line-height: 1.3rem;
|
||||
padding-bottom: 0.35rem;
|
||||
padding-top: 0.35rem;
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
.divider {
|
||||
display: block;
|
||||
@@ -306,3 +337,15 @@ strong {
|
||||
.caption * {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 24px 0;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: "\2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022";
|
||||
font-size: 12px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
11
assets/event.ics
Normal file
11
assets/event.ics
Normal file
@@ -0,0 +1,11 @@
|
||||
BEGIN:VCALENDAR
|
||||
VERSION:2.0
|
||||
BEGIN:VEVENT
|
||||
CLASS:PUBLIC
|
||||
DESCRIPTION:Test\nDate and Time - Apr 13\, 2024 4:30 PM to 11:55 PM\nVenue - The Robey Hotel\nTest Details\n
|
||||
DTSTART:20240413T223000Z
|
||||
DTEND:20240414T055500Z
|
||||
LOCATION:The Robey Hotel
|
||||
SUMMARY;LANGUAGE=en-us:Test
|
||||
END:VEVENT
|
||||
END:VCALENDAR
|
||||
60
index.html
60
index.html
@@ -23,58 +23,46 @@
|
||||
<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">
|
||||
<img class="intro-letter" loading="lazy" src="assets/images/letters/A.png">
|
||||
<img class="intro-letter" loading="lazy" src="assets/images/letters/F.png">
|
||||
</figure>
|
||||
<div>
|
||||
<h1 data-size="large">Anthony Correa</h1>
|
||||
and
|
||||
<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">First of all, congratulations! It's always nice to learn that couples are moving forwards in their lives together.</p>
|
||||
<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>
|
||||
<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 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>
|
||||
<p data-size="large" data-font="serif">are getting married!</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>
|
||||
<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">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>
|
||||
<p data-size="small">The template includes:</p>
|
||||
<ul>
|
||||
<li>18 Illustrations</li>
|
||||
<li>Illustrated Initials</li>
|
||||
<li>Two Typefaces</li>
|
||||
<li>Call To Action Button</li>
|
||||
<li>Basic Text styling</li>
|
||||
</ul>
|
||||
<p data-size="small">
|
||||
The Hall at The Robey Hotel<br>
|
||||
2022 W North Ave<br>
|
||||
Chicago, Illinois
|
||||
</p>
|
||||
<p>Cocktails and Reception to Follow</p>
|
||||
</div>
|
||||
<div class="divider" data-style="1" data-size="small"></div>
|
||||
<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>
|
||||
<hr>
|
||||
<div class="text">
|
||||
<p data-size="large">Documentation and Instructions</p>
|
||||
<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">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>
|
||||
<p data-size="small"><a data-style="cta" href="https://docs.google.com/forms/d/1f-oG7DJJHyeZLK6e5EsSb9hc5JajeyU9JJ9Alv7Mc0w/edit" target="_blank">RSVP</a></p>
|
||||
</div>
|
||||
<div class="text"><a href="assets/event.ics">Add to Calendar</a></div>
|
||||
<hr>
|
||||
<footer class="initials">
|
||||
<img class="initial" src="assets/images/letters/F.png">
|
||||
<img class="initial" src="assets/images/letters/A.png">
|
||||
<h1 data-size="large" data-font="script">T+M</h1>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user