Skip to content

Commit b3abbee

Browse files
shahidghafoor00shahidghafoor00
committed
Initial portfolio
0 parents  commit b3abbee

6 files changed

Lines changed: 1661 additions & 0 deletions

File tree

‎.nojekyll‎

Whitespace-only changes.

‎assets/logo.png‎

10.7 KB
Loading

‎index.html‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
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>Codebase — Transforming ideas into scalable software solutions</title>
7+
<meta name="description" content="Codebase is a software development company specializing in mobile apps, web platforms, and custom software solutions." />
8+
<link rel="icon" href="assets/logo.png" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
12+
<link rel="stylesheet" href="styles.css" />
13+
</head>
14+
<body>
15+
16+
<!-- ── NAV ── -->
17+
<nav>
18+
<div class="nav-logo">
19+
<a href="#hero"><img src="assets/logo.png" alt="Codebase" /></a>
20+
</div>
21+
<ul class="nav-links">
22+
<li><a href="#about">About</a></li>
23+
<li><a href="#services">Services</a></li>
24+
<li><a href="#portfolio">Portfolio</a></li>
25+
<li><a href="#team">Team</a></li>
26+
<li><a href="#contact" class="nav-cta">Contact Us</a></li>
27+
</ul>
28+
<div class="hamburger" aria-label="Menu">
29+
<span></span><span></span><span></span>
30+
</div>
31+
</nav>
32+
33+
<!-- ── HERO ── -->
34+
<section id="hero">
35+
<div class="hero-grid">
36+
<div class="hero-content">
37+
<span class="hero-badge">Software Development Company</span>
38+
<h1 class="hero-title">
39+
Transforming ideas into <span>scalable</span> software solutions
40+
</h1>
41+
<p class="hero-desc">
42+
We build innovative mobile apps, web platforms, and custom software that empowers businesses to grow, scale, and succeed in the digital world.
43+
</p>
44+
<div class="hero-actions">
45+
<a href="#services" class="btn-primary">Explore Our Services</a>
46+
<a href="#portfolio" class="btn-secondary">View Portfolio</a>
47+
</div>
48+
</div>
49+
<div class="hero-visual">
50+
<div class="hero-card">
51+
<div class="hero-stats">
52+
<div class="stat-item">
53+
<div class="stat-num">8+</div>
54+
<div class="stat-label">Services</div>
55+
</div>
56+
<div class="stat-item">
57+
<div class="stat-num">1K+</div>
58+
<div class="stat-label">App Downloads</div>
59+
</div>
60+
<div class="stat-item">
61+
<div class="stat-num">4</div>
62+
<div class="stat-label">Expert Engineers</div>
63+
</div>
64+
<div class="stat-item">
65+
<div class="stat-num">🌍</div>
66+
<div class="stat-label">Global Reach</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</section>
73+
74+
<!-- ── ABOUT ── -->
75+
<section id="about">
76+
<div class="section-inner">
77+
<div class="about-grid">
78+
<div class="about-text fade-up">
79+
<span class="section-tag">About Codebase</span>
80+
<h2 class="section-title">Built on innovation, driven by results</h2>
81+
<p class="section-subtitle">
82+
Codebase is a software development company focused on building innovative, scalable, and high-quality digital solutions. We specialize in mobile apps, web platforms, and custom software tailored to our clients' unique business needs. Our mission is to empower businesses through technology, delivering reliable solutions that drive growth, efficiency, and long-term success.
83+
</p>
84+
</div>
85+
<div class="about-pillars fade-up">
86+
<div class="pillar">
87+
<div class="pillar-icon">💡</div>
88+
<div class="pillar-body">
89+
<h4>Innovation First</h4>
90+
<p>We embrace cutting-edge technologies to build future-ready products that stand out in the market.</p>
91+
</div>
92+
</div>
93+
<div class="pillar">
94+
<div class="pillar-icon">🎯</div>
95+
<div class="pillar-body">
96+
<h4>Client-Centered</h4>
97+
<p>Every solution is tailored to your specific business goals, ensuring real-world impact and measurable results.</p>
98+
</div>
99+
</div>
100+
<div class="pillar">
101+
<div class="pillar-icon">🔒</div>
102+
<div class="pillar-body">
103+
<h4>Quality & Reliability</h4>
104+
<p>We maintain the highest standards of code quality, security, and performance across every project we deliver.</p>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</section>
111+
112+
<!-- ── SERVICES ── -->
113+
<section id="services">
114+
<div class="section-inner">
115+
<div class="services-header fade-up">
116+
<span class="section-tag">What We Do</span>
117+
<h2 class="section-title">Services we offer</h2>
118+
<p class="section-subtitle">From idea to deployment — we cover the full spectrum of software development to bring your vision to life.</p>
119+
</div>
120+
<div class="services-grid">
121+
<div class="service-card fade-up">
122+
<div class="service-icon">📱</div>
123+
<h3>Mobile App Development</h3>
124+
<p>We build high-performance iOS and Android applications tailored to business needs, using native and cross-platform technologies to deliver seamless user experiences.</p>
125+
</div>
126+
<div class="service-card fade-up">
127+
<div class="service-icon">🌐</div>
128+
<h3>Web Development</h3>
129+
<p>We develop custom websites, web applications, and enterprise platforms that are secure, scalable, and optimized for performance.</p>
130+
</div>
131+
<div class="service-card fade-up">
132+
<div class="service-icon">⚙️</div>
133+
<h3>Backend Development & APIs</h3>
134+
<p>We design and develop robust backend systems, REST APIs, and cloud-based infrastructures that power modern digital products.</p>
135+
</div>
136+
<div class="service-card fade-up">
137+
<div class="service-icon">🎨</div>
138+
<h3>UI/UX Design</h3>
139+
<p>We create intuitive and visually appealing user interfaces focused on delivering exceptional user experiences across web and mobile platforms.</p>
140+
</div>
141+
<div class="service-card fade-up">
142+
<div class="service-icon">💬</div>
143+
<h3>Real-Time Communication Solutions</h3>
144+
<p>We develop real-time messaging, chat, voice, and video communication systems using modern technologies for fast and reliable connectivity.</p>
145+
</div>
146+
<div class="service-card fade-up">
147+
<div class="service-icon">☁️</div>
148+
<h3>Cloud & DevOps Solutions</h3>
149+
<p>We help businesses deploy, manage, and scale applications using cloud platforms, automation, and modern DevOps practices.</p>
150+
</div>
151+
<div class="service-card fade-up">
152+
<div class="service-icon">🛒</div>
153+
<h3>E-Commerce Development</h3>
154+
<p>We build secure and scalable e-commerce platforms that enable businesses to sell products and services online efficiently.</p>
155+
</div>
156+
<div class="service-card fade-up">
157+
<div class="service-icon">🛠️</div>
158+
<h3>Maintenance & Support</h3>
159+
<p>We provide ongoing maintenance, performance optimization, and technical support to ensure applications remain secure, updated, and reliable.</p>
160+
</div>
161+
</div>
162+
</div>
163+
</section>
164+
165+
<!-- ── PORTFOLIO ── -->
166+
<section id="portfolio">
167+
<div class="section-inner">
168+
<div class="portfolio-header fade-up">
169+
<span class="section-tag">Our Work</span>
170+
<h2 class="section-title">Projects we're proud of</h2>
171+
<p class="section-subtitle">A glimpse into some of the solutions we've built for our clients.</p>
172+
</div>
173+
<div class="portfolio-grid">
174+
<div class="portfolio-card fade-up">
175+
<div class="portfolio-cover">
176+
<div class="portfolio-cover-text">LIOX</div>
177+
<div class="portfolio-cover-badge">Mobile App</div>
178+
</div>
179+
<div class="portfolio-body">
180+
<div class="portfolio-category">Laundry & Cleaning</div>
181+
<h3>Liox — Laundry and Cleaning</h3>
182+
<p>Built native iOS and Android mobile applications for an on-demand laundry and dry cleaning platform serving home and commercial clients across the USA, with global availability.</p>
183+
<div class="portfolio-stats">
184+
<div class="p-stat">
185+
<span class="p-stat-num">1K+</span>
186+
<span class="p-stat-label">Downloads</span>
187+
</div>
188+
<div class="p-stat">
189+
<span class="p-stat-num">🌍</span>
190+
<span class="p-stat-label">Global Launch</span>
191+
</div>
192+
<div class="p-stat">
193+
<span class="p-stat-num">USA</span>
194+
<span class="p-stat-label">Operations</span>
195+
</div>
196+
</div>
197+
</div>
198+
</div>
199+
<!-- More projects coming soon -->
200+
<div class="portfolio-card fade-up" style="display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:340px;background:#f7f7f7;border-style:dashed;">
201+
<div style="text-align:center;padding:2rem;">
202+
<div style="font-size:2.5rem;margin-bottom:1rem;opacity:0.3;">+</div>
203+
<h3 style="font-size:1rem;color:#999;font-weight:600;">More Projects Coming Soon</h3>
204+
<p style="font-size:0.85rem;color:#bbb;margin-top:0.5rem;">We're constantly delivering new solutions.</p>
205+
</div>
206+
</div>
207+
</div>
208+
</div>
209+
</section>
210+
211+
<!-- ── TEAM ── -->
212+
<section id="team">
213+
<div class="section-inner">
214+
<div class="team-header fade-up">
215+
<span class="section-tag">Our Team</span>
216+
<h2 class="section-title">The people behind Codebase</h2>
217+
<p class="section-subtitle">A passionate team of engineers and designers committed to building exceptional software.</p>
218+
</div>
219+
<div class="team-grid">
220+
<div class="team-card fade-up">
221+
<div class="team-avatar">IH</div>
222+
<h3>Imran Hakeem</h3>
223+
<div class="team-role">CEO & Founder</div>
224+
<p>10+ years building software products across mobile and web.</p>
225+
</div>
226+
<div class="team-card fade-up">
227+
<div class="team-avatar">OA</div>
228+
<h3>Omer Akram</h3>
229+
<div class="team-role">Co-Founder & CTO</div>
230+
<p>Leads technical architecture and engineering at Codebase.</p>
231+
</div>
232+
<div class="team-card fade-up">
233+
<div class="team-avatar">S</div>
234+
<h3>Shahid</h3>
235+
<div class="team-role">Software Engineer & Mobile Developer</div>
236+
<p>Builds native and cross-platform mobile apps and delivers seamless user experiences at Codebase.</p>
237+
</div>
238+
<div class="team-card fade-up">
239+
<div class="team-avatar">HK</div>
240+
<h3>Husnain Kareem</h3>
241+
<div class="team-role">Software Engineer & Android Developer</div>
242+
<p>Develops robust and high-performance Android applications, turning complex ideas into smooth user experiences at Codebase.</p>
243+
</div>
244+
</div>
245+
</div>
246+
</section>
247+
248+
<!-- ── CONTACT ── -->
249+
<section id="contact">
250+
<div class="section-inner">
251+
<div class="contact-grid">
252+
<div class="fade-up">
253+
<span class="section-tag">Get In Touch</span>
254+
<h2 class="section-title">Let's build something great together</h2>
255+
<p class="section-subtitle">Have a project in mind? Reach out and let's discuss how Codebase can bring your idea to life.</p>
256+
<div class="contact-details">
257+
<div class="contact-item">
258+
<div class="contact-item-icon">✉️</div>
259+
<div class="contact-item-body">
260+
<div class="contact-item-label">Email</div>
261+
<div class="contact-item-value"><a href="mailto:codebasepk@gmail.com">codebasepk@gmail.com</a></div>
262+
</div>
263+
</div>
264+
<div class="contact-item">
265+
<div class="contact-item-icon">📞</div>
266+
<div class="contact-item-body">
267+
<div class="contact-item-label">Phone</div>
268+
<div class="contact-item-value"><a href="tel:+923414503584">+92 341 4503584</a></div>
269+
</div>
270+
</div>
271+
<div class="contact-item">
272+
<div class="contact-item-icon">💻</div>
273+
<div class="contact-item-body">
274+
<div class="contact-item-label">GitHub</div>
275+
<div class="contact-item-value"><a href="https://github.com/codebasepk" target="_blank" rel="noopener">github.com/codebasepk</a></div>
276+
</div>
277+
</div>
278+
</div>
279+
</div>
280+
<div class="fade-up">
281+
<form class="contact-form">
282+
<div class="form-row">
283+
<div class="form-group">
284+
<label for="name">Your Name</label>
285+
<input type="text" id="name" placeholder="John Doe" required />
286+
</div>
287+
<div class="form-group">
288+
<label for="email">Email Address</label>
289+
<input type="email" id="email" placeholder="john@company.com" required />
290+
</div>
291+
</div>
292+
<div class="form-group">
293+
<label for="subject">Subject</label>
294+
<input type="text" id="subject" placeholder="Project idea / Inquiry" required />
295+
</div>
296+
<div class="form-group">
297+
<label for="message">Message</label>
298+
<textarea id="message" rows="5" placeholder="Tell us about your project..." required></textarea>
299+
</div>
300+
<button type="submit" class="btn-send">Send Message</button>
301+
</form>
302+
</div>
303+
</div>
304+
</div>
305+
</section>
306+
307+
<!-- ── FOOTER ── -->
308+
<footer>
309+
<div class="footer-inner">
310+
<div class="footer-logo">
311+
<img src="assets/logo.png" alt="Codebase" />
312+
</div>
313+
<div class="footer-copy">© 2024 Codebase. All rights reserved.</div>
314+
<div class="footer-links">
315+
<a href="#about">About</a>
316+
<a href="#services">Services</a>
317+
<a href="#portfolio">Portfolio</a>
318+
<a href="mailto:codebasepk@gmail.com">Email</a>
319+
<a href="https://github.com/codebasepk" target="_blank" rel="noopener">GitHub</a>
320+
</div>
321+
</div>
322+
</footer>
323+
324+
<script src="script.js"></script>
325+
</body>
326+
</html>

0 commit comments

Comments
 (0)