Initial commit
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"include": [
|
||||||
|
"./src/**/**"
|
||||||
|
]
|
||||||
|
}
|
87
src/App.vue
|
@ -1,32 +1,69 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div class="page">
|
||||||
<div id="nav">
|
<header>
|
||||||
<router-link to="/">Home</router-link> |
|
<div class="logo">
|
||||||
<router-link to="/about">About</router-link>
|
<router-link to="/">
|
||||||
|
<img src="./assets/images/HeaderLogo.png">
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="sublogo">
|
||||||
|
Careers
|
||||||
|
</div>
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-item">
|
||||||
|
<a class="nav-link" href="/jobs">Jobs</a>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<a class="nav-link" href="/bookmarks">Bookmarks</a>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<a class="nav-link" href="/about">About Us</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="selectors">
|
||||||
|
<select class="bluefire-selector" id="selHeaderCountry">
|
||||||
|
<option value="">All Countries</option>
|
||||||
|
</select>
|
||||||
|
<select class="bluefire-selector" id="selHeaderCity">
|
||||||
|
<option value="">All Cities</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="search">
|
||||||
|
<input type="text" id="txtSearch" class="header-search" placeholder="Search for position"/>
|
||||||
|
<a class="button-search" href="#">
|
||||||
|
<img src="./assets/images/search-icon.png" alt="Search">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="account nav">
|
||||||
|
<div class="nav-item">
|
||||||
|
<a class="nav-link" href="/signin">Sign In</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div>
|
||||||
|
<router-view/>
|
||||||
</div>
|
</div>
|
||||||
<router-view/>
|
<footer>
|
||||||
|
<div class="main-footer">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="./assets/images/HeaderLogo.png">
|
||||||
|
</div>
|
||||||
|
<div class="sublogo">
|
||||||
|
Careers
|
||||||
|
</div>
|
||||||
|
<div class="contact">
|
||||||
|
<p>Contact Us at +62888123123</p>
|
||||||
|
<p>Leave a Message</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
2020. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#app {
|
@import 'assets/css/fonts.css';
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
@import 'assets/css/bluefire.css';
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-align: center;
|
|
||||||
color: #2c3e50;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav {
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav a {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #2c3e50;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav a.router-link-exact-active {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -0,0 +1,173 @@
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Product Sans';
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
font-family: 'Product Sans';
|
||||||
|
font-size: 1.125rem;
|
||||||
|
background-color: rgba(242, 242, 242, 1);
|
||||||
|
height: 4rem;
|
||||||
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0rem 3rem;
|
||||||
|
}
|
||||||
|
header .logo img{
|
||||||
|
object-fit: contain;
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
header .sublogo {
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
header .nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
header .nav-item {
|
||||||
|
margin: 0 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
header .nav-item .nav-link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
header .selectors {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
}
|
||||||
|
.bluefire-selector {
|
||||||
|
appearance: none;
|
||||||
|
border: none;
|
||||||
|
font-family: 'Product Sans';
|
||||||
|
font-size: 1.125rem;
|
||||||
|
|
||||||
|
padding-right: 2rem;
|
||||||
|
|
||||||
|
/* Custom arrow */
|
||||||
|
background-image:
|
||||||
|
linear-gradient(45deg, transparent 50%, #666666 50%),
|
||||||
|
linear-gradient(135deg, #666666 50%, transparent 50%);
|
||||||
|
background-position:
|
||||||
|
calc(100% - 1rem) 0.6rem,
|
||||||
|
calc(100% - 0.5rem) 0.6rem;
|
||||||
|
background-size:
|
||||||
|
0.5rem 0.5rem,
|
||||||
|
0.5rem 0.5rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.bluefire-selector:focus {
|
||||||
|
color: black;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .search {
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 0.125rem solid black;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
header .search .header-search {
|
||||||
|
appearance: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
padding: 0.25rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-family: "Product Sans";
|
||||||
|
}
|
||||||
|
header .search .button-search img{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .account .nav-link {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 2rem 7.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-banner {
|
||||||
|
margin: 2rem 2.5% 0 2.5%;
|
||||||
|
}
|
||||||
|
.index-banner h1{
|
||||||
|
font-family: "Montserrat";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 4rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.index-banner .index-image {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 20px;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
.index-banner .subheading {
|
||||||
|
font-family: "Montserrat";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #333333;
|
||||||
|
margin: 3rem auto;
|
||||||
|
}
|
||||||
|
.section-heading {
|
||||||
|
border-bottom: 0.5rem solid #322b6b;
|
||||||
|
}
|
||||||
|
.section-heading h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-family: "Product Sans";
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
padding: 0 3rem;
|
||||||
|
background-color: rgba(215, 215, 215, 1);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.main-footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-footer .logo img{
|
||||||
|
object-fit: contain;
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
.main-footer .sublogo {
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.main-footer .contact {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 3rem;
|
||||||
|
align-items: right;
|
||||||
|
}
|
||||||
|
.main-footer .contact p {
|
||||||
|
text-align: right;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
footer .copyright {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Montserrat';
|
||||||
|
src: url('../fonts/Montserrat-Regular.woff2') format('woff2') font-weight-normal,
|
||||||
|
url('../fonts/Montserrat-Bold.woff2') format('woff2') font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Product Sans';
|
||||||
|
src: url('../fonts/Product Sans Regular.woff2') format('woff2') font-weight-normal,
|
||||||
|
url('../fonts/Product Sans Bold.woff2') format('woff2') font-weight-bold,
|
||||||
|
url('../fonts/Product Sans Italic.woff2') format('woff2') font-italic font-weight-normal,
|
||||||
|
url('../fonts/Product Sans Bold Italic.woff2') format('woff2') font-italic font-weight-bold;
|
||||||
|
}
|
After Width: | Height: | Size: 112 KiB |
After Width: | Height: | Size: 422 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 9.5 KiB |
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="24px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1230 -1002 )">
|
||||||
|
<path d="M 1.8125 0 L 18.1875 0 C 18.4270833333333 0 18.65625 0.0475875743555854 18.875 0.142762723066756 C 19.21875 0.280237937871775 19.4921875 0.497025776602775 19.6953125 0.793126239259749 C 19.8984375 1.08922670191672 20 1.41705221414408 20 1.77660277594184 L 20 22.2233972240582 C 20 22.5829477858559 19.8984375 22.9107732980833 19.6953125 23.2068737607403 C 19.4921875 23.5029742233972 19.21875 23.7197620621282 18.875 23.8572372769332 C 18.6770833333333 23.941837409121 18.4479166666667 23.9841374752148 18.1875 23.9841374752148 C 17.6875 23.9841374752148 17.2552083333333 23.8149372108394 16.890625 23.4765366820886 L 10 16.7508261731659 L 3.109375 23.4765366820886 C 2.734375 23.8255122273629 2.30208333333333 24 1.8125 24 C 1.57291666666667 24 1.34375 23.9524124256444 1.125 23.8572372769332 C 0.78125 23.7197620621282 0.5078125 23.5029742233972 0.3046875 23.2068737607403 C 0.1015625 22.9107732980833 0 22.5829477858559 0 22.2233972240582 L 0 1.77660277594184 C 0 1.41705221414408 0.1015625 1.08922670191672 0.3046875 0.793126239259749 C 0.5078125 0.497025776602775 0.78125 0.280237937871775 1.125 0.142762723066756 C 1.34375 0.0475875743555854 1.57291666666667 0 1.8125 0 Z " fill-rule="nonzero" fill="#333333" stroke="none" transform="matrix(1 0 0 1 1230 1002 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 6.7 KiB |
|
@ -1,59 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<p>
|
|
||||||
For a guide and recipes on how to configure / customize this project,<br>
|
|
||||||
check out the
|
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
|
||||||
</p>
|
|
||||||
<h3>Installed CLI Plugins</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'HelloWorld',
|
|
||||||
props: {
|
|
||||||
msg: String
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -0,0 +1,118 @@
|
||||||
|
<template>
|
||||||
|
<div class="job-listing">
|
||||||
|
<div class="categories">
|
||||||
|
<div class="category">
|
||||||
|
<label>Countries</label>
|
||||||
|
<select class="bluefire-selector" id="selHeaderCountry">
|
||||||
|
<option value="">All Countries</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="category">
|
||||||
|
<label>Cities</label>
|
||||||
|
<select class="bluefire-selector" id="selHeaderCity">
|
||||||
|
<option value="">All Cities</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="listing" >
|
||||||
|
<div class="job-item" v-for="(n,i) in 6" :key="n">
|
||||||
|
<span class="job-no">{{ i+1 }}</span>
|
||||||
|
<h2 class="job-title">Yuika Mitsumine</h2>
|
||||||
|
<div class="job-location">
|
||||||
|
<div class="country">
|
||||||
|
<h2>Country</h2>
|
||||||
|
<p>Indonesia</p>
|
||||||
|
</div>
|
||||||
|
<div class="city">
|
||||||
|
<h2>City</h2>
|
||||||
|
<p>Jakarta</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="bookmark">
|
||||||
|
<img src="../assets/images/bookmark.svg" >
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.job-listing {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.job-listing .categories {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
.job-listing .listing {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
.categories .category {
|
||||||
|
background-color: rgba(242, 242, 242, 1);
|
||||||
|
padding: 1.5rem;
|
||||||
|
box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.3);
|
||||||
|
margin: 1rem 0.5rem;
|
||||||
|
}
|
||||||
|
.category label {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #322b6b;
|
||||||
|
}
|
||||||
|
.category .bluefire-selector {
|
||||||
|
width: 100%;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
.listing .job-item {
|
||||||
|
background-color: rgba(242, 242, 242, 1);
|
||||||
|
padding: 0.5rem 1.5rem;
|
||||||
|
box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.3);
|
||||||
|
margin: 1rem 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.job-item .job-no {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #322b6b;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
.job-item .job-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #333333;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.job-item .job-location {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.job-item .job-location div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0.5rem 3rem;
|
||||||
|
}
|
||||||
|
.job-item .job-location h2 {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: #322b6b;
|
||||||
|
margin: 0 0 0.25rem 0 ;
|
||||||
|
}
|
||||||
|
.job-item .job-location p {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.job-item .bookmark img {
|
||||||
|
height: 1.5rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,23 +1,14 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueRouter from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
import Home from '../views/Home.vue'
|
import Index from '../views/Index.vue'
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'home',
|
component: Index
|
||||||
component: Home
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/about',
|
|
||||||
name: 'about',
|
|
||||||
// route level code-splitting
|
|
||||||
// this generates a separate chunk (about.[hash].js) for this route
|
|
||||||
// which is lazy-loaded when the route is visited.
|
|
||||||
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
|
|
|
@ -1,5 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="about">
|
|
||||||
<h1>This is an about page</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="home">
|
|
||||||
<img alt="Vue logo" src="../assets/logo.png">
|
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// @ is an alias to /src
|
|
||||||
import HelloWorld from '@/components/HelloWorld.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'home',
|
|
||||||
components: {
|
|
||||||
HelloWorld
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<main class="container">
|
||||||
|
<div class="index-banner">
|
||||||
|
<h1>Start your career now.</h1>
|
||||||
|
<img class="index-image" src="../assets/images/1.jpg" />
|
||||||
|
<p class="subheading">Take a look at our popular positions</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-heading">
|
||||||
|
<h1>Ranked Job List</h1>
|
||||||
|
</div>
|
||||||
|
<div class="section-content">
|
||||||
|
<JobListing />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import JobListing from '../components/JobListing';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'index',
|
||||||
|
components: {
|
||||||
|
JobListing
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|