# 書本模式範例

* [<input type="checkbox"> 隱藏下面的](#)

* [<div class="filter">我又出來了</div>](https://example.com)

<style>
.summary .nav > li > a[href="#"]{
pointer-event: none;
}

#summary:has(input:checked) .filter{
display: none;
}
</style>

## SITCON

* [連結一](https://hackmd.io/@SITCON/H1l3jk7jkl)

* [連結二](https://hackmd.io/@SITCON/BkAJyZs9Wx)

## 毛哥EM

* [毛哥EM資訊密技](https://emtech.cc)

<style>
.summary {
background-color: #191724;
color: #191724;
font-size: 2rem;
font-family: FusionPixelFont12px;
}

.summary .nav > li > a {
color: #908caa;
}

.summary .nav > li > a:focus,
.summary .nav > li > a:hover {
background-color: #1f1d2e;
color: #e0def4;
}

.summary .nav-pills > li.active > a,
.summary .nav-pills > li.active > a:hover,
.summary .nav-pills > li.active > a:focus {
background-color: #26233a;
color: #f6c177;
}

.summary:before {
content: "";
display: block;
width: 100%;
aspect-ratio: 2 / 1;
background-image: url("https://i.imgur.com/Wl2D0h0.png");
background-size: cover;
}

.active::after {
content: "⬅︎";
position: absolute;
right: 10%;
top: 50%;
transform: translate(0%, -60%);
animation: point .5s alternate infinite linear;
color: #f6c177;
font-size: 24px;
}

@keyframes point {
to{
transform: translate(-100%, -60%)
}
}

</style>