ziongospelministry.org/maintenance.html at master · jvinodraj/ziongospelministry.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Under Construction | Zion Gospel Ministry</title>
  <meta name="robots" content="noindex,nofollow,noarchive" />
  <style>
    :root {
      --bg-1: #f7f2e9;
      --bg-2: #efe4d3;
      --card: #ffffff;
      --ink: #1f2a30;
      --muted: #53616b;
      --primary: #1f4b6d;
      --accent: #c99a4a;
      --line: #d9cbb4;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 10% 10%, rgba(201, 154, 74, 0.22), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(31, 75, 109, 0.17), transparent 35%),
        linear-gradient(160deg, var(--bg-1), var(--bg-2));
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .card {
      width: min(720px, 100%);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 20px 45px rgba(31, 42, 48, 0.12);
      padding: 32px;
    }

    .tag {
      display: inline-block;
      background: rgba(201, 154, 74, 0.16);
      color: #7c5722;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      margin-bottom: 14px;
    }

    h1 {
      margin: 0 0 10px;
      font-size: clamp(1.6rem, 3.7vw, 2.3rem);
      line-height: 1.18;
      color: var(--primary);
    }

    p {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
      font-size: 1rem;
    }

    .meta {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px dashed var(--line);
      display: grid;
      gap: 8px;
      font-size: 0.97rem;
    }

    .actions {
      margin-top: 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .btn {
      appearance: none;
      border: 0;
      border-radius: 10px;
      padding: 11px 16px;
      font-weight: 600;
      text-decoration: none;
      transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      opacity: 0.94;
    }

    .btn-primary {
      background: var(--primary);
      color: #fff;
    }

    .btn-outline {
      background: #fff;
      border: 1px solid var(--line);
      color: var(--primary);
    }

    @media (max-width: 540px) {
      .card {
        padding: 24px;
      }
    }
  </style>
</head>
<body>
  <main class="card" role="main" aria-labelledby="maintenance-title">
    <span class="tag">Maintenance</span>
    <h1 id="maintenance-title">We are updating this section of our website.</h1>
    <p>
      Some pages are temporarily under construction while we improve content and performance.
      Our home page remains available during this time.
    </p>

    <section class="meta" aria-label="Maintenance details">
      <p><strong>Expected return:</strong> Dec 31, 2026.</p>
      <p><strong>Need assistance now?</strong> Reach us at <a href="mailto:vinodraj.j@gmail.com">vinodraj.j@gmail.com</a>.</p>
    </section>

    <div class="actions">
      <a class="btn btn-primary" href="index.html">Go to Home Page</a>
      <a class="btn btn-outline" href="contact.html">Contact Us</a>
    </div>
  </main>
</body>
</html>