| layout | title | description | hide |
|---|---|---|---|
base |
Home |
Home Page |
true |
nav li {
float: left;
position: relative;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: all 0.3s ease;
font-weight: bold;
}
nav li a:hover {
background-color: #155f91;
transform: scale(1.1);
}
/* Submenu CSS */
nav ul ul {
display: none;
position: absolute;
background-color: #155f91;
top: 100%;
left: 0;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: all 0.3s ease;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
transform: translateY(10px);
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul a {
padding: 10px 16px;
}
/* Add transition effect to submenu items */
nav ul ul li a:hover {
background-color: #15935d;
transform: translateX(10px);
}
/* Adding hover effects and shadow to GIF */
img {
transition: transform 0.3s ease;
border-radius: 12px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
img:hover {
transform: scale(1.05);
}
/* Spotify iframe effects */
iframe {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
iframe:hover {
transform: scale(1.03);
}
/* Adding a cool hover effect for menu links */
nav li a:before {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: white;
bottom: 0;
left: 0;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease-out;
}
nav li a:hover:before {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>
