'); opacity: 0.5; } .hero-content { position: relative; text-align: center; max-width: 800px; margin: 0 auto; } .hero-content h1 { font-size: 48px; font-weight: 700; margin-bottom: 20px; } .hero-content p { font-size: 20px; margin-bottom: 40px; opacity: 0.9; } .search-box { background: #fff; border-radius: 10px; padding: 10px; display: flex; gap: 10px; box-shadow: var(--shadow-lg); max-width: 700px; margin: 0 auto; } .search-box input, .search-box select { border: 1px solid var(--border-color); padding: 15px; border-radius: 5px; font-size: 16px; flex: 1; } .search-box button { background: var(--primary-color); color: #fff; border: none; padding: 15px 30px; border-radius: 5px; font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition); } .search-box button:hover { background: var(--secondary-color); } /* ========================= Stats Section ========================= */ .stats-section { padding: 60px 0; background: #fff; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .stat-card { text-align: center; padding: 30px; border-radius: 10px; background: var(--light-color); transition: var(--transition); } .stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .stat-icon { width: 60px; height: 60px; background: var(--primary-color); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 28px; } .stat-card.green .stat-icon { background: var(--secondary-color); } .stat-card.orange .stat-icon { background: #f59e0b; } .stat-card.purple .stat-icon { background: #8b5cf6; } .stat-number { font-size: 36px; font-weight: 700; color: var(--dark-color); margin-bottom: 10px; } .stat-label { font-size: 18px; color: var(--text-color); } /* ========================= Job Listings ========================= */ .jobs-section { padding: 60px 0; } .section-header { text-align: center; margin-bottom: 50px; } .section-header h2 { font-size: 36px; font-weight: 700; color: var(--dark-color); margin-bottom: 15px; } .section-header p { font-size: 18px; color: var(--text-color); } .filters { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .filter-btn { padding: 10px 20px; border: 2px solid var(--border-color); background: #fff; border-radius: 25px; cursor: pointer; transition: var(--transition); font-weight: 500; } .filter-btn:hover, .filter-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } .jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 25px; } .job-card { background: #fff; border-radius: 10px; padding: 25px; box-shadow: var(--shadow); transition: var(--transition); border: 1px solid var(--border-color); } .job-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-color); } .job-header { display: flex; gap: 15px; margin-bottom: 20px; } .company-logo { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border-color); } .company-logo img { width: 100%; height: 100%; object-fit: cover; } .job-title-area h3 { font-size: 20px; font-weight: 600; color: var(--dark-color); margin-bottom: 5px; } .company-name { color: var(--text-color); font-size: 15px; } .job-meta { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; } .meta-item { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--text-color); } .meta-item svg { width: 16px; height: 16px; } .job-tags { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; } .tag { padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; } .tag.full-time { background: #dbeafe; color: #1e40af; } .tag.part-time { background: #fef3c7; color: #92400e; } .tag.remote { background: #d1fae5; color: #065f46; } .tag.freelance { background: #e9d5ff; color: #6b21a8; } .job-description { color: var(--text-color); font-size: 14px; line-height: 1.6; margin-bottom: 20px; } .job-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid var(--border-color); } .salary { font-weight: 600; color: var(--secondary-color); font-size: 18px; } .apply-btn { background: var(--primary-color); color: #fff; padding: 10px 25px; border-radius: 5px; font-weight: 600; border: none; cursor: pointer; transition: var(--transition); } .apply-btn:hover { background: var(--secondary-color); transform: scale(1.05); } /* ========================= Categories Section ========================= */ .categories-section { padding: 60px 0; background: #fff; } .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .category-card { background: var(--light-color); padding: 30px; border-radius: 10px; text-align: center; transition: var(--transition); border: 2px solid transparent; } .category-card:hover { border-color: var(--primary-color); transform: translateY(-5px); box-shadow: var(--shadow); } .category-icon { font-size: 40px; margin-bottom: 15px; } .category-card h3 { font-size: 20px; font-weight: 600; color: var(--dark-color); margin-bottom: 10px; } .category-card p { color: var(--text-color); font-size: 14px; } /* ========================= Footer ========================= */ .footer-wrapper { background: var(--dark-color); color: #fff; padding: 60px 0 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-widget h3 { font-size: 20px; margin-bottom: 20px; font-weight: 600; } .footer-widget p { color: #cbd5e1; line-height: 1.8; } .footer-widget ul { list-style: none; } .footer-widget ul li { margin-bottom: 12px; } .footer-widget a { color: #cbd5e1; transition: var(--transition); } .footer-widget a:hover { color: var(--secondary-color); padding-left: 5px; } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-links a { width: 40px; height: 40px; background: #334155; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .social-links a:hover { background: var(--primary-color); transform: translateY(-3px); } .footer-bottom { border-top: 1px solid #334155; padding-top: 20px; text-align: center; color: #cbd5e1; } /* ========================= Sidebar ========================= */ .sidebar { background: #fff; border-radius: 10px; padding: 25px; box-shadow: var(--shadow); margin-bottom: 30px; } .sidebar h3 { font-size: 20px; font-weight: 600; margin-bottom: 20px; color: var(--dark-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; } .sidebar ul { list-style: none; } .sidebar ul li { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); } .sidebar ul li:last-child { border-bottom: none; } /* ========================= Responsive Design ========================= */ @media (max-width: 768px) { .top-bar .container { justify-content: center; gap: 10px; } .top-bar-left, .top-bar-right { font-size: 12px; } .mobile-menu-toggle { display: block; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: var(--shadow-lg); padding: 20px; } .main-nav.active { display: block; } .main-nav ul { flex-direction: column; gap: 0; } .main-nav ul li { width: 100%; border-bottom: 1px solid var(--border-color); } .main-nav a { display: block; padding: 15px 0; } .hero-content h1 { font-size: 32px; } .hero-content p { font-size: 16px; } .search-box { flex-direction: column; } .jobs-grid { grid-template-columns: 1fr; } .section-header h2 { font-size: 28px; } .footer-content { grid-template-columns: 1fr; } } /* ========================= Utility Classes ========================= */ .text-center { text-align: center; } .mt-30 { margin-top: 30px; } .mb-30 { margin-bottom: 30px; } .hidden { display: none; } /* Loading Animation */ .loader { border: 3px solid var(--border-color); border-top: 3px solid var(--primary-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Breadcrumb */ .breadcrumb { padding: 20px 0; background: var(--light-color); } .breadcrumb ul { display: flex; list-style: none; gap: 10px; flex-wrap: wrap; } .breadcrumb li::after { content: '/'; margin-left: 10px; color: var(--text-color); } .breadcrumb li:last-child::after { display: none; } /* Post Content */ .post-body { line-height: 1.8; font-size: 16px; } .post-body h2, .post-body h3 { margin-top: 30px; margin-bottom: 15px; color: var(--dark-color); } .post-body p { margin-bottom: 15px; } .post-body img { border-radius: 10px; margin: 20px 0; } .post-body ul, .post-body ol { margin-left: 30px; margin-bottom: 15px; } /* SEO Optimizations */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } ]]> Skip to main content
info@jobportal.com +62 812-3456-7890

Temukan Karir Impian Anda

Ribuan lowongan kerja dari perusahaan terpercaya menanti Anda

5,340
Lowongan Aktif
1,250
Perusahaan
12,450
Kandidat
3,890
Jobs Filled

Lowongan Kerja Terbaru

Jelajahi peluang karir terbaik yang sesuai dengan keahlian Anda

Lihat Semua Lowongan

Kategori Populer

Temukan lowongan berdasarkan bidang yang Anda minati

💻

IT & Technology

1,234 Lowongan
📱

Marketing & Sales

856 Lowongan
💰

Finance & Accounting

542 Lowongan
🎨

Design & Creative

423 Lowongan
👥

Human Resources

312 Lowongan
⚙️

Engineering

687 Lowongan
🏥

Healthcare

445 Lowongan
📚

Education

298 Lowongan

Lowongan Terkait

Lowongan Semua Lowongan Kerja

Temukan pekerjaan yang sesuai dengan keahlian dan minat Anda

PT Example Company
Jakarta
Full Time Remote
Rp 8-12 juta
Lihat Detail