Design an Event Webpage using HTML and CSS
Last Updated :
03 Jan, 2025
Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details.
What We’re Going to Create
We’ll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will include
- A header introducing the event.
- Navigation links for different sections (About, Schedule, Speakers, and Contact).
- A schedule table.
- A contact form
Project Preview
Design an Event Webpage using HTML and CSSEvent Webpage - HTML Structure
The HTML structure provides the content and layout for the webpage.
HTML
<html>
<head></head>
<body>
<header>
<h1>Welcome to GeeksforGeeks TechCon 2025</h1>
<p>The Ultimate Technology and Programming Conference</p>
</header>
<nav>
<a href="#about">About</a> |
<a href="#schedule">Schedule</a> |
<a href="#speakers">Speakers</a> |
<a href="#contact">Contact</a>
</nav>
<section id="about">
<h2>About the Event</h2>
<p>GeeksforGeeks TechCon 2025 brings together leading minds in programming,
tech, and innovation. Join us for a day of insightful talks, hands-on workshops,
and an opportunity to network with fellow geeks and professionals from all around the world.</p>
</section>
<section id="schedule">
<h2>Event Schedule</h2>
<table>
<thead>
<tr>
<th>Time</th>
<th>Session</th>
<th>Contest</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td>Opening Keynote</td>
<td>GeeksforGeeks Coding Plateform</td>
</tr>
<tr>
<td>10:30 AM</td>
<td>Understanding AI and Machine Learning</td>
<td>Mr. Arvind Kumar</td>
</tr>
<tr>
<td>1:00 PM</td>
<td>Lunch Break</td>
<td>-</td>
</tr>
<tr>
<td>2:00 PM</td>
<td>Exploring the Future of Cloud Computing</td>
<td>Ms. Neha Gupta</td>
</tr>
</tbody>
</table>
</section>
<section id="speakers">
<h2>Meet the Speakers</h2>
<ul>
<li><strong>Dr. Radhika Sharma:</strong> AI Expert and Researcher</li>
<li><strong>Mr. Arvind Kumar:</strong> Senior Data Scientist at TechWave</li>
<li><strong>Ms. Neha Gupta:</strong> Cloud Computing Specialist at CloudTech</li>
<li><strong>Mr. Sandeep Reddy:</strong> Full Stack Developer and Open-Source Contributor</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<button type="submit">Send</button>
</form>
</section>
</body>
</html>
In this code
- Header: Introduces the event with a title and tagline.
- Navigation: Provides links to different sections of the webpage.
- About Section: Contains a brief description of the event.
- Schedule Section: Includes a table listing the event’s schedule with time, session, and speaker details.
- Speakers Section: Highlights key speakers with their titles and expertise.
- Contact Section: Contains a form to collect user queries or feedback.
Output
Design an Event Webpage using HTML and CSSEvent Webpage - Including CSS
HTML
<html>
<head>
<title>GeeksforGeeks TechCon 2025</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f6f9;
color: #444;
}
header {
background-color: #4CAF50;
color: white;
padding: 25px 0;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
nav {
background-color: #343a40;
/* Dark Gray */
text-align: center;
padding: 12px 0;
}
nav a {
color: #ffffff;
text-decoration: none;
margin: 0 20px;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.5px;
}
nav a:hover {
color: #ff6347;
/* Tomato */
text-decoration: underline;
}
section {
padding: 25px;
margin: 20px auto;
max-width: 900px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
section:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
section h2 {
color: #007bff;
/* Bright Blue */
font-size: 1.8rem;
margin-bottom: 15px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
table th,
table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
table th {
background-color: #f1f1f1;
font-weight: 600;
color: #333;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
ul {
list-style: none;
padding: 0;
}
ul li {
margin: 12px 0;
font-size: 1.2rem;
}
ul li strong {
color: #007bff;
}
form {
max-width: 650px;
margin: 25px auto;
}
form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
form input,
form textarea,
form button {
width: 100%;
padding: 14px;
margin-bottom: 18px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
}
form input:focus,
form textarea:focus {
border-color: #007bff;
outline: none;
}
form button {
background-color: #007bff;
color: white;
font-size: 1.1rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: #0056b3;
}
form button:active {
background-color: #004085;
}
</style>
</head>
<body>
<header>
<h1>Welcome to GeeksforGeeks TechCon 2025</h1>
<p>The Ultimate Technology and Programming Conference</p>
</header>
<nav>
<a href="#about">About</a> |
<a href="#schedule">Schedule</a> |
<a href="#speakers">Speakers</a> |
<a href="#contact">Contact</a>
</nav>
<section id="about">
<h2>About the Event</h2>
<p>GeeksforGeeks TechCon 2025 brings together leading minds in programming,
tech, and innovation. Join us for a
day of insightful talks, hands-on workshops, and an opportunity
to network with fellow geeks and
professionals from all around the world.</p>
</section>
<section id="schedule">
<h2>Event Schedule</h2>
<table>
<thead>
<tr>
<th>Time</th>
<th>Session</th>
<th>Contest</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td>Opening Keynote</td>
<td>GeeksforGeeks Coding Platform</td>
</tr>
<tr>
<td>10:30 AM</td>
<td>Understanding AI and Machine Learning</td>
<td>Mr. Arvind Kumar</td>
</tr>
<tr>
<td>1:00 PM</td>
<td>Lunch Break</td>
<td>-</td>
</tr>
<tr>
<td>2:00 PM</td>
<td>Exploring the Future of Cloud Computing</td>
<td>Ms. Neha Gupta</td>
</tr>
</tbody>
</table>
</section>
<section id="speakers">
<h2>Meet the Speakers</h2>
<ul>
<li><strong>Dr. Radhika Sharma:</strong> AI Expert and Researcher</li>
<li><strong>Mr. Arvind Kumar:</strong> Senior Data Scientist at TechWave</li>
<li><strong>Ms. Neha Gupta:</strong> Cloud Computing Specialist at CloudTech</li>
<li><strong>Mr. Sandeep Reddy:</strong> Full Stack Developer and Open-Source Contributor</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"></textarea><br><br>
<button type="submit">Send</button>
</form>
</section>
</body>
</html>
In this Code
- Body Styles: Set a uniform background, font style, and text color.
- Header and Navigation: Style the header and navigation bar for better presentation.
- Sections: Add padding, background, and shadow effects to sections.
- Tables: Define borders and alternate row colors for better readability.
- Form: Style inputs, textarea, and buttons for user interaction.
Output
With just a few lines of HTML and CSS, you can create a clean and professional event webpage. You can further enhance this by adding JavaScript for interactivity, such as a countdown timer or dynamic schedule updates. Feel free to customize the styles and layout to suit your needs.
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read