Styles html according to mockup

app/assets/stylesheets/pages/projects.scss

@@ -480,6 +480,27 @@ a.deploy-project-label {
   }
 }
 
+.project-template {
+  .project-templates-buttons {
+    i {
+      display: block;
+      font-size: 24px;
+      margin-bottom: 4px;
+    }
+
+    img {
+      display: block;
+      height: 24px;
+      margin: 0 auto 4px;
+    }
+  }
+
+    &:after {
+      content: "OR";
+      float: right;
+    }
+}
+
 .project-stats {
   font-size: 0;
   text-align: center;

app/views/projects/_project_templates.html.haml

-.col-sm-12.template-buttons
+
+.btn-group.project-templates-buttons{ data: { toggle: "buttons" }}
+  %label.btn.active
+    %input{ type: "radio",  autocomplete: "off", name: "project_templates" }
+    = icon('file-o')
+    Blank
   - Gitlab::ProjectTemplate.all.each do |template|
     -# The title should be the value posted to the controller, a pretty name to print would be
     -# template.name
-    = template.title
+    %label.btn
+      %input{ type: "radio",  autocomplete: "off", name: "project_templates" }
       = image_tag(template.logo_path)
+      = template.title
 
-  = f.text_field :template_title, placeholder: "rails", class: "form-control", tabindex: 2, autofocus: true, required: true

app/views/projects/new.html.haml

@@ -15,17 +15,20 @@
       - if import_sources_enabled?
         %p
           Create or Import your project from popular Git services
-    .col-lg-9
+    .col-lg-9.js-toggle-container
       = form_for @project, html: { class: 'new_project' } do |f|
-        .project-template.js-toggle-container
+        .row
+          .col-lg-6
+            .project-template
               .form_group.clearfix
                 = f.label :template_project, class: 'label-light' do
-              Start from template
+                  Create from template
+                  = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: "What's included in a template?" }, title: "What's included in a template?", class: 'has-tooltip', data: { placement: 'top'}
                 .col-sm-12.import-buttons
                   = render 'project_templates', f: f
-
+          .col-lg-6
             - if import_sources_enabled?
-          .project-import.js-toggle-container
+              .project-import
                 .form-group.clearfix
                   = f.label :visibility_level, class: 'label-light' do #the label here seems wrong
                     Import project from
@@ -68,8 +71,12 @@
                         = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
                           = icon('gitlab', text: 'GitLab export')
 
+        .row
+          .col-lg-12
             .js-toggle-content.hide
+              %hr
                 = render "shared/import_form", f: f
+        %hr.js-toggle-content.hide
 
         .row
           .form-group.col-xs-12.col-sm-6