code for event invitation website
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Invitation</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="[Link]" alt="Your Logo"> <!-- Replace with your
logo -->
<span>Your Company Name</span> </div> <!--Replace with your
company name -->
<h1>You're Invited!</h1>
</header>
<main>
<img src="[Link]" alt="Event Image" id="eventImage">
<div class="details">
<h2>Event Name</h2>
<p><strong>Date:</strong> <span id="date"></span></p>
<p><strong>Time:</strong> <span id="time"></span></p>
<p><strong>Location:</strong> <span id="location"></span></p>
<p><strong>Description:</strong> <span id="description"></span></p>
<p>
<a href="#" id="rsvpLink">RSVP Here!</a>
<button id="aboutEventBtn">About Event</button>
<button id="organizersBtn">Organizers</button>
</p>
</div>
</main>
<footer>
<p>© 2023 Your Company Name</p>
</footer>
</div>
<script src="[Link]"></script>
</body>
</html>
CSS
body {
font-family: sans-serif;
margin: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
header {
text-align: center;
margin-bottom: 20px;
}
#eventImage {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
.details {
line-height: 1.6;
}
.details p {
margin-bottom: 10px;
}
footer {
text-align: center;
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #ddd;
}
a#rsvpLink{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.logo {
display: flex;
align-items: center; /* Vertically align logo and text */
margin-bottom: 20px;
}
.logo img {
max-height: 50px; /* Adjust as needed */
margin-right: 10px;
}
#aboutEventBtn, #organizersBtn {
background-color: #007bff; /* Blue */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
margin-left: 10px; /* Space between buttons */
}
JAVASCRIPT
([Link]("date").textContent = "October 27, 2024"; //Replace with
your date
[Link]("time").textContent = "7:00 PM"; //Replace with your time
[Link]("location").textContent = "123 Main Street, Anytown,
CA"; //Replace with your location
[Link]("description").textContent = "Join us for a fun evening of
celebration!"; //Replace with your description
//Optional: Add RSVP functionality (you'll need a backend to handle this)
[Link]("rsvpLink").addEventListener("click", function(event){
[Link](); //Prevent default link behavior
alert("RSVP functionality not yet implemented."); //Replace with your RSVP
handling
}
[Link]("aboutEventBtn").addEventListener("click", function() {
alert("About Event content will go here.");
});
[Link]("organizersBtn").addEventListener("click", function() {
alert("Organizers content will go here.");
});
0October 27, 20247:00 PM
