Last active
December 29, 2019 21:39
-
-
Save mkeneqa/9d3c0d7a3d31ba9a92c97112247a194a to your computer and use it in GitHub Desktop.
Forbidden City 403 Template
This file contains hidden or 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> | |
| <head> | |
| <title>Forbidden Site</title> | |
| <meta charset="UTF-8"> | |
| <style> | |
| @import url(https://fonts.googleapis.com/css?family=Permanent+Marker); | |
| @import url(https://fonts.googleapis.com/css?family=Roboto+Mono); | |
| body,html{width:100%;height:100%;margin:0;padding:0}body{background:#f3e2cb;display:flex;flex-direction:column;align-items:center;align-content:center}.wrapper{height:100%;width:100%;display:flex;flex-direction:column-reverse;align-items:center;align-content:center;position:absolute;bottom:0;overflow:hidden}.wrapper:hover .sun{-webkit-transform:translateY(-200px);transform:translateY(-200px)}.pedastal{width:1000px;height:90px;background:#fff;position:relative}.pedastal-block1,.pedastal-block1::before{width:125px;height:30px;background:#a24d4c;box-sizing:border-box}.pedastal-block1::before{content:'';position:absolute;right:0}.pedastal-block2,.pedastal-block2::before{width:63px;height:30px;background:#a24d4c;box-sizing:border-box}.pedastal-block2::before{content:'';position:absolute;right:0}.hall{width:520px;height:60px;background:#44291e;display:flex;flex-direction:row;justify-content:space-between;position:relative;z-index:3}.hall-pillar{height:100%;width:16px;background:linear-gradient(90deg,#da5447,#9c4e46)}.hall-support{width:40px;height:12px;position:relative}.hall-support::before{content:'';width:16px;height:12px;background:linear-gradient(135deg,#678b80 50%,transparent 51%) no-repeat;background-position:-2px 0;position:absolute;top:0;left:0}.hall-support::after{content:'';width:16px;height:12px;background:linear-gradient(-135deg,#678b80 50%,transparent 51%) no-repeat;background-position:2px 0;position:absolute;top:0;right:0}.lower-support{width:520px;height:30px;background:#7ba598;display:flex;flex-direction:row;justify-content:space-between;position:relative;border-left:4px solid #7ba598;border-right:4px solid #7ba598;z-index:3}.lower-support-pillar{height:100%;width:16px;background:linear-gradient(90deg,#87c9b6,#678b80)}.ornaments{width:40px;height:30px;display:flex}.ornaments div{width:20px;height:30px;position:relative}.ornaments div:first-child::after,.ornaments div:first-child::before{content:'';width:8px;height:8px;border-radius:4px;background:#eedb44;position:absolute}.ornaments div:first-child::before{top:6px;left:11px}.ornaments div:first-child::after{bottom:6px;left:11px}.ornaments div:last-child::after,.ornaments div:last-child::before{content:'';width:8px;height:8px;border-radius:4px;background:#eedb44;position:absolute}.ornaments div:last-child::before{top:6px;right:11px}.ornaments div:last-child::after{bottom:6px;right:11px}.lower-roof{width:376px;height:40px;background:#fdbb3b;position:relative;z-index:3}.lower-roof::before{content:'';border-left:112px solid transparent;border-bottom:40px solid #fdbb3b;position:absolute;bottom:0;left:-112px}.lower-roof::after{content:'';border-right:112px solid transparent;border-bottom:40px solid #fdbb3b;position:absolute;bottom:0;right:-112px}.lower-roof div:first-child{display:inline-block;border-left:36px solid transparent;border-top:15px solid #d0982e;position:absolute;left:-112px;bottom:-15px}.lower-roof div:last-child{display:inline-block;border-right:36px solid transparent;border-top:15px solid #d0982e;position:absolute;right:-112px;bottom:-15px}.upper-support{width:376px;height:20px;background:#7ba598;display:flex;flex-direction:row;justify-content:space-between;position:relative;z-index:3}.upper-support .container{width:296px;height:20px;display:flex;align-self:center;flex-direction:row;justify-content:space-between;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.upper-support .ornaments div:first-child::after,.upper-support .ornaments div:last-child::after{display:none}.upper-support .ornaments div:first-child::before,.upper-support .ornaments div:last-child::before{width:6px;height:6px}.upper-support .ornaments div:first-child::before{top:7px;left:8px}.upper-support .ornaments div:last-child::before{top:7px;right:8px}.upper-roof{width:520px;height:90px;position:relative;z-index:3}.upper-roof div:first-child{display:inline-block;border-left:72px solid transparent;border-top:20px solid #d0982e;position:absolute;left:0;bottom:-20px}.upper-roof div:last-child{display:inline-block;border-right:72px solid transparent;border-top:20px solid #d0982e;position:absolute;right:0;bottom:-20px}.upper-roof-curved{width:100px;height:78px;background:#f3e2cb;position:absolute;z-index:1000}.upper-roof-curved:nth-child(2){left:-102px;top:-2px;-webkit-transform:rotate(3deg);transform:rotate(3deg);border-radius:0 0 100px 0}.upper-roof-curved:nth-child(3){right:-102px;top:-2px;-webkit-transform:rotate(-3deg);transform:rotate(-3deg);border-radius:0 0 0 100px}.roof-top div,.roof-top div:first-child::after,.roof-top div:first-child::before,.roof-top div:last-child::after,.roof-top div:last-child::before{width:8px;height:8px;background:#fdbb3b;position:absolute}.roof-top{width:264px;position:relative;z-index:3}.roof-top div{top:-8px}.roof-top div:first-child{left:0}.roof-top div:first-child::after,.roof-top div:first-child::before{content:'';left:8px}.roof-top div:first-child::after{bottom:8px}.roof-top div:last-child{right:0}.roof-top div:last-child::after,.roof-top div:last-child::before{content:'';right:8px}.roof-top div:last-child::after{bottom:8px}.sign{width:12px;height:16px;background:#490ced;border:4px solid #9c4e46;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.trapezium{border-bottom:90px solid #f8dab2;border-right:50px solid transparent;border-left:50px solid transparent;width:288px;position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.trapezium div{position:absolute;bottom:-90px;width:20px}.trapezium div::before{content:'';position:absolute;width:20px}.trapezium div:first-child{left:24px;border-bottom:90px solid #fff;border-left:40px solid transparent}.trapezium div:first-child::before{border-top:90px solid #fff;border-right:40px solid transparent}.trapezium div:last-child{right:24px;border-bottom:90px solid #fff;border-right:40px solid transparent}.trapezium div:last-child::before{border-top:90px solid #fff;border-left:40px solid transparent;right:0}.wall{width:100%;height:90px;background:#a24d4c;position:fixed;bottom:0;z-index:-1;display:flex;justify-content:center}.wall::before{content:'';width:100%;max-width:1240px;height:140px;background:#a24d4c;position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.wall-roofing-bottom{width:100%;height:24px;background:#fdbb3b}.wall-roofing-top{width:1240px;height:24px;background:#fdbb3b;position:absolute;top:-50px}.wall-roofing-top::before{content:'';border-bottom:24px solid #fdbb3b;border-left:10px solid transparent;position:absolute;left:-10px}.wall-roofing-top::after{content:'';border-bottom:24px solid #fdbb3b;border-right:10px solid transparent;position:absolute;right:-10px}.sun{width:400px;height:400px;background:#ca502e;border-radius:200px;z-index:1;position:absolute;-webkit-transform:translateY(-100px);transform:translateY(-100px);display:flex;justify-content:center;align-items:center;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s,-webkit-transform 1s}.cloud{background:#fff;position:relative;z-index:2}.cloud::after,.cloud::before{background:#fff;display:block}.cloud-01{width:88px;height:32px;border-radius:16px;-webkit-transform:translate(-200px,-50px);transform:translate(-200px,-50px);-webkit-animation:cloud-1 50s ease-in-out infinite alternate;animation:cloud-1 50s ease-in-out infinite alternate}.cloud-01::before{content:'';width:50px;height:50px;border-radius:25px;display:block;-webkit-transform:translate(22px,-25px);transform:translate(22px,-25px)}.cloud-02{width:100px;height:40px;border-radius:20px;-webkit-transform:translate(60px,-120px);transform:translate(60px,-120px);-webkit-animation:cloud-2 40s ease-in-out infinite alternate;animation:cloud-2 40s ease-in-out infinite alternate}.cloud-02::before{content:'';width:46px;height:46px;border-radius:23px;-webkit-transform:translate(38px,-23px);transform:translate(38px,-23px)}.cloud-02::after{content:'';width:30px;height:30px;border-radius:15px;-webkit-transform:translate(16px,-60px);transform:translate(16px,-60px)}.cloud-03{width:70px;height:24px;border-radius:12px;-webkit-transform:translate(210px,0);transform:translate(210px,0);-webkit-animation:cloud-3 30s ease-in-out infinite alternate;animation:cloud-3 30s ease-in-out infinite alternate}.cloud-03::before{content:'';width:14px;height:14px;border-radius:7px;-webkit-transform:translate(46px,-7px);transform:translate(46px,-7px)}.cloud-03::after{content:'';width:16px;height:16px;border-radius:8px;top:0;-webkit-transform:translate(12px,-50px);transform:translate(12px,-50px)}.cloud-03 div{width:30px;height:30px;background:#fff;border-radius:15px;display:block;-webkit-transform:translate(24px,-30px);transform:translate(24px,-30px)}.copy{font-family:'Permanent Marker',cursive;font-size:8em;color:#f3e2cb;padding-bottom:60px}.headline{text-align:center;position:relative;padding-top:40px;z-index:3}.headline h1{font-family:'Permanent Marker',cursive;color:#2b2b2b;font-size:8em;margin:0}.headline h2{font-family:'Roboto Mono',monospace;font-size:1.25em;color:#2b2b2b}@-webkit-keyframes cloud-1{0%{-webkit-transform:translate(-200px,-50px);transform:translate(-200px,-50px)}100%{-webkit-transform:translate(-280px,-50px);transform:translate(-280px,-50px)}}@keyframes cloud-1{0%{-webkit-transform:translate(-200px,-50px);transform:translate(-200px,-50px)}100%{-webkit-transform:translate(-280px,-50px);transform:translate(-280px,-50px)}}@-webkit-keyframes cloud-2{0%{-webkit-transform:translate(60px,-120px);transform:translate(60px,-120px)}100%{-webkit-transform:translate(300px,-120px);transform:translate(300px,-120px)}}@keyframes cloud-2{0%{-webkit-transform:translate(60px,-120px);transform:translate(60px,-120px)}100%{-webkit-transform:translate(300px,-120px);transform:translate(300px,-120px)}}@-webkit-keyframes cloud-3{0%{-webkit-transform:translate(210px,0);transform:translate(210px,0)}100%{-webkit-transform:translate(100px,0);transform:translate(100px,0)}}@keyframes cloud-3{0%{-webkit-transform:translate(210px,0);transform:translate(210px,0)}100%{-webkit-transform:translate(100px,0);transform:translate(100px,0)}}@media only screen and (max-width:1440px){.headline h1{font-size:4em}.headline h2{font-size:1em}} | |
| </style> | |
| </head> | |
| <body> | |
| <!-- template: https://codepen.io/artcoholic/pen/ZMVNMw --> | |
| <!-- htaccess 403: https://stackoverflow.com/a/8703566 --> | |
| <div class="wrapper"> | |
| <section class="pedastal"> | |
| <div class="pedastal-block1"></div> | |
| <div class="pedastal-block2"></div> | |
| <div class="trapezium"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| </section> | |
| <section class="hall"> | |
| <div class="hall-pillar"></div> | |
| <div class="hall-support"></div> | |
| <div class="hall-pillar"></div> | |
| <div class="hall-support"></div> | |
| <div class="hall-pillar"></div> | |
| <div class="hall-support"></div> | |
| <div class="hall-pillar"></div> | |
| <div class="hall-support"></div> | |
| <div class="hall-pillar"></div> | |
| <div class="hall-support"></div> | |
| <div class="hall-pillar"></div> | |
| <div class="hall-support"></div> | |
| <div class="hall-pillar"></div> | |
| <div class="hall-support"></div> | |
| <div class="hall-pillar"></div> | |
| <div class="hall-support"></div> | |
| <div class="hall-pillar"></div> | |
| <div class="hall-support"></div> | |
| <div class="hall-pillar"></div> | |
| </section> | |
| <section class="lower-support"> | |
| <div class="lower-support-pillar"></div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="lower-support-pillar"></div> | |
| </section> | |
| <section class="lower-roof"> | |
| <div></div> | |
| <div></div> | |
| </section> | |
| <section class="upper-support"> | |
| <div class="container"> | |
| <div class="lower-support-pillar"></div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="lower-support-pillar"></div> | |
| <div class="lower-support-pillar"></div> | |
| </div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <div class="ornaments"> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| <section class="sign"></section> | |
| </section> | |
| <section class="upper-roof"> | |
| <div></div> | |
| <svg width="520px" height="90px"> | |
| <path d="M495.689265,72.9065145 L520,90 L0,90 L24.3069308,72.9091893 L45.9698498,74.0444947 C88.9890231,76.2990341 125.690619,43.2527689 127.945158,0.233595624 L127.687016,0.220066965 L128,0 L392,0 L392.30918,0.217392187 L392,0.233595624 C394.254539,43.2527689 430.956135,76.2990341 473.975308,74.0444947 L495.689265,72.9065145 Z" id="Combined-Shape" fill="#FDBB3B"></path> | |
| </svg> | |
| <div></div> | |
| </section> | |
| <section class="roof-top"> | |
| <div></div> | |
| <div></div> | |
| </section> | |
| <div class="cloud cloud-01"></div> | |
| <div class="cloud cloud-02"></div> | |
| <div class="cloud cloud-03"> | |
| <div></div> | |
| </div> | |
| <div class="sun"> | |
| <div class="copy">403</div> | |
| </div> | |
| </div> | |
| <div class="wall"> | |
| <div class="wall-roofing-bottom"></div> | |
| <div class="wall-roofing-top"></div> | |
| </div> | |
| <div class="headline"> | |
| <h1>Forbidden City</h1> | |
| <h2>✋ You don't have permission to access 🚧 this area ✋</h2> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| #### blocks entire site access but displays custom 403 template at root dir | |
| #### | |
| Order deny,allow | |
| Deny from all | |
| ErrorDocument 403 /403.html | |
| #### |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sources Used: