Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Information

Hey guys! An event invitation HTML page was requested on the Patreon server and it sounded like a great idea, so here we are! This code has multiple page and invitation background options, as well as placeholders for custom images if you have your own already. Fonts and colors are easily swapped out to match the theme you're going for. Enjoy! 💖

Create a style | Edit your styles

The Coding

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>You're Invited</title>
	<link rel="shortcut icon" href="https://i.imgur.com/RSjDPAm.png" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>

/*--- YOU'RE INVITED - TESSISAMESS - 2020 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--text: #000;
	--lightest: #fff;
	--accent: #0D5004;

--page-bg: #eee;

--invite-height: 750px;
	--invite-width: 525px;
	--padding: 70px;
	--spacing: 30px;

--main-font: Playfair Display,serif;
	--headings: Quentin;

--text-size: 13px;
	--heading-size: 55px;
	--rsvp-size: 45px;

/* PAGE BACKGROUNDS */
	--plant: url(https://i.imgur.com/aforDp8.jpg)center fixed;
	--floral-page: url(https://i.imgur.com/lVKhfUb.jpg)center fixed;
	--wood: url(https://i.imgur.com/GpZmygq.jpg)center fixed;

--custombg: url();

/* INVITATION BACKGROUNDS */
	--simple: url(https://i.imgur.com/akDCEh5.png);
	--dark-blue: url(https://i.imgur.com/Mtek34r.jpg)center top;
	--paper-flowers: url(https://i.imgur.com/udbwqgk.jpg)right bottom;
	--ice: url(https://i.imgur.com/s8wTIhP.jpg)center;
	--sand: url(https://i.imgur.com/pREhTD3.jpg)center;
	--floral: url(https://i.imgur.com/GLJYXfZ.jpg)left top;

--custominvite: url();
}

/* GENERAL */

@font-face{font-family:Quentin;src:url(https://dl.dropbox.com/s/4wa0x19ns4gy7a1/Quentin.otf);}

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

*{box-sizing:border-box;}
body{margin:0;background:var(--page-bg);font-family:var(--main-font);color:var(--text);font-size:var(--text-size);overflow-x:hidden;}

img{max-width:100%;}
h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;letter-spacing:0;color:var(--accent);text-transform:none;line-height:1;}

a{text-decoration:none;color:var(--accent);-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{color:var(--accent);}

#credit{position:fixed;left:10px;bottom:10px;display:block;font-weight:bold;font-size:8px;text-transform:uppercase;letter-spacing:2px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;color:var(--dark);}

/* CONTAINER */

article{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background-size:cover!important;}

#plant{background:var(--plant);}
#floral-page{background:var(--floral-page);}
#wood{background:var(--wood);}
#custombg{background:var(--custombg);}

/* INVITATION */

#tilt{transform:rotate(2deg);}

main{height:var(--invite-height);width:var(--invite-width);position:relative;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1),0 0 40px rgba(0,0,0,0.07)inset;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1.5;letter-spacing:4px;text-transform:uppercase;padding:var(--padding);}

main:before, main:after{content:'';position:absolute;z-index:-1;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);top:0;bottom:0;left:10px;right:10px;border-radius:100px/10px;}
main:after{right:10px;left:auto;transform:skew(8deg)rotate(3deg);}

.names{font-size:var(--heading-size);margin:var(--spacing) 0;}
.rsvp{font-size:var(--rsvp-size);margin:var(--spacing) 0 0 0;}
.and{transform:rotate(-8deg);font-family:var(--main-font);font-weight:bold;font-size:var(--text-size);letter-spacing:4px;text-transform:uppercase;}

#simple{background:var(--simple);}
#dark-blue{background:var(--dark-blue);background-size:cover;}
#paper-flowers{background:var(--paper-flowers);background-size:cover;}
#ice{background:var(--ice);background-size:cover;}
#sand{background:var(--sand);background-size:cover;}
#floral{background:var(--floral);background-size:cover;}
#custominvite{background:var(--custominvite);background-size:cover;}

</style>
</head>

<body>

Text

<h1 class="names">
					Name

Name
				</h1>

Date & Time<br><br><br>

LOCATION

<a href="ENTRY_URL"><h3 class="rsvp">rsvp</h3></a>
				by date

</main>
		</div>
	</article>

<a href="http://tessisamess.insanejournal.com/" id="credit">TESSISAMESS</a>

</body>
</html>

Changing backgrounds

Change the ID of article id="plant" to change the page background and the ID of main id="simple" to change the invitation background. The variables in the root (ex. --simple) are the same names as the available IDs.

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Tags: codes: mockups, html page

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

HTML Page: Event Invitation

Information

The Coding

Changing backgrounds

Terms of Use

Comments