BASIC CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formal Interactive Social Icons</title>
<style>
body {
background-color: #f7f3e8;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
font-family: 'Georgia', serif;
color: #333333;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
}
.social-icons-container {
display: flex;
gap: 50px;
padding: 30px;
background: #ffffff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
.icon-item {
cursor: pointer;
height: 80px;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: #ffffff;
transition: all 0.3s ease-in-out;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}
.icon-item img {
height: 45px;
width: 45px;
transition: transform 0.3s ease-in-out;
}
.icon-item:hover {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
}
.icon-item:hover img {
transform: scale(1.1);
}
.info-display {
width: 80%;
max-width: 600px;
padding: 25px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
text-align: center;
border-left: 5px solid #cccccc;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.info-display.active {
opacity: 1;
transform: translateY(0);
}
#network-title {
font-size: 1.8em;
margin-top: 0;
margin-bottom: 10px;
color: #000000;
}
#network-info {
font-size: 1.1em;
line-height: 1.6;
color: #555555;
}
</style>
</head>
<body>
<div class="main-container">
<div class="social-icons-container">
<div class="icon-item" data-network="Instagram"
data-info="Instagram is a visual platform focused on photo and video sharing. Great for building brand aesthetics and direct engagement."
data-color="#E4405F">
<img src="https://cdn-icons-png.flaticon.com/128/2111/2111463.png" alt="Instagram Icon">
</div>
<div class="icon-item" data-network="Twitter (X)"
data-info="Twitter (X) is a microblogging service for real-time news, short updates, and public conversations. Essential for immediate communication."
data-color="#1DA1F2">
<img src="https://cdn-icons-png.flaticon.com/128/733/733579.png" alt="Twitter Icon">
</div>
<div class="icon-item" data-network="Facebook"
data-info="Facebook is the largest social network, used for community building, long-form content, and targeted advertising to broad demographics."
data-color="#4267B2">
<img src="https://cdn-icons-png.flaticon.com/128/145/145802.png" alt="Facebook Icon">
</div>
</div>
<div id="info-display" class="info-display">
<h2 id="network-title"></h2>
<p id="network-info"></p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const iconItems = document.querySelectorAll('.icon-item');
const infoDisplay = document.getElementById('info-display');
const networkTitle = document.getElementById('network-title');
const networkInfo = document.getElementById('network-info');
iconItems.forEach(icon => {
icon.addEventListener('click', function() {
// 1. Get Data from the clicked icon
const network = this.getAttribute('data-network');
const info = this.getAttribute('data-info');
const color = this.getAttribute('data-color');
// 2. Hide current information first (to reset the animation)
infoDisplay.classList.remove('active');
// 3. Update the content
networkTitle.textContent = network;
networkInfo.textContent = info;
// 4. Update formal design elements (color)
networkTitle.style.color = color;
infoDisplay.style.borderLeftColor = color;
// 5. Add 'jump' effect (using a small delay to trigger the transition)
setTimeout(() => {
infoDisplay.classList.add('active');
}, 10);
});
});
});
</script>
</body>
</html>