XAVIER INTERNATIONAL COLLEGE

Kalopul, kathmandu

“ Event page using html css”

Submitted To
Krishna Aryal Science(phy)
Computer Science

Submitted By
Utsav Bhattarai
E-80-1031
Grade 11(SD65)

1
ACKNOWLEDGEMENT
I would like to thank our beloved and precious teacher Mr. Krishna Aryal for giving
us a opportunity to present our knowledge and his expert advice and encouragement
for completion of this project.

2
TABLE OF CONTENTS

INTRODUCTION OF AN EVENT ……………………….. 4

OUR UNIQUE SELLING PROPOSITION

BENEFITS FOCUSED CONTENT FOR AN EVENT

PAGE……………………………………………………………... 5
A GREAT USER EXPERIENCE

BRANDING IS THE KEY

EXPLOIT THE USE OF IMAGES………………………….. 6

A REMARKABLE EVENT DESCRIPTION

A WELL-PLACED CALL TO ACTIONS

SOCIAL MEDIA SHARE OPTIONS ………………………. 7

ENSURE THE FORM FIELDS ARE SHORT

SOURCE CODE OF PROJECTS

OUTPUT OF PROJECTS…………………………………… 14

3
INTRODUCTION OF AND EVENT PAGE
The event page is the very first thing your potential attendees view on your website. It
is the driving force that makes them show up at your event. Your event page needs to
be thoughtful.

The best event page design is simple and speaks to your audience. A well-developed
event page can play a massive role in improving the overall ROI of your website.
You’ll be able to generate more leads and boost your conversion rates, all by taking
into account the key elements which are more likely to trigger user action.

The event page should be visually appealing. By keeping these 10 of the best
practices in mind, you can give your event page the power to convince the users to
attend your events.

OUR UNIQYE SELLING PROPOSITION

The selling proposition of your event needs to be unique. It sets your event
apart from other events. It will show how your product and services are
different from your competition. What makes your offer special? These
persuasive lines should be present on your event page.

4
BENEFITS FOCUSED CONTENT FOR
EVENT PAGE
When we are creating a landing page, we need to focus on the benefits more than
focusing on the features. The landing page needs to be persuasive if we want to keep
our audience more engaged.

Ensure that our landing page is brief with the benefits clearly stated in a way that they
improve readability, make use of the pointers and bullets.

A GREAT USER EXPERIENCE

Most users love a website with awesome icons and a creative button that convey
information without the use of redundant words. For example, using the “+” symbol
on the button instead of writing “add” on the button.

Choose the right color scheme when you’re designing your event pages. While
contrasting color schemes may work the best for you, it is better to look at different
colors before settling for the one. The thumb rule is to add no more than two colors
on your landing page if you want to create a visually striking page design.

BRANDING IS THE KEY

The best websites use branding to give a certain feeling while they’re engaging the
users. Our brand must stay consistent with our event page.

5
EXPLOIT THE USE OF IMAGES
Content with images tends to get more views than the ones with no pictures. So,
including the photos and other multimedia is a good option. Personalized photos work
better than the stock and download generic images.

Make full use of the high-quality photos of our product or service to enhance ticket
sales.

A REMARKABLE EVENT DESCRIPTION

The best event pages we have seen go above and beyond with their killer event
descriptions. When you’re thinking about the description for your event page, think
of it as you’re talking to somebody and telling them about your event in-person.

It will include things like the background, the purpose, the speakers, and the venue
of your event. The description of your event page should consist of the things
that’ll surely leave an everlasting impression on your audience.

A WELL-PLACED CALL TO ACTION

A call to action should be well-placed on our event page. It drives attention towards
the next step we want our users to go. When it comes to creating a compelling call to
action, make sure we use large fonts and bright colors.

Place in the middle of the page, and add a brief but actionable text to it. It can be of
something.

6
SOCIAL MEDIA SHARE OPTIONS
The display of social proof and trust is necessary for an event page-social proof helps
enhance the credibility of your pages. By displaying things like followers,
subscribers, you can win the trust of your users.

Having the share option will help you advertise even more. The potential attendees
can share your page with their audience, hence attracting more audience.

ENSURE THE FORM FIELDS ARE SHORT

When it comes to the anatomy of a great event page, the form describing the
proportionate we are offering is a must. It needs to have all the relevant fields but has
to be precise and short. It has to be more goal-oriented than detailed.

SOURCE CODE OF PROJECT

7
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Event Page</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

.container {

max-width: 800px;

margin: 20px auto;

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h1, p {

text-align: center;

.event-details {

margin-top: 30px;

.event-details p {

margin-bottom: 10px;

8
 .cta-button {

display: block;

width: 200px;

margin: 20px auto;

padding: 10px 20px;

text-align: center;

background-color: #007bff;

color: #fff;

text-decoration: none;

border-radius: 5px;

transition: background-color 0.3s ease;

.cta-button:hover {

background-color: #0056b3;

</style>

</head>

<body>

<div class="container">

<h1>Upcoming Event: Music Festival</h1>

<div class="event-details">

<p>Date: August 15th, 2024</p>

<p>Time: 6:00 PM onwards</p>

<p>Location: City Park Amphitheater</p>

<p>Description: Join us for a day of music, food, and fun at our annual Music Festival! Featuring top artists and bands,
delicious food vendors, and activities for the whole family.</p>

</div>

<a href="#" class="cta-button">Register Now</a>

</div>

</body>
</html>

9
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Event Page</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Upcoming Events</h1>

</header>

<main>

<section class="event">

<img src="event1.jpg" alt="Event 1">

<div class="event-details">

<h2>Event 1</h2>

<p>Date: January 1, 2025</p>

<p>Location: Venue 1</p>

<p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<button>Register</button>

</div>

</section>

<section class="event">

<img src="event2.jpg" alt="Event 2">

<div class="event-details">

<h2>Event 2</h2>

<p>Date: February 1, 2025</p>

<p>Location: Venue 2</p>

<p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

10
 </div><button>Register</button>

</div>

</section>

<section class="event">

<img src="event3.jpg" alt="Event 3">

<div class="event-details">

<h2>Event 3</h2>

<p>Date: March 1, 2025</p>

<p>Location: Venue 3</p>

<p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<button>Register</button>

</section>

</main>

<footer>

<p>&copy; 2025 Event Organizer</p>

</footer>

</body>

</html>

11
 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Event Page</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<div class="event-card">

<img src="event1.jpg" alt="Event 1">

<h2>Event 1</h2>

<p>Date: January 1, 2025</p>

<p>Location: Venue 1</p>

<p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<button>Register</button>

</div>

<div class="event-card">

<img src="event2.jpg" alt="Event 2">

<h2>Event 2</h2>

<p>Date: February 1, 2025</p>

<p>Location: Venue 2</p>

<p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<button>Register</button>

</div>

</div>

</body>

</html>

12
.container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.event-list {

list-style-type: none;

padding: 0;

.event-item {

background-color: #fff;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

padding: 20px;

margin: 20px 0;

width: 300px;

.event-item h2 {

margin-top: 0;

button {

background-color: #333;

color: #fff;

border: none;

padding: 10px 20px;

13
 border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

button:hover {

background-color: #555;

OUTPUT OF PROJECTS :

14
15
16