<body>
<div class="collapse-content">
<div class="collapse" id="summer">
<a class="summer" href="#summer">
<img src="https://lh3.googleusercontent.com/pw/ACtC-3e_sSKCP7GiyswRk4MozVacE6Hp5ltmaZ9VN5c0G1mq803qfzqFGMcLfXHcu_dj-oE7bkTmMboSl8Tgt_NLuZ0xqP-0juHFcr226vBwsxEyLmgyornGSaXSF7ER-DqtwlDybIeq0_pl_VFltYtRyRjd=s64-no" alt="summer season" />
<h4>Summer sounds</h4>
</a>
<div class="content">
<div class="inner-content">
<figure>
<figcaption>Creek flowing in forest, summer, insects, loud cicada, Australia</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-25674/zapsplat_nature_creek_flowing_forest_insects_loud_cicada_australia_27780.mp3?_=1">
</audio>
</figure>
<figure>
<figcaption>Crickets, summertime, early morning</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-kevin-boucher/kevin_boucher_animals_insects_crickets_morning_summer.mp3?_=1">
</audio>
</figure>
<figure>
<figcaption>Forest ambience, strong wind in trees, insects</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-27787/zapsplat_nature_ambience_forest_elevated_lookout_summer_strong_wind_trees_insects_cicada_close_by_and_dist_27862.mp3?_=1">
</audio>
</figure>
</div>
</div>
</div>
<div class="collapse" id="spring">
<a class="spring" href="#spring"> <img src="https://lh3.googleusercontent.com/pw/ACtC-3fu0tbmGggNGqe0LABN04z5wLc0baxhdiTQR1RcpnqWv4sAXkPIh9r-AuI6D-mKdUfbUk1skeGzKvQv9lMVwHy7frz8AvsQ9MV8sIjMYDHOSiNEKqVf-8rgNtgtk9Ng91sGOuMod3zeOotun0SRx8Jr=s64-no" alt="summer season" />
<h4>Spring sounds</h4>
</a>
<div class="content">
<div class="inner-content">
<figure>
<figcaption>African bush ambience by a river</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-smartsound/smartsound_ATMO_BUSH_River_Dawn_Bird_Close_01.mp3?_=1">
</audio>
</figure>
<figure>
<figcaption>Ambience, Mali, birds and light wind</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-felix-blume/felix_blume_ambience_african_bush_mali_birds_light_wind.mp3?_=1">
</audio>
</figure>
<figure>
<figcaption>Birds, woodpecker, other birds, forest, early spring</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-audio-hero/audio_hero_ForestEurope_DIGIC14-14.mp3?_=1">
</audio>
</figure>
</div>
</div>
</div>
<div class="collapse" id="autumn">
<a class="autumn" href="#autumn"> <img src="https://lh3.googleusercontent.com/pw/ACtC-3dvMaDTU56O1fAQP6MZUWgIPxWPjF0O58z4D27wwchy1XQyNK9SObBHKHCFpq5hXIKYwEnABaBVm1OwHab_S3Dbe2ap7ne4NtuhpJoyhjs1Sazbm1HvXhFYsreihVsQpzdLycBRoxC_ULjMlyBrYPwv=s64-no" alt="summer season" />
<h4>Autumn sounds</h4>
</a>
<div class="content">
<div class="inner-content">
<figure>
<figcaption>Forest autumn ambience, wind in trees and leaves fall to ground</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-18146/zapsplat_nature_forest_ambience_wind_trees_birds_leaves_fall_to_ground_autumn_20090.mp3?_=1">
</audio>
</figure>
<figure>
<figcaption>Rainforest in autumn, wind, leaves falling, birds </figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-five/zapsplat_nature_ambience_rainforest_australia_autumn_wind_leaves_fall_birds_001.mp3?_=1">
</audio>
</figure>
<figure>
<figcaption>Park ambience, children in distance, wind in trees</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-four/ambience_public_place_park_school_playground_children_distance_autumn_wind_trees.mp3?_=1">
</audio>
</figure>
</div>
</div>
</div>
<div class="collapse" id="winter">
<a class="winter" href="#winter"><img src="https://lh3.googleusercontent.com/pw/ACtC-3f3H6zPWR6dWzIx4KaMBd4RE7HXZOAtD-nr9F4ZNvOfLhg2w3MVXjY2O1PjwfiE_bapKQRtEnbFE8H8GqSwuLgrEz6oRXSzKEVi9R9zY9gXgh0ueFYARijuZMO2nelwqKSOgNTE9KMivnRdUaNQD_at=s64-no" alt="summer season" />
<h4>Winter sounds</h4>
</a>
<div class="content">
<div class="inner-content">
<figure>
<figcaption>Sleet and freezing rain falling with thunder</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-kevin-boucher/kevin_boucher_nature_sleet_freezing_rain_thunder.mp3?_=1">
</audio>
</figure>
<figure>
<figcaption>Winter traffic, cold, slush</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-west-wolf/west_wolf_Winter_Slush_Traffic.mp3?_=1">
</audio>
</figure>
<figure>
<figcaption>Late winter, cold air rumble, some wind rustle in frozen trees</figcaption>
<audio controls src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-articulated/articulated_WINTER%20Forest%20afternoon%20slight%20breeze%20with%20sparse%20crow%20and%20birds%20North%20Laurentian%20Woods%20Canada_LOOPLR.mp3?_=1">
</audio>
</figure>
</div>
</div>
</div>
</div>
</body>@import url("https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap");
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #1c1d20;
line-height: 1.6;
}
.collapse-content {
width: 50vw;
margin: auto;
display: flex;
flex-direction: column;
}
img {
width: 64px;
border-radius: 20%;
border: 6px solid rgba(0, 0, 0, 0.12);
margin-top: 1em;
}
.collapse a {
display: block;
font-size: 1rem;
font-weight: 500;
padding: 0.9rem 1.8rem;
color: #fff;
position: relative;
}
.collapse a.summer {
background: linear-gradient(90deg, #43c6ac 0%, #f8ffae 100%);
border-left: 12px groove rgba(207, 207, 207, 0.12);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.collapse a.spring {
background-color: #f9d1b7;
background-image: linear-gradient(315deg, #f9d1b7 0%, #f894a4 74%);
border-left: 12px solid rgba(207, 207, 207, 0.12);
}
.collapse a.autumn {
background: linear-gradient(90deg, #556270 0%, #ff8888 74%);
border-left: 12px solid rgba(207, 207, 207, 0.5);
}
.collapse a.winter {
background-color: #ffffff;
background-image: linear-gradient(315deg, #cfcfcf 0%, #1b2845 74%);
border-left: 12px groove rgba(207, 207, 207, 0.12);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.collapse a::before {
content: "";
border-top: 7px solid #fff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
position: absolute;
top: 25px;
right: 30px;
}
.inner-content {
padding: 1.8rem;
background: #fffaf0;
}
.content {
max-height: 0;
transition: 0.3s linear 0s;
overflow: hidden;
}
.collapse + .collapse a {
border-top: 1px solid rgba(255, 255, 255, 0.7);
}
h4 {
text-align: left;
font-family: "Arima Madurai", cursive;
font-size: 1.1em;
}
.collapse:target .content {
max-height: 25em;
}
.collapse:target a.winter {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.collapse:target a::before {
transform: rotate(-90deg);
}
figure {
text-align: center;
}
figcaption {
font-family: "Noto Sans KR", sans-serif;
}
audio {
height: 3em;
margin: 0.5em;
border: 10px transparent;
padding: 0.3em;
border-radius: 200px;
background: linear-gradient(to right, #43c6ac, #bcedac);
outline: none;
}
#spring audio {
background: linear-gradient(315deg, #f9d1b7 0%, #f894a4 74%);
}
#autumn audio {
background: linear-gradient(315deg, #ffa69e 0%, #5d4954 74%);
}
#winter audio {
background: linear-gradient(90deg, #3d445a 0%, #859398 100%);
}
@media (max-width: 768px) {
.collapse-content {
width: 80vw;
margin: auto;
}
}
@media (max-width: 425px) {
body {
line-height: 1.3;
}
.collapse-content {
width: 80vw;
}
.inner-content {
padding: 1.2rem;
}
.inner-content h3 {
margin-bottom: 0.3rem;
}
}
@media (max-width: 320px) {
body {
line-height: 1.3;
}
.collapse-content {
width: 80vw;
}
.inner-content {
padding: 0.8rem;
}
.inner-content h3 {
margin-bottom: 0.3rem;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.