Fix end of line and text indent

app/assets/javascripts/cities_area.js

+$(document).ready(function(){
+  $("div.viet-nam").click(function(){
+    $(window).scrollTop($('.vietnam-area').offset().top);
+  });
+  $("div.international").click(function(){
+    $(window).scrollTop($('.international-area').offset().top);
+  });
+});

app/assets/stylesheets/cities.scss

+.city-banner{
+  background: linear-gradient(to top, #33ccff 0%, #006600 100%);
+  font-size: 38px;
+  text-align: center;
+  color: white;
+  font-style: italic;
+  font-family: Bookman, URW Bookman L, serif;
+}
+.city-name {
+  margin: 10px;
+  padding: 10px;
+  text-align: center;
+}
+.remove-decoration {
+  &:hover{
+    a {
+      text-decoration: none;
+    }
+  }
+}
+.viet-nam, .international {
+  cursor: pointer;
+}

app/controllers/cities_controller.rb

+class CitiesController < ApplicationController
+  def index
+    @cities_vietnam = City.all_city.where('location = 1')
+    @cities_international = City.all_city.where('location = 0')
+  end
+end

app/controllers/industries_controller.rb

+class IndustriesController < ApplicationController
+
+end

app/models/city.rb

@@ -5,4 +5,7 @@ class City < ApplicationRecord
   def self.top_city
     joins(:jobs).group(:city_id).order('count(job_id) DESC').limit(9)
   end
+  def self.all_city
+    joins(:jobs).group(:city_id).order('count(job_id) DESC')
+  end
 end

app/views/cities/_cities_international.html.erb

+<% @cities_international.each do |city| %>
+  <div class="col-3 remove-decoration">
+    <%= link_to '#' do %>
+      <div class="border border-dark rounded city-name">
+        <div>
+          <strong><%= city.name %></strong>
+        </div>
+        <div>
+          <%= city.jobs.count %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

app/views/cities/_cities_vietnam.html.erb

+<% @cities_vietnam.each do |city| %>
+  <div class="col-3 remove-decoration">
+    <%= link_to '#' do %>
+      <div class="border border-dark rounded city-name">
+        <div>
+          <strong><%= city.name %></strong>
+        </div>
+        <div>
+          <%= city.jobs.count %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

app/views/cities/index.html.erb

+<% provide(:title, 'All Cities') %>
+<div class="container">
+  <div class="all-cities">
+    <div class="city-banner rounded">City list</div>
+    <div class="row">
+      <div class="col-6">
+        <div class="row-table border border-dark rounded viet-nam">Việt Nam</div>
+      </div>
+      <div class="col-6">
+        <div class="row-table border border-dark rounded international">International</div>
+      </div>
+    </div>
+  </div>
+  <div class="city-banner rounded vietnam-area">Việt Nam</div>
+  <div class="city-vietnam">
+    <div class="row">
+      <%= render 'cities/cities_vietnam' %>
+    </div>
+  </div>
+  <div class="city-banner rounded international-area">International</div>
+  <div class="city-international">
+    <div class="row">
+      <%= render 'cities/cities_international' %>
+    </div>
+  </div>
+</div>

config/routes.rb

@@ -2,5 +2,7 @@ Rails.application.routes.draw do
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
   resources :jobs
   resources :top_pages
+  resources :industries
+  resources :cities
   root to: "top_pages#index"
 end