Membuat Template Web Company Profile Lengkap

Template web company profile yang profesional adalah kebutuhan penting bagi setiap bisnis modern. Dalam panduan ini, Anda akan mempelajari cara membuat template web company profile lengkap menggunakan HTML5 dan CSS3 dari awal hingga selesai.

Daftar isi

Persiapan dan Struktur Folder
Membuat Struktur HTML untuk Website Bisnis
Membuat Menu Navigasi dengan HTML5 dan CSS3
Menggunakan SVG Inline dan Gambar Online
Styling Template Company Profile
Membuat Template Responsif
Tampilan Website Company Profile
Kesimpulan

Persiapan dan Struktur Folder

Sebelum memulai, kita perlu menyiapkan struktur folder dan file HTML website bisnis yang terorganisir dengan baik. Struktur yang rapi akan memudahkan pengembangan dan maintenance di masa depan.

Struktur Folder Project

company-profile/
│
├── index.html
├── about.html
├── services.html
├── contact.html
│
├── css/
│   ├── style.css
│   └── responsive.css
│
└── js/
    └── script.js

Struktur folder di atas merupakan struktur folder dan file HTML website bisnis yang ideal untuk project company profile. Struktur ini lebih sederhana karena menggunakan SVG inline untuk logo dan gambar dari layanan online gratis seperti Unsplash, sehingga tidak memerlukan folder images lokal.

Membuat Struktur HTML untuk Website Bisnis

Cara menyusun struktur HTML untuk website bisnis yang benar sangat penting untuk SEO dan aksesibilitas. Mari kita buat file index.html dengan struktur HTML website bisnis berbasis HTML5.

File index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Company Profile - Solusi bisnis terpercaya untuk kebutuhan perusahaan Anda">
    <meta name="keywords" content="company profile, bisnis, layanan profesional">
    <title>Company Profile - Beranda</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>
    <!-- Header Section -->
    <header class="main-header">
        <div class="container">
            <div class="logo">
                <!-- SVG Logo Inline -->
                <svg class="logo-svg" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="40" height="40" rx="8" fill="#667eea"/>
                    <path d="M20 10L28 16V24L20 30L12 24V16L20 10Z" fill="white"/>
                    <circle cx="20" cy="20" r="4" fill="#667eea"/>
                </svg>
                <span class="company-name">Your Company</span>
            </div>
            
            <!-- Navigation Menu -->
            <nav class="main-nav">
                <!-- Menu navigasi akan kita buat di bagian selanjutnya -->
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Selamat Datang di Company Profile Kami</h1>
                <p>Solusi terbaik untuk kebutuhan bisnis Anda</p>
                <a href="#services" class="btn btn-primary">Lihat Layanan</a>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="about" id="about">
        <div class="container">
            <h2>Tentang Kami</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>Kami adalah perusahaan yang berkomitmen memberikan layanan terbaik untuk klien kami. Dengan pengalaman lebih dari 10 tahun, kami telah melayani ratusan klien dari berbagai industri.</p>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop" alt="Tentang Kami - Tim Profesional">
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="services">
        <div class="container">
            <h2>Layanan Kami</h2>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <!-- SVG Icon Konsultasi -->
                        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="40" cy="40" r="38" fill="#667eea" opacity="0.1"/>
                            <path d="M40 20C31.716 20 25 26.716 25 35C25 43.284 31.716 50 40 50C48.284 50 55 43.284 55 35C55 26.716 48.284 20 40 20Z" stroke="#667eea" stroke-width="3" stroke-linecap="round"/>
                            <path d="M28 55C28 50.582 31.582 47 36 47H44C48.418 47 52 50.582 52 55V60" stroke="#667eea" stroke-width="3" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <h3>Konsultasi Bisnis</h3>
                    <p>Memberikan solusi strategis untuk pengembangan bisnis Anda</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <!-- SVG Icon Web Development -->
                        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="40" cy="40" r="38" fill="#667eea" opacity="0.1"/>
                            <rect x="20" y="25" width="40" height="30" rx="2" stroke="#667eea" stroke-width="3"/>
                            <path d="M20 32H60" stroke="#667eea" stroke-width="3"/>
                            <path d="M30 42L35 47L30 52" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M40 52H50" stroke="#667eea" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <h3>Pengembangan Web</h3>
                    <p>Membangun website profesional untuk meningkatkan online presence</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <!-- SVG Icon Digital Marketing -->
                        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="40" cy="40" r="38" fill="#667eea" opacity="0.1"/>
                            <path d="M25 50L32 42L40 48L55 30" stroke="#667eea" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M48 30H55V37" stroke="#667eea" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                            <circle cx="32" cy="42" r="3" fill="#667eea"/>
                            <circle cx="40" cy="48" r="3" fill="#667eea"/>
                        </svg>
                    </div>
                    <h3>Digital Marketing</h3>
                    <p>Strategi pemasaran digital untuk menjangkau lebih banyak pelanggan</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="container">
            <h2>Hubungi Kami</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <div class="info-item">
                        <h4>Alamat</h4>
                        <p>Jl. Contoh No. 123, Jakarta</p>
                    </div>
                    <div class="info-item">
                        <h4>Email</h4>
                        <p>info@company.com</p>
                    </div>
                    <div class="info-item">
                        <h4>Telepon</h4>
                        <p>+62 21 1234 5678</p>
                    </div>
                </div>
                <div class="contact-form">
                    <form action="#" method="post">
                        <div class="form-group">
                            <input type="text" name="name" placeholder="Nama Lengkap" required>
                        </div>
                        <div class="form-group">
                            <input type="email" name="email" placeholder="Email" required>
                        </div>
                        <div class="form-group">
                            <textarea name="message" rows="5" placeholder="Pesan Anda" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Kirim Pesan</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <p>&copy; 2025 Your Company. All rights reserved.</p>
                <div class="social-links">
                    <a href="#" aria-label="Facebook">Facebook</a>
                    <a href="#" aria-label="Twitter">Twitter</a>
                    <a href="#" aria-label="Instagram">Instagram</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>Code language: HTML, XML (xml)

Struktur HTML website bisnis agar SEO friendly di atas menggunakan semantic HTML5 yang membantu mesin pencari memahami konten website dengan lebih baik. Perhatikan penggunaan tag <header>, <nav>, <section>, dan <footer> yang sesuai dengan standar HTML5.

Keunggulan Menggunakan SVG Inline dan Gambar Online

Dalam template ini, kita menggunakan:

SVG Inline untuk Logo: Logo dibuat langsung dalam kode HTML menggunakan SVG, sehingga lebih fleksibel, dapat diubah warnanya dengan CSS, dan tidak memerlukan HTTP request tambahan.
Gambar dari Unsplash: Untuk gambar konten, kita menggunakan layanan gratis seperti Unsplash (https://unsplash.com) yang menyediakan gambar berkualitas tinggi dengan lisensi gratis. Ini mengurangi ukuran project dan mempermudah deployment.
SVG Icons untuk Services: Icon layanan menggunakan SVG inline yang dapat dikustomisasi dengan mudah dan memiliki kualitas sempurna di semua ukuran layar.

Membuat Menu Navigasi dengan HTML5 dan CSS3

Sekarang kita akan fokus pada tutorial navigasi menu HTML5 untuk pemula. Navigasi yang baik adalah kunci dari user experience yang optimal.

Cara Membuat Navigasi Menu HTML5

Tambahkan kode berikut di dalam tag <nav class="main-nav"> pada file index.html:

<nav class="main-nav" role="navigation">
    <button class="mobile-menu-toggle" aria-label="Toggle Menu">
        <span></span>
        <span></span>
        <span></span>
    </button>
    <ul class="nav-menu">
        <li><a href="index.html" class="active">Beranda</a></li>
        <li><a href="#about">Tentang</a></li>
        <li><a href="#services">Layanan</a></li>
        <li><a href="#contact">Kontak</a></li>
    </ul>
</nav>Code language: HTML, XML (xml)

Ini adalah contoh membuat navbar HTML5 tanpa JavaScript untuk versi desktop. Untuk membuat HTML5 nav menu responsive, kita akan menambahkan CSS dan sedikit JavaScript untuk mobile menu toggle.

Menggunakan SVG Inline dan Gambar Online

Salah satu keunggulan dari template web company profile responsif untuk bisnis kecil modern adalah penggunaan SVG inline dan gambar dari layanan online gratis.

Keuntungan SVG Inline

Scalable: SVG dapat diperbesar atau diperkecil tanpa kehilangan kualitas
Customizable: Warna dan style dapat diubah langsung dengan CSS
Performance: Tidak memerlukan HTTP request tambahan
File Size: Ukuran file lebih kecil dibanding PNG/JPG untuk icon sederhana
Accessibility: Mudah ditambahkan atribut aria-label untuk screen reader

Layanan Gambar Online Gratis

Untuk gambar konten, Anda dapat menggunakan layanan berikut:

Unsplash (https://unsplash.com) – Gambar berkualitas tinggi, gratis untuk komersial
Pexels (https://pexels.com) – Koleksi foto dan video gratis
Pixabay (https://pixabay.com) – Gambar, ilustrasi, dan vector gratis
Lorem Picsum (https://picsum.photos) – Placeholder gambar random untuk development

Format URL Unsplash yang digunakan:

https://images.unsplash.com/photo-[ID]?w=[width]&h=[height]&fit=cropCode language: JavaScript (javascript)

Contoh: https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop

Styling Template Company Profile

Sekarang kita akan membuat file CSS untuk styling. Ini adalah bagian penting dari template web company profile responsif untuk bisnis kecil.

File css/style.css

/* Reset dan Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.main-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-svg {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
}

.company-name {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
}

/* Navigation Styles - HTML5 Nav Menu */
.main-nav {
    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-menu li a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 500;
    padding: 8px 15px;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.nav-menu li a:hover,
.nav-menu li a.active {
    background-color: #3498db;
    color: #fff;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #2c3e50;
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 150px 0 100px;
    margin-top: 70px;
    text-align: center;
}

.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease;
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
    animation: fadeInUp 1s ease 0.2s;
    animation-fill-mode: both;
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-primary {
    background-color: #fff;
    color: #667eea;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* About Section */
.about {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.about h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: #2c3e50;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text p {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
}

.about-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* Services Section */
.services {
    padding: 80px 0;
}

.services h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: #2c3e50;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

.service-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.service-icon svg {
    width: 80px;
    height: 80px;
}

.service-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #2c3e50;
}

.service-card p {
    color: #666;
    line-height: 1.6;
}

/* Contact Section */
.contact {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.contact h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: #2c3e50;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.contact-info .info-item {
    margin-bottom: 30px;
}

.contact-info h4 {
    font-size: 20px;
    color: #2c3e50;
    margin-bottom: 10px;
}

.contact-info p {
    color: #666;
    font-size: 16px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #3498db;
}

.contact-form button {
    border: none;
    cursor: pointer;
}

/* Footer */
.main-footer {
    background-color: #2c3e50;
    color: #fff;
    padding: 30px 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #3498db;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}Code language: CSS (css)

Membuat Template Responsif

Untuk membuat template web company profile mobile friendly, kita perlu menambahkan responsive CSS. Buat file css/responsive.css:

/* Responsive Styles */
@media screen and (max-width: 768px) {
    /* Mobile Navigation */
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0,0,0,0.05);
        padding: 20px 0;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        margin: 10px 0;
    }
    
    /* Hero Section */
    .hero-content h1 {
        font-size: 32px;
    }
    
    .hero-content p {
        font-size: 16px;
    }
    
    /* About Section */
    .about-content {
        grid-template-columns: 1fr;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    /* Contact Section */
    .contact-content {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero-content h1 {
        font-size: 24px;
    }
    
    .about,
    .services,
    .contact {
        padding: 50px 0;
    }
    
    .service-card {
        padding: 30px 20px;
    }
}Code language: CSS (css)

JavaScript untuk Mobile Menu

Buat file js/script.js untuk menambahkan interaktivitas pada mobile menu:

// Mobile Menu Toggle
document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (mobileMenuToggle) {
        mobileMenuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            this.classList.toggle('active');
        });
    }
    
    // Close mobile menu when clicking on a link
    const navLinks = document.querySelectorAll('.nav-menu li a');
    navLinks.forEach(link => {
        link.addEventListener('click', function() {
            navMenu.classList.remove('active');
            mobileMenuToggle.classList.remove('active');
        });
    });
    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});Code language: JavaScript (javascript)

Tampilan Website Company Profile

Berikut ini adalah gambar tampilan website company profile yang sudah dibuat menggunakan kode diatas.

Kesimpulan

Anda telah berhasil mempelajari cara membuat template web company profile lengkap dari awal hingga akhir. Template ini mencakup:

✅ Struktur HTML website bisnis agar SEO friendly dengan semantic HTML5
✅ HTML5 nav menu responsive yang mobile-friendly
✅ Template web company profile responsif untuk bisnis kecil yang siap pakai
✅ Membuat navbar HTML5 tanpa JavaScript untuk versi desktop
✅ Layout modern dengan CSS Grid dan Flexbox
✅ Animasi dan transisi yang smooth
✅ Form kontak yang fungsional
✅ SVG inline untuk logo dan icon yang scalable
✅ Gambar dari layanan online gratis (Unsplash)
✅ Struktur folder yang lebih sederhana dan efisien

Template web company profile HTML5 CSS3 gratis ini dapat Anda kustomisasi sesuai kebutuhan bisnis Anda. Pastikan untuk mengganti konten, warna, dan gambar sesuai dengan brand identity perusahaan Anda.

Tips Pengembangan Lebih Lanjut

Optimasi SEO: Tambahkan meta tags yang lebih lengkap dan structured data
Performance: Minify CSS/JavaScript dan gunakan lazy loading untuk gambar
Accessibility: Pastikan semua elemen dapat diakses dengan keyboard
Testing: Test di berbagai browser dan device untuk memastikan kompatibilitas
Kustomisasi SVG: Ubah warna dan bentuk SVG sesuai brand identity Anda
Gambar Alternatif: Anda juga bisa menggunakan Pexels, Pixabay, atau Lorem Picsum untuk gambar gratis

Dengan mengikuti tutorial ini, Anda kini memiliki contoh template web company profile lengkap dan modern yang dapat langsung digunakan atau dikembangkan lebih lanjut sesuai kebutuhan.

Membuat Template Web Company Profile Lengkap

Daftar isi

Persiapan dan Struktur Folder

Struktur Folder Project

Membuat Struktur HTML untuk Website Bisnis

File index.html

Keunggulan Menggunakan SVG Inline dan Gambar Online

Membuat Menu Navigasi dengan HTML5 dan CSS3

Cara Membuat Navigasi Menu HTML5

Menggunakan SVG Inline dan Gambar Online

Keuntungan SVG Inline

Layanan Gambar Online Gratis

Styling Template Company Profile

File css/style.css

Membuat Template Responsif

JavaScript untuk Mobile Menu

Tampilan Website Company Profile

Kesimpulan

Tips Pengembangan Lebih Lanjut

1 HTML Dasar (Pemula)

2 HTML Menengah

3 HTML Lanjutan

4 HTML Mahir

5 HTML Ahli (Bonus & Tips)

Related article!

Checklist Belajar HTML dari Pemula hingga Mahir

Cara Mengonversi Desain Figma ke HTML Secara Manual

Cara Menggunakan Komentar HTML untuk Dokumentasi Proyek

Tips Meningkatkan Kecepatan Website dari Sisi HTML

Cara Menguji dan Memvalidasi HTML dengan Validator W3C

Rekomendasi Tools & Editor HTML Terbaik untuk Pemula

Comments

Leave comment