Contest HTML
http://1119s.wdfiles.com/local--code/contest-html/1
<html> <head> <meta name="viewport" content="width=480px"> <style> /* Font 'Noto Serif JP' is licensed under the OFL(http://scripts.sil.org/OFL). */ @import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap'); /* Font 'Kaisei Decol' is licensed under the OFL(http://scripts.sil.org/OFL). */ @import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&display=swap'); /* Font 'Kiwi Maru' is licensed under the OFL(http://scripts.sil.org/OFL). */ @import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap'); @import url('https://1119s.wdfiles.com/local--code_/ragged/1'); body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; margin: 0; background: radial-gradient(circle farthest-corner,#0000 200px, #0008), repeating-linear-gradient(0deg,#321c,#3216 4px), repeating-linear-gradient(-90deg,#321c,#3216 4px), #888; font-family: 'Noto Serif JP'; font-size: 0.8em; filter: sepia(0.3); } a { color: #987; text-decoration: none; } a:hover { text-decoration: underline; } #poster { display: grid; grid-template-rows: auto 1fr; box-sizing: border-box; width: 300px; height: 423px; margin: 0 auto; padding: 12px; outline: solid #6609 4px; outline-offset: -12px; background: url('http://1119s.wikidot.com/local--files/media:007/paper-d.jpg') 0 0 / cover #9f8c7c; filter: sepia(0.3); } #poster .title { background: #f008; padding: 10px 0 20px; text-align: center; font-family: 'Kaisei Decol', serif; font-size: 190%; font-weight: bold; color: #cba; text-shadow: #d84044 2px 2px 0,#000 3px 3px 0; } #poster .title p { margin: 0; cursor: pointer; } #poster .content { display: flex; justify-content: center; background: repeating-conic-gradient(at 50% 40px,#f008 0 5deg,#f000 5deg 15deg,#f008 15deg 20deg); position: relative; z-index: 0; } #poster .content .image-box { width: 100%; height: 100%; position: relative; } #poster .content .image-box .badge { width: 80px; height: 80px; margin: 0 auto; background: url(http://1119s.wikidot.com/local--files/media%3A001/scp-foundation-badge.png) 50% 10px / 60px no-repeat; opacity: 0.95; filter: brightness(0.6) sepia(0.4); } #poster .content .image-box .contest_wrapper { position: absolute; top: 0; width: 100%; height: 100%; z-index: -2; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } #poster .content .image-box .contest_wrapper .contest { position: absolute; cursor: pointer; } #poster .content .text-box { display: flex; flex-direction: column; justify-content: space-evenly; position: absolute; bottom: 15px; box-sizing: border-box; height: 60px; border: solid #aa49; border-width: 3px 1px; background: #222; padding: 0 5px; text-align: center; color: #cba; } #poster .content .text-box .text { margin: 0; font-family: 'Kaisei Decol', serif; font-size: 150%; cursor: pointer; } #poster .content .text-box .subtext { margin: 0; } #poster .content .text-box::before, #poster .content .text-box::after { content: ""; display: block; position: absolute; top: -15px; box-sizing: border-box; width: 31px; height: 12px; z-index: -1; } #poster .content .text-box::before { left: -1px; background: linear-gradient(-20deg, #444 50%, #4440 50%); } #poster .content .text-box::after { right: -1px; background: linear-gradient(20deg, #444 50%, #4440 50%); } #poster .content .text-box .text::before, #poster .content .text-box .text::after, #poster .content .text-box .subtext::before, #poster .content .text-box .subtext::after { content: ""; display: block; position: absolute; box-sizing: border-box; width: 60px; height: 30px; border: solid #aa48; background: #222; z-index: -2; } #poster .content .text-box .text::before { top: -15px; left: -30px; border-width: 3px 1px 0; clip-path: polygon(0 0,100% 0,100% 100%,25% 100%); } #poster .content .text-box .text::after { top: -15px; right: -30px; border-width: 3px 1px 0; clip-path: polygon(0 0,100% 0,75% 100%,0 100%); } #poster .content .text-box .subtext::before { bottom: 10px; left: -30px; border-width: 0 1px 3px; clip-path: polygon(25% 0,100% 0,100% 100%,0 100%); } #poster .content .text-box .subtext::after { bottom: 10px; right: -30px; border-width: 0 1px 3px; clip-path: polygon(0 0,75% 0,100% 100%,0 100%); } #text_wrap { box-sizing: border-box; width: 420px; height: 70px; transform: translateY(-21px); position: relative; } #text_wrap::before, #text_wrap::after { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg,#8880,#888f 40% 60%,#8880); } #text_wrap::before { top: 0; } #text_wrap::after { bottom: 0; } #text_container { box-sizing: border-box; height: 100%; background: linear-gradient(90deg,#2220,#222c 20% 80%,#2220); padding: 14px 10%; line-height: 100%; font-family: 'Kiwi Maru', serif; font-size: 14px; color: #ccc; } a.temp { position: fixed; top: 0; left: 0; color: #0000; } .buryingC.contest { top: 60px; left: 50%; transform: translateX(-50%) rotate( 20deg); width: 150%; height: 180px; background: url(http://1119s.wikidot.com/local--files/media:010/shovel.png) center / contain repeat-x; filter: blur(0.3px) brightness(0.67) sepia(0.2); } </style> <script type="text/javascript"> const func1 = function(link) { const textContainer = document.getElementById("text_container"); textContainer.innerHTML= link ; } let contest0 = "個人コンテスト開催中！"; let contest1 = "<a href='#contest1'>埋没のコンテスト</a><br>開催期間 11/01 ~ 11/30"; let contest2 = "<a href='#contest2'>？？のコンテスト</a>"; </script> </head> <body> <div id="poster" class="ragged"> <div class="title"> <p onclick="func1(contest0)">個人コンテスト開催中</p> </div> <div class="content"> <div class="image-box"> <div class="badge"> </div> <div class="contest_wrapper"> <a class="buryingC contest" onclick="func1(contest1)" title="埋没のコンテスト"></a> </div> </div> <div class="text-box"> <p class="text" onclick="func1(contest1)">埋没のコンテスト</p> <p class="subtext">開催期間: 11/01 ~ 11/30</div> </div> </div> </div> <div id="text_wrap"> <div id="text_container"> 個人コンテスト開催中！ </div> </div> </body> </html>