Skip to content

Commit 87b9976

Browse files
nicholasjhenrynicholasjhenry
committed
Update design and content
1 parent a27aab8 commit 87b9976

File tree

1 file changed

+185
-62
lines changed

1 file changed

+185
-62
lines changed

‎index.html‎

Lines changed: 185 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -4,73 +4,196 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>CivilCode - Tailored Business Applications</title>
7-
<style>
8-
body {
9-
margin: 0;
10-
font-family: Arial, sans-serif;
11-
display: flex;
12-
justify-content: center;
13-
align-items: center;
14-
height: 100vh;
15-
background-color: #f4f4f4;
16-
}
17-
.container {
18-
text-align: center;
19-
}
20-
.logo {
21-
max-width: 300px;
22-
margin-bottom: 20px;
23-
}
24-
.cta {
25-
margin-top: 20px;
26-
font-size: 18px;
27-
color: #333;
28-
}
29-
.photo {
30-
margin-top: 20px;
31-
max-width: 50%;
32-
height: auto;
33-
border-radius: 8px;
34-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
35-
}
36-
.paragraph {
37-
margin-top: 20px;
38-
text-align: left;
39-
max-width: 600px;
40-
margin-left: auto;
41-
margin-right: auto;
42-
color: #555;
43-
font-size: 16px;
44-
line-height: 1.6;
45-
}
46-
</style>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script>
9+
tailwind.config = {
10+
theme: {
11+
extend: {
12+
fontFamily: {
13+
sans: ["Inter", "system-ui", "sans-serif"],
14+
},
15+
colors: {
16+
brand: {
17+
50: "#fafafa",
18+
100: "#f5f5f5",
19+
200: "#e5e5e5",
20+
300: "#d4d4d4",
21+
400: "#a3a3a3",
22+
500: "#737373",
23+
600: "#525252",
24+
700: "#404040",
25+
800: "#262626",
26+
900: "#171717",
27+
},
28+
accent: {
29+
50: "#fefce8",
30+
100: "#fef9c3",
31+
200: "#fef08a",
32+
300: "#fde047",
33+
400: "#facc15",
34+
500: "#eab308",
35+
600: "#ca8a04",
36+
700: "#a16207",
37+
800: "#854d0e",
38+
900: "#713f12",
39+
},
40+
},
41+
},
42+
},
43+
};
44+
</script>
45+
<link
46+
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
47+
rel="stylesheet"
48+
/>
4749
</head>
48-
<body>
49-
<div class="container">
50-
<img
51-
src="assets/images/logo.png"
52-
alt="CivilCode Logo"
53-
class="logo"
54-
/>
55-
<p class="cta">Tailored Business Applications</p>
56-
<div class="paragraph">
57-
<p>
58-
CivilCode Inc. was a software development company specializing in line of business applications written in Elixir/Phoenix.
59-
We were based in Montreal, Quebec, Canada. We are no longer operating, but you can still reach out to us on LinkedIn.
60-
</p>
61-
<ul>
62-
<li>
63-
<a href="https://www.linkedin.com/in/nicholasjhenry">Nicholas Henry</a>
64-
</li>
65-
<li>
66-
<a href="https://www.linkedin.com/in/hugofrappier">Hugo Frappier</a>
67-
</li>
68-
</div>
50+
<body class="min-h-screen">
51+
<!-- Hero Section with Background Image -->
52+
<section class="relative h-screen">
6953
<img
7054
src="assets/images/lounge.jpg"
7155
alt="CivilCode Lounge"
72-
class="photo"
56+
class="w-full h-full object-cover"
7357
/>
58+
<div
59+
class="absolute inset-0 bg-gradient-to-t from-gray-700/40 via-transparent to-gray-600/20"
60+
></div>
61+
</section>
62+
63+
<!-- Main Content -->
64+
<div class="bg-gradient-to-br from-gray-600 via-gray-500 to-gray-700">
65+
<div class="container mx-auto px-6 py-16 max-w-4xl">
66+
<main class="space-y-16">
67+
<!-- Our Story Section -->
68+
<section class="text-center">
69+
<h2 class="text-4xl font-bold text-white mb-8">Our Story</h2>
70+
<div class="max-w-3xl mx-auto space-y-6">
71+
<p class="text-brand-200 leading-relaxed text-xl">
72+
CivilCode Inc. was a software development company specializing in
73+
line of business applications written in
74+
<span class="font-medium text-accent-400">Elixir/Phoenix</span>.
75+
</p>
76+
<p class="text-brand-200 leading-relaxed text-xl">
77+
Based in
78+
<span class="font-medium text-accent-400"
79+
>Montreal, Quebec, Canada</span
80+
>, we crafted elegant solutions for complex business challenges.
81+
While we are no longer operating, our legacy continues through the
82+
work we've done.
83+
</p>
84+
</div>
85+
</section>
86+
87+
<!-- Team Section -->
88+
<section class="text-center">
89+
<h2 class="text-4xl font-bold text-white mb-12">
90+
Connect with the Founders
91+
</h2>
92+
<div
93+
class="flex flex-col sm:flex-row gap-8 justify-center items-center max-w-2xl mx-auto"
94+
>
95+
<div class="flex items-center group">
96+
<div
97+
class="w-16 h-16 bg-accent-500 rounded-full flex items-center justify-center text-brand-900 font-bold text-xl mr-6 group-hover:shadow-lg group-hover:shadow-accent-400/30 transition-all duration-300"
98+
>
99+
NH
100+
</div>
101+
<div class="text-left">
102+
<a
103+
href="https://www.linkedin.com/in/nicholasjhenry"
104+
class="text-white hover:text-accent-400 font-semibold text-xl transition-colors duration-200 block"
105+
>
106+
Nicholas Henry
107+
</a>
108+
<p class="text-brand-300 text-sm font-medium">Co-Founder</p>
109+
</div>
110+
</div>
111+
<div class="flex items-center group">
112+
<div
113+
class="w-16 h-16 bg-accent-500 rounded-full flex items-center justify-center text-brand-900 font-bold text-xl mr-6 group-hover:shadow-lg group-hover:shadow-accent-400/30 transition-all duration-300"
114+
>
115+
HF
116+
</div>
117+
<div class="text-left">
118+
<a
119+
href="https://www.linkedin.com/in/hugofrappier"
120+
class="text-white hover:text-accent-400 font-semibold text-xl transition-colors duration-200 block"
121+
>
122+
Hugo Frappier
123+
</a>
124+
<p class="text-brand-300 text-sm font-medium">Co-Founder</p>
125+
</div>
126+
</div>
127+
</div>
128+
</section>
129+
130+
<!-- Links Section -->
131+
<section class="text-center">
132+
<div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
133+
<a
134+
href="https://blog.civilcode.io/"
135+
class="inline-flex items-center px-8 py-4 text-white hover:text-accent-400 font-semibold text-lg transition-colors duration-200 group"
136+
>
137+
<svg
138+
class="w-6 h-6 mr-3"
139+
fill="none"
140+
stroke="currentColor"
141+
viewBox="0 0 24 24"
142+
>
143+
<path
144+
stroke-linecap="round"
145+
stroke-linejoin="round"
146+
stroke-width="2"
147+
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
148+
></path>
149+
</svg>
150+
Blog
151+
<span
152+
class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
153+
>→</span
154+
>
155+
</a>
156+
<a
157+
href="https://github.com/civilcode"
158+
class="inline-flex items-center px-8 py-4 text-white hover:text-accent-400 font-semibold text-lg transition-colors duration-200 group"
159+
>
160+
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24">
161+
<path
162+
d="M12 0c-6.626 0-12 5.373-12 12 0 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.23.957-.266 1.983-.399 3.003-.404 1.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.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
163+
/>
164+
</svg>
165+
GitHub
166+
<span
167+
class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
168+
>→</span
169+
>
170+
</a>
171+
<a
172+
href="https://x.com/civilcodeio"
173+
class="inline-flex items-center px-8 py-4 text-white hover:text-accent-400 font-semibold text-lg transition-colors duration-200 group"
174+
>
175+
<svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24">
176+
<path
177+
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
178+
/>
179+
</svg>
180+
X (Twitter)
181+
<span
182+
class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
183+
>→</span
184+
>
185+
</a>
186+
</div>
187+
</section>
188+
</main>
189+
190+
<!-- Footer -->
191+
<footer class="mt-20 text-center">
192+
<p class="text-brand-300 text-sm font-medium">
193+
Built with ❤️ in Montreal, Quebec.
194+
</p>
195+
</footer>
196+
</div>
74197
</div>
75198
</body>
76199
</html>

0 commit comments

Comments
 (0)