Membuat Portfolio Sederhana Dengan Bootstrap

-
Pada postingan ini saya akan sharing membuat web portfolio sederhana menggunakan bootstrap dan html, untuk tampilannya kurang lebih seperti gambar berikut :





pertama2 buat sebuah folder dengan nama portfolio dan setelah itu download bootstrap, setelah itu copy folder css, js dan fonts dan buat satu folder img untuk menyimpan gambar yang ada di file downloadnya ke folder portfolio dan buat file baru didalam folder portfolio dengan nama index.html
untuk source codenya seperti berikut :

<!doctype html>
<html lang="en" id="home">
  <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" type="text/css" href="css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="css/style.css">
    

    <title>My Portfolio</title>
  </head>
  <body>

  <!-- navbar -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collpase-1" aria-expanded="false">
 
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>

  <a href="#home" class="navbar-brand page-scroll">Toekang Ketik</a>
  </div>

  <div class="collapse navbar-collapse" id="bs-example-navbar-collpase-1">
  <ul class="nav navbar-nav navbar-right">
  <li><a href="#about" class="page-scroll">About</a></li>
  <li><a href="#portfolio" class="page-scroll">Portfolio</a></li>
  <li><a href="#contact" class="page-scroll">Contact</a></li>
  </ul>
  </div>
  </div>
</nav>
  <!-- end of navbar -->

    <!-- Header -->
    <div class="jumbotron text-center">
   
    <img src="img/p_2.jpg" class="img-circle">
            <!-- <img src="img/p_2.jpg" style="width: 100px;height: 100px;"> -->
   
    <h1>Husnul Mub</h1>
    <p><u><b>ABAP Programmer | System Analyst | Freelance</b></u></p>
    </div>
    <!-- Akhir Header -->


    <!-- About -->
    <section class="about" id="about">
    <div class="container">
    <div class="row">
    <div class="col-sm-12">
    <h2 class="text-center">About</h2>
    <hr>
    </div>
    </div>

    <div class="row">
    <div class="col-sm-5 col-sm-offset-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col-sm-5">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </div>
    </div>
    </section>
    <!-- End of About -->


    <!-- Pertfolio -->
    <section class="portfolio" id="portfolio">
    <div class="container">
    <div class="row">
    <div class="col-sm-12 text-center">
    <h2>Portfolio</h2>
    <hr>
    </div>
    </div>

    <!-- Images -->
    <div class="row">
    <div class="col-sm-4 text-center">
    <a href="" class="thumbnail">
    <img src="img/portfolio/1.png">
    </a>
    </div>

<div class="col-sm-4 text-center">
    <a href="" class="thumbnail">
    <img src="img/portfolio/2.png">
    </a>
    </div>

    <div class="col-sm-4 text-center">
    <a href="" class="thumbnail">
    <img src="img/portfolio/3.png">
    </a>
    </div>

    <div class="col-sm-4 text-center">
    <a href="" class="thumbnail">
    <img src="img/portfolio/4.png">
    </a>
    </div>

    <div class="col-sm-4 text-center">
    <a href="" class="thumbnail">
    <img src="img/portfolio/5.png">
    </a>
    </div>

    <div class="col-sm-4 text-center">
    <a href="" class="thumbnail">
    <img src="img/portfolio/6.png">
    </a>
    </div>   
    </div>
    </div>
    </section>
    <!-- End of Pertfolio -->


    <!-- Contact -->
    <section class="contact" id="contact">
    <div class="container">
    <div class="row">
    <div class="col-sm-12 text-center">
    <h2>Contact</h2>
    <hr>
    </div>
    </div>

    <!-- Form contact -->
    <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
    <form>
    <div class="form-group">
    <label for="nama">Nama</label>
    <input type="text" id="nama" class="form-control" placeholder="Masukkan Nama">
    </div>

    <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" class="form-control" placeholder="Masukkan Email">
    </div>

    <div class="form-group">
    <label for="telp">No. Telp</label>
    <input type="tel" id="telp" class="form-control" placeholder="Masukkan no telepone">
    </div>

    <div class="form-group">
    <label for="pesan">Pesan</label>
    <textarea class="form-control" rows="8" id="pesan" placeholder="Masukkan pesan"></textarea>
    </div>
   
    <div class="form-group">
    <button type="submit" class="btn btn-primary">Kirim Pesan</button>
    </div>
   
    </form>
    </div>
    </div>
    </div>
    </section>
    <!-- End of Contact -->


    <!-- footer -->
    <footer>
    <div class="container text-center">
    <div class="row">
    <div class="col-sm-12">
    <p>&copy; copyright 2018 | <a href="https://www.facebook.com/toekangketiks/">toekang ketik</a></p>
    </div>
    </div>
    </div>
    </footer>
    <!-- end of footer -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<script src="js/jquery.js"></script>    
<script src="js/jquery.easing.1.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/hm.js"></script>
  </body>
</html>

sekian sharing kali ini semoga bermanfaat, yang mau download source code nya bisa DISINI.

Comments

  1. Gal9 April 2020 at 23:37

    Makasih kak, Artikel nya membantu saya dalam mengerjakan tugas. perkenalkan nama saya Muhamad Asfarezhan,nim 1922500056 dari STMIK Atmaluhur Pangkalpinang. Jika minat atau mau lihat lihat silahkan kunjungi website > http://www.atmaluhur.ac.id

    ReplyDelete

Post a Comment

Popular posts from this blog

PHP MySql CRUD Dengan Konsep MVC

-
Image
Pada postingan kali ini saya akan sharing cara membuat CRUD dengan php menggunakan konsep MVC, ok langsung saja buka code editor (saya menggunakan sublime text) dan buat folder baru dengan nama phpmvc didalam folder htdocs kalian dan tambah folder seperti berikut :  Setelah itu kita siapkan database di mysql, buat database dengan nama phpmvc dan tablenya seperti gambar berikut : tambahkan file config.php didalam folder app/config : <?php define('BASEURL', 'http://localhost:8181/phpmvc/public'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_NAME', 'phpmvc'); kemudian tambahkan 3 file controller didalam folder app/controllers, yaitu Home, About, dan Mahasiswa : Home.php <?php class Home extends Controller { public function index() { $data['nama'] = $this->model('User_model')->getUser()...
Read more

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

-
Image
Postingan kali saya akan sharing membuat aplikasi perpustakaan sederhana menggunakan laravel 5.8, dimana terdapan menu Anggota, Kategori Buku, Daftar Buku dan Transaksi (Peminjaman/Pengembalian Buku). ok langsung saja kita buat project laravel dengan nama perpus : composer create-project --prefer-dist laravel/laravel perpus setelah create project laravel-nya selesai kita buat database melalui localhost/phpmyadmin dengan nama db_perpus, lalu kita buka project laravel dengan code editor disini saya menggunakan visual studio code. Setelah project kita buka dengan code editor, pertama kita atur koneksi database yang ada di file .env, kita rubah menjadi seperti berikut : note : untuk db_username dan db_password di sesuiakan dengan configurasi masing-masing. Selanjutnya kita tambahkan 4 buah data migration yaitu : table_anggota, table_kategori, table_buku, table_transaksi, kita buka terminal dan jalankan command berikut :  php artisan make:migration crea...
Read more

IT Asset Management Dengan PHP MySQL

-
Image
Pada postingan kali saya akan share sebuah aplikasi IT Asset management yang fungsinya untuk memonitoring semua Asset khusus IT, contohnya : Laptop/komputer , Printer, Router, Hardisk, dll. Dalam aplkasi ini kita bisa mengetahui Asset IT posisinya dimana dan digunakan oleh siapa. untuk data-data yang dibutuhkan antara lain : 1. data kategori asset dalam menu ini kita bisa meng-input jenis2 kategory asset : tambah kategori asset : 2. data department 3. data karyawan 4. data department per karyawan 5. data asset location  6. data satuan asset dan untuk transaksi yang ada dalam aplikasi ini adalah,  1. create asset, pada menu create asset ini kita akan mengalokasikan sebuah asset ke karyawan/personnel tampilannya seperti berikut: setelah klik tombol save akan muncul seperti dibawah : untuk melihat detail asset yang sudah dibuat tadi, kita bisa pilih...
Read more