Skip to content

Commit bc25790

Browse files
vero-codevero-code
committed
feat: contact page reorganization
1 parent b33e45b commit bc25790

2 files changed

Lines changed: 117 additions & 90 deletions

File tree

‎contact.html‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,51 @@
1818
<celestine-header root-path="." active-page="contact"></celestine-header>
1919

2020
<section class="contact-section">
21-
<div style="text-align: center; margin-bottom: 60px;">
21+
<div style="text-align: center; margin-bottom: 40px;">
2222
<h1>Get in Touch</h1>
2323
<p class="subtitle">Have questions about our mission or technology? We're here to help.</p>
24+
</div>
25+
26+
<div class="status-box">
27+
<h3 style="color: #88ff88; margin-top: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px;">
28+
<i class="fas fa-check-circle"></i> Program Status: Approved
29+
</h3>
30+
<p style="font-size: 0.95rem; margin-bottom: 0; color: #ddd; line-height: 1.5;">
31+
<strong>Accepted into Google for Startups Cloud Program.</strong><br>
32+
We are finalizing cloud resource allocation. Full platform availability will resume shortly upon credit disbursement.
33+
</p>
34+
</div>
35+
36+
<div class="contact-grid">
2437

25-
<div style="margin-top: 30px; background: rgba(50, 205, 50, 0.1); border: 1px solid rgba(50, 205, 50, 0.3); padding: 20px; border-radius: 12px; max-width: 600px; margin-left: auto; margin-right: auto; text-align: left; box-sizing: border-box; width: 100%;">
26-
<h3 style="color: #88ff88; margin-top: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px;">
27-
<i class="fas fa-check-circle"></i> Program Status: Approved
38+
<div class="info-card">
39+
<h3 style="color: #b388ff; margin-top: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
40+
<i class="fas fa-envelope"></i> Email Support
2841
</h3>
29-
<p style="font-size: 0.95rem; margin-bottom: 0; color: #ddd; line-height: 1.5;">
30-
<strong>Accepted into Google for Startups Cloud Program.</strong><br>
31-
We are finalizing cloud resource allocation. Full platform availability will resume shortly upon credit disbursement.
42+
<p style="font-size: 0.95rem; color: #ddd; line-height: 1.6; margin-bottom: 25px;">
43+
For partnerships, press inquiries, or technical support, reach out directly to the founder.
3244
</p>
45+
<a href="mailto:veronika@vero-code.website" class="email-link">veronika@vero-code.website</a>
3346
</div>
3447

35-
<div style="margin-top: 40px;">
36-
<i class="fas fa-envelope" style="font-size: 2rem; color: #7c4dff; margin-bottom: 10px;"></i>
37-
<p style="font-size: 1.2rem; color: #fff; margin-bottom: 5px;">Email Support</p>
38-
<a href="mailto:veronika@vero-code.website" style="color: #b388ff; font-size: 1.3rem; text-decoration: none; word-break: break-all;">veronika@vero-code.website</a>
48+
<div class="info-card">
49+
<h3 style="color: #29b6f6; margin-top: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
50+
<i class="fas fa-globe"></i> Connect Online
51+
</h3>
52+
53+
<div class="social-links-list">
54+
<a href="https://github.com/vero-code" target="_blank" class="social-btn">
55+
<i class="fab fa-github"></i> GitHub Profile
56+
</a>
57+
<a href="https://x.com/veron_code" target="_blank" class="social-btn">
58+
<i class="fab fa-twitter"></i> X (Twitter)
59+
</a>
60+
<a href="https://www.youtube.com/@vero-code" target="_blank" class="social-btn">
61+
<i class="fab fa-youtube"></i> YouTube Channel
62+
</a>
63+
</div>
3964
</div>
65+
4066
</div>
4167
</section>
4268

‎css/contact.css‎

Lines changed: 80 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,117 @@
11
:root {
2-
--input-bg: rgba(255, 255, 255, 0.05);
2+
--card-bg-glass: rgba(255, 255, 255, 0.03);
3+
--card-border-glass: rgba(255, 255, 255, 0.1);
4+
--hover-bg: rgba(255, 255, 255, 0.08);
35
}
46

57
.container {
6-
max-width: 800px;
8+
max-width: 1000px;
9+
width: 100%;
10+
margin: 0 auto;
11+
padding: 0 20px;
12+
box-sizing: border-box;
713
}
814

9-
/* Contact Section */
1015
.contact-section {
1116
text-align: center;
12-
padding: 40px 20px;
13-
background: var(--card-bg);
14-
border: 1px solid var(--card-border);
15-
border-radius: 16px;
16-
backdrop-filter: blur(10px);
17-
box-sizing: border-box;
18-
width: 100%;
19-
max-width: 100%;
20-
margin: 0 auto;
17+
padding: 60px 0;
2118
}
2219

2320
.subtitle {
24-
color: var(--secondary-text);
21+
color: #a0a0a0;
2522
font-size: 1.1rem;
26-
margin-bottom: 40px;
27-
}
28-
29-
.contact-info {
30-
display: flex;
31-
justify-content: center;
32-
gap: 40px;
33-
margin-bottom: 40px;
34-
flex-wrap: wrap;
23+
margin-bottom: 50px;
24+
margin-top: 10px;
3525
}
3626

37-
.info-item {
38-
display: flex;
39-
flex-direction: column;
40-
align-items: center;
41-
gap: 10px;
27+
.status-box {
28+
background: rgba(50, 205, 50, 0.08);
29+
border: 1px solid rgba(50, 205, 50, 0.3);
30+
padding: 30px;
31+
border-radius: 16px;
32+
text-align: left;
33+
margin-bottom: 30px;
34+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
4235
}
4336

44-
.info-icon {
45-
font-size: 2rem;
46-
color: var(--accent-color);
37+
.contact-grid {
38+
display: grid;
39+
grid-template-columns: 1fr 1fr;
40+
gap: 30px;
4741
}
4842

49-
.info-text {
50-
font-size: 1.1rem;
51-
font-weight: 500;
43+
.info-card {
44+
background: var(--card-bg-glass);
45+
border: 1px solid var(--card-border-glass);
46+
border-radius: 16px;
47+
padding: 35px;
48+
text-align: left;
49+
display: flex;
50+
flex-direction: column;
51+
transition: transform 0.3s ease, border-color 0.3s ease;
52+
height: 100%;
53+
box-sizing: border-box;
5254
}
5355

54-
.info-label {
55-
color: var(--secondary-text);
56-
font-size: 0.9rem;
56+
.info-card:hover {
57+
border-color: rgba(124, 77, 255, 0.5);
58+
transform: translateY(-2px);
5759
}
5860

59-
/* Contact Form */
60-
.contact-form {
61-
display: grid;
62-
gap: 20px;
63-
max-width: 500px;
64-
margin: 0 auto;
65-
text-align: left;
61+
.card-title {
62+
margin-top: 0;
63+
font-size: 1.3rem;
64+
display: flex;
65+
align-items: center;
66+
gap: 12px;
67+
margin-bottom: 20px;
68+
font-weight: 600;
6669
}
6770

68-
.form-group {
71+
.social-list {
6972
display: flex;
7073
flex-direction: column;
71-
gap: 8px;
74+
gap: 15px;
7275
}
7376

74-
label {
75-
font-size: 0.9rem;
76-
color: var(--secondary-text);
77-
}
78-
79-
input, textarea {
80-
background: var(--input-bg);
81-
border: 1px solid var(--card-border);
82-
border-radius: 8px;
83-
padding: 12px 16px;
84-
color: white;
85-
font-family: inherit;
86-
font-size: 1rem;
87-
transition: border-color 0.2s;
77+
.social-btn {
78+
display: flex;
79+
align-items: center;
80+
justify-content: space-between;
81+
background: rgba(255, 255, 255, 0.03);
82+
border: 1px solid rgba(255, 255, 255, 0.08);
83+
padding: 15px 20px;
84+
border-radius: 10px;
85+
color: #ccc;
86+
text-decoration: none;
87+
transition: all 0.2s ease;
88+
font-weight: 500;
8889
}
8990

90-
input:focus, textarea:focus {
91-
outline: none;
92-
border-color: var(--accent-color);
93-
background: rgba(255, 255, 255, 0.08);
91+
.social-btn:hover {
92+
background: rgba(124, 77, 255, 0.15);
93+
border-color: #7c4dff;
94+
color: #fff;
95+
padding-left: 25px;
9496
}
9597

96-
.btn-form {
97-
padding: 14px 32px;
98-
justify-content: center;
99-
border: none;
100-
cursor: pointer;
101-
margin-top: 10px;
98+
.social-btn i {
99+
font-size: 1.2rem;
102100
}
103101

104-
.email-link {
105-
color: var(--accent-color);
106-
text-decoration: none;
107-
transition: opacity 0.2s;
108-
}
109-
.email-link:hover {
110-
opacity: 0.8;
111-
}
102+
@media (max-width: 768px) {
103+
.contact-grid {
104+
grid-template-columns: 1fr;
105+
gap: 20px;
106+
}
107+
108+
.status-box, .info-card {
109+
padding: 25px;
110+
}
112111

113-
@media (max-width: 600px) {
114112
h1 { font-size: 2rem; }
115-
.contact-info { gap: 20px; }
113+
114+
.social-btn:hover {
115+
padding-left: 20px;
116+
}
116117
}

0 commit comments

Comments
 (0)