* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #8B0000 0%, #764ba2 100%);
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
padding: 50px 40px;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.header {
text-align: center;
margin-bottom: 40px;
}
.header h1 {
color: #2c3e50;
font-size: 36px;
margin-bottom: 10px;
}
.header p {
color: #7f8c8d;
font-size: 16px;
}
.accordion {
display: flex;
flex-direction: column;
gap: 12px;
}
.accordion-item {
border: 2px solid #e9ecef;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
}
.accordion-item:hover {
border-color: #3498db;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
}
.accordion-item.active {
border-color: #3498db;
}
.accordion-header {
background: white;
padding: 20px 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: background 0.3s ease;
user-select: none;
}
.accordion-header:hover {
background: #f8f9fa;
}
.accordion-item.active .accordion-header {
background: #f8f9fa;
}
.accordion-title {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.accordion-icon {
width: 40px;
height: 40px;
background: #e3f2fd;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.accordion-icon ion-icon {
font-size: 22px;
color: #3498db;
}
.accordion-text {
flex: 1;
}
.accordion-text h3 {
color: #2c3e50;
font-size: 18px;
font-weight: 600;
margin-bottom: 4px;
}
.accordion-text p {
color: #7f8c8d;
font-size: 14px;
}
.accordion-toggle {
width: 32px;
height: 32px;
background: #e3f2fd;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.accordion-toggle ion-icon {
font-size: 20px;
color: #3498db;
transition: transform 0.3s ease;
}
.accordion-item.active .accordion-toggle {
background: #3498db;
}
.accordion-item.active .accordion-toggle ion-icon {
color: white;
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.accordion-body {
padding: 0 24px 20px 76px;
color: #5a6c7d;
font-size: 15px;
line-height: 1.8;
}
.accordion-body ul {
margin: 12px 0;
padding-left: 20px;
}
.accordion-body li {
margin-bottom: 8px;
}
.accordion-body strong {
color: #2c3e50;
}
.feature-tag {
display: inline-block;
background: #e8f5e9;
color: #2e7d32;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 10px;
margin-right: 8px;
}
.controls {
display: flex;
gap: 12px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.control-btn {
padding: 10px 20px;
background: #3498db;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.control-btn:hover {
background: #2980b9;
transform: translateY(-1px);
}
.control-btn:active {
transform: translateY(0);
}
.control-btn.secondary {
background: #95a5a6;
}
.control-btn.secondary:hover {
background: #7f8c8d;
}
@media (max-width: 768px) {
.container {
padding: 30px 20px;
}
.header h1 {
font-size: 28px;
}
.accordion-header {
padding: 16px 18px;
}
.accordion-body {
padding: 0 18px 16px 18px;
}
.accordion-text h3 {
font-size: 16px;
}
.controls {
flex-direction: column;
}
.control-btn {
width: 100%;
justify-content: center;
}
}
// Accordion data
const accordionData = [
{
icon: 'code-slash-outline',
title: 'Web Development',
subtitle: 'Frontend & Backend Technologies',
tag: 'Popular',
content: `
<p>Comprehensive web development services covering modern frameworks and technologies.</p>
<ul>
<li><strong>Frontend:</strong> React, Vue, Angular, HTML5, CSS3</li>
<li><strong>Backend:</strong> Node.js, Python, PHP, Ruby</li>
<li><strong>Database:</strong> MySQL, MongoDB, PostgreSQL</li>
<li><strong>Cloud:</strong> AWS, Azure, Google Cloud</li>
</ul>
<p>We build scalable, performant web applications tailored to your needs.</p>
`
},
{
icon: 'phone-portrait-outline',
title: 'Mobile Development',
subtitle: 'iOS & Android Applications',
tag: 'Trending',
content: `
<p>Native and cross-platform mobile app development for all devices.</p>
<ul>
<li><strong>Native:</strong> Swift (iOS), Kotlin (Android)</li>
<li><strong>Cross-platform:</strong> React Native, Flutter</li>
<li><strong>Features:</strong> Push notifications, In-app purchases, Analytics</li>
<li><strong>Testing:</strong> Automated testing, Beta testing</li>
</ul>
<p>From concept to deployment, we handle the entire mobile development lifecycle.</p>
`
},
{
icon: 'color-palette-outline',
title: 'UI/UX Design',
subtitle: 'User Interface & Experience',
tag: 'Creative',
content: `
<p>Beautiful, intuitive designs that delight users and drive engagement.</p>
<ul>
<li><strong>Research:</strong> User interviews, Competitive analysis</li>
<li><strong>Design:</strong> Wireframes, Prototypes, Visual design</li>
<li><strong>Testing:</strong> Usability testing, A/B testing</li>
<li><strong>Tools:</strong> Figma, Sketch, Adobe XD</li>
</ul>
<p>We create user-centered designs that balance aesthetics with functionality.</p>
`
},
{
icon: 'shield-checkmark-outline',
title: 'Security & Testing',
subtitle: 'Quality Assurance & Protection',
tag: 'Essential',
content: `
<p>Comprehensive security audits and testing to protect your applications.</p>
<ul>
<li><strong>Security:</strong> Penetration testing, Vulnerability assessment</li>
<li><strong>QA:</strong> Manual testing, Automated testing</li>
<li><strong>Performance:</strong> Load testing, Stress testing</li>
<li><strong>Compliance:</strong> GDPR, HIPAA, SOC 2</li>
</ul>
<p>Ensure your applications are secure, reliable, and compliant.</p>
`
},
{
icon: 'analytics-outline',
title: 'Data Analytics',
subtitle: 'Business Intelligence & Insights',
tag: 'Advanced',
content: `
<p>Transform your data into actionable insights with advanced analytics.</p>
<ul>
<li><strong>Analytics:</strong> Predictive modeling, Machine learning</li>
<li><strong>Visualization:</strong> Dashboards, Reports, Charts</li>
<li><strong>Tools:</strong> Tableau, Power BI, Google Analytics</li>
<li><strong>Integration:</strong> API connections, Data pipelines</li>
</ul>
<p>Make data-driven decisions with our comprehensive analytics solutions.</p>
`
},
{
icon: 'headset-outline',
title: 'Support & Maintenance',
subtitle: '24/7 Technical Support',
tag: 'Premium',
content: `
<p>Ongoing support and maintenance to keep your applications running smoothly.</p>
<ul>
<li><strong>Support:</strong> 24/7 monitoring, Incident response</li>
<li><strong>Updates:</strong> Security patches, Feature updates</li>
<li><strong>Optimization:</strong> Performance tuning, Code refactoring</li>
<li><strong>Documentation:</strong> Technical docs, User guides</li>
</ul>
<p>We're here to support you every step of the way.</p>
`
}
];
// Create accordion items
function createAccordion() {
const accordion = document.getElementById('accordion');
accordionData.forEach((item, index) => {
const accordionItem = document.createElement('div');
accordionItem.className = 'accordion-item';
accordionItem.setAttribute('data-index', index);
accordionItem.innerHTML = `
<div class="accordion-header">
<div class="accordion-title">
<div class="accordion-icon">
<ion-icon name="${item.icon}"></ion-icon>
</div>
<div class="accordion-text">
<h3>
<span class="feature-tag">${item.tag}</span>
${item.title}
</h3>
<p>${item.subtitle}</p>
</div>
</div>
<div class="accordion-toggle">
<ion-icon name="chevron-down-outline"></ion-icon>
</div>
</div>
<div class="accordion-content">
<div class="accordion-body">
${item.content}
</div>
</div>
`;
accordion.appendChild(accordionItem);
});
}
// Toggle accordion item
function toggleAccordion(item) {
const content = item.querySelector('.accordion-content');
const isActive = item.classList.contains('active');
if (isActive) {
// Close
item.classList.remove('active');
content.style.maxHeight = null;
} else {
// Open
item.classList.add('active');
content.style.maxHeight = content.scrollHeight + 'px';
}
}
// Expand all items
function expandAll() {
const items = document.querySelectorAll('.accordion-item');
items.forEach(item => {
const content = item.querySelector('.accordion-content');
item.classList.add('active');
content.style.maxHeight = content.scrollHeight + 'px';
});
}
// Collapse all items
function collapseAll() {
const items = document.querySelectorAll('.accordion-item');
items.forEach(item => {
const content = item.querySelector('.accordion-content');
item.classList.remove('active');
content.style.maxHeight = null;
});
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
createAccordion();
// Add click event listeners to accordion headers
const accordion = document.getElementById('accordion');
accordion.addEventListener('click', (e) => {
const header = e.target.closest('.accordion-header');
if (header) {
const item = header.closest('.accordion-item');
toggleAccordion(item);
}
});
// Add keyboard support
accordion.addEventListener('keydown', (e) => {
const header = e.target.closest('.accordion-header');
if (header && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault();
const item = header.closest('.accordion-item');
toggleAccordion(item);
}
});
// Make headers focusable
const headers = document.querySelectorAll('.accordion-header');
headers.forEach(header => {
header.setAttribute('tabindex', '0');
header.setAttribute('role', 'button');
header.setAttribute('aria-expanded', 'false');
});
// Control buttons
document.getElementById('expandAll').addEventListener('click', expandAll);
document.getElementById('collapseAll').addEventListener('click', collapseAll);
// Update aria-expanded on toggle
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'class') {
const item = mutation.target;
const header = item.querySelector('.accordion-header');
const isActive = item.classList.contains('active');
header.setAttribute('aria-expanded', isActive);
}
});
});
document.querySelectorAll('.accordion-item').forEach(item => {
observer.observe(item, { attributes: true });
});
});
// Recalculate max-height on window resize
window.addEventListener('resize', () => {
const activeItems = document.querySelectorAll('.accordion-item.active');
activeItems.forEach(item => {
const content = item.querySelector('.accordion-content');
content.style.maxHeight = content.scrollHeight + 'px';
});
});
No comments yet. Be the first!