Peter's Web Studio Center

index.html

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <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="#">Tongjie Li</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class=""><a href="#Home">Home</a></li>
        <li><a href="#About">About</a></li>
        <li><a href="#Portfolio">Portfolio</a></li>
        <li><a href="#Contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
<!--Home -->
<a  name="Home"> </a>
<div class="container-fluid text-center">
  <div class="jumbotron">
    <div class="container">
      <h1 class="margin">Peter's Web Studio Center</h1>
      <div class="page-header">
        <h3 class="">Where amazing happen</h3>
      </div>
      <div class="col-xs-12"><hr class="style1"></div>
      <div class="row	">
       <!--<div class="col-xs-12">-->
          <ul class="list-inline">
            <li><a href="#" class="btn btn-default btn-lg" target="_blank">
           
              Twitter</a></li>
               <li><a href="#" class="btn btn-default btn-lg" target="_blank">
             <!--<i class="fa-linkedin-square">-->
              Twitter</a></li>
                  <li><a href="#" class="btn btn-default btn-lg" target="_blank">

              Twitter</a></li>
                     <li><a href="#" class="btn btn-default btn-lg" target="_blank">
             <!-- <i class="fa-linkedin-square">-->
              Twitter</a></li>
          </ul>
         <!-- <div class="btn-toolbar">
            <a href="#" class="btn btn-default btn-lg">
              <span class="glyphicon"></span> Twitter</a>
            <a href="#" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-search"></span>GitHub</a>
            <a href="#" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-search"></span>Linkedin</a>
            <a href="#" class="btn btn-default btn-lg">
              <span class="glyphicon glyphicon-search"></span>FreeCodeCamp</a>
          </div>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</div>
<!--About-->
<a  name="About"> </a>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-sm-4">
      <h3>Peter Web Studio Center</h3>
      <p>I'm a data architector in Telecommunication company living in Shanghai.</p>
      <p>I'm current learning Front end development.</p>
      <p>I was Java developer and Project Manager work on system like Network Management System and Process Management System.</p>
      <p>My passion is using technology to solve real world challenges.</p>
      <p>Haves:</p>
      <p>Languages and Frameworks:</p>
      <p>Java,J2EE,Hibernate,Spring</p>
      <p>Tools and expertise:</p>
      <p>Git</p>
    </div>
    <div class="col-sm-8">
      <div class="well">
        <img src="http://placehold.it/250x150?text=IMAGE" class="img-responsive" style="width:80%" alt="Image">
      </div>
    </div>
  </div>
</div>
<!--Portfolio-->
<a  name="Portfolio"> </a>
<div class="container-fluid text-center">
  <h3>Some of My Work</h3>
  <div class="row">
    <div class="col-sm-3">
      <p>Some text</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <p>Some text</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <p>Some text</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <p>Some text</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3">
      <p>Some text</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <p>Some text</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <p>Some text</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-3">
      <p>Some text</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
  </div>
</div>
<!--Contact-->
<a  name="Contact"> </a>
<footer class="container-fluid text-center">
  <p>Contact:snow8261 at gmail.com</p>
  <p>Power by <a href="#">BootStrap</a></p>
</footer>

Peter's Web Studio Center.markdown

Peter's Web Studio Center

A Pen by Tongjie on CodePen.

License.

style.css

hr.style1{
	border-top: 0.5px solid #8c8b8b;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />