harbor/views/ng/index.htm

<div class="container-fluid container-fluid-custom">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
	      <div class="row">
	        <div class="up-section">
		        <div class="col-sm-offset-1 col-sm-10">
		          <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;<h4 class="title-color display-inline-block">Login now</h4>
			      </div>
		        <form class="form-horizontal">
    		        <div class="form-group"> 
                  <div class="col-sm-offset-1 col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-1 col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-1 col-sm-10">
    				        <div class="pull-right">
    			            <button class="btn btn-default">Sign In</button>
    			            <button class="btn btn-success">Sign Up</button>   
    				        </div>
                  </div>	
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-1 col-sm-10">
     			          <div class="pull-right">
                      <a href="#">Forgot Password</a>
                    </div>
                  </div>
    			       </div>
             </form>
           </div>						
         </div>
      </div>
      <div class="col-md-8">
	      <div class="up-section">	
		      <h4 class="page-header">It's easy to get started ...</h4>
          <div class="page-content">
          <div style="margin-left: auto; margin-right: auto; width: 100%;">
		      
	          <div class="thumbnail display-inline-block">
	            <img src="static/ng/resources/img/Step1.png" alt="Step 1">    
	            <h5 class="step-content">Anybody can read public projects</h5>
	          </div>
	      
	          <div class="thumbnail display-inline-block">
	            <img src="static/ng/resources/img/Step2.png" alt="Step 2">
	            <h5 class="step-content">Create projects and connect repositories</h5>
	          </div>
	       
	          <div class="thumbnail display-inline-block">
	            <img src="static/ng/resources/img/Step3.png" alt="Step 3">
	            <h5 class="step-content">User management and role assignment.</h5>
	          </div>
		      </div>
          </div>
	      </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
    	    <div class="row">
    	      <div class="down-section">
    	      		<h4 class="page-header underlined">Why use Harbor?</h4>
        			<p class="page-content text-justify">
      			  Project Harbor is to build an enterprise-class, 
      			  reliable registry server. Enterprises can set 
      			  up a private registry server in their own environment 
      			  to improve productivity as well as security. 
      			  Project Harbor can be used in both development
      			  and production environment.
        			</p>
    		      <ul>
        			  <li class="long-line">▪︎ Security: Keep their intellectual properties within their organizations.</li>
        			  <li class="long-line">▪︎ Efficiency: A private registry server is set up within the organization's network and can reduce significantly the internet traffic to the public service.</li>
        			  <li class="long-line">▪︎ Access Control: RBAC (Role Based Access Control) is provided. User management can be integrated with existing enterprise identity services like AD/LDAP.</li>
        			  <li class="long-line">▪︎ Audit: All access to the registry are logged and can be used for audit purpose.</li>
        			  <li class="long-line">▪︎ GUI: User friendly single-pane-of-glass management console.</li>
        			</ul>
    		      <div class="page-content pull-right">
    		        <a href="#"><span class="glyphicon glyphicon-triangle-right"></span> Learn more...</a>
    		      </div>
          </div>						
    	    </div>
      </div>
      <div class="col-md-8">
    	    <div class="down-section">
      		  <h4 class="page-header title-color underlined">Repositories</h4>
      		  <div class="down-table-pane">
      		    <table class="table">
        			  <thead>
        			    <th>Project/Repository Name</th><th>Creation Time</th><th>Author</th>
        			  </thead>
        			  <tbody>
        			    <tr>
        				    <td>myrepo/Ubuntu</td><td>2016-03-22 12:35:00</td><td>Haox</td>
        				  </tr>
        			    <tr>
        				    <td>myrepo/MySQL</td><td>2016-03-22 12:35:00</td><td>Haox</td>
        				  </tr>
        			    <tr>
        				    <td>harbor/Nginx</td><td>2016-03-21 11:25:30</td><td>Wenkai Yin</td>
        				  </tr>
        				  <tr>
        				    <td>harbor/Registry</td><td>2016-03-21 11:25:30</td><td>Wenkai Yin</td>
        				  </tr>
        				  <tr>
        				    <td>myproject/Alpine</td><td>2016-03-23 09:40:20</td><td>Daniel</td>
        				  </tr>
        				  <tr>
        				    <td>myproject/Golang</td><td>2016-03-23 09:40:20</td><td>Daniel</td>
        				  </tr>
        			  </tbody>
        			</table>
      		  </div>
    	    </div>
    	  </div>
    </div>
  </div>
</div>