Tutorial Desain Company Profile

Apa itu Company Profile?
Sedikit tentang company profile adalah bentuk profesional dari perusahaan atau bisnis sebagai perkenalan dengan tujuan utamanya untuk menginformasikan kepada setiap orang, tentang keberadaaan atau adanya bisnis dan perusahaan tersebut.



Apa sih fungsinya Company Profile itu?

Jika anda memiliki bisnis atau perusahaan baik itu PT atau CV yang benar-benar serius menjalankan usaha yang anda jalankan pasti akan membuat sebuah halaman yang dinamakan company profile dalam bentuk cetak atau pun website. Salah satu bentuk keseriusan anda dalam menjalankan usaha atau bisnis yang anda kelola dengan membuat sebuah halaman company profile, berbasis website atau pun cetak yang akan membawa keuntungan tersendiri bagi perusahaan atau bisnis anda.



Apa saja hal-hal penting yang harus dicantumkan pada company profile?


1. Sejarah Perusahaan Atau Bisnis Anda

Hal ini dapat menjadi gambaran bagi pihak-pihak baik itu internal atau external yang berkaitan dengan perusahaan atau bisnis anda.

2. Visi dan Misi

Pentingnya visi dan misi yang nantinya akan dilihat oleh orang-orang yang terkait dalam perusahaan atau bisnis anda dan akan memberikan gambaran kepada klien atau calon klien perusahaan dan bisnis anda. 
Visi merupakan cita-cita yang ingin diraih perusahaan atau bisnis anda dan Misi adalah bagaimana cara agar visi perusahaan atau bisnis anda bisa tercapai.

3. Struktur Organisasi

Struktur Organisasi ( SO ) merupakan susunan penanggung jawab dalam perusahaan atau bisnis anda. Lebih baik dan lebih jelasnya dicantumkan nama dan foto setiap individu yang bertugas.

4. Kinerja Perusahaan

Pada point ke empat ini sangat diwajibkan untuk memperlihatkan kinerja perusahaan atau bisnis anda, agar pihak internal dan external mengetahui kualitas perusahaan atau bisnis anda.

5. Harga atau Jasa

Selain itu, pada point lima ini sangat penting juga, agar supaya calon klien anda bisa mengetahui dan melihat harga atau jasa yang perusahaan anda kelola.

6. Contact

Nah, pada point ke enam inilah jangan sampai anda lewatkan. Klien tentunya perlu mengetahui harus kemana mereka menghubungi perusahaan atau bisnis anda, baik itu melalui telpon, email bahkan menuju lokasi kantor langsung.

Bagaimana membuat halaman company profile berbasis online atau website?


Inilah inti pokok pada artike ini yang akan sama-sama kita belajar desain company profile. Kemungkinan akan berlanjut ke part-part selanjutnya. Pada tutorial ini saya akan membuat Company Profile penyedia jasa.


Baiklah, berikut tutorial desain company profile :


Langkah pertama yang harus anda persiapkan adalah membuat sebuah folder pada laptop atau komputer anda dengan nama Company Profile. Lihat gambar dibawah ini:




Kemudian buka atau klik dua kali pada folder Company Profile tersebut, lalu buat 2 folder didalamnya, berinama fontawesome dan img. Lihat gambar dibawah ini:




Untuk folder fontawesome anda bisa download pada situs resminya fontawesome fre for web yang nantinya akan kita gunakan pada pebuatan company profile. Lihat gambar dibawah ini:




Setelah anda download, silahkan buka folder fontawesome yang baru saja anda download, kemudian anda copy semua atau bisa langsung gunakan fungsi CTRL+A ( untuk pilih semua ) kemudian CTRL+C ( untuk copy semua ). Setelah itu buka folder company profile yang tadi anda buat, lalu buka folder fontawesome yang masih kosong kemudian tempelkan atau pastekan dengan menggunakan fungsi CTRL+V supaya cepat. Maka akan seperti pada gambar dibawah ini:




Kemudian, pada folder img yang masih kosong, silahkan anda isi dengan gambar yang sesuai dengan keinginan anda dan berinama sesuai pada gambar dibawah ini:


Setelah langkah pertama diatas anda selesaikan, kita akan lanjut ke langkah kedua yaitu membuat script atau codingnya. Pada tutorial ini, saya menggunakan bootstrap dengan instalisasi online .

Silahkan anda kunjungi situs resminya Bootstrap, lalu pilih tombol get stater yang saya beri tanda panah hitam pada gambar dibawah ini:



Sebelum kesana, pastikan diperangkat anda sudah terinstal text editor bisa menggunakan notepad++ atau bisa juga menggunakan sublime text 3.  Silahkan anda download dan instal terlebih dahulu text editornya pada perangkat anda.

Disini saya menggunakan sublime text 3. Silahkan buka text editornya, pilih file - new file - lalu save as kedalam folder Company Profile, lalu beri nama company_profile(titik html)Untuk memulai, anda bisa kembali lagi ke website bootstrap, klik pada sidebar kanan stater template, atau anda bisa langsung lihat dan copy lalu pastekan pada text editor anda. 
Berikut kode template yang sudah saya edit dan modifikasi dibawah ini:
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="fontawesome/css/all.min.css">

    <title>Company Profile</title>
  </head>
  <body>
    
        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><strong>Belajar Design Web</strong></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link ml-3" href="#">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link ml-3" href="#">ABOUT US</a>
          </li>
          <li class="nav-item">
            <a class="nav-link ml-3" href="#">OUR SERVICE</a>
          </li>
          <li class="nav-item">
            <a class="nav-link ml-3" href="#">PORTFOLIO</a>
          </li>
          <li class="nav-item">
            <a class="nav-link ml-3" href="#">CONTACT US</a>
          </li>
        </ul>
      </div>
    </div>
    </nav>
      <div class="jumbotron">
        <h1 class="display-4">Buat Website Anda Sekarang!</h1>
        <hr class="my-4">
        <p class="lead">Jasa Pembuatan Website Dengan Harga Terbaik dan Terjangkau, Prosess Cepat.</p> 
        <a class="btn btn-primary" href="#" role="button">Buat Sekarang</a>
      </div>

      <div class="container">
        <div class="row">
        <div class="card text-center">
          <div class="card-header h3">
            PELAJAR <br>
            <span class="display-4">Rp. 3000.000</span>
          </div>
          <div class="card-body">
            <ul class="list-group list-group-flush mb-4">
              <li class="list-group-item">Kapasitas Halaman : 20 Halaman</li>
              <li class="list-group-item">Gratis Domain</li>
              <li class="list-group-item">Kuota Upload : 300 MB</li>
              <li class="list-group-item">Bandiwdt Unlimited</li>
              <li class="list-group-item">Akun Email : 3</li>
            </ul>
            <a href="#" class="btn btn-primary rounded-pill">Beli Sekarang</a>
          </div>
        </div>

        <div class="card text-center">
          <div class="card-header h3">
            PELAJAR <br>
            <span class="display-4">Rp. 3000.000</span>
          </div>
          <div class="card-body">
            <ul class="list-group list-group-flush mb-4">
              <li class="list-group-item">Kapasitas Halaman : 20 Halaman</li>
              <li class="list-group-item">Gratis Domain</li>
              <li class="list-group-item">Kuota Upload : 300 MB</li>
              <li class="list-group-item">Bandiwdt Unlimited</li>
              <li class="list-group-item">Akun Email : 3</li>
            </ul>
            <a href="#" class="btn btn-primary rounded-pill">Beli Sekarang</a>
          </div>
        </div>

        <div class="card text-center">
          <div class="card-header h3">
            PELAJAR <br>
            <span class="display-4">Rp. 3000.000</span>
          </div>
          <div class="card-body">
            <ul class="list-group list-group-flush mb-4">
              <li class="list-group-item">Kapasitas Halaman : 20 Halaman</li>
              <li class="list-group-item">Gratis Domain</li>
              <li class="list-group-item">Kuota Upload : 300 MB</li>
              <li class="list-group-item">Bandiwdt Unlimited</li>
              <li class="list-group-item">Akun Email : 3</li>
            </ul>
            <a href="#" class="btn btn-primary rounded-pill">Beli Sekarang</a>
          </div>
        </div>
      </div>
      </div>
      <h3 class="mt-5 text-center">ABOUT US</h3>
      <hr>

      <div class="bg-light">
        <div class="container text-justify p-4">
          <div class="row">
            <div class="col-md-6">
              Ini adalah contoh kata kata untuk percobaan dan text contoh
              Ini adalah contoh kata kata untuk percobaan dan text contoh
              Ini adalah contoh kata kata untuk percobaan dan text contoh
              Ini adalah contoh kata kata untuk percobaan dan text contoh
            </div>

          <div class="col-md-6">
              Ini adalah contoh kata kata untuk percobaan dan text contoh
              Ini adalah contoh kata kata untuk percobaan dan text contoh
              Ini adalah contoh kata kata untuk percobaan dan text contoh
              Ini adalah contoh kata kata untuk percobaan dan text contoh
            </div>
          </div>
        </div>
      </div>

      <h3 class="mt-5 text-center">OUR SERVICE</h3>
      <hr>
      <div class="container">
        <div class="row text-center">
          <div class="col-md-4">
            <i class="fas fa-laptop-code h1"></i>
            <h3>Expert Coder</h3>
            Ini adalah text contoh atau sembarangan Ini adalah text contoh atau sembarangan dan ini adalah text contoh tidak digunakan hanya contoh.
          </div>
          <div class="col-md-4">
            <i class="fas fa-crop-alt h1"></i>
            <h3>Grapik Designer</h3>
            Ini adalah text contoh atau sembarangan Ini adalah text contoh atau sembarangan dan ini adalah text contoh tidak digunakan hanya contoh.
          </div>
          <div class="col-md-4">
            <i class="fas fa-camera-retro h1"></i>
            <h3>Social Marketing</h3>
            Ini adalah text contoh atau sembarangan Ini adalah text contoh atau sembarangan dan ini adalah text contoh tidak digunakan hanya contoh.
          </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Setelah anda copy dan paste pada text editor kode diatas, silahkan anda save.

Langah selanjutnya membuat file CSS pada text editor. Silah anda buka text editor lagi kemudian new file-save as ke folder company profile-berinama Style.css. Lihat file html diatas dan file css pada folder company prolie pada gambar dibawah ini:


Pada text editor, silahkan buka file baru yang anda bernama style css, yang masih kosong, lalu anda copy dan pastekan pada text editor file style css, kemudian anda save.

.jumbotron{
    background-image: url('img/jumboton.jpg');
    background-size: cover;
    height: 620px;
}

.jumbotron .display-4{
    margin-top: 120px;
    margin-left: 450px;
    font-size: 42px;
    font-weight: bold;
}

.jumbotron .lead{
    margin-left: 450px;
}

.jumbotron hr{
    margin-left: 450px;
    width: 620px;
}

.jumbotron .btn{
    margin-left: 450px;
}

.card {
    width: 20rem;
    margin-top: -150px;
    margin-left: 50px;
}

.card .display-4{
    font-size: 35px;
}

hr{
    width: 100px;
    border-top: 3px solid #eaeaea;
}


Setelah semua selesai, silahkan anda buka folder company profile - dan ketuk dua kali pada file html yang icon browser. Dan anda bisa lihat hasilnya. Jika memang tidak berfungsi, atau ada eror dan masalah lainnya, silahkan berkomentar dibawah ini:
Selengkapnya, anda bisa tonton video youtube dibawah ini:


Tutorial Desain Company Profile ini belum selesai, kemungkinan nanti kita akan lanjutkan kembali pada postingan selanjutnya.

Terima kasih.