Skip to content

Commit 0168678

Browse files
aalhouraalhour
committed
Move source files to site dir.
1 parent dbbdfda commit 0168678

File tree

5 files changed

+295
-0
lines changed

5 files changed

+295
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ _site/
66
.bundle/
77
vendor/
88
.DS_Store
9+
lefthook.yml

‎site/assets/css/styles.css‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
:root {
2+
--sand: #F4E6C4;
3+
--saffron: #E2B714;
4+
--terracotta: #B34E36;
5+
--marigold: #D9912A;
6+
--teal: #2F8F9D;
7+
--night: #152029;
8+
--ink: #21313B;
9+
--white: #FFFFFF;
10+
}
11+
12+
html, body {
13+
margin: 0;
14+
padding: 0;
15+
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
16+
color: var(--ink);
17+
background:
18+
radial-gradient(1200px 600px at 10% -10%, rgba(227, 183, 20, 0.15), transparent 60%),
19+
linear-gradient(180deg, #FFFDF6 0%, var(--sand) 100%);
20+
}
21+
22+
.wrap {
23+
max-width: 940px;
24+
margin: 0 auto;
25+
padding: 32px 20px 64px;
26+
}
27+
28+
header {
29+
display: flex;
30+
align-items: center;
31+
gap: 16px;
32+
padding: 18px 0 8px;
33+
}
34+
35+
.logo {
36+
width: 54px; height: 54px;
37+
border-radius: 14px;
38+
background: conic-gradient(from 210deg, var(--terracotta), var(--marigold), var(--saffron));
39+
box-shadow: 0 8px 24px rgba(0,0,0,0.12), inset 0 0 0 2px rgba(255,255,255,0.6);
40+
display: grid; place-items: center;
41+
color: var(--white);
42+
font-weight: 800;
43+
letter-spacing: 0.5px;
44+
font-size: 12px;
45+
}
46+
47+
h1 {
48+
font-size: clamp(28px, 4vw, 44px);
49+
line-height: 1.08;
50+
margin: 0;
51+
color: var(--night);
52+
}
53+
54+
.subtitle {
55+
margin-top: 6px;
56+
font-size: clamp(14px, 2.2vw, 18px);
57+
color: #324552;
58+
}
59+
60+
.hero {
61+
margin-top: 28px;
62+
border-radius: 20px;
63+
background: linear-gradient(135deg, rgba(179,78,54,0.10), rgba(47,143,157,0.10));
64+
border: 1px solid rgba(21,32,41,0.08);
65+
overflow: hidden;
66+
}
67+
68+
.hero-inner {
69+
display: grid;
70+
grid-template-columns: 1.2fr 1fr;
71+
gap: 20px;
72+
padding: clamp(18px, 4vw, 32px);
73+
}
74+
75+
@media (max-width: 800px) {
76+
.hero-inner { grid-template-columns: 1fr; }
77+
}
78+
79+
.copy p {
80+
margin: 0 0 14px;
81+
font-size: clamp(16px, 2.4vw, 18px);
82+
}
83+
84+
.badge {
85+
display: inline-flex;
86+
align-items: center;
87+
gap: 8px;
88+
background: rgba(226,183,20,0.14);
89+
color: #6a5206;
90+
border: 1px solid rgba(226,183,20,0.35);
91+
border-radius: 999px;
92+
padding: 8px 12px;
93+
font-weight: 600;
94+
font-size: 14px;
95+
margin-bottom: 12px;
96+
}
97+
98+
.cta {
99+
display: flex;
100+
flex-wrap: wrap;
101+
gap: 12px;
102+
margin-top: 12px;
103+
}
104+
105+
.btn {
106+
appearance: none;
107+
border: none;
108+
padding: 12px 16px;
109+
font-weight: 700;
110+
border-radius: 12px;
111+
cursor: pointer;
112+
text-decoration: none;
113+
display: inline-flex;
114+
align-items: center;
115+
gap: 10px;
116+
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
117+
transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
118+
}
119+
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.12); }
120+
121+
.btn-primary {
122+
background: linear-gradient(135deg, var(--terracotta), var(--marigold));
123+
color: var(--white);
124+
}
125+
126+
.btn-secondary {
127+
background: linear-gradient(135deg, rgba(47,143,157,0.12), rgba(47,143,157,0.24));
128+
color: var(--ink);
129+
border: 1px solid rgba(47,143,157,0.45);
130+
}
131+
132+
.arch {
133+
width: 100%;
134+
aspect-ratio: 16/10;
135+
border-radius: 16px;
136+
position: relative;
137+
overflow: hidden;
138+
border: 1px solid rgba(21,32,41,0.08);
139+
}
140+
141+
.arch::before {
142+
content: '';
143+
position: absolute;
144+
inset: 0;
145+
background: url('../img/digital_bazaar_2025.jpg') center/cover;
146+
mask-image: linear-gradient(to bottom, transparent 5%, black 35%, black 100%);
147+
-webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 35%, black 100%);
148+
}.arch svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
149+
150+
footer {
151+
margin-top: 26px;
152+
padding-top: 14px;
153+
border-top: 1px dashed rgba(21,32,41,0.18);
154+
font-size: 14px;
155+
color: #4A5D6A;
156+
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
157+
}
158+
159+
.links a { color: var(--teal); text-decoration: none; font-weight: 700; }
160+
.links a:hover { text-decoration: underline; }
161+
162+
.rules {
163+
margin-top: 40px;
164+
padding: 32px;
165+
border-radius: 20px;
166+
background: linear-gradient(135deg, rgba(47,143,157,0.08), rgba(179,78,54,0.08));
167+
border: 1px solid rgba(21,32,41,0.08);
168+
}
169+
170+
.rules h2 {
171+
color: var(--night);
172+
font-size: 24px;
173+
margin: 0 0 20px;
174+
}
175+
176+
.rules-list {
177+
list-style: none;
178+
padding: 0;
179+
margin: 0;
180+
display: grid;
181+
gap: 16px;
182+
}
183+
184+
.rules-list li {
185+
display: flex;
186+
align-items: flex-start;
187+
gap: 12px;
188+
font-size: 16px;
189+
line-height: 1.5;
190+
}
191+
192+
.rules-list li span {
193+
background: var(--white);
194+
width: 28px;
195+
height: 28px;
196+
flex-shrink: 0;
197+
border-radius: 8px;
198+
display: grid;
199+
place-items: center;
200+
color: var(--terracotta);
201+
font-weight: 700;
202+
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
203+
border: 1px solid rgba(179,78,54,0.15);
204+
}

‎site/assets/img/digital_bazaar_2025.jpg‎

587 KB
Loading

‎site/assets/img/digital_bazaar_2025.png‎

2.08 MB
Loading

‎site/index.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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" />
6+
<title>Digital Bazaar — Where the Arab digital world meets, trades, and grows.</title>
7+
<meta name="description" content="Digital Bazaar — a warm, informal community for Arab founders, builders, marketers, designers, and engineers. Join the WhatsApp community and our GitHub org for OSS tinkering." />
8+
<meta property="og:title" content="Digital Bazaar" />
9+
<meta property="og:description" content="Where the Arab digital world meets, trades, and grows." />
10+
<meta property="og:type" content="website" />
11+
<meta property="og:image" content="" />
12+
<meta name="theme-color" content="#b34e36" />
13+
<link rel="stylesheet" href="assets/css/styles.css" />
14+
</head>
15+
<body>
16+
<div class="wrap">
17+
<header>
18+
<img src="assets/img/digital_bazaar_2025.jpg" alt="Digital Bazaar Logo" class="logo" />
19+
<div>
20+
<h1>The Digital Bazaar 💬</h1>
21+
<div class="subtitle">Where the Arab digital world meets, trades, and grows.</div>
22+
</div>
23+
</header>
24+
25+
<section class="hero">
26+
<div class="hero-inner">
27+
<div class="copy">
28+
<div class="badge">🛍️ A warm, informal community</div>
29+
<p><strong>Digital Bazaar</strong> is a modern souq for founders, builders, marketers, designers, and engineers across the Arab world. We swap ideas, share opportunities, and help each other build real things — without the noise.</p>
30+
<p>Join the WhatsApp community, tinker with us on GitHub, and help shape the bazaar’s next stall.</p>
31+
<div class="cta">
32+
<a class="btn btn-primary" href="https://chat.whatsapp.com/Lg73q7FG8cHGFKzfYSkZV5" target="_blank" rel="noopener">
33+
<span>Join WhatsApp</span> <span aria-hidden="true">↗</span>
34+
</a>
35+
<a class="btn btn-secondary" href="https://github.com/DigitalBazaarHub" target="_blank" rel="noopener">
36+
<span>Visit GitHub</span> <span aria-hidden="true">↗</span>
37+
</a>
38+
</div>
39+
</div>
40+
<div class="arch" aria-hidden="true"></div>
41+
</div>
42+
</section>
43+
44+
<section class="rules">
45+
<h2>🤝 Community Rules</h2>
46+
<ul class="rules-list">
47+
<li>
48+
<span>1</span>
49+
<div>Be kind and respectful to all members. We're here to support and uplift each other in our professional journeys.</div>
50+
</li>
51+
<li>
52+
<span>2</span>
53+
<div>Share knowledge and opportunities freely. The bazaar thrives on open exchange of ideas and connections.</div>
54+
</li>
55+
<li>
56+
<span>3</span>
57+
<div>Keep discussions constructive and relevant to tech, business, and the digital ecosystem.</div>
58+
</li>
59+
<li>
60+
<span>4</span>
61+
<div>No spam, no hard selling. Share your work naturally and respect the community's attention.</div>
62+
</li>
63+
<li>
64+
<span>5</span>
65+
<div>Maintain professionalism while keeping the warm, informal spirit that makes our community special.</div>
66+
</li>
67+
<li>
68+
<span>6</span>
69+
<div>Moderators reserve the right to remove disruptive members at any time, no warnings required.</div>
70+
</li>
71+
<li>
72+
<span>7</span>
73+
<div>Don't be an asshole. Zero tolerance for racism, sexism, harassment, or toxic behavior of any kind.</div>
74+
</li>
75+
</ul>
76+
</section>
77+
78+
<footer>
79+
<div>© <span id="year"></span> Digital Bazaar • Made with ❤ across the Arab world</div>
80+
<div class="links">
81+
<a href="#" target="_blank" rel="noopener">WhatsApp</a>&nbsp;•&nbsp;
82+
<a href="#" target="_blank" rel="noopener">GitHub</a>
83+
</div>
84+
</footer>
85+
</div>
86+
<script>
87+
document.getElementById('year').textContent = new Date().getFullYear();
88+
</script>
89+
</body>
90+
</html>

0 commit comments

Comments
 (0)