Current Path: > home > codekrsu > > public_html
Operation : Linux premium131.web-hosting.com 4.18.0-553.44.1.lve.el8.x86_64 #1 SMP Thu Mar 13 14:29:12 UTC 2025 x86_64 Software : Apache Server IP : 162.0.232.56 | Your IP: 216.73.216.111 Domains : 1034 Domain(s) Permission : [ 0750 ]
| Name | Type | Size | Last Modified | Actions |
|---|---|---|---|---|
| .well-known | Directory | - | - | |
| assets | Directory | - | - | |
| cgi-bin | Directory | - | - | |
| images | Directory | - | - | |
| projects | Directory | - | - | |
| readme-images | Directory | - | - | |
| CodexHarbor New Website.zip | File | 4266669 bytes | January 03 2025 07:35:27. | |
| favicon.svg | File | 3097 bytes | September 04 2024 14:41:32. | |
| index.html | File | 45748 bytes | February 05 2025 06:29:43. | |
| index.txt | File | 3551 bytes | September 04 2024 14:41:32. | |
| style-guide.md | File | 1965 bytes | September 04 2024 14:41:32. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodexHarbor - Software Solutions</title>
<!--
- favicon
-->
<link rel="shortcut icon" href="./images/logoc.png" type="image/svg+xml">
<!--
- custom css link
-->
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/style1.css">
<!--
- google font link
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Source+Sans+Pro:wght@600;700&display=swap"
rel="stylesheet">
</head>
<body id="top">
<!--
- #HEADER
-->
<header class="header" data-header>
<div class="container">
<div class="overlay" data-overlay></div>
<a href="#">
<h1 class="logo">CodexHarbor</h1>
</a>
<nav class="navbar" data-navbar>
<div class="navbar-top">
<a href="#" class="logo">CodexHarbor</a>
<button class="nav-close-btn" aria-label="Close Menu" data-nav-close-btn>
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<ul class="navbar-list">
<li class="navbar-item">
<a href="#home" class="navbar-link" data-navbar-link>Home</a>
</li>
<li class="navbar-item">
<a href="#about" class="navbar-link" data-navbar-link>About</a>
</li>
<li class="navbar-item">
<a href="#services" class="navbar-link" data-navbar-link>Services</a>
</li>
<li class="navbar-item">
<a href="#features" class="navbar-link" data-navbar-link>Features</a>
</li>
<li class="navbar-item">
<a href="#projects" class="navbar-link" data-navbar-link>Projects</a>
</li>
<li class="navbar-item">
<a href="#reviews" class="navbar-link" data-navbar-link>Testimonials</a>
</li>
<li class="navbar-item">
<a href="#footer" class="navbar-link" data-navbar-link>Contact Us</a>
</li>
</ul>
</nav>
<script>document.addEventListener('DOMContentLoaded', function () {
const navbar = document.querySelector('.navbar');
const openBtn = document.querySelector('.nav-open-btn');
const closeBtn = document.querySelector('.nav-close-btn');
// Open the navbar when the open button is clicked
openBtn.addEventListener('click', function () {
navbar.classList.add('active');
});
// Close the navbar when the close button is clicked
closeBtn.addEventListener('click', function () {
navbar.classList.remove('active');
});
// Close the navbar when a navbar link is clicked
const navbarLinks = document.querySelectorAll('.navbar-link');
navbarLinks.forEach(link => {
link.addEventListener('click', function () {
navbar.classList.remove('active');
});
});
});
</script>
<a href="https://wa.me/447718998706?text=Hello,%20I%20would%20like%20to%20hire%20your%20services" class="btn" target="_blank">
<ion-icon name="chevron-forward-outline" aria-hidden="true"></ion-icon>
<span>HIRE US</span>
</a>
<button class="nav-open-btn" aria-label="Open Menu" data-nav-open-btn>
<ion-icon name="menu-outline"></ion-icon>
</button>
</div>
</header>
<main>
<article>
<!--
- #HERO
-->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<p class="hero-subtitle" style="text-align: left;">Eat Sleep And Code</p>
<h2 class="h2 hero-title" style="text-align: left;">Crafting Tomorrow's Digital Solutions!</h2>
<p class="hero-text" style="text-align: left;">
Pioneering software solutions, transforming ideas into seamless applications with precision and innovation for a connected future.
</p>
<a href="https://drive.google.com/file/d/1UaNw9T4RAtAr7D3iM440ZiARU6o_OaQe/view"><button class="btn">Our Portfolio</button></a>
</div>
<figure class="hero-banner">
<img src="./images/about1.png" width="694" height="529" loading="lazy" alt="hero-banner"
class="w-100 banner-animation">
</figure>
</div>
</section>
<!--
- #ABOUT
-->
<section class="section about" id="about">
<div class="container">
<figure class="about-banner">
<img src="./images/logo.png" width="700" height="532" loading="lazy" alt="about banner"
class="w-100 banner-animation">
</figure>
<div class="about-content">
<h2 class="h2 section-title underline">Why our Company</h2><br>
<p class="about-text">
Welcome to CodexHarbor, where innovation meets excellence. We are a dynamic software company dedicated to crafting digital solutions that redefine the way businesses operate in the digital landscape.
<br><br>
At CodexHarbor, we specialize in creating cutting-edge websites, intuitive mobile applications, and captivating UI/UX designs. Our team of skilled and passionate professionals is committed to delivering high-quality software solutions that not only meet but exceed the expectations of our clients.
</p>
<ul class="about-list">
<li class="about-item">
<ion-icon name="checkmark-outline"></ion-icon>
<span class="span">Innovation:</span>
<p style="text-align: left;">We lead with innovation, adopting cutting-edge tech trends.</p>
</li>
<li class="about-item">
<ion-icon name="checkmark-outline"></ion-icon>
<span class="span">Collaboration:</span>
<p style="text-align: left;">Transparent, collaborative partnerships prioritize your vision for fruition together.</p>
</li>
<li class="about-item">
<ion-icon name="checkmark-outline"></ion-icon>
<span class="span">Quality:</span>
<p style="text-align: left;"> Unwavering dedication to quality through rigorous testing and detail.</p>
</li>
<li class="about-item">
<ion-icon name="checkmark-outline"></ion-icon>
<span class="span">Satisfaction:</span>
<p style="text-align: left;"> Our success hinges on delivering exceptional results and service.</p>
</li>
</ul>
<ul class="stats-list">
<li class="stats-card">
<p class="h3 stats-title" data-count="51">0<span>+</span></p>
<p class="stats-text">Satisfied Clients</p>
</li>
<li class="stats-card">
<p class="h3 stats-title" data-count="730">0<span>+</span></p>
<p class="stats-text">Project Launched</p>
</li>
<li class="stats-card">
<p class="h3 stats-title" data-count="2">0<span>+</span></p>
<p class="stats-text">Years Completed</p>
</li>
</ul>
</div>
</div>
</section>
<script>// Function to handle the counter animation
function animateCounter(element) {
const countTo = parseInt(element.getAttribute('data-count'), 10);
let count = 0;
const duration = 2000; // Duration in ms
const stepTime = Math.abs(Math.floor(duration / countTo));
const counterInterval = setInterval(() => {
count += 1;
element.innerHTML = count + '<span>+</span>';
if (count >= countTo) {
clearInterval(counterInterval);
element.innerHTML = countTo + '<span>+</span>';
}
}, stepTime);
}
// Function to check if the element is in view
function isInView(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
// Animate counters when scrolled into view
function animateCountersOnScroll() {
const counters = document.querySelectorAll('.stats-title');
counters.forEach(counter => {
if (isInView(counter) && !counter.classList.contains('counted')) {
counter.classList.add('counted');
animateCounter(counter);
}
});
}
// Event listener for scrolling
window.addEventListener('scroll', animateCountersOnScroll);
</script>
<!--
- Services
-->
<section class="section section-divider grey services-section" id="services">
<div class="container">
<h2 class="h2 section-title underline">Our Services</h2>
<ul class="services-list hide-scrollbar">
<li class="service-item">
<div class="service-card">
<h3 class="h3 service-title">Website Development</h3>
<p class="service-description">
Crafting dynamic websites with precision, creativity, and seamless user experiences for online success.
</p>
<img src="./images/webdevelop.png" width="300" height="300" loading="lazy" alt="Website Development"
class="w-100 service-image">
</div>
</li>
<li class="service-item">
<div class="service-card">
<h3 class="h3 service-title">Android Mobile App Development</h3>
<p class="service-description">
Craft powerful Android apps with our intuitive development solutions today.
</p>
<img src="./images/appdevelop.png" width="300" height="300" loading="lazy" alt="Mobile App Development"
class="w-100 service-image">
</div>
</li>
<li class="service-item">
<div class="service-card">
<h3 class="h3 service-title">Photography</h3>
<p class="service-description">
Creative photography and videography event management services delivered professionally.
</p>
<img src="./images/Photography.png" width="300" height="300" loading="lazy" alt="Photography"
class="w-100 service-image">
</div>
</li>
<li class="service-item">
<div class="service-card">
<h3 class="h3 service-title">Digital Marketing</h3>
<p class="service-description">
Strategic promotion of products using online channels to engage and convert customers.
</p>
<img src="./images/Digital Marketing.png" width="300" height="300" loading="lazy" alt="Digital Marketing"
class="w-100 service-image">
</div>
</li>
<li class="service-item">
<div class="service-card">
<h3 class="h3 service-title">UI/UX Design</h3>
<p class="service-description">
Crafting seamless digital experiences, UI/UX designers blend form and function harmoniously for users.
</p>
<img src="./images/ui.uxdesign.png" width="300" height="300" loading="lazy" alt="UI/UX Design"
class="w-100 service-image">
</div>
</li>
<li class="service-item">
<div class="service-card">
<h3 class="h3 service-title">IT Consulting</h3>
<p class="service-description">
Strategic IT consulting: Tailored solutions, seamless integration, and optimized technology for business success.
</p>
<img src="./images/consulting.png" width="300" height="300" loading="lazy" alt="IT Consulting"
class="w-100 service-image">
</div>
</li>
<li class="service-item">
<div class="service-card">
<h3 class="h3 service-title">Graphic Designing</h3>
<p class="service-description">
Crafting compelling visuals, merging artistry and strategy to communicate messages with impactful design solutions.
</p>
<img src="./images/graphicdesign.png" width="300" height="300" loading="lazy" alt="Graphic Designing"
class="w-100 service-image">
</div>
</li>
</ul>
<button class="services-slider-btn services-left-btn" id="servicesPrevBtn">❮</button>
<button class="services-slider-btn services-right-btn" id="servicesNextBtn">❯</button>
</div>
</section>
<script>document.addEventListener("DOMContentLoaded", function () {
const servicesList = document.querySelector(".services-list");
const prevBtn = document.getElementById("servicesPrevBtn");
const nextBtn = document.getElementById("servicesNextBtn");
const scrollAmount = 300; // Amount to scroll on each click
function scrollLeft() {
servicesList.scrollBy({
left: -scrollAmount,
behavior: 'smooth'
});
}
function scrollRight() {
servicesList.scrollBy({
left: scrollAmount,
behavior: 'smooth'
});
}
prevBtn.addEventListener('click', scrollLeft);
nextBtn.addEventListener('click', scrollRight);
});
</script>
<!--
- #FEATURES
-->
<section class="section features" id="features">
<div class="container">
<h2 class="h2 section-title underline">Our Features</h2>
<ul class="features-list">
<li>
<div class="features-card">
<div class="icon">
<ion-icon name="bulb-outline"></ion-icon>
</div>
<div class="content">
<h3 class="h3 title">Seamless Integration</h3>
<p class="text" >
Connect effortlessly with leading platforms, ensuring smooth workflow and enhanced productivity.
</p>
</div>
</div>
</li>
<li>
<div class="features-card">
<div class="icon">
<ion-icon name="color-palette-outline"></ion-icon>
</div>
<div class="content">
<h3 class="h3 title">Scalable Architecture</h3>
<p class="text">
Adapt to growth with a flexible design that maintains performance as your business evolves.
</p>
</div>
</div>
</li>
</ul>
<figure class="features-banner">
<img src="./assets/images/feautres-banner.png" width="369" height="318" loading="lazy" alt="Features Banner"
class="w-100 banner-animation">
</figure>
<ul class="features-list">
<li>
<div class="features-card">
<div class="icon">
<ion-icon name="code-slash-outline"></ion-icon>
</div>
<div class="content">
<h3 class="h3 title">Intuitive User Experience</h3>
<p class="text">
Navigate with ease using a sleek interface and personalized dashboards, boosting efficiency from the start.
</p>
</div>
</div>
</li>
<li>
<div class="features-card">
<div class="icon">
<ion-icon name="rocket-outline"></ion-icon>
</div>
<div class="content">
<h3 class="h3 title">Advanced Security Protocols</h3>
<p class="text">
Protect your data with top-notch encryption and multi-layered defenses against emerging threats.
</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<!--
#Projects
-->
<section class="section section-divider grey projects-section" id="projects">
<div class="projects-container">
<h2 class="h2 section-title underline">Projects Completed</h2><br>
<div class="projects-slider-container">
<button class="projects-slider-btn projects-left-btn" id="projectsPrevBtn">❮</button>
<ul class="projects-list">
<!-- Project Items (each as a .projects-item) -->
<li class="projects-item">
<div class="projects-card">
<a href="https://theperfumestudio.lk/">
<h3 class="h3 projects-card-title">The Perfume Studio</h3>
</a>
<p class="projects-card-text">Discover luxurious scents that captivate, inspire, and define your essence.</p>
<img src="./projects/The Perfume Studio.png" width="300" height="300" loading="lazy" alt="The Perfume Studio"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://retinatelevision.com/">
<h3 class="h3 projects-card-title">Retina Television</h3>
</a>
<p class="projects-card-text"> Discover exciting products and exclusive deals while enjoying captivating shows.</p>
<img src="./projects/Retina Television.png" width="300" height="300" loading="lazy" alt="Retina Television"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://shopceylon.store/">
<h3 class="h3 projects-card-title">Shop Ceylon Multi-vendor Website</h3>
</a>
<p class="projects-card-text">Sri Lanka's premier multi-vendor platform for diverse products and services.</p>
<img src="./projects/Shop Ceylon.png" width="300" height="300" loading="lazy" alt="Shop Ceylon"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://escapematrixonline.com/">
<h3 class="h3 projects-card-title">Escape Matrix Online</h3>
</a>
<p class="projects-card-text">Break free from the daily grind. Learn to earn more, save more, and achieve financial freedom.</p>
<img src="./projects/Escape Matrix Online.png" width="300" height="300" loading="lazy" alt="Escape Matrix Online"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://cuddlebuds.lk/">
<h3 class="h3 projects-card-title">Cuddle Buds</h3>
</a>
<p class="projects-card-text">Handcrafted heirloom frocks, sustainably made by skilled Sri Lankan artisans, empowering women.</p>
<img src="./projects/Cuddle Buds.png" width="300" height="300" loading="lazy" alt="Cuddle Buds"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://shaazolanka.com/">
<h3 class="h3 projects-card-title">Shaazo Lanka</h3>
</a>
<p class="projects-card-text">Every spare part, every model, your vehicle deserves.</p>
<img src="./projects/Shaazo Lanka.png" width="300" height="300" loading="lazy" alt="Shaazo Lanka"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://spiceisle.lk/">
<h3 class="h3 projects-card-title">Spice Isle</h3>
</a>
<p class="projects-card-text">Authentic Ceylon spices delivering rich flavors from Sri Lanka to you.</p>
<img src="./projects/Spice Isle.png" width="300" height="300" loading="lazy" alt="Spice Isle"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://sandgexpo.com/">
<h3 class="h3 projects-card-title">S & G Expo</h3>
</a>
<p class="projects-card-text">Spices that sizzle, staples that satisfy, sweetness that delights your everyday needs.</p>
<img src="./projects/S & G Expo.png" width="300" height="300" loading="lazy" alt="S & G Expo"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://rajanima.com/">
<h3 class="h3 projects-card-title">Rajanima Craft Website</h3>
</a>
<p class="projects-card-text">Explore a vibrant online world of creativity with diverse arts and crafts inspiration.</p>
<img src="./projects/Rajanima.png" width="300" height="300" loading="lazy" alt="Rajanima"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://ameliagraphics.com/">
<h3 class="h3 projects-card-title">Amelia Graphics</h3>
</a>
<p class="projects-card-text">Transform your ideas into stunning visuals. Let our graphic designers bring your vision to life.</p>
<img src="./projects/Amelia Graphics.png" width="300" height="300" loading="lazy" alt="Amelia Graphics"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://exactextract.lk/">
<h3 class="h3 projects-card-title">Exact Extract</h3>
</a>
<p class="projects-card-text">Exact Extract delivers meticulously crafted, high fragrances, perfectly recreating the luxury you love.</p>
<img src="./projects/Exact Extract.png" width="300" height="300" loading="lazy" alt="Exact Extract"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://loveandlab.com/">
<h3 class="h3 projects-card-title">Love & Lab</h3>
</a>
<p class="projects-card-text">Love & Lab: Science-driven skincare with natural ingredients for radiant, healthy, and confident skin.</p>
<img src="./projects/Love and Lab.png" width="300" height="300" loading="lazy" alt="Love and Lab"
class="w-100 projects-card-banner">
</div>
</li>
<!--<li class="projects-item">-->
<!-- <div class="projects-card">-->
<!-- <a href="https://bakersstreet.co.uk/">-->
<!-- <h3 class="h3 projects-card-title">Bakers Street Ecommerce Website</h3>-->
<!-- </a>-->
<!-- <p class="projects-card-text">A bakery ingredient company in UK, chose us for their online store.</p>-->
<!-- <img src="./projects/Bakers Street.png" width="300" height="300" loading="lazy" alt="Bakers Street"-->
<!-- class="w-100 projects-card-banner">-->
<!-- </div>-->
<!--</li>-->
<li class="projects-item">
<div class="projects-card">
<a href="https://batiq.lk/">
<h3 class="h3 projects-card-title">BatiQ Coming Soon Website</h3>
</a>
<p class="projects-card-text">Discover a thriving creative online community with a wide range of batik inspiration.</p>
<img src="./projects/BatiQ.png" width="300" height="300" loading="lazy" alt="BatiQ"
class="w-100 projects-card-banner">
</div>
</li>
<!--<li class="projects-item">-->
<!-- <div class="projects-card">-->
<!-- <a href="https://buylankan.co.uk/">-->
<!-- <h3 class="h3 projects-card-title">BuyLankan Multi Vendor Website</h3>-->
<!-- </a>-->
<!-- <p class="projects-card-text">We connect Sri Lankan vendors with UK customers for authentic products.</p>-->
<!-- <img src="./projects/BuyLankan.png" width="300" height="300" loading="lazy" alt="BuyLankan"-->
<!-- class="w-100 projects-card-banner">-->
<!-- </div>-->
<!--</li>-->
<!-- <li class="projects-item">-->
<!-- <div class="projects-card">-->
<!-- <a href="https://b2b.bakersstreet.co.uk/">-->
<!-- <h3 class="h3 projects-card-title">B2B Bakers Street Ecommerce Website</h3></a>-->
<!-- <p class="projects-card-text">-->
<!-- B2B Bakers Street supplies bulk bakery ingredients to UK businesses.-->
<!-- </p>-->
<!-- <img src="./projects/Bakers Street.png" width="300" height="300" loading="lazy" alt="B2B Bakers Street"-->
<!-- class="w-100 projects-card-banner">-->
<!-- </div>-->
<!--</li>-->
<li class="projects-item">
<div class="projects-card">
<a href="https://phoneplanet.lk/"><h3 class="h3 projects-card-title">Phone Planet Website</h3></a>
<p class="projects-card-text">
Experience the epitome of elegance with our sophisticated phone web design & functionality.
</p>
<img src="./projects/PhonePlanet.png" width="300" height="300" loading="lazy" alt="Phone Planet"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://mmshamran.netlify.app/"><h3 class="h3 projects-card-title">Shamran's Portfolio</h3></a>
<p class="projects-card-text">
A portfolio website presents projects, skills, and accomplishments in a polished manner.
</p>
<img src="./projects/mmshamran.png" width="300" height="300" loading="lazy" alt="Shamran"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://anujaellepola.netlify.app/"><h3 class="h3 projects-card-title">Anuja's Portfolio</h3></a>
<p class="projects-card-text">
A portfolio showcases assets, achievements, skills, and financial investments succinctly.
</p>
<img src="./projects/Anuja Portfolio.png" width="300" height="300" loading="lazy" alt="Anuja"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<h3 class="h3 projects-card-title">UBOLD Website</h3>
<p class="projects-card-text">
Revolutionize business efficiency with our seamless Cloud POS & ERP System.
</p>
<img src="./projects/Cloud Based POS and ERP System.png" width="300" height="300" loading="lazy" alt="UBOLD"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<a href="https://gihanpitawala.netlify.app/"><h3 class="h3 projects-card-title">Gihan's Portfolio</h3></a>
<p class="projects-card-text">
A portfolio briefly highlights possessions, accomplishments & monetary investments.
</p>
<img src="./projects/Gihan Portfolio.png" width="300" height="300" loading="lazy" alt="Gihan"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<h3 class="h3 projects-card-title">GASAA Pharmacy Website</h3>
<p class="projects-card-text">
Discover a refined pharmacy website for premium healthcare solutions online.
</p>
<img src="./projects/GASAA.png" width="300" height="300" loading="lazy" alt="GASAA"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<h3 class="h3 projects-card-title">Signature Cuisine Restaurant Website</h3>
<p class="projects-card-text">
Savor exquisite dining on our restaurant website with refined aesthetics.
</p>
<img src="./projects/SignatureCuisine.png" width="300" height="300" loading="lazy" alt="Signature Cuisine"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<h3 class="h3 projects-card-title">Bloom Room Mobile Application</h3>
<p class="projects-card-text">
Explore a classy flower shop experience with our Android mobile app.
</p>
<img src="./projects/BloomRoom.png" width="300" height="300" loading="lazy" alt="Bloom Room"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<h3 class="h3 projects-card-title">Sprinkles Mobile Application</h3>
<p class="projects-card-text">
Elevate bakery enjoyment with our sophisticated Android app experience.
</p>
<img src="./projects/Sprinkles Bakery.png" width="300" height="300" loading="lazy" alt="Sprinkles Mobile"
class="w-100 projects-card-banner">
</div>
</li>
<li class="projects-item">
<div class="projects-card">
<h3 class="h3 projects-card-title">Eco Farm Website</h3>
<p class="projects-card-text">
Cultivating success, sowing innovation, and reaping sustainable agriculture solutions online.
</p>
<img src="./projects/Eco Farm.png" width="300" height="300" loading="lazy" alt="Eco Farm"
class="w-100 projects-card-banner">
</div>
</li>
</ul>
<button class="projects-slider-btn projects-right-btn" id="projectsNextBtn">❯</button>
</div>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", function () {
const projectsList = document.querySelector(".projects-list");
const prevBtn = document.getElementById("projectsPrevBtn");
const nextBtn = document.getElementById("projectsNextBtn");
const projectsItems = document.querySelectorAll(".projects-item");
let currentProjectIndex = 0;
const totalProjects = projectsItems.length;
const projectItemWidth = projectsItems[0].clientWidth + 30; // Adjusting for margin
function updateProjectsSlider() {
projectsList.style.transform = `translateX(-${currentProjectIndex * projectItemWidth}px)`;
}
prevBtn.addEventListener("click", function () {
currentProjectIndex = (currentProjectIndex === 0) ? totalProjects - 1 : currentProjectIndex - 1;
updateProjectsSlider();
});
nextBtn.addEventListener("click", function () {
currentProjectIndex = (currentProjectIndex === totalProjects - 1) ? 0 : currentProjectIndex + 1;
updateProjectsSlider();
});
// Automatic sliding every 5 seconds
setInterval(function () {
currentProjectIndex = (currentProjectIndex === totalProjects - 1) ? 0 : currentProjectIndex + 1;
updateProjectsSlider();
}, 5000);
});
</script>
<!--
- #TESTIMONIALS
-->
<section class="reviews-section section-divider white" id="reviews">
<div class="reviews-container">
<h2 class="h2 section-title underline">Testimonials</h2><br>
<p class="reviews-description">
Revolutionary code orchestrator: Unleashing seamless synergy for digital transformations.
</p>
<ul class="reviews-list has-scrollbar">
<li class="review-item">
<div class="review-card">
<div class="reviewer-profile">
<figure class="reviewer-avatar">
<img src="./images/Jayaweera.png" width="80" height="80" loading="lazy" alt="N. C. Jayaweera">
</figure>
<div>
<a href="https://rajanima.com/"><h3 class="h4 reviewer-name">N. C. Jayaweera</h3></a>
<p class="reviewer-title">Director of Rajanima Crafts (Pvt) Ltd</p>
</div>
</div>
<blockquote class="review-text" style="text-align: justify;">
"CodexHarbor's outstanding expertise crafted a responsive website that surpassed expectations. Swift communication and reliable solutions make them the top choice for any tech project. Highly recommended!"
</blockquote>
<div class="review-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
</div>
</div>
</li>
<li class="review-item">
<div class="review-card">
<div class="reviewer-profile">
<figure class="reviewer-avatar">
<img src="./images/dilen.jpg" width="80" height="80" loading="lazy" alt="Dilen Dinapala">
</figure>
<div>
<a href="https://dinapalagroup.lk/"><h3 class="h4 reviewer-name">Dilen Dinapala</h3></a>
<p class="reviewer-title">Director of Dinapala (Pvt) Ltd</p>
</div>
</div>
<blockquote class="review-text" style="text-align: justify;">
"CodexHarbor is exceptional! Their professional services exceed expectations. Swift communication, top-notch expertise, and reliable solutions make them a go-to for any tech project. Highly recommended!"
</blockquote>
<div class="review-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
</div>
</div>
</li>
<li class="review-item">
<div class="review-card">
<div class="reviewer-profile">
<figure class="reviewer-avatar">
<img src="./images/chandula.jpg" width="80" height="80" loading="lazy" alt="Chandula Nanayakkara">
</figure>
<div>
<a href="https://chandulananayakkara.com/"><h3 class="h4 reviewer-name">Chandula Nanayakkara</h3></a>
<p class="reviewer-title">CEO in All in One Holdings (Pvt) Ltd</p>
</div>
</div>
<blockquote class="review-text" style="text-align: justify;">
"CodexHarbor delivers unparalleled excellence. Impeccable service, proactive problem-solving, and a client-centric approach set them apart. Trustworthy, efficient, and highly recommended for tech solutions. Outstanding experience!"
</blockquote>
<div class="review-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
</div>
</div>
</li>
<li class="review-item">
<div class="review-card">
<div class="reviewer-profile">
<figure class="reviewer-avatar">
<img src="./images/chamith.jpg" width="80" height="80" loading="lazy" alt="Chamith Samarathunga">
</figure>
<div>
<a href="https://phoneplanet.lk/"><h3 class="h4 reviewer-name">Chamith Samarathunga</h3></a>
<p class="reviewer-title">Proprietor of Phone Planet LK</p>
</div>
</div>
<blockquote class="review-text" style="text-align: justify;">
"CodexHarbor crafted PhonePlanet's website swiftly and exceeded my expectations. Delighted with their efficiency and the impressive outcome. Highly recommend their services for exceptional web development."
</blockquote>
<div class="review-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
</div>
</div>
</li>
</ul>
</div>
</section>
</article></main>
<script>
document.addEventListener('DOMContentLoaded', function () {
const reviewsList = document.querySelector('.reviews-list');
const reviewsItems = document.querySelectorAll('.review-item');
let currentIndex = 0;
// Function to scroll to a specific item
function scrollToItem(index) {
const itemWidth = reviewsItems[index].offsetWidth + 30; // item width + margin
reviewsList.scrollTo({
left: itemWidth * index,
behavior: 'smooth'
});
currentIndex = index;
}
// Auto-scroll through items
function autoScroll() {
if (currentIndex >= reviewsItems.length - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
scrollToItem(currentIndex);
}
// Set an interval for auto-scrolling
setInterval(autoScroll, 5000); // Change item every 5 seconds
});
</script>
<!--
- #FOOTER
-->
<footer class="footer" id="footer">
<div class="footer-top section">
<div class="container">
<div class="footer-brand">
<a href="#" class="logo">CodexHarbor</a>
<p class="text" style="text-align: justify;">
Innovating code, transforming ideas into seamless solutions, empowering progress through cutting-edge technology. Elevate with us.
</p>
<p style="font-weight: bold; text-align: left;">
Follow Us
</p>
<ul class="social-list">
<li>
<a href="https://www.facebook.com/profile.php?id=61555885921391&mibextid=LQQJ4d" class="social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/99359622/admin/?lipi=urn%3Ali%3Apage%3Ad_flagship3_feed%3B63YdRTC0SJuebTNYXIyNKw%3D%3D" class="social-link">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
<li>
<a href="https://www.instagram.com/codexharbor/" class="social-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
<li>
<a href="http://wa.me/447718998706" class="social-link">
<ion-icon name="logo-whatsapp"></ion-icon>
</a>
</li>
</ul>
</div>
<ul class="footer-list">
<li>
<p class="footer-list-title">Our links</p>
</li>
<li>
<a href="#home" class="footer-link">Home</a>
</li>
<li>
<a href="#about" class="footer-link">About Us</a>
</li>
<li>
<a href="#services" class="footer-link">Services</a>
</li>
<li>
<a href="#features" class="footer-link">Features</a>
</li>
<li>
<a href="#projects" class="footer-link">Projects</a>
</li>
<li>
<a href="#reviews" class="footer-link">Testimonials</a>
</li>
</ul>
<ul class="footer-list">
<li>
<p class="footer-list-title">Our Services</p>
</li>
<li>
<a href="#" class="footer-link">Strategy & Research</a>
</li>
<li>
<a href="#" class="footer-link">Web Development</a>
</li>
<li>
<a href="#" class="footer-link">Web Solution</a>
</li>
<li>
<a href="#" class="footer-link">Social & Digital Marketing</a>
</li>
<li>
<a href="#" class="footer-link">IT Cousulting</a>
</li>
</ul>
<ul class="footer-list">
<li>
<p class="footer-list-title">Other links</p>
</li>
<li>
<a href="#" class="footer-link">FAQ</a>
</li>
<li>
<a href="#" class="footer-link">Portfolio</a>
</li>
<li>
<a href="#" class="footer-link">Privacy Policy</a>
</li>
<li>
<a href="#" class="footer-link">Terms & Conditions</a>
</li>
<li>
<a href="http://wa.me/447394191322" class="footer-link">Support</a>
</li>
</ul>
<ul class="footer-list" style="text-align: left;">
<li>
<p class="footer-list-title">Contact Us</p>
</li>
<li class="footer-item">
<div class="footer-item-icon">
<ion-icon name="call"></ion-icon>
</div>
<div>
<a href="tel:+94717327371" class="footer-item-link">+94 71 732 7371</a>
<a href="http://wa.me/447394191322" class="footer-item-link">+44 73 941 91322</a>
</div>
</li>
<li class="footer-item">
<div class="footer-item-icon">
<ion-icon name="mail"></ion-icon>
</div>
<div>
<a href="mailto:info@codexharbor.com" class="footer-item-link">info@codexharbor.com</a>
<a href="mailto:sales@codexharbor.com" class="footer-item-link">sales@codexharbor.com</a>
</div>
</li>
<li class="footer-item">
<div class="footer-item-icon">
<ion-icon name="location"></ion-icon>
</div>
<address class="footer-item-link">
<a href="https://maps.app.goo.gl/aBKuA74DyWeitLEZ8">Kandy, Sri Lanka</a>
<a href="https://maps.app.goo.gl/McrS1jrnqTvPKpYA8">London, United Kingdom</a>
</address>
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p class="copyright">
Copyright © 2025 <a href="https://www.codexharbor.com/" class="copyright-link"><span class="codexharbor">CodexHarbor</span> </a>
</p>
</div>
</footer>
<!--
- #GO TO TOP
-->
<a href="#top" class="go-top active" aria-label="Go To Top" data-go-top>
<ion-icon name="arrow-up-outline"></ion-icon>
</a>
<!--
- custom js link
-->
<script src="./assets/js/script.js"></script>
<!--
- ionicon link
-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
SILENT KILLER Tool