Created
March 9, 2023 05:44
-
-
Save alpaca-honke/8cb87646864d6abda54e768433f3331f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Alkappedia</title> | |
<style> | |
body{ | |
margin: 0; | |
} | |
#overflow{ | |
box-sizing: border-box; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
margin: 0; | |
padding: 15vw; | |
width: 100%; | |
height: 100vh; | |
background-color: #70707062; | |
} | |
#popup{ | |
box-sizing: border-box; | |
margin: 0; | |
padding: 30px; | |
width: 100%; | |
height: 100%; | |
background-color: #ffffff; | |
border-radius: 5px; | |
text-align: center; | |
} | |
#popup:focus-within{ | |
animation: donated 2s; | |
} | |
#buttons{ | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
#donate{ | |
display: inline-block; | |
margin: 20px; | |
padding: 20px; | |
} | |
#no{ | |
display: inline-block; | |
background-color: #e9e9e9; | |
border: solid 1px #000; | |
border-radius: 3px; | |
position: relative; | |
margin: 20px; | |
padding: 20px; | |
} | |
#no:hover #yes{ | |
visibility: visible; | |
} | |
#yes{ | |
visibility: hidden; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
border: 0; | |
} | |
#yes:hover{ | |
visibility: visible; | |
} | |
#yes:focus{ | |
visibility: visible; | |
} | |
@keyframes donated{ | |
50% { | |
margin-top: 100vh; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div id="overflow"> | |
<div id="popup"> | |
<p>ぜひ寄付をお願いします!</p> | |
<div id="buttons"> | |
<button id="donate">寄付する</button> | |
<span id="no">いいえ<button id="yes">はい</button></span> | |
</div> | |
</div> | |
</div> | |
<h1>Alkappedia</h1> | |
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> | |
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> | |
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> | |
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> | |
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment