<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=edge"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Document</
title
>
<
style
>
.accordion {
background-color: #f5cdcdbd;
padding: 40px;
}
.accordion-section {
border: 1px solid #ddd;
background-color: #c7ff90;
padding: 20px;
margin-bottom: 30px;
width: 300px;
box-shadow: 0 0 10px rgba(21, 0, 128, 0.1);
transition: box-shadow 0.3s ease;
}
.accordion-section:hover {
box-shadow: 20px -20px 20px rgb(10, 55, 255);
}
.accordion-header {
cursor: pointer;
}
.accordion-content {
font-family: 'Times New Roman', Times, serif;
}
.accordion-section.active .accordion-content {
display: block;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"accordion"
>
<
h1
style
=
"color: green;"
>GeeksforGeeks !</
h1
>
<
div
class
=
"accordion-section"
>
<
div
class
=
"accordion-header"
>
GeeksforGeeks !
</
div
>
<
div
class
=
"accordion-content"
>
Hover effect with box-shadows
</
div
>
</
div
>
<
div
class
=
"accordion-section"
>
<
div
class
=
"accordion-header"
>
GeeksforGeeks
</
div
>
<
div
class
=
"accordion-content"
>
Hover effect with box-shadows
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>