Event / Conference Website Template with HTML, CSS, JavaScript

Faraz

By Faraz -

Learn how to create a modern event or conference website template using HTML, CSS, and JavaScript. Simple steps with free code for your event website.

Join us on Telegram
event-conference-website-template-with-html-css-javascript.webp
Read Alsohow to create a pure css glitch text effect in minutes.pngCreating a Pure CSS Glitch Text Effect

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Are you planning to create a modern event or conference website? Whether it’s for a corporate meeting, tech conference, workshop, or music festival, having a clean and attractive website is essential. In this blog, we will guide you to build a fully responsive event/conference website template using HTML, CSS, and JavaScript.

We’ll keep things simple and easy so that beginners can also follow along.

Prerequisites

Before you start, make sure:

  • You have basic knowledge of HTML, CSS, and JavaScript.
  • A code editor (like VS Code or Sublime Text) is installed.
  • You have a browser (like Chrome) to view your website.

Source Code

Step 1 (HTML Code):

Let’s start with HTML. This will build the main layout of your website.

Copy the HTML code below and paste it into your index.html file:

Read AlsoCreate a Stunning Resume with Tailwind CSS.jpgCreate a Stunning Resume with Tailwind CSS (Source Code)

Step 2 (CSS Code):

Now let’s move on to CSS. This will help make your website modern and beautiful.

Copy the CSS code below and paste it into your styles.css file:

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Typography */
.section-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}

.section-title.white {
  color: white;
}

.section-subtitle {
  font-size: 1.25rem;
  color: #666;
  text-align: center;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.section-subtitle.light {
  color: rgba(255, 255, 255, 0.8);
}

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-alt {
  background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Buttons */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.btn-outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-outline:hover {
  background: white;
  color: #333;
  transform: translateY(-2px);
}

.btn-light {
  background: white;
  color: #667eea;
}

.btn-light:hover {
  background: #f8f9ff;
  transform: translateY(-2px);
}

.btn.full-width {
  width: 100%;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.3s ease;
  background: transparent;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand h1 {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.desktop-nav {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  padding: 0.5rem 0;
}

.navbar:not(.scrolled) .nav-link {
  color: white;
}

.nav-link:hover {
  color: #667eea;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #333;
}

.navbar:not(.scrolled) .mobile-menu-btn {
  color: white;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  background: white;
  padding: 1rem 2rem;
  border-radius: 10px;
  margin: 0 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.mobile-nav.active {
  display: flex;
}

.mobile-nav .nav-link {
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.mobile-nav .nav-link:last-child {
  border-bottom: none;
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-image: url('https://images.unsplash.com/photo-1486591978090-58e619d37fe7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');
  background-size: cover;
  background-position: center center; 
  background-repeat: no-repeat; 
}

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);  
  z-index: 1;
}

.hero-content {
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 0 2rem;
  z-index: 10;
  position: relative;
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 1rem;
  animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  opacity: 0.9;
  animation: fadeInUp 1s ease-out 0.2s both;
}

.hero-description {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.8;
  line-height: 1.8;
  animation: fadeInUp 1s ease-out 0.4s both;
}

.event-details {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-out 0.6s both;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.detail-item i {
  color: #00d4ff;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-out 0.8s both;
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

.scroll-mouse {
  width: 24px;
  height: 40px;
  border: 2px solid white;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.scroll-wheel {
  width: 4px;
  height: 12px;
  background: white;
  border-radius: 2px;
  animation: scroll 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes scroll {
  0% { opacity: 0; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(16px); }
}

/* Countdown Section */

.countdown {
  padding: 30px 20px;
  background: radial-gradient(circle at center, #667eea, #101525);
  text-align: center;
  color: #fff;
}

.coundown-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title.white {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 0;
}

.countdown-grid {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}

.countdown-item {
  min-width: 100px;
}

.countdown-number {
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 800;
  color: #ffffff;
}

.countdown-label {
  margin-top: 10px;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

@media (max-width: 600px) {
  .countdown-grid {
    gap: 20px;
  }

  .countdown-item {
    padding: 20px 25px;
    min-width: 90px;
  }

  .countdown-number {
    font-size: 1rem;
  }

  .section-title.white {
    font-size: 2rem;
  }
}

/* About Section */
.about {
  padding: 5rem 0;
  background: white;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-text h2 {
  text-align: left;
  margin-bottom: 2rem;
}

.about-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #666;
  margin-bottom: 1.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
}

.about-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Speakers Section */
.speakers {
  padding: 5rem 0;
  background: #f8f9fa;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.speakers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.speaker-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.speaker-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.speaker-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.speaker-card:hover .speaker-image {
  transform: scale(1.05);
}

.speaker-info {
  padding: 1.5rem;
}

.speaker-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #333;
}

.speaker-title {
  color: #667eea;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.speaker-company {
  color: #666;
  font-size: 0.9rem;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-content {
  background: white;
  border-radius: 20px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: white;
  transform: scale(1.1);
}

.modal-header img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.modal-body {
  padding: 2rem;
}

.modal-body h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.modal-body p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.modal-social {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.social-btn {
  padding: 0.75rem 1.5rem;
  background: #667eea;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.social-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

/* Schedule Section */
.schedule {
  padding: 5rem 0;
  background: white;
}

.schedule-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  background: #f8f9fa;
  padding: 0.5rem;
  border-radius: 12px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.tab-btn {
  padding: 1rem 2rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #666;
  transition: all 0.3s ease;
}

.tab-btn.active {
  background: white;
  color: #667eea;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.schedule-content {
  max-width: 800px;
  margin: 0 auto;
}

.schedule-item {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.schedule-time {
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
  font-weight: 600;
}

.schedule-details {
  flex: 1;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.schedule-details:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.schedule-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #333;
}

.schedule-speaker {
  color: #667eea;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.schedule-description {
  color: #666;
  line-height: 1.6;
}

.schedule-type {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.schedule-type.keynote {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.schedule-type.talk {
  background: linear-gradient(135deg, #00d4ff, #0099ff);
  color: white;
}

.schedule-type.workshop {
  background: linear-gradient(135deg, #00c851, #007e33);
  color: white;
}

.schedule-type.break {
  background: #6c757d;
  color: white;
}

.schedule-type.networking {
  background: linear-gradient(135deg, #ff6347, #ff4757);
  color: white;
}

/* Sponsors Section */
.sponsors {
  padding: 5rem 0;
  background: #f8f9fa;
}

.sponsors-tier {
  margin-bottom: 3rem;
}

.tier-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #333;
}

.sponsors-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.sponsors-row img {
  transition: all 0.3s ease;
  filter: grayscale(100%);
  opacity: 0.7;
}

.sponsors-row img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

.sponsors-row.platinum img {
  height: 80px;
}

.sponsors-row.gold img {
  height: 70px;
}

.sponsors-row.silver img {
  height: 60px;
}

.sponsor-cta {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 3rem;
  border-radius: 20px;
  text-align: center;
  margin-top: 4rem;
}

.sponsor-cta h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.sponsor-cta p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Testimonials Section */
.testimonials {
  padding: 5rem 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: white;
  position: relative;
}

.testimonial-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.testimonial-text {
  font-size: 1.25rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.testimonial-info h4 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.testimonial-info p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.slider-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.slider-btn.prev {
  left: -60px;
}

.slider-btn.next {
  right: -60px;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: white;
}

/* Registration Section */
.registration {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
}

.registration-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.registration-form {
  background: white;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group input.error,
.form-group select.error {
  border-color: #dc3545;
}

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: none;
}

.error-message.show {
  display: block;
}

.info-card {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.info-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.info-card ul {
  list-style: none;
}

.info-card li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #666;
}

.info-card li i {
  color: #28a745;
  font-size: 1.1rem;
}

.success-message {
  text-align: center;
  background: white;
  padding: 3rem;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  margin: 0 auto;
}

.success-message.hidden {
  display: none;
}

.success-icon {
  width: 80px;
  height: 80px;
  background: #28a745;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem auto;
}

.success-icon i {
  font-size: 2.5rem;
  color: white;
}

.success-message h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #333;
}

.success-message p {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 2rem;
}

/* Footer */
.footer {
  background: #1a1a2e;
  color: white;
  padding: 4rem 0 2rem 0;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-section h3,
.footer-section h4 {
  margin-bottom: 1.5rem;
}

.footer-section h3 {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-section p {
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section ul li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section ul li a:hover {
  color: #667eea;
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-links a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background: #667eea;
  transform: translateY(-2px);
}

.newsletter-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.newsletter-form input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-form button {
  padding: 0.75rem 1.5rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  background: #5a6fd8;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #667eea;
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
}

.back-to-top:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.back-to-top.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
  
  .desktop-nav {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
  }
  
  .event-details {
    flex-direction: column;
    gap: 1rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .section-title {
    font-size: 2.5rem;
  }
  
  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .speakers-grid {
    grid-template-columns: 1fr;
  }
  
  .schedule-item {
    flex-direction: column;
    gap: 1rem;
  }
  
  .schedule-tabs {
    flex-direction: column;
    width: 100%;
  }
  
  .registration-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .slider-btn {
    display: none;
  }
  
  .modal-content {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .testimonial-content {
    padding: 2rem 1rem;
  }
  
  .testimonial-text {
    font-size: 1rem;
  }
}

Step 3 (JavaScript Code):

This is our final step. Here we will use JavaScript to make the site interactive with useful functions.

Copy the JavaScript code below and paste it into your script.js file:

// Global variables
let currentTestimonialIndex = 0;
let currentScheduleDay = 1;

// Speakers data
const speakers = [
  {
    id: 1,
    name: "Sarah Chen",
    title: "Principal Engineer",
    company: "Meta",
    image: "https://images.unsplash.com/photo-1637589267610-6c66fc2a086b?auto=format&fit=crop&w=400&q=80",
    bio: "Sarah is a Principal Engineer at Meta with over 10 years of experience in distributed systems and machine learning infrastructure. She leads the development of next-generation AI platforms.",
    twitter: "@sarahchen",
    linkedin: "/in/sarahchen"
  },
  {
    id: 2,
    name: "Marcus Rodriguez",
    title: "CTO",
    company: "TechFlow",
    image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80",
    bio: "Marcus is the CTO of TechFlow, a leading fintech company. He specializes in blockchain technology and has been instrumental in developing secure payment systems.",
    twitter: "@marcusrod",
    linkedin: "/in/marcusrodriguez"
  },
  {
    id: 3,
    name: "Emily Watson",
    title: "VP of Engineering",
    company: "CloudScale",
    image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=400&q=80",
    bio: "Emily leads engineering teams at CloudScale, focusing on cloud infrastructure and DevOps practices. She's a strong advocate for sustainable technology practices.",
    twitter: "@emilywatson",
    linkedin: "/in/emilywatson"
  },
  {
    id: 4,
    name: "David Kim",
    title: "Senior Staff Engineer",
    company: "Google",
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80",
    bio: "David is a Senior Staff Engineer at Google working on Chrome's performance team. He's passionate about web technologies and has contributed to numerous open-source projects.",
    twitter: "@davidkim",
    linkedin: "/in/davidkim"
  },
  {
    id: 5,
    name: "Lisa Thompson",
    title: "Head of AI Research",
    company: "OpenAI",
    image: "https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?auto=format&fit=crop&w=400&q=80",
    bio: "Lisa leads AI research initiatives at OpenAI, focusing on natural language processing and ethical AI development. She holds a PhD in Computer Science from Stanford.",
    twitter: "@lisathompson",
    linkedin: "/in/lisathompson"
  },
  {
    id: 6,
    name: "Alex Rivera",
    title: "Founder & CEO",
    company: "DevTools Inc",
    image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80",
    bio: "Alex founded DevTools Inc, creating innovative development tools used by millions of developers worldwide. He's a frequent speaker at tech conferences globally.",
    twitter: "@alexrivera",
    linkedin: "/in/alexrivera"
  }
];

// Testimonials data
const testimonials = [
  {
    id: 1,
    name: "Jennifer Lee",
    title: "Senior Developer",
    company: "TechCorp",
    content: "TechConf 2023 was absolutely incredible! The speakers were world-class and the networking opportunities were unparalleled. I learned so much and made connections that have already led to new opportunities.",
    avatar: "https://images.unsplash.com/photo-1637589267610-6c66fc2a086b?auto=format&fit=crop&w=150&q=80"
  },
  {
    id: 2,
    name: "Michael Chen",
    title: "CTO",
    company: "StartupX",
    content: "The workshops at TechConf were hands-on and practical. I implemented several techniques I learned directly into our production systems. This conference delivers real value for tech professionals.",
    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=150&q=80"
  },
  {
    id: 3,
    name: "Sarah Johnson",
    title: "Product Manager",
    company: "InnovateLab",
    content: "TechConf brings together the brightest minds in technology. The insights I gained about AI and machine learning have completely transformed how we approach product development at our company.",
    avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=150&q=80"
  },
  {
    id: 4,
    name: "Robert Kim",
    title: "Engineering Manager",
    company: "DataFlow",
    content: "Every year, TechConf exceeds my expectations. The quality of content is exceptional, and the community is incredibly welcoming. It's become an essential part of my professional development.",
    avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&q=80"
  }
];

// Schedule data
const scheduleData = {
  1: [
    {
      time: '9:00 AM',
      title: 'Registration & Welcome Coffee',
      type: 'networking',
      description: 'Check-in, networking, and light refreshments'
    },
    {
      time: '10:00 AM',
      title: 'Opening Keynote: The Future of AI',
      speaker: 'Sarah Chen',
      type: 'keynote',
      description: 'Exploring the transformative potential of artificial intelligence in the next decade'
    },
    {
      time: '11:00 AM',
      title: 'Building Scalable Web Applications',
      speaker: 'Marcus Rodriguez',
      type: 'talk',
      description: 'Best practices for creating web applications that scale to millions of users'
    },
    {
      time: '12:00 PM',
      title: 'Lunch Break',
      type: 'break',
      description: 'Networking lunch with fellow attendees'
    },
    {
      time: '1:30 PM',
      title: 'Cloud Infrastructure Workshop',
      speaker: 'Emily Watson',
      type: 'workshop',
      description: 'Hands-on session on designing and implementing cloud-native architectures'
    },
    {
      time: '3:30 PM',
      title: 'Coffee Break',
      type: 'break',
      description: 'Refreshments and networking'
    },
    {
      time: '4:00 PM',
      title: 'Web Performance Optimization',
      speaker: 'David Kim',
      type: 'talk',
      description: 'Advanced techniques for optimizing web application performance'
    },
    {
      time: '5:00 PM',
      title: 'Day 1 Wrap-up & Networking',
      type: 'networking',
      description: 'End-of-day discussion and networking reception'
    }
  ],
  2: [
    {
      time: '9:00 AM',
      title: 'Morning Coffee & Networking',
      type: 'networking',
      description: 'Start your day with coffee and connections'
    },
    {
      time: '10:00 AM',
      title: 'AI Ethics and Responsible Development',
      speaker: 'Lisa Thompson',
      type: 'keynote',
      description: 'Exploring the ethical implications of AI and best practices for responsible development'
    },
    {
      time: '11:00 AM',
      title: 'Developer Tools Revolution',
      speaker: 'Alex Rivera',
      type: 'talk',
      description: 'The latest innovations in developer tooling and productivity'
    },
    {
      time: '12:00 PM',
      title: 'Lunch Break',
      type: 'break',
      description: 'Networking lunch and vendor expo'
    },
    {
      time: '1:30 PM',
      title: 'Machine Learning Workshop',
      speaker: 'Sarah Chen',
      type: 'workshop',
      description: 'Building and deploying ML models in production environments'
    },
    {
      time: '3:30 PM',
      title: 'Coffee Break',
      type: 'break',
      description: 'Afternoon refreshments'
    },
    {
      time: '4:00 PM',
      title: 'Blockchain and Web3',
      speaker: 'Marcus Rodriguez',
      type: 'talk',
      description: 'Understanding blockchain technology and its applications'
    },
    {
      time: '5:00 PM',
      title: 'Evening Networking Event',
      type: 'networking',
      description: 'Casual networking with food and drinks'
    }
  ],
  3: [
    {
      time: '9:00 AM',
      title: 'Final Day Welcome',
      type: 'networking',
      description: 'Last day kickoff with coffee and pastries'
    },
    {
      time: '10:00 AM',
      title: 'The Future of Software Development',
      speaker: 'Emily Watson',
      type: 'keynote',
      description: 'Predictions and trends shaping the next generation of software development'
    },
    {
      time: '11:00 AM',
      title: 'Open Source Contributions',
      speaker: 'David Kim',
      type: 'talk',
      description: 'How to contribute effectively to open source projects'
    },
    {
      time: '12:00 PM',
      title: 'Lunch Break',
      type: 'break',
      description: 'Final networking lunch'
    },
    {
      time: '1:30 PM',
      title: 'Startup Tech Stack Workshop',
      speaker: 'Alex Rivera',
      type: 'workshop',
      description: 'Choosing the right technologies for your startup'
    },
    {
      time: '3:30 PM',
      title: 'Coffee Break',
      type: 'break',
      description: 'Last coffee break of the conference'
    },
    {
      time: '4:00 PM',
      title: 'Closing Keynote: Building the Future',
      speaker: 'Lisa Thompson',
      type: 'keynote',
      description: 'Inspiring closing thoughts on innovation and collaboration'
    },
    {
      time: '5:00 PM',
      title: 'Conference Closing & Final Networking',
      type: 'networking',
      description: 'Closing remarks and farewell networking'
    }
  ]
};

// DOM Content Loaded
document.addEventListener('DOMContentLoaded', function() {
  initializeApp();
});

// Initialize the application
function initializeApp() {
  setupNavigation();
  setupCountdown();
  setupSpeakers();
  setupSchedule();
  setupTestimonials();
  setupRegistrationForm();
  setupScrollAnimations();
  setupBackToTop();
}

// Navigation functionality
function setupNavigation() {
  const navbar = document.getElementById('navbar');
  const mobileMenuBtn = document.getElementById('mobileMenuBtn');
  const mobileNav = document.getElementById('mobileNav');
  const navLinks = document.querySelectorAll('.nav-link');

  // Scroll effect
  window.addEventListener('scroll', () => {
    if (window.pageYOffset > 50) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
  });

  // Mobile menu toggle
  mobileMenuBtn.addEventListener('click', () => {
    mobileNav.classList.toggle('active');
    const icon = mobileMenuBtn.querySelector('i');
    icon.className = mobileNav.classList.contains('active') ? 'fas fa-times' : 'fas fa-bars';
  });

  // Smooth scrolling for navigation links
  navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const targetId = link.getAttribute('href');
      scrollToSection(targetId.substring(1));
      mobileNav.classList.remove('active');
      mobileMenuBtn.querySelector('i').className = 'fas fa-bars';
    });
  });
}

// Smooth scroll to section
function scrollToSection(sectionId) {
  const element = document.getElementById(sectionId);
  if (element) {
    const navHeight = document.getElementById('navbar').offsetHeight;
    const elementPosition = element.offsetTop - navHeight;
    window.scrollTo({
      top: elementPosition,
      behavior: 'smooth'
    });
  }
}

// Countdown timer
function setupCountdown() {
  const eventDate = new Date('2025-06-30T09:00:00').getTime();
  
  function updateCountdown() {
    const now = new Date().getTime();
    const distance = eventDate - now;

    if (distance > 0) {
      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);

      document.getElementById('days').textContent = days.toString().padStart(2, '0');
      document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
      document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
      document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    }
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
}

// Speakers section
function setupSpeakers() {
  const speakersGrid = document.getElementById('speakersGrid');
  
  speakers.forEach((speaker, index) => {
    const speakerCard = document.createElement('div');
    speakerCard.className = 'speaker-card fade-in';
    speakerCard.style.animationDelay = `${index * 0.1}s`;
    speakerCard.onclick = () => openSpeakerModal(speaker);
    
    speakerCard.innerHTML = `
      <img src="${speaker.image}" alt="${speaker.name}" class="speaker-image">
      <div class="speaker-info">
        <h3 class="speaker-name">${speaker.name}</h3>
        <p class="speaker-title">${speaker.title}</p>
        <p class="speaker-company">${speaker.company}</p>
      </div>
    `;
    
    speakersGrid.appendChild(speakerCard);
  });
}

// Speaker modal
function openSpeakerModal(speaker) {
  const modal = document.getElementById('speakerModal');
  
  document.getElementById('modalSpeakerImage').src = speaker.image;
  document.getElementById('modalSpeakerImage').alt = speaker.name;
  document.getElementById('modalSpeakerName').textContent = speaker.name;
  document.getElementById('modalSpeakerTitle').textContent = speaker.title;
  document.getElementById('modalSpeakerCompany').textContent = speaker.company;
  document.getElementById('modalSpeakerBio').textContent = speaker.bio;
  document.getElementById('modalTwitter').href = '#';
  document.getElementById('modalLinkedIn').href = '#';
  
  modal.classList.add('active');
  document.body.style.overflow = 'hidden';
}

function closeSpeakerModal() {
  const modal = document.getElementById('speakerModal');
  modal.classList.remove('active');
  document.body.style.overflow = 'auto';
}

// Close modal when clicking outside
document.getElementById('speakerModal').addEventListener('click', (e) => {
  if (e.target.id === 'speakerModal') {
    closeSpeakerModal();
  }
});

// Close modal with escape key
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeSpeakerModal();
  }
});

// Schedule section
function setupSchedule() {
  showScheduleDay(1);
}

function showScheduleDay(day) {
  currentScheduleDay = day;
  const scheduleContent = document.getElementById('scheduleContent');
  const tabBtns = document.querySelectorAll('.tab-btn');
  
  // Update active tab
  tabBtns.forEach((btn, index) => {
    btn.classList.toggle('active', index + 1 === day);
  });
  
  // Clear previous content
  scheduleContent.innerHTML = '';
  
  // Add schedule items for the day
  scheduleData[day].forEach((item, index) => {
    const scheduleItem = document.createElement('div');
    scheduleItem.className = 'schedule-item fade-in';
    scheduleItem.style.animationDelay = `${index * 0.1}s`;
    
    scheduleItem.innerHTML = `
      <div class="schedule-time">
        <i class="fas fa-clock"></i>
        ${item.time}
      </div>
      <div class="schedule-details">
        <div class="schedule-type ${item.type}">${item.type}</div>
        <h3 class="schedule-title">${item.title}</h3>
        ${item.speaker ? `<p class="schedule-speaker">Speaker: ${item.speaker}</p>` : ''}
        <p class="schedule-description">${item.description}</p>
      </div>
    `;
    
    scheduleContent.appendChild(scheduleItem);
  });
  
  // Trigger animations
  setTimeout(() => {
    scheduleContent.querySelectorAll('.fade-in').forEach(el => el.classList.add('visible'));
  }, 100);
}

// Testimonials section
function setupTestimonials() {
  showTestimonial(0);
  createTestimonialDots();
  
  // Auto-rotate testimonials
  setInterval(() => {
    nextTestimonial();
  }, 5000);
}

function showTestimonial(index) {
  const testimonial = testimonials[index];
  const content = document.getElementById('testimonialContent');
  
  content.innerHTML = `
    <div class="testimonial-text">"${testimonial.content}"</div>
    <div class="testimonial-author">
      <img src="${testimonial.avatar}" alt="${testimonial.name}" class="testimonial-avatar">
      <div class="testimonial-info">
        <h4>${testimonial.name}</h4>
        <p>${testimonial.title} at ${testimonial.company}</p>
      </div>
    </div>
  `;
  
  updateTestimonialDots(index);
}

function createTestimonialDots() {
  const dotsContainer = document.getElementById('testimonialDots');
  dotsContainer.innerHTML = '';
  
  testimonials.forEach((_, index) => {
    const dot = document.createElement('div');
    dot.className = 'dot';
    dot.onclick = () => {
      currentTestimonialIndex = index;
      showTestimonial(index);
    };
    dotsContainer.appendChild(dot);
  });
}

function updateTestimonialDots(activeIndex) {
  const dots = document.querySelectorAll('.dot');
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === activeIndex);
  });
}

function nextTestimonial() {
  currentTestimonialIndex = (currentTestimonialIndex + 1) % testimonials.length;
  showTestimonial(currentTestimonialIndex);
}

function prevTestimonial() {
  currentTestimonialIndex = (currentTestimonialIndex - 1 + testimonials.length) % testimonials.length;
  showTestimonial(currentTestimonialIndex);
}

// Registration form
function setupRegistrationForm() {
  const form = document.getElementById('registrationForm');
  
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    if (validateForm()) {
      const submitBtn = document.getElementById('submitBtn');
      const originalText = submitBtn.innerHTML;
      
      // Show loading state
      submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
      submitBtn.disabled = true;
      
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      // Show success message
      document.querySelector('.registration-content').style.display = 'none';
      document.getElementById('successMessage').classList.remove('hidden');
      
      // Reset button
      submitBtn.innerHTML = originalText;
      submitBtn.disabled = false;
    }
  });
}

function validateForm() {
  const name = document.getElementById('name');
  const email = document.getElementById('email');
  const phone = document.getElementById('phone');
  
  let isValid = true;
  
  // Clear previous errors
  clearErrors();
  
  // Validate name
  if (!name.value.trim()) {
    showError('name', 'Name is required');
    isValid = false;
  }
  
  // Validate email
  if (!email.value.trim()) {
    showError('email', 'Email is required');
    isValid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    showError('email', 'Please enter a valid email address');
    isValid = false;
  }
  
  // Validate phone
  if (!phone.value.trim()) {
    showError('phone', 'Phone number is required');
    isValid = false;
  } else if (!/^\+?[\d\s-()]{10,}$/.test(phone.value)) {
    showError('phone', 'Please enter a valid phone number');
    isValid = false;
  }
  
  return isValid;
}

function showError(fieldName, message) {
  const field = document.getElementById(fieldName);
  const errorDiv = document.getElementById(fieldName + 'Error');
  
  field.classList.add('error');
  errorDiv.textContent = message;
  errorDiv.classList.add('show');
}

function clearErrors() {
  const fields = ['name', 'email', 'phone'];
  fields.forEach(field => {
    const input = document.getElementById(field);
    const error = document.getElementById(field + 'Error');
    
    input.classList.remove('error');
    error.classList.remove('show');
    error.textContent = '';
  });
}

function resetForm() {
  document.getElementById('registrationForm').reset();
  document.querySelector('.registration-content').style.display = 'grid';
  document.getElementById('successMessage').classList.add('hidden');
  clearErrors();
}

// Scroll animations
function setupScrollAnimations() {
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, observerOptions);
  
  // Observe all fade-in elements
  document.querySelectorAll('.fade-in').forEach(el => {
    observer.observe(el);
  });
}

// Back to top button
function setupBackToTop() {
  const backToTopBtn = document.getElementById('backToTop');
  
  window.addEventListener('scroll', () => {
    if (window.pageYOffset > 300) {
      backToTopBtn.classList.remove('hidden');
    } else {
      backToTopBtn.classList.add('hidden');
    }
  });
  
  backToTopBtn.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
}

// Newsletter form
document.querySelector('.newsletter-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = e.target.querySelector('input[type="email"]').value;
  if (email) {
    alert('Thank you for subscribing to our newsletter!');
    e.target.reset();
  }
})

Final Output:

event-conference-website-template-with-html-css-javascript.gif
Read AlsoCreate a Tyre Fitting Landing Page using HTML, CSS, and JavaScript (Source Code).webpCreate a Tyre Fitting Landing Page using HTML, CSS, and JavaScript (Source Code)

Conclusion:

You have now created a modern event/conference website template using HTML, CSS, and JavaScript. This site is responsive, stylish, and ready for you to customize with your event details, images, and branding. You can add more sections, like FAQs, to make it complete.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: event website template with html css javascript, conference website code using html css js, modern event landing page design, create event site frontend, responsive event template with javascript, event website, conference template, event template
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺