Posted inHTML & CSS

Project HTML, CSS, & Bootstrap 5: Membuat Website Company

No Comments
Project HTML, CSS, & Bootstrap 5: Membuat Website Company

Project HTML, CSS, & Bootstrap 5: Membuat Website Company

Membangun website company (perusahaan) yang profesional adalah langkah penting untuk meningkatkan kredibilitas bisnis. Dengan HTML, CSS, dan Bootstrap 5, Anda bisa membuat website responsif yang menarik hanya dalam beberapa langkah. Artikel ini akan memandu Anda membuat website company lengkap dengan navbar, hero section, layanan, portfolio, testimoni, dan kontak menggunakan Bootstrap 5.

Mengapa Memilih Bootstrap 5 untuk Website Company?

  1. Responsif Otomatis: Bootstrap 5 menyederhanakan pembuatan tampilan yang kompatibel di semua perangkat.
  2. Komponen Siap Pakai: Navbar, card, carousel, dan modal tersedia dengan mudah.
  3. Customizable: Mudah disesuaikan dengan branding perusahaan menggunakan CSS kustom.
  4. Cepat Dibangun: Hemat waktu dengan grid system dan utility classes.

Persiapan

  1. Text Editor: VS Code, Sublime Text, atau sejenisnya.
  2. File Struktur: 
    📂 company-website
  ├── index.html
  ├── style.css
  ├── images/ (folder untuk gambar)
  └── script.js (opsional untuk interaktivitas)
  3. CDN Bootstrap 5: Tambahkan di <head> HTML:
    html
    <!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

    Run HTML

Langkah 1: Membuat Navbar

1.1. Struktur HTML

html
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <!-- Logo -->
    <a class="navbar-brand" href="#">
      <img src="images/logo.png" alt="Logo Perusahaan" width="120">
    </a>
    
    <!-- Tombol Toggle untuk Mobile -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- Menu Navigasi -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#home">Beranda</a></li>
        <li class="nav-item"><a class="nav-link" href="#services">Layanan</a></li>
        <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Kontak</a></li>
      </ul>
    </div>
  </div>
</nav>

Run HTML

1.2. CSS Kustom (style.css)

css
.navbar {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-link {
  font-weight: 500;
  color: #333 !important;
}
.nav-link:hover {
  color: #007bff !important;
}

Langkah 2: Hero Section

2.1. Struktur HTML

html
<section id="home" class="py-5" style="margin-top: 80px;">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <h1 class="display-4 fw-bold">Selamat Datang di <span class="text-primary">Perusahaan Kami</span></h1>
        <p class="lead mt-3">Kami menyediakan solusi digital inovatif untuk bisnis Anda.</p>
        <a href="#contact" class="btn btn-primary btn-lg mt-3">Hubungi Kami</a>
      </div>
      <div class="col-lg-6">
        <img src="images/hero-image.png" class="img-fluid" alt="Ilustrasi Solusi Digital">
      </div>
    </div>
  </div>
</section>

Run HTML

2.2. CSS Kustom

css
#home {
  background: linear-gradient(90deg, #f8f9fa 50%, #ffffff 50%);
}

Langkah 3: Bagian Layanan

3.1. Struktur HTML

html
<section id="services" class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center mb-5">Layanan Kami</h2>
    <div class="row g-4">
      <!-- Layanan 1 -->
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body text-center">
            <i class="bi bi-code-square display-4 text-primary"></i>
            <h3 class="card-title mt-3">Pengembangan Website</h3>
            <p class="card-text">Kami membangun website responsif dan modern.</p>
          </div>
        </div>
      </div>
      <!-- Layanan 2 & 3 (struktur serupa seperti Layanan 1 dan dicopas) -->
    </div>
  </div>
</section>

Run HTML

Langkah 4: Portfolio dengan Carousel

html
<section id="portfolio" class="py-5">
  <div class="container">
    <h2 class="text-center mb-5">Portfolio</h2>
    <div id="portfolioCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <!-- Item 1 -->
        <div class="carousel-item active">
          <img src="images/project1.jpg" class="d-block w-100" alt="Proyek 1">
        </div>
        <!-- Item 2 & 3 (struktur serupa Item 1 dan dicopas) -->
      </div>
      <!-- Tombol Navigasi Carousel -->
      <button class="carousel-control-prev" data-bs-target="#portfolioCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" data-bs-target="#portfolioCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>
</section>

Run HTML

Langkah 5: Bagian Kontak

html
<section id="contact" class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center mb-5">Hubungi Kami</h2>
    <div class="row g-4">
      <div class="col-lg-6">
        <form>
          <div class="mb-3">
            <input type="text" class="form-control" placeholder="Nama Lengkap">
          </div>
          <div class="mb-3">
            <input type="email" class="form-control" placeholder="Email">
          </div>
          <div class="mb-3">
            <textarea class="form-control" rows="5" placeholder="Pesan"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Kirim Pesan</button>
        </form>
      </div>
      <div class="col-lg-6">
        <div class="p-4 bg-white rounded">
          <h4>Kantor Kami</h4>
          <p class="mt-3"><i class="bi bi-geo-alt"></i> Jl. Contoh No. 123, Semarang</p>
          <p><i class="bi bi-envelope"></i> info@perusahaan.com</p>
          <p><i class="bi bi-phone"></i> +62 123 4567 890</p>
        </div>
      </div>
    </div>
  </div>
</section>

Run HTML

Langkah 6: Footer

html
<footer class="bg-dark text-white py-4">
  <div class="container text-center">
    <p class="mb-0">&copy; 2025 Azroi Tech. All rights reserved.</p>
    <div class="mt-3">
      <a href="#" class="text-white mx-2"><i class="bi bi-facebook"></i></a>
      <a href="#" class="text-white mx-2"><i class="bi bi-instagram"></i></a>
      <a href="#" class="text-white mx-2"><i class="bi bi-linkedin"></i></a>
    </div>
  </div>
</footer>

Run HTML

Langkah 7: Menambahkan Interaktivitas

7.1. Smooth Scroll

Tambahkan di script.js:

javascript
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

7.2. Bootstrap JavaScript

Tambahkan sebelum penutup </body>:

html
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Run HTML

Optimasi SEO

  1. Meta Tags:
    html
    <meta name="description" content="Perusahaan spesialis pengembangan website profesional berbasis di Jakarta. Layanan: pembuatan website, SEO, dan digital marketing.">
<meta name="keywords" content="jasa pembuatan website, perusahaan IT Jakarta, layanan digital marketing">

    Run HTML

  2. Alt Text Gambar:
    • Selalu isi atribut alt pada gambar (contoh: alt="Proyek Website E-commerce").
  3. Struktur Heading:
    • Gunakan H1 untuk judul utama, H2 untuk section, dan H3 untuk sub-section.

Kesimpulan

Dengan Bootstrap 5, Anda bisa membuat website company profesional yang responsif hanya dalam hitungan jam. Manfaatkan komponen Bootstrap untuk mempercepat proses dan fokus pada konten yang menarik. Jangan lupa optimasi SEO untuk meningkatkan visibilitas di mesin pencari!

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *