harbor/views/index.htm

<div class="container-fluid container-fluid-custom" ng-controller="IndexController as vm">
  <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' | tr //</h4>
			      </div>
		        <sign-in></sign-in>
          </div>						
        </div>
      </div>
      <div class="col-md-8">
	      <div class="up-section">	
		      <h4 class="page-header display-inline-block">// 'its_easy_to_get_started' | tr //</h4>
          <div class="page-content">
            <div style="margin-left: auto; margin-right: auto; width: 100%;">		      
    	          <div class="thumbnail display-inline-block">
    	            <img src="/static/resources/img/Step1.png" alt="Step 1">    
    	            <h5 class="step-content">// 'anybody_can_read_public_projects' | tr //</h5>
    	          </div>	      
    	          <div class="thumbnail display-inline-block">
    	            <img src="/static/resources/img/Step2.png" alt="Step 2">
    	            <h5 class="step-content">// 'create_projects_and_connect_repositories' | tr //</h5>
    	          </div>	       
    	          <div class="thumbnail display-inline-block">
    	            <img src="/static/resources/img/Step3.png" alt="Step 3">
    	            <h5 class="step-content">// 'user_management_and_role_assignment' | tr //</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">
              <modal-dialog title="// 'harbor_intro_title' | tr //" message='// vm.message //' content-type="text/html"></modal-dialog>
    	        <h4 class="page-header underlined">// 'why_use_harbor' | tr //</h4>
              <p class="page-content text-justify">
      			  // 'index_desc' | tr //
        			</p>
    		      <ul>
        			  <li class="long-line">▪︎ // 'index_desc_1' | tr //</li>
        			  <li class="long-line">▪︎ // 'index_desc_2' | tr //</li>
        			  <li class="long-line">▪︎ // 'index_desc_3' | tr //</li>
        			  <li class="long-line">▪︎ // 'index_desc_4' | tr //</li>
        			  <li class="long-line">▪︎ // 'index_desc_5' | tr //</li>
        			</ul>
    		      <div class="page-content pull-right">
    		        <a href="javascript:void(0);" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-triangle-right"></span> // 'view_all' | tr //</a>
    		      </div>
          </div>						
    	    </div>
      </div>
      <div class="col-md-8">
    	    <div class="down-section">
      		  <top-repository></top-repository>
    	    </div>
    	  </div>
    </div>
  </div>
</div>