Create Job detail

app/assets/stylesheets/jobs.scss

@@ -6,5 +6,48 @@
   margin: 5px;
   margin: 5px;
   padding: 5px;
   padding: 5px;
 }
 }
-
-
+.details-banner{
+  position: relative;
+  width: 100%;
+  height: 50vh;
+}
+.job-details-banner {
+  background-image: url('job-details.jpg');
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.job-info {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  background-color: #e6e6e6;
+  color: #262626;
+  font-size: 16px;
+  font-family: Bookman, URW Bookman L, serif;
+}
+.apply-job {
+  position: absolute;
+  right: 5%;
+  top: 10%;
+  border: 2px solid #006080;
+  border-radius: 12px;
+  width: 20%;
+  text-align: center;
+  color: white;
+  background: rgb(2,0,36);
+  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(7,251,89,1) 28%, rgba(0,212,255,1) 100%);
+}
+.info {
+  background-color: #cce6ff;
+  margin: 20px;
+  padding: 20px;
+}
+.under-descrip {
+  text-align: center;
+}
+.apply-btn, .favorite-btn {
+  margin: 20px;
+  padding: 20px;
+}

app/views/jobs/access_jobs.html.erb

 <div class="container">
 <div class="container">
-  <%= @job_details.title %>
+  <div class="details-banner">
+    <div class="job-details-banner">
+      <div class="job-info">
+        <div><strong><%= @job_details.title %></strong></div>
+        <div><%= @job_details.company_name %></div>
+        <div class="breadcrumb">
+          <%= link_to "TOP", root_path  %>&ensp;/&ensp;
+          <% @job_details.cities.each do |city| %>
+            <%= link_to '🎯' + city.name, city_jobs_path(converted_name: city.converted_name) %>
+          <% end %>&ensp;/&ensp;
+          <% @job_details.industries.each do |industry| %>
+            <%= link_to '👉' + industry.name, industry_jobs_path(converted_name: industry.converted_name) %>
+          <% end %>&ensp;/&ensp;
+          <%= @job_details.title.truncate_words(5) %>
+        </div>
+        <%= link_to '#' do %>
+          <div class="apply-job">
+            <strong>Apply Now</strong>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+  <div class="details">
+    <div class="job-infomation">
+      <h1><%= @job_details.title %></h1>
+      <div class="row info border border-dark">
+        <div class="col-6">
+          <div class="city">
+            <strong>Location:</strong> <%= @job_details.cities.map(&:name).join(' | ') %>
+          </div>
+          <div class="created-day">
+            <strong>Created at</strong>: <%= @job_details.created_at.strftime('%d/%m/%Y') %>
+          </div>
+          <div class="industry">
+            <strong>Industry:</strong> <%= @job_details.industries.map(&:name).join(', ') %>
+          </div>
+        </div>
+        <div class="col-6">
+          <div class="salary-detail">
+            <strong>Salary:</strong> <%= @job_details.salary %>
+          </div>
+          <% if @job_details.experience.present? %>
+            <div class="experience">
+               <strong>Experience:</strong> <%= @job_details.experience %>
+            </div>
+          <% end %>
+          <div class="level">
+            <strong>Level:</strong> <%= @job_details.level %>
+          </div>
+          <div class="expiration-date">
+            <strong>Expiration date:</strong> <%= @job_details.expiration_date %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="job-description">
+      <%= @job_details.description.html_safe %>
+    </div>
+  </div>
+  <div class="row under-descrip">
+    <div class="col-6">
+      <%= link_to '#' do %>
+        <div class="btn btn-info btn-lg apply-btn">
+          <strong>Apply Now</strong>
+        </div>
+      <% end %>
+    </div>
+    <div class="col-6">
+      <%= link_to '#' do %>
+        <div class="btn btn-danger btn-lg favorite-btn">
+          <strong>Favorite</strong>
+        </div>
+      <% end %>
+    </div>
+  </div>
 </div>
 </div>