Ashoka Projects - Nearby Attractions
/* Base Styles */
.attractions-accordion {
max-width: 800px;
margin: 20px auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.attraction-item {
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.attraction-item:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transform: translateY(-3px);
}
.attraction-header {
padding: 15px 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.attraction-header::after {
content: '+';
font-size: 20px;
font-weight: bold;
transition: all 0.3s ease;
}
.attraction-header.active::after {
content: '-';
transform: rotate(180deg);
}
.attraction-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #fff;
}
.attraction-content-inner {
padding: 0 20px;
}
.attraction-content.active {
max-height: 200px;
padding: 15px 0;
}
.location-icon {
display: inline-block;
width: 24px;
height: 24px;
background-color: #2c7be5;
color: white;
border-radius: 50%;
text-align: center;
line-height: 24px;
margin-right: 10px;
}
/* Hover Effects */
.attraction-item:nth-child(1):hover .attraction-header {
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
color: white;
}
.attraction-item:nth-child(2):hover .attraction-header {
background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
color: white;
}
.attraction-item:nth-child(3):hover .attraction-header {
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
color: white;
}
.attraction-item:nth-child(4):hover .attraction-header {
background: linear-gradient(135deg, #ffc3a0 0%, #ffafbd 100%);
color: white;
}
.attraction-item:nth-child(5):hover .attraction-header {
background: linear-gradient(135deg, #a6c1ee 0%, #fbc2eb 100%);
color: white;
}
.attraction-item:nth-child(6):hover .attraction-header {
background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
color: white;
}
.attraction-item:nth-child(7):hover .attraction-header {
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
color: white;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.attraction-header {
padding: 12px 15px;
}
.location-icon {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.attraction-header::after {
font-size: 16px;
}
}
/* Animation for content */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.attraction-content.active .attraction-content-inner {
animation: fadeIn 0.3s ease-out;
}
Top Nearby Attractions
The upcoming Machilipatnam Port is set to become a major economic hub, bringing new opportunities and infrastructure development to the region. Just a short drive from Venture, this port will enhance connectivity and boost local growth.
Enjoy the lush greenery and peaceful environment of Avenue Plantation, perfect for morning walks and weekend relaxation with family. A nature lover's paradise right near your doorstep.
Gudivada offers all urban amenities including shopping centers, hospitals, and educational institutions just 15 minutes from Venture. Perfect for your daily needs and convenience.
The nearby Engineering College on Nimmaluru Road makes Venture an ideal location for students and faculty members. Quality education is just around the corner.
BEL, a premier defense electronics company, is just 15 minutes away, making Venture a preferred residential choice for professionals working in this prestigious organization.
The bustling Benz Circle in Vijayawada with its commercial centers, entertainment zones, and dining options is easily accessible from Venture, just 30 minutes away.
Gannavaram International Airport connects you to major cities across India and select international destinations. Just 45 minutes from Venture, travel becomes convenient and hassle-free.
document.querySelectorAll('.attraction-header').forEach(header => {
header.addEventListener('click', () => {
const item = header.parentElement;
const content = header.nextElementSibling;
// Close all other items
document.querySelectorAll('.attraction-item').forEach(otherItem => {
if (otherItem !== item) {
otherItem.querySelector('.attraction-header').classList.remove('active');
otherItem.querySelector('.attraction-content').classList.remove('active');
}
});
// Toggle current item
header.classList.toggle('active');
content.classList.toggle('active');
});
});
