Membuat Website Portfolio dengan Bootstrap 3

<!DOCTYPE html>
<html lang="en" id="home">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>My porfolio</title>
    <style>


        html {
    position: relative;

}

body {
    margin-bottom: 100px;
    margin-top: 30px;
}


.jumbotron img {
    width: 200px;
    border: 5px solid #666;
}

 hr {
    width: 250px;
    border-top: 4px solid #999;
}


section {
    min-height: 600px;
}

.portfolio {
    background-color: #eee;
}

.contact {
    min-height: 800px;
}

footer {
    width: 100%;
    position: absolute;
    height: 100px;
    bottom: 0;
    background-color: #333;
    padding-top: 30px;

}

footer p {
    color: #fff;
    font-size: 0.9em;
}


    </style>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </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-collapse-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">DcodexWEB</a>
        </div>


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-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>


  <!-- akhir navbar -->


    <!-- jumbotron -->
    <div class="jumbotron text-center">
      <img src="
      img/hendri.jpg" class="img-circle">
      <h1>Hendri Panjaitan</h1>
      <p>Lecturer | Web Developer | YouTuber</p>
    </div>

    <!-- akhir jumbotron -->


    <!-- 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.md</p>
          </div>
        </div>
      </div>

      </section>
    <!-- akhir about -->


    <!-- portfolio -->
    <section class="portfolio" id="portfolio">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <h2>Portfolio</h2>
            <hr>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
          <a href="" class="thumbnail">
            <img src="img/hen.jpg">
           </a>
          </div>
           <div class="col-sm-4">
          <a href="" class="thumbnail">
            <img src="img/hen.jpg">
           </a>
          </div>
           <div class="col-sm-4">
          <a href="" class="thumbnail">
            <img src="img/hen.jpg">
           </a>
          </div>
           <div class="col-sm-4">
          <a href="" class="thumbnail">
            <img src="img/hen.jpg">
           </a>
          </div>
           <div class="col-sm-4">
          <a href="" class="thumbnail">
            <img src="img/hen.jpg">
           </a>
          </div>
           <div class="col-sm-4">
          <a href="" class="thumbnail">
            <img src="img/hen.jpg">
           </a>
          </div>
        </div>
      </div>
    </section>
    <!-- akhir portfolio -->


    <!-- 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>
      <div class="row">
        <div class="col-sm-12-sm-offset-2">
        <form>
          <div class="form-group">
            <label for="nama">Nama</label>
            <input type="text" id="nama" class="form-control" placeholder="masukan nama">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" class="form-control" placeholder="masukan Email">
          </div>
           <div class="form-group">
            <label for="telp">Email</label>
            <input type="tel" id="telp" class="form-control" placeholder="masukan no telepon">
          </div>
          <select class="form-control">
            <option>-- Pilih kategori--</option>
            <option>Web Design</option>
            <option>Web Development</option>
          </select>
          <div class="form-group">
          <label for="pesan">Pesan</label>
          <textarea class="form-control" id="pesan" rows="10" placeholder="masukan pesan"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Kirim pesan</button>
        </form>

        </div>


       </div>
      </div>

    </section>
    <!-- akhir contact -->


    <!-- footer -->
     <footer>
       <div class="container text-center">
         <div class="row">
           <div class="col-sm-12">
             <p>&copy; copyright 2017 | built by <i class="
              glyphicon glyphicon-user"></i> <a href="http://www.facebook.com/Dzeroday" target="_blank">Hendri panjaitan</a></div>
           </div>
         </div>
         <div class="row text-center">
           <div class="col-sm-12">
             </i><a href="http://youtube.com/webprogrammingunpas" class="btn btn-danger"><i class="
                glyphicon glyphicon-play"></i> Subcribe to YouTube</a>
           </div>
         </div>
       </div>
     </footer>

    <!-- akhir footer -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>


    <script src="js/script.js"></script>
  </body>
</html>