Skip to content

Commit d905b95

Browse files
vincent-pochetvincent-pochet
committed
Add a thank you page
1 parent 97139d6 commit d905b95

3 files changed

Lines changed: 171 additions & 1 deletion

File tree

‎css/style.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,49 @@ html[lang="fr"] [data-lang="en"] {
485485
font-size: 1.05rem;
486486
}
487487

488+
/* ==========================================
489+
THANK YOU PAGE
490+
========================================== */
491+
.thanks {
492+
padding: 10rem 0 6rem;
493+
display: flex;
494+
align-items: center;
495+
justify-content: center;
496+
min-height: calc(100vh - 72px - 73px);
497+
}
498+
499+
.thanks__box {
500+
text-align: center;
501+
background: var(--color-white);
502+
border-radius: var(--radius);
503+
padding: 3rem 2.5rem;
504+
box-shadow: var(--shadow-md);
505+
max-width: 520px;
506+
margin: 0 auto;
507+
}
508+
509+
.thanks__icon {
510+
color: #22c55e;
511+
margin-bottom: 1.5rem;
512+
}
513+
514+
.thanks__title {
515+
font-size: 2rem;
516+
font-weight: 700;
517+
margin-bottom: 1rem;
518+
}
519+
520+
.thanks__message {
521+
color: var(--color-muted);
522+
font-size: 1.1rem;
523+
line-height: 1.6;
524+
margin-bottom: 2rem;
525+
}
526+
527+
.thanks__box .btn {
528+
display: inline-block;
529+
}
530+
488531
/* ==========================================
489532
FOOTER
490533
========================================== */

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -483,7 +483,7 @@ <h2 class="section__title" data-lang="fr">Contactez-nous</h2>
483483
<textarea id="body" name="body" rows="5" required></textarea>
484484
</div>
485485

486-
<input type="hidden" name="return_url" value="https://www.ruby42.com/#contact" />
486+
<input type="hidden" name="return_url" value="https://www.ruby42.com/thanks.html" />
487487
<input type="submit" name="commit" class="btn" data-lang="en" value="Send Message" />
488488
<input type="submit" name="commit" class="btn" data-lang="fr" value="Envoyer le message" />
489489
</form>

‎thanks.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Ruby42 — Thank You</title>
7+
<meta
8+
name="description"
9+
content="Thank you for contacting Ruby42. We will get back to you as soon as possible."
10+
/>
11+
<link rel="preconnect" href="https://fonts.googleapis.com" />
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13+
<link
14+
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&family=Inter:wght@400;500;600;700&display=swap"
15+
rel="stylesheet"
16+
/>
17+
<link rel="icon" type="image/png" href="favicon.png" />
18+
<link rel="stylesheet" href="css/style.css" />
19+
</head>
20+
<body>
21+
<!-- ========== HEADER / NAV ========== -->
22+
<header class="header" id="header">
23+
<nav class="nav container">
24+
<a href="/" class="nav__logo" aria-label="Ruby42">
25+
<svg
26+
class="nav__logo-svg"
27+
xmlns="http://www.w3.org/2000/svg"
28+
viewBox="0 0 310 50"
29+
fill="none"
30+
width="180"
31+
height="40"
32+
>
33+
<!-- Original Ruby42 gem -->
34+
<g transform="translate(0, 0) scale(0.31)">
35+
<path
36+
d="M162.315985,5.71449814 L38.1776952,5.71449814 L5.79330855,40.802974 L100.111524,145.834944 L194.701859,40.8408922 L162.315985,5.71449814 Z"
37+
opacity="0.7"
38+
fill="#F74449"
39+
/>
40+
<path
41+
d="M198.528625,37.2520446 L166.142751,2.27211896 C165.157621,1.20297398 163.77026,0.742750929 162.316729,0.742750929 L38.1776952,0.742750929 C36.7249071,0.742750929 35.33829,1.20223048 34.3531599,2.26988848 L1.96877323,37.2847584 C0.147211896,39.2579926 0.126394052,42.2572491 1.92118959,44.2550186 L96.2386617,149.243866 C97.2252788,150.342751 98.6312268,150.928625 100.107063,150.928625 L100.111524,150.928625 C101.585874,150.928625 102.991078,150.327138 103.977695,149.232714 L198.569517,44.2513011 C200.36803,42.2542751 200.350929,39.2282528 198.528625,37.2520446 Z M149.518216,32.7137546 L159.10855,23.1219331 L167.874349,32.7137546 L149.518216,32.7137546 Z M122.325651,17.8438662 L139.754647,17.8438662 L131.040149,26.5583643 L122.325651,17.8438662 Z M117.359108,49.070632 L100.337546,107.115242 L83.3167286,49.070632 L117.359108,49.070632 Z M88.2275093,32.7137546 L100.395539,20.5457249 L112.562082,32.7137546 L88.2275093,32.7137546 Z M118.507063,105.539033 L135.064684,49.070632 L169.387361,49.070632 L118.507063,105.539033 Z"
42+
fill="#E0252E"
43+
/>
44+
</g>
45+
<text class="logo-text-ruby" x="72" y="35" font-family="Inter, sans-serif" font-weight="700" font-size="30">
46+
Ruby
47+
</text>
48+
<text class="logo-text-42" x="155" y="35" font-family="Inter, sans-serif" font-weight="700" font-size="30">
49+
42
50+
</text>
51+
</svg>
52+
</a>
53+
54+
<button class="nav__toggle" id="nav-toggle" aria-label="Toggle navigation">
55+
<span></span>
56+
<span></span>
57+
<span></span>
58+
</button>
59+
60+
<ul class="nav__menu" id="nav-menu">
61+
<li><a href="/#services" class="nav__link" data-lang="en">Services</a></li>
62+
<li><a href="/#services" class="nav__link" data-lang="fr">Services</a></li>
63+
<li><a href="/#team" class="nav__link" data-lang="en">Team</a></li>
64+
<li><a href="/#team" class="nav__link" data-lang="fr">Équipe</a></li>
65+
<li><a href="/#contact" class="nav__link" data-lang="en">Contact</a></li>
66+
<li><a href="/#contact" class="nav__link" data-lang="fr">Contact</a></li>
67+
<li>
68+
<button class="lang-toggle" id="lang-toggle">
69+
<span class="lang-toggle__option" data-lang-btn="en">EN</span>
70+
<span class="lang-toggle__separator">|</span>
71+
<span class="lang-toggle__option" data-lang-btn="fr">FR</span>
72+
</button>
73+
</li>
74+
</ul>
75+
</nav>
76+
</header>
77+
78+
<!-- ========== THANK YOU ========== -->
79+
<section class="thanks">
80+
<div class="container">
81+
<div class="thanks__box fade-in">
82+
<svg class="thanks__icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
83+
<circle cx="12" cy="12" r="10" />
84+
<path d="M8 12l3 3 5-5" />
85+
</svg>
86+
87+
<h1 class="thanks__title" data-lang="en">Thank You!</h1>
88+
<h1 class="thanks__title" data-lang="fr">Merci !</h1>
89+
90+
<p class="thanks__message" data-lang="en">
91+
Your message has been received. We'll get back to you shortly.
92+
</p>
93+
<p class="thanks__message" data-lang="fr">
94+
Votre message a bien été reçu. Nous vous répondrons dans les plus brefs délais.
95+
</p>
96+
97+
<a href="/" class="btn" data-lang="en">Back to Homepage</a>
98+
<a href="/" class="btn" data-lang="fr">Retour à l'accueil</a>
99+
</div>
100+
</div>
101+
</section>
102+
103+
<!-- ========== FOOTER ========== -->
104+
<footer class="footer">
105+
<div class="container">
106+
<p>
107+
&copy; 2026 Ruby42 &middot; Geneva, Switzerland &middot;
108+
<a href="https://github.com/Ruby42" class="footer__link" aria-label="GitHub"
109+
><svg
110+
xmlns="http://www.w3.org/2000/svg"
111+
width="16"
112+
height="16"
113+
viewBox="0 0 24 24"
114+
fill="currentColor"
115+
style="vertical-align: -3px"
116+
>
117+
<path
118+
d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
119+
/></svg
120+
></a>
121+
</p>
122+
</div>
123+
</footer>
124+
125+
<script src="js/main.js"></script>
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)