Skip to content

Commit e2eb267

Browse files
IntellyCodeIntellyCode
committed
Initial static site
0 parents  commit e2eb267

4 files changed

Lines changed: 591 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# IntellyCode GitHub Pages Site
2+
3+
Static freelancing website for the `Intellycode` / `IntellyCode` GitHub account.
4+
5+
## Files
6+
7+
- `index.html` - single-page website.
8+
- `assets/styles.css` - custom styling on top of Bootstrap.
9+
- `assets/systems-visual.svg` - local visual asset for the hero section.
10+
11+
## Local Preview
12+
13+
From this directory:
14+
15+
```bash
16+
python3 -m http.server 8080
17+
```
18+
19+
Open `http://localhost:8080`.
20+
21+
## GitHub Pages Deployment
22+
23+
1. Create or use a repository named `intellycode.github.io` under the GitHub account.
24+
2. Copy this directory's contents to that repository root.
25+
3. Commit and push to the default branch.
26+
4. In GitHub, open `Settings -> Pages`.
27+
5. Set the source to deploy from the default branch root.
28+
6. After the Pages build completes, visit `https://intellycode.github.io/`.
29+
30+
The site is static and does not require a build step. Bootstrap is loaded from jsDelivr, so the page works best with normal internet access.

‎assets/styles.css‎

Lines changed: 334 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,334 @@
1+
:root {
2+
--ink: #18201f;
3+
--muted: #5f6c69;
4+
--line: #d9e2df;
5+
--paper: #fbfcfa;
6+
--mist: #eef5f2;
7+
--green: #176b5a;
8+
--teal: #238f8f;
9+
--amber: #d99a2b;
10+
--coral: #c85f4a;
11+
}
12+
13+
* {
14+
box-sizing: border-box;
15+
}
16+
17+
body {
18+
margin: 0;
19+
color: var(--ink);
20+
background: var(--paper);
21+
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
22+
line-height: 1.6;
23+
}
24+
25+
a {
26+
color: inherit;
27+
}
28+
29+
.navbar {
30+
background: rgba(251, 252, 250, 0.94);
31+
border-bottom: 1px solid var(--line);
32+
backdrop-filter: blur(14px);
33+
}
34+
35+
.navbar-brand {
36+
color: var(--ink);
37+
font-weight: 800;
38+
letter-spacing: 0;
39+
}
40+
41+
.nav-link {
42+
color: var(--muted);
43+
font-weight: 650;
44+
}
45+
46+
.nav-link:hover,
47+
.nav-link:focus {
48+
color: var(--green);
49+
}
50+
51+
.hero {
52+
min-height: 92vh;
53+
display: flex;
54+
align-items: center;
55+
padding: 8rem 0 4rem;
56+
background:
57+
linear-gradient(135deg, rgba(238, 245, 242, 0.96), rgba(251, 252, 250, 0.78)),
58+
radial-gradient(circle at 85% 20%, rgba(217, 154, 43, 0.22), transparent 30%);
59+
}
60+
61+
.eyebrow {
62+
margin-bottom: 0.75rem;
63+
color: var(--green);
64+
font-size: 0.78rem;
65+
font-weight: 800;
66+
letter-spacing: 0.08em;
67+
text-transform: uppercase;
68+
}
69+
70+
h1,
71+
h2,
72+
h3 {
73+
margin: 0;
74+
letter-spacing: 0;
75+
line-height: 1.1;
76+
}
77+
78+
h1 {
79+
max-width: 11ch;
80+
font-size: clamp(4rem, 9vw, 7.5rem);
81+
font-weight: 850;
82+
}
83+
84+
h2 {
85+
max-width: 16ch;
86+
font-size: clamp(2.2rem, 5vw, 4rem);
87+
font-weight: 820;
88+
}
89+
90+
h3 {
91+
font-size: 1.18rem;
92+
font-weight: 780;
93+
}
94+
95+
.lead {
96+
max-width: 41rem;
97+
margin: 1.35rem 0 0;
98+
color: #34413e;
99+
font-size: clamp(1.08rem, 2vw, 1.32rem);
100+
}
101+
102+
.hero-actions,
103+
.contact-actions {
104+
display: flex;
105+
flex-wrap: wrap;
106+
gap: 0.75rem;
107+
margin-top: 2rem;
108+
}
109+
110+
.btn {
111+
border-radius: 6px;
112+
font-weight: 760;
113+
min-height: 2.85rem;
114+
padding: 0.72rem 1.1rem;
115+
}
116+
117+
.btn-primary {
118+
background: var(--green);
119+
border-color: var(--green);
120+
}
121+
122+
.btn-primary:hover,
123+
.btn-primary:focus {
124+
background: #105044;
125+
border-color: #105044;
126+
}
127+
128+
.btn-outline-dark {
129+
border-color: #60716c;
130+
color: var(--ink);
131+
}
132+
133+
.hero-visual {
134+
width: 100%;
135+
max-height: 33rem;
136+
object-fit: contain;
137+
}
138+
139+
.band,
140+
.section {
141+
padding: 5rem 0;
142+
}
143+
144+
.band {
145+
background: var(--mist);
146+
}
147+
148+
.intro-band h2 {
149+
max-width: 17ch;
150+
}
151+
152+
.intro-band p,
153+
.service-item p,
154+
.case-card p,
155+
.research-item p,
156+
.contact-band p {
157+
color: var(--muted);
158+
}
159+
160+
.signal-box {
161+
height: 100%;
162+
min-height: 11rem;
163+
display: flex;
164+
flex-direction: column;
165+
justify-content: flex-end;
166+
gap: 0.6rem;
167+
padding: 1.4rem;
168+
color: white;
169+
background: var(--green);
170+
border-radius: 8px;
171+
}
172+
173+
.signal-box span,
174+
.case-label,
175+
.research-item span {
176+
font-size: 0.78rem;
177+
font-weight: 800;
178+
letter-spacing: 0.08em;
179+
text-transform: uppercase;
180+
}
181+
182+
.signal-box strong {
183+
max-width: 16rem;
184+
font-size: 1.55rem;
185+
line-height: 1.1;
186+
}
187+
188+
.section-heading {
189+
margin-bottom: 2rem;
190+
}
191+
192+
.case-grid,
193+
.service-grid,
194+
.research-grid {
195+
display: grid;
196+
gap: 1rem;
197+
}
198+
199+
.case-grid {
200+
grid-template-columns: repeat(3, minmax(0, 1fr));
201+
}
202+
203+
.service-grid,
204+
.research-grid {
205+
grid-template-columns: repeat(2, minmax(0, 1fr));
206+
}
207+
208+
.case-card,
209+
.service-item,
210+
.research-item {
211+
border: 1px solid var(--line);
212+
border-radius: 8px;
213+
background: white;
214+
}
215+
216+
.case-card {
217+
display: flex;
218+
flex-direction: column;
219+
min-height: 26rem;
220+
padding: 1.35rem;
221+
}
222+
223+
.case-label {
224+
color: var(--coral);
225+
margin-bottom: 1rem;
226+
}
227+
228+
.case-card p {
229+
margin: 1rem 0;
230+
}
231+
232+
.case-card ul {
233+
margin: auto 0 0;
234+
padding-left: 1.1rem;
235+
color: #34413e;
236+
}
237+
238+
.case-card li + li {
239+
margin-top: 0.45rem;
240+
}
241+
242+
.service-item,
243+
.research-item {
244+
min-height: 12rem;
245+
padding: 1.35rem;
246+
}
247+
248+
.service-item {
249+
border-top: 5px solid var(--amber);
250+
}
251+
252+
.research-item {
253+
border-top: 5px solid var(--teal);
254+
}
255+
256+
.research-item span {
257+
display: block;
258+
margin-bottom: 1rem;
259+
color: var(--teal);
260+
}
261+
262+
.contact-band {
263+
padding: 5rem 0;
264+
color: white;
265+
background: #15211e;
266+
}
267+
268+
.contact-band .eyebrow,
269+
.contact-band p {
270+
color: #d7e5df;
271+
}
272+
273+
.contact-band h2 {
274+
max-width: 18ch;
275+
}
276+
277+
.contact-actions {
278+
justify-content: flex-start;
279+
}
280+
281+
footer {
282+
padding: 1.2rem 0;
283+
color: var(--muted);
284+
background: #101715;
285+
}
286+
287+
footer .container {
288+
display: flex;
289+
justify-content: space-between;
290+
gap: 1rem;
291+
}
292+
293+
@media (max-width: 991.98px) {
294+
.hero {
295+
min-height: auto;
296+
padding-top: 7rem;
297+
}
298+
299+
.case-grid,
300+
.service-grid,
301+
.research-grid {
302+
grid-template-columns: 1fr;
303+
}
304+
305+
.case-card {
306+
min-height: auto;
307+
}
308+
309+
.hero-visual {
310+
max-height: 24rem;
311+
}
312+
}
313+
314+
@media (max-width: 575.98px) {
315+
h1 {
316+
font-size: 3.35rem;
317+
}
318+
319+
.band,
320+
.section,
321+
.contact-band {
322+
padding: 3.5rem 0;
323+
}
324+
325+
.hero-actions,
326+
.contact-actions,
327+
footer .container {
328+
flex-direction: column;
329+
}
330+
331+
.btn {
332+
width: 100%;
333+
}
334+
}

0 commit comments

Comments
 (0)