메인페이지
<!--버튼 2줄 노출 -->
<style>
.collection_block_button{
display: flex;
}
.slide_button{
display: grid;
position: relative;
width: 100%;
/*한 줄에 노출될 카드의 개수 repeat(노출될 카드 개수,비율(고정)) */
grid-template-columns: repeat(2, 1fr);
padding-top: 16px;
padding-bottom: 4px;
margin: 0 auto; /* 중앙 정렬 */
}
.img_item:hover{
filter: brightness(0.8);
}
.collection_item_button{
display: block;
overflow: hidden;
transition: background 100ms ease-out;
position: static;
width: 100%;
height: 100%;
background-color: white;
border: none;
}
</style>
HTML
복사
<div class="collection_block_button">
<div class="slide_button">
<button type="button" onclick="location.href='https://wannago.oopy.io/why/rodlsdugod' " class="collection_item_button">
<img class="img_item" loading="lazy" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F4b5a1344-97af-45c5-906f-ea5417e9ed9e%2FFrame_514809.png&blockId=a81b3393-52c7-4176-9b92-1ad25514049a" style="width: 100%; height: 100%;"></button>
<button type="button" onclick="location.href='https://wannago.oopy.io/qlry' " class="collection_item_button">
<img class="img_item" loading="lazy" src="https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F8bd29f6b-0031-47f3-82f6-295996517cd3%2FFrame_514810.png&blockId=a1942a01-3904-4890-a7aa-6e4d392352e7" style="width: 100%; height: 100%;"></button>
</div>
</div>
</div>
HTML
복사
