body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
scroll-behavior: smooth;
line-height: 1.6;
}
header {
background-color: #3b5998;
color: white;
padding: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
header h1 {
font-size: 2em;
margin-bottom: 10px;
font-weight: bold;
}
/* Dark Mode Button */
.dark-mode-toggle {
background-color: #3b5998;
border: none;
color: white;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
transition: background-color 0.3s;
}
.dark-mode-toggle:hover {
background-color: #2d4373;
}
/* Team Section */
.team {
padding: 40px 20px;
background-color: #ffffff;
max-width: 1200px;
margin: auto;
display: flex; /* Make team section a flex container */
gap: 40px; /* Space between the menu and the member display */
}
/* Vertical Menu Styles */
.menu {
flex: 1; /* Allow menu to take space */
display: flex;
flex-direction: column;
gap: 20px; /* Space between menu items */
}
.team-member {
background-color: #fff;
padding: 15px;
text-align: center;
border: 1px solid #ddd;
width: 250px; /* Smaller card width */
border-radius: 10px;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}
.team-member:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Member Display Styles */
.member-display {
flex: 2; /* Allow member display to take more space */
display: flex;
flex-direction: row;
align-items: center;
gap: 20px; /* Space between image and content */
}
/* Image Styles */
#memberImage {
max-width: 150px; /* Smaller image size */
border-radius: 50%;
}
/* Description and Button Styles */
.description {
font-size: 14px; /* Smaller font size */
color: #333;
max-width: 400px; /* Limit width of description */
display: none;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.description.show {
display: block;
opacity: 1;
}
.nav-button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 24px;
transition: color 0.3s;
}
.nav-button:hover {
color: #3b5998;
}
/* Description Toggle Button */
.toggle-description {
background-color: #3b5998;
border: none;
color: white;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
transition: background-color 0.3s;
}
.toggle-description:hover {
background-color: #2d4373;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Dark Mode Styles */
body.dark-mode {
background-color: #111;
color: #f4f4f4;
}
body.dark-mode .team {
background-color: #222;
}
body.dark-mode .team-member {
background-color: #333;
color: #f4f4f4;
border-color: #444;
}
body.dark-mode header {
background-color: #222;
}
body.dark-mode .dark-mode-toggle,
body.dark-mode .toggle-description {
background-color: #444;
}
body.dark-mode .dark-mode-toggle:hover,
body.dark-mode .toggle-description:hover {
background-color: #666;
}
body.dark-mode .description {
color: #f4f4f4;
}
</style>
<!-- Team Section -->
<section id="team" class="team">
<!-- Vertical Menu -->
<div class="menu">
<div class="team-member" onclick="showMember(0)">
<h3>Director of Engineering</h3>
</div>
<div class="team-member" onclick="showMember(1)">
<h3>Chief Executive Officer</h3>
</div>
<div class="team-member" onclick="showMember(2)">
<h3>Marketing Director</h3>
</div>
<div class="team-member" onclick="showMember(3)">
<h3>Chief Technology Officer</h3>
</div>
<div class="team-member" onclick="showMember(4)">
<h3>Operations Director</h3>
</div>
</div>
<!-- Member Display -->
<div class="member-display">
<img id="memberImage" src="https://i.ibb.co/YhQXRfh/20240829-203922.jpg" alt="Team Member">
<div>
<div class="description" id="memberDescription">
Director of Engineering: Responsible for overseeing engineering teams.
</div>
<div>
<button class="nav-button prev" onclick="changeMember(-1)">❮</button>
<button class="nav-button next" onclick="changeMember(1)">❯</button>
<button class="toggle-description" onclick="toggleDescription()">Toggle Description</button>
</div>
</div>
</div>
</section>
<script>
const teamMembers = [
{
src: "https://i.ibb.co/YhQXRfh/20240829-203922.jpg",
description: "As the Director of Engineering, I lead the engineering department, ensuring that our projects are delivered on time and meet quality standards. With over 10 years of experience in software development and team management, I am passionate about building high-performing teams and innovative solutions that drive our company forward."
},
{
src: "https://i.ibb.co/qsYZV9t/20240829-203932.jpg",
description: "As the Chief Executive Officer, I am responsible for setting the overall vision and strategic direction of the company. My role involves collaborating with the leadership team to drive growth and foster a culture of innovation. With over 15 years in executive roles, I prioritize stakeholder engagement and customer satisfaction."
},
{
src: "https://i.ibb.co/KyLJNsk/20240829-203936.jpg",
description: "As the Marketing Director, I manage our marketing initiatives, focusing on brand development and customer outreach. I have a passion for storytelling and use data-driven strategies to enhance our market presence. With a decade of experience in various marketing roles, I work to ensure that our message resonates with our target audience."
},
{
src: "https://i.postimg.cc/rw6th8vr/20240831-153056.jpg",
description: "In my role as Chief Technology Officer, I oversee the company's technological advancements and product development. With a strong background in software engineering and a knack for innovation, I strive to leverage technology to enhance our product offerings. My goal is to ensure that our technology roadmap aligns with business objectives."
},
{
src: "https://i.postimg.cc/HsGYDc1s/20240912-065756.jpg",
description: "As the Operations Director, I focus on streamlining our day-to-day operations and ensuring efficiency across departments. My background in project management allows me to implement effective processes and improve collaboration among teams. With a commitment to operational excellence, I work to ensure that our resources are utilized effectively."
}
];
let currentIndex = 0;
function showMember(index) {
currentIndex = index;
const member = teamMembers[currentIndex];
document.getElementById('memberImage').src = member.src;
document.getElementById('memberDescription').innerText = member.description;
document.getElementById('memberDescription').classList.remove('show');
}
function changeMember(direction) {
currentIndex += direction;
if (currentIndex < 0) {
currentIndex = teamMembers.length - 1;
} else if (currentIndex >= teamMembers.length) {
currentIndex = 0;
}
showMember(currentIndex);
}
function toggleDescription() {
const descriptionElement = document.getElementById('memberDescription');
descriptionElement.classList.toggle('show'); // Toggle visibility
}
function toggleDarkMode() {
document.body.classList.toggle('dark-mode'); // Toggle dark mode class
}
// Initialize the first team member display
showMember(currentIndex);
</script>
Offline Notepad
View raw