### 1. HTML (`index.html`)
“`html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>SKAI PVT LTD – Premium Agro Trading</title>
<!– CSS File එක සම්බන්ධ කිරීම –>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<!– Language Selector Bar Buttons –>
<div class=”lang-switcher”>
<button class=”lang-btn active” onclick=”changeLanguage(‘en’)”>English</button>
<button class=”lang-btn” onclick=”changeLanguage(‘si’)”>සිංහල</button>
<button class=”lang-btn” onclick=”changeLanguage(‘ta’)”>தமிழ்</button>
</div>
<!– Main Header –>
<header>
<h1 id=”hero-title”>SKAI PVT LTD</h1>
<p id=”hero-desc”>Connecting Local Roots to Global Markets. Cultivating Trust through Sustainable Agri-Trading.</p>
</header>
<!– Main Content Container –>
<div class=”container”>
<h2 class=”section-title” id=”sec-title”>Our Premium Crops</h2>
<!– Product Grid –>
<div class=”category-grid”>
<!– Paddy –>
<div class=”category-card”>
<div class=”card-image img-paddy”></div>
<h3 id=”crop-paddy”>Paddy</h3>
<div class=”btn-group”>
<button class=”btn btn-buy btn-buy-txt”>Buy</button>
<button class=”btn btn-sale btn-sale-txt”>Sale</button>
</div>
</div>
<!– Ginger –>
<div class=”category-card”>
<div class=”card-image img-ginger”></div>
<h3 id=”crop-ginger”>Ginger</h3>
<div class=”btn-group”>
<button class=”btn btn-buy btn-buy-txt”>Buy</button>
<button class=”btn btn-sale btn-sale-txt”>Sale</button>
</div>
</div>
<!– Coconut –>
<div class=”category-card”>
<div class=”card-image img-coconut”></div>
<h3 id=”crop-coconut”>Coconut</h3>
<div class=”btn-group”>
<button class=”btn btn-buy btn-buy-txt”>Buy</button>
<button class=”btn btn-sale btn-sale-txt”>Sale</button>
</div>
</div>
<!– Watermelon –>
<div class=”category-card”>
<div class=”card-image img-watermelon”></div>
<h3 id=”crop-watermelon”>Watermelon</h3>
<div class=”btn-group”>
<button class=”btn btn-buy btn-buy-txt”>Buy</button>
<button class=”btn btn-sale btn-sale-txt”>Sale</button>
</div>
</div>
<!– Chilli –>
<div class=”category-card”>
<div class=”card-image img-chilli”></div>
<h3 id=”crop-chilli”>Chilli</h3>
<div class=”btn-group”>
<button class=”btn btn-buy btn-buy-txt”>Buy</button>
<button class=”btn btn-sale btn-sale-txt”>Sale</button>
</div>
</div>
</div>
<!– Info Section –>
<div class=”info-section”>
<h2 id=”about-title”>Our Journey & Promise</h2>
<p id=”about-desc”>
As a growing force in the agricultural sector, <strong>SKAI PVT LTD</strong> is dedicated to delivering fresh, high-yield, and premium-grade produce. By integrating modernized logistics with traditional farming care, we provide an optimal platform for both wholesale buyers looking for exceptional quality and farmers looking to sell their harvest at transparent market rates.
</p>
</div>
</div>
<!– Footer –>
<footer>
<div class=”footer-container”>
<!– Contact Us –>
<div class=”footer-section”>
<h3 id=”footer-contact”>Contact Us</h3>
<ul>
<li><span id=”lbl-address”>📍 Address:</span> <a href=”https://www.google.com/maps/search/?api=1&query=7.528174668283821,80.48214954631723&query_place_id=SKAI+PVT+LTD” target=”_blank” style=”color: white; text-decoration: underline;”>438/2 WARAKAWEHERA MORATHIHA, KURUNEGALA, SRI LANKA.</a></li>
<li>💬 WhatsApp: <a href=”https://wa.me/821059275451″ target=”_blank” style=”color: #4caf50; font-weight: bold;”>SKAI PVT LTD</a></li>
<li>✉️ Email: <a href=”mailto:skaiagro@skai.lk” style=”color: #a5d6a7;”>skaiagro@skai.lk</a></li>
<li><span id=”lbl-hours”>⏰ Hours:</span> <span id=”val-hours”>Mon – Sat: 8:00 AM – 5:00 PM</span></li>
</ul>
</div>
<!– Quick Links –>
<div class=”footer-section”>
<h3 id=”footer-links”>Quick Links</h3>
<ul>
<li>🔗 <span id=”lbl-web”>Website:</span> <a href=”#” id=”val-web”>Home (Local Storage)</a></li>
<li>🌐 Facebook: <a href=”https://www.facebook.com/SKAIPVTLTD/” target=”_blank”>Visit Facebook Page</a></li>
</ul>
</div>
<!– About Short Section –>
<div class=”footer-section”>
<h3 id=”footer-about”>About SKAI</h3>
<p id=”footer-about-desc” style=”font-size: 0.95rem; line-height: 1.5; color: #a5d6a7;”>
An emerging leader in sustainable agricultural trading, bridging the gap between local producers and commercial buyers.
</p>
</div>
</div>
<div class=”footer-bottom”>
<p id=”footer-copyright”>© 2026 SKAI PVT LTD. Empowering Farmers, Enriching Lives.</p>
</div>
</footer>
<!– JavaScript File එක සම්බන්ධ කිරීම –>
<script src=”script.js”></script>
</body>
</html>
“`
—
### 2. CSS (`style.css`)
“`css
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f4f7f4;
color: #2c3e50;
}
/* Language Switcher Bar */
.lang-switcher {
background-color: #0b1a10;
padding: 10px 24px;
display: flex;
justify-content: flex-end;
gap: 10px;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(165, 214, 167, 0.2);
}
.lang-btn {
background: rgba(255, 255, 255, 0.1);
color: #a5d6a7;
border: 1px solid #4caf50;
padding: 6px 14px;
border-radius: 20px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.2s ease;
}
.lang-btn:hover {
background: #4caf50;
color: white;
}
.lang-btn.active {
background: #2e7d32;
color: white;
border-color: #2e7d32;
box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}
/* Premium Hero Section with Eye-catching Background */
header {
background: linear-gradient(rgba(18, 43, 27, 0.55), rgba(18, 43, 27, 0.7)),
url(‘https://images.unsplash.com/photo-1605000797499-95a51c5269ae?auto=format&fit=crop&w=1920&q=80’) no-repeat center center/cover;
height: 450px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
padding: 20px;
box-shadow: inset 0 -10px 20px rgba(0,0,0,0.2);
}
header h1 {
font-size: 4rem;
margin-bottom: 15px;
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
letter-spacing: 2px;
font-weight: 800;
}
header p {
font-size: 1.4rem;
max-width: 700px;
font-weight: 300;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
line-height: 1.5;
}
/* Main Section Container */
.container {
max-width: 1200px;
margin: 50px auto;
padding: 0 24px;
}
.section-title {
text-align: center;
margin-bottom: 40px;
color: #1e4620;
font-size: 2.2rem;
font-weight: 700;
position: relative;
}
.section-title::after {
content: ”;
display: block;
width: 80px;
height: 4px;
background-color: #4caf50;
margin: 12px auto 0;
border-radius: 2px;
}
/* Product Grid (Responsive 5 Columns Layout) */
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
margin-bottom: 60px;
}
.category-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 15px rgba(0,0,0,0.06);
text-align: center;
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
border: 1px solid #e2ebe2;
display: flex;
flex-direction: column;
}
.category-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
/* High Quality Crop Image Area */
.card-image {
height: 160px;
background-size: cover;
background-position: center;
position: relative;
}
/* Local Folder Images Configuration */
.img-paddy { background-image: url(‘PADDY.png’); }
.img-ginger { background-image: url(‘GINGER.png’); }
.img-coconut { background-image: url(‘COCONUT.png’); }
.img-watermelon { background-image: url(‘MELON.png’); }
.img-chilli { background-image: url(‘CHILLI.png’); }
.category-card h3 {
padding: 18px 10px 5px 10px;
font-size: 1.35rem;
color: #1b5e20;
font-weight: 600;
}
/* Action Buttons Container */
.btn-group {
display: flex;
padding: 15px;
gap: 12px;
margin-top: auto;
}
/* Styling for Buy and Sale buttons */
.btn {
flex: 1;
padding: 11px;
border: none;
border-radius: 8px;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.btn:hover {
opacity: 0.9;
}
.btn-buy { background-color: #2e7d32; color: white; }
.btn-sale { background-color: #f57c00; color: white; }
/* About Section */
.info-section {
background: white;
padding: 35px;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
border-left: 6px solid #2e7d32;
margin-top: 20px;
}
.info-section h2 {
color: #1b5e20;
font-size: 1.6rem;
margin-bottom: 10px;
}
.info-section p {
line-height: 1.7;
color: #555;
font-size: 1.05rem;
}
/* Footer and Contact List Layout */
footer {
background-color: #122b1b;
color: #a5d6a7;
padding: 40px 20px 20px 20px;
margin-top: 80px;
border-top: 3px solid #4caf50;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(165, 214, 167, 0.2);
}
.footer-section h3 {
color: white;
margin-bottom: 15px;
font-size: 1.2rem;
position: relative;
}
.footer-section h3::after {
content: ”;
display: block;
width: 40px;
height: 2px;
background-color: #4caf50;
margin-top: 5px;
}
.footer-section ul { list-style: none; }
.footer-section ul li { margin-bottom: 10px; font-size: 0.95rem; }
.footer-section ul li a { color: #a5d6a7; text-decoration: none; transition: color 0.2s; }
.footer-section ul li a:hover { color: white; }
.footer-bottom {
text-align: center;
padding-top: 20px;
font-size: 0.9rem;
color: #81c784;
}
“`
—
### 3. JavaScript (`script.js`)
“`javascript
const translations = {
en: {
heroDesc: “Connecting Local Roots to Global Markets. Cultivating Trust through Sustainable Agri-Trading.”,
secTitle: “Our Premium Crops”,
paddy: “Paddy”, ginger: “Ginger”, coconut: “Coconut”, watermelon: “Watermelon”, chilli: “Chilli”,
buy: “Buy”, sale: “Sale”,
aboutTitle: “Our Journey & Promise”,
aboutDesc: “As a growing force in the agricultural sector, <strong>SKAI PVT LTD</strong> is dedicated to delivering fresh, high-yield, and premium-grade produce. By integrating modernized logistics with traditional farming care, we provide an optimal platform for both wholesale buyers looking for exceptional quality and farmers looking to sell their harvest at transparent market rates.”,
fContact: “Contact Us”, lblAddress: “📍 Address:”, lblHours: “⏰ Hours:”, valHours: “Mon – Sat: 8:00 AM – 5:00 PM”,
fLinks: “Quick Links”, lblWeb: “Website:”, valWeb: “Home (Local Storage)”,
fAbout: “About SKAI”, fAboutDesc: “An emerging leader in sustainable agricultural trading, bridging the gap between local producers and commercial buyers.”,
fCopy: “© 2026 SKAI PVT LTD. Empowering Farmers, Enriching Lives.”
},
si: {
heroDesc: “දේශීය මුල් ගෝලීය වෙළෙඳපොළට සම්බන්ධ කිරීම. තිරසාර කෘෂි වෙළඳාම තුළින් විශ්වාසය ගොඩනැගීම.”,
secTitle: “අපගේ විශිෂ්ටතම අස්වැන්න”,
paddy: “වී”, ginger: “ඉඟුරු”, coconut: “පොල්”, watermelon: “පැණි කොමඩු”, chilli: “මිරිස්”,
buy: “මිලදී ගන්න”, sale: “විකුණන්න”,
aboutTitle: “අපගේ ගමන සහ පොරොන්දුව”,
aboutDesc: “කෘෂිකාර්මික අංශයේ වර්ධනය වන බලවේගයක් ලෙස, <strong>SKAI PVT LTD</strong> නැවුම්, ඉහළ අස්වැන්නක් සහිත සහ උසස් තත්ත්වයේ කෘෂි නිෂ්පාදන ලබා දීමට කැපවී සිටී. නවීකරණය කරන ලද සැපයුම් දාමයන් සම්ප්රදායික ගොවිතැන් රැකවරණය සමඟ ඒකාබද්ධ කරමින්, සුවිශේෂී ගුණාත්මකභාවයක් අපේක්ෂා කරන තොග ගැනුම්කරුවන්ට මෙන්ම තම අස්වැන්න විනිවිද පෙනෙන වෙළඳපල මිලකට විකිණීමට අපේක්ෂා කරන ගොවීන්ටද අපි හොඳම වේදිකාවක් සපයන්නෙමු.”,
fContact: “අප අමතන්න”, lblAddress: “📍 ලිපිනය:”, lblHours: “⏰ වේලාවන්:”, valHours: “සඳුදා – සෙනසුරාදා: පෙ.ව. 8:00 – ප.ව. 5:00”,
fLinks: “ක්ෂණික සබැඳි”, lblWeb: “වෙබ් අඩවිය:”, valWeb: “මුල් පිටුව”,
fAbout: “SKAI ගැන බිඳක්”, fAboutDesc: “දේශීය නිෂ්පාදකයින් සහ වාණිජ ගැනුම්කරුවන් අතර පරතරය නැති කරමින්, තිරසාර කෘෂිකාර්මික වෙළඳාමේ නැගී එන පෙරගමන්කරුවෙකි.”,
fCopy: “© 2026 SKAI PVT LTD. ගොවීන් සවිබල ගන්වමින්, ජීවිත පොහොසත් කරයි.”
},
ta: {
heroDesc: “உள்நாட்டு வேர்களை உலகளாவிய சந்தைகளுடன் இணைத்தல். நிலையான விவசாய வர்த்தகம் மூலம் நம்பிக்கையை வளர்த்தல்.”,
secTitle: “எங்கள் பிரீமியம் பயிர்கள்”,
paddy: “நெல்”, ginger: “இஞ்சி”, coconut: “தேங்காய்”, watermelon: “தர்பூசணி”, chilli: “மிளகாய்”,
buy: “வாங்க”, sale: “விற்பனை”,
aboutTitle: “எங்கள் பயணம் & வாக்குறுதி”,
aboutDesc: “விவசாயத் துறையில் வளர்ந்து வரும் ஒரு சக்தியாக, <strong>SKAI PVT LTD</strong> புதிய, அதிக மகசூல் தரும் மற்றும் பிரீமியம் தரமான தயாரிப்புகளை வழங்க அர்ப்பணித்துள்ளது. நவீனமயமாக்கப்பட்ட தளவாடங்களை பாரம்பரிய விவசாயப் பராமரிப்புடன் ஒருங்கிணைப்பதன் மூலம், விதிவிலப்பான தரத்தைத் தேடும் மொத்த வாங்குபவர்களுக்கும், வெளிப்படையான சந்தை விலையில் தங்கள் அறுவடையை விற்க விரும்பும் விவசாயிகளுக்கும் உகந்த தளத்தை நாங்கள் வழங்குகிறோம்.”,
fContact: “தொடர்புக்கு”, lblAddress: “📍 முகவரி:”, lblHours: “⏰ வேலை நேரம்:”, valHours: “திங்கள் – சனி: காலை 8:00 – மாலை 5:00”,
fLinks: “விரைவு இணைப்புகள்”, lblWeb: “இணையதளம்:”, valWeb: “முகப்புப் பக்கம்”,
fAbout: “SKAI பற்றி”, fAboutDesc: “உள்ளூர் உற்பத்தியாளர்களுக்கும் வர்த்தக வாங்குபவர்களுக்கும் இடையிலான இடைவெளியைக் குறைக்கும், நிலையான விவசாய வர்த்தகத்தில் வளர்ந்து வரும் முன்னணி நிறுவனம்.”,
fCopy: “© 2026 SKAI PVT LTD. விவசாயிகளை ஊக்குவித்து, வாழ்வை வளமாக்குகிறது.”
}
};
function changeLanguage(lang) {
// Update Active Button Style
document.querySelectorAll(‘.lang-btn’).forEach(btn => btn.classList.remove(‘active’));
if(window.event && window.event.target) {
window.event.target.classList.add(‘active’);
}
// Apply Translations
document.getElementById(‘hero-desc’).innerText = translations[lang].heroDesc;
document.getElementById(‘sec-title’).innerText = translations[lang].secTitle;
// Crops Translation
document.getElementById(‘crop-paddy’).innerText = translations[lang].paddy;
document.getElementById(‘crop-ginger’).innerText = translations[lang].ginger;
document.getElementById(‘crop-coconut’).innerText = translations[lang].coconut;
document.getElementById(‘crop-watermelon’).innerText = translations[lang].watermelon;
document.getElementById(‘crop-chilli’).innerText = translations[lang].chilli;
// Buttons
document.querySelectorAll(‘.btn-buy-txt’).forEach(btn => btn.innerText = translations[lang].buy);
document.querySelectorAll(‘.btn-sale-txt’).forEach(btn => btn.innerText = translations[lang].sale);
// About Section
document.getElementById(‘about-title’).innerText = translations[lang].aboutTitle;
document.getElementById(‘about-desc’).innerHTML = translations[lang].aboutDesc;
// Footer
document.getElementById(‘footer-contact’).innerText = translations[lang].fContact;
document.getElementById(‘lbl-address’).innerText = translations[lang].lblAddress;
document.getElementById(‘lbl-hours’).innerText = translations[lang].lblHours;
document.getElementById(‘val-hours’).innerText = translations[lang].valHours;
document.getElementById(‘footer-links’).innerText = translations[lang].fLinks;
document.getElementById(‘lbl-web’).innerText = translations[lang].lblWeb;
document.getElementById(‘val-web’).innerText = translations[lang].valWeb;
document.getElementById(‘footer-about’).innerText = translations[lang].fAbout;
document.getElementById(‘footer-about-desc’).innerText = translations[lang].fAboutDesc;
document.getElementById(‘footer-copyright’).innerText = translations[lang].fCopy;
}
“`