Membuat Template Portofolio dengan Bootstrap

Kita tahu kalo Bootstrap adalah framework CSS yang banyak sekali di pakai untuk design website, karena kemudahan penggunaanya, trus desain bawaan bootstrapnya yang bagus, membuat banyak orang sering memakai bootstrap untuk proyek proyeknya. Nah klai ini saya akan menshare bagaimana cara Membuat Template Portofolio dengan Bootstrap. Â Langsung saja kita praktekan yah teman teman.

Pertama kalian buka text editor kalian dan ketika kode HTML berikut dan beri nama dengan nama index.html.

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="style  sheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>


<nav class ="navbar navbar-default" style  ="margin-bottom: 0;

      border-radius: 0;">

  <div class ="container-fluid">

    <div class ="navbar-header">

      <button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

        <span class ="icon-bar"></span>

        <span class ="icon-bar"></span>

        <span class ="icon-bar"></span>                       

      </button>

      <a class ="navbar-brand" href="#">Portfolio</a>

    </div>

    <div class ="collapse navbar-collapse" id="myNavbar">

      <ul class ="nav navbar-nav">

        <li class ="active"><a href="#">Home</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Gallery</a></li>

        <li><a href="#">Contact</a></li>

      </ul>

      <ul class ="nav navbar-nav navbar-right">

        <li><a href="#"><span class ="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

    </div>

  </div>

</nav>


<div class ="jumbotron">

  <div class ="container text-center">

    <h1>Portofolio Ku</h1>     

    <p>Ini adalah beberapa project Ku</p>

  </div>

</div>


<div class ="container-fluid bg-3 text-center">   

  <div class ="row">

    <div class ="col-sm-3">

      <p>Project Satu</p>

      <img src="https://placehold.it/150x80?text=IMAGE" class ="img-responsive" style  ="width:100%" alt="Image">

    </div>

    <div class ="col-sm-3">

      <p>Project Dua</p>

      <img src="https://placehold.it/150x80?text=IMAGE" class ="img-responsive" style  ="width:100%" alt="Image">

    </div>

    <div class ="col-sm-3">

      <p>Project Tiga</p>

      <img src="https://placehold.it/150x80?text=IMAGE" class ="img-responsive" style ="width:100%" alt="Image">

    </div>

    <div class ="col-sm-3">

      <p>Project Empat</p>

      <img src="https://placehold.it/150x80?text=IMAGE" class ="img-responsive" style ="width:100%" alt="Image">

    </div>

  </div>

</div><br>


<div class ="container-fluid bg-3 text-center">   

  <div class ="row">

    <div class ="col-sm-3">

      <p>Project Lima</p>

      <img src="https://placehold.it/150x80?text=IMAGE" class ="img-responsive" style  ="width:100%" alt="Image">

    </div>

    <div class ="col-sm-3">

      <p>Project Enam</p>

      <img src="https://placehold.it/150x80?text=IMAGE" class ="img-responsive" style  ="width:100%" alt="Image">

    </div>

    <div class ="col-sm-3">

      <p>Project Tujuh</p>

      <img src="https://placehold.it/150x80?text=IMAGE" class ="img-responsive" style  ="width:100%" alt="Image">

    </div>

    <div class ="col-sm-3">

      <p>Project Delapan</p>

      <img src="https://placehold.it/150x80?text=IMAGE" class ="img-responsive" style  ="width:100%" alt="Image">

    </div>

  </div>

</div><br><br>


<footer class ="container-fluid text-center" style  ="background-color: #f2f2f2;

      padding: 25px;">

  <p>Footer Text</p>

</footer>


</body>

</html>

Kalo tidak ada kesalahan penulisan maka hasil akan seperti di bawah ini.

Sekian tutorial Membuat Template Portofolio dengan Bootstrap, semoga bermanfaat dan keep Coding :D.

Membuat Template Portofolio dengan Bootstrap

Kategori