UNPKG

comicgen

Version:

Add comics to your website or app with an API. Choose a character, angle, emotion and pose. Embed on your page.

121 lines (109 loc) 2.92 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="noindex, follow"> <title>Comicgen is down</title> <style> * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 0; margin: 0; font-family: sans-serif; } #down { position: relative; height: 100vh; } #down .down { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .down { max-width: 560px; width: 100%; padding-left: 160px; line-height: 1.1; } .down .down-502 { position: absolute; left: 0; top: 0; display: inline-block; width: 140px; height: 140px; background-size: cover; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-emoji-frown" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/></svg>') } .down .down-502:before { content: ''; position: absolute; width: 100%; height: 100%; -webkit-transform: scale(2.4); -ms-transform: scale(2.4); transform: scale(2.4); border-radius: 50%; background-color: #f2f5f8; z-index: -1; } .down h1 { font-size: 65px; font-weight: 700; margin-top: 0px; margin-bottom: 10px; color: #151723; text-transform: uppercase; } .down h2 { font-size: 21px; font-weight: 400; margin: 0; text-transform: uppercase; color: #151723; } .down p { color: #999fa5; font-weight: 400; } .down a { display: inline-block; font-weight: 700; border-radius: 40px; text-decoration: none; color: #388dbc; } @media only screen and (max-width: 767px) { .down .down-502 { width: 110px; height: 110px; } .down { padding-left: 15px; padding-right: 15px; padding-top: 110px; } } </style> </head> <body> <div id="down"> <div class="down"> <div class="down-502"></div> <h1>Comicgen is down</h1> <h2>We're fixing it now</h2> <p>Sorry that Comicgen is temporarily unavailable. Please bear with us.</p> <a href="https://gramener.com/comicgen/">Try Comicgen version zero in the meantime</a> </div> </div> </body> </html>