| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <!DOCTYPE html>
- <html lang="ru">
- <head>
- <meta charset="UTF-8"/>
- <meta name="viewport" content="width=device-width,initial-scale=1"/>
- <meta name="robots" content="noindex, nofollow"/>
- <title>Сайт на обслуживании</title>
- <style>
- *{box-sizing:border-box;margin:0;padding:0}
- body{
- font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
- background:#0d0d0d;
- color:#fff;
- min-height:100vh;
- display:flex;
- align-items:center;
- justify-content:center;
- text-align:center;
- }
- .wrap{max-width:520px;padding:40px 24px}
- .icon{font-size:64px;margin-bottom:28px;opacity:.8}
- h1{
- font-size:clamp(28px,5vw,46px);
- font-weight:800;
- letter-spacing:-.03em;
- margin-bottom:16px;
- }
- h1 span{color:#e52222}
- p{
- font-size:16px;
- line-height:1.7;
- color:#aaa;
- margin-bottom:32px;
- }
- .badge{
- display:inline-block;
- background:#1a1a1a;
- border:1px solid #333;
- border-radius:100px;
- padding:6px 18px;
- font-size:13px;
- color:#666;
- letter-spacing:.04em;
- }
- .progress-bar{
- width:120px;
- height:3px;
- background:#222;
- border-radius:10px;
- margin:28px auto 0;
- overflow:hidden;
- }
- .progress-fill{
- height:100%;
- width:40%;
- background:linear-gradient(90deg,#e52222,#ff6b35);
- border-radius:10px;
- animation:progress 2.5s ease-in-out infinite alternate;
- }
- @keyframes progress{to{width:90%}}
- </style>
- </head>
- <body>
- <div class="wrap">
- <div class="icon">🔧</div>
- <h1>Сайт на<br><span>обслуживании</span></h1>
- <p>
- Мы проводим технические работы и скоро вернёмся.<br>
- Пожалуйста, загляните немного позже.
- </p>
- <div class="badge">Уже скоро всё заработает</div>
- <div class="progress-bar">
- <div class="progress-fill"></div>
- </div>
- </div>
- </body>
- </html>
|
