“`html

Professional Public Speaker – Home

body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
background: #f8f8f8;
}

/* Header and Navigation */
header {
display: flex;
align-items: center;
background: #333;
color: #fff;
padding: 0 20px;
justify-content: space-between;
}

.logo {
display: flex;
align-items: center;
}

.logo img {
height: 50px;
width: auto;
margin-right: 10px;
}

nav ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}

nav li {
margin: 0 15px;
}

nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
}

nav a:hover {
text-decoration: underline;
}

/* Layout */
.container {
flex: 1;
display: flex;
flex-direction: row;
}

.left-rail {
width: 250px;
background: #eee;
padding: 20px;
box-sizing: border-box;
}

.left-rail h2 {
margin-top: 0;
}

.main-content {
flex: 1;
padding: 20px;
box-sizing: border-box;
}

/* Carousel */
.carousel {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto 40px auto;
overflow: hidden;
border-radius: 4px;
}

.carousel-track {
display: flex;
transition: transform 0.5s ease;
}

.carousel img {
width: 100%;
display: block;
}

.carousel-buttons {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
box-sizing: border-box;
}

.carousel-buttons button {
background: rgba(0,0,0,0.5);
border: none;
color: #fff;
font-size: 18px;
padding: 10px;
cursor: pointer;
}

.carousel-buttons button:hover {
background: rgba(0,0,0,0.7);
}

/* Image Grid */
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
margin-bottom: 40px;
}

.image-grid img {
width: 100%;
height: auto;
display: block;
}

/* Footer */
footer {
background: #333;
color: #fff;
padding: 40px 20px;
}

footer h3 {
margin-top: 0;
}

.contact-form {
max-width: 500px;
margin: 0 auto;
}

.contact-form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.contact-form input,
.contact-form textarea {
width: 100%;
box-sizing: border-box;
margin-bottom: 20px;
padding: 10px;
border: none;
border-radius: 4px;
}

.contact-form button {
background: #fff;
color: #333;
padding: 10px 20px;
border: none;
cursor: pointer;
font-weight: bold;
border-radius: 4px;
}

.contact-form button:hover {
background: #eee;
}

John Doe – Professional Speaker

• Home
• About Me
• Events
• Testimonials
• Contact

«
»

Gallery

// Simple Carousel JavaScript
const track = document.querySelector(‘.carousel-track’);
const slides = Array.from(track.children);
const prevButton = document.querySelector(‘.prev’);
const nextButton = document.querySelector(‘.next’);
let currentSlide = 0;

function showSlide(index) {
if(index = slides.length) index = 0;
track.style.transform = ‘translateX(-‘ + (index * 100) + ‘%)’;
currentSlide = index;
}

prevButton.addEventListener(‘click’, () => {
showSlide(currentSlide – 1);
});

nextButton.addEventListener(‘click’, () => {
showSlide(currentSlide + 1);
});

// Optional: auto-rotate every 5 seconds
setInterval(() => {
showSlide(currentSlide + 1);
}, 5000);

“`