Sure, I can help you with that. Here's a small HTML code with CSS to demonstrate the topic of "service areas" using interactive CSS and JS:
HTML:
html
Service Areas
Service Areas
Welcome to our service areas page. Please hover over the areas on the map to see more information.
New York
Los Angeles
Chicago
CSS (styles.css):
css
body {
font-family: Arial, sans-serif;
text-align: center;
}
#map {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.area {
padding: 10px;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}
#area1 {
background-color: #FF5733;
}
#area2 {
background-color: #33FFA8;
}
#area3 {
background-color: #3366FF;
}
.area:hover {
transform: scale(1.1);
}
JavaScript (script.js):
javascript
document.getElementById('area1').addEventListener('mouseover', function() {
alert('Service area: New York. Population: 8.4 million');
});
document.getElementById('area2').addEventListener('mouseover', function() {
alert('Service area: Los Angeles. Population: 3.9 million');
});
document.getElementById('area3').addEventListener('mouseover', function() {
alert('Service area: Chicago. Population: 2.7 million');
});
This code creates a simple web page with a map and interactive CSS and JS to display information about different service areas.