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 CSS

Event 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 CSS

Event 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.

Design a Webpage for online food delivery system using HTML and CSS

imsushant12

Improve

Article Tags :

Design an Event Webpage using HTML and CSS

What We’re Going to Create

Project Preview

Event Webpage – HTML Structure

In this code

Output

Event Webpage – Including CSS

In this Code

Output

Similar Reads