Initial commit
This commit is contained in:
parent
868a135f7e
commit
7586bde2cd
5
jsconfig.json
Normal file
5
jsconfig.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"include": [
|
||||
"./src/**/**"
|
||||
]
|
||||
}
|
||||
87
src/App.vue
87
src/App.vue
@ -1,32 +1,69 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
<div class="page">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-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;
|
||||
}
|
||||
@import 'assets/css/fonts.css';
|
||||
@import 'assets/css/bluefire.css';
|
||||
</style>
|
||||
|
||||
173
src/assets/css/bluefire.css
Normal file
173
src/assets/css/bluefire.css
Normal file
@ -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;
|
||||
}
|
||||
13
src/assets/css/fonts.css
Normal file
13
src/assets/css/fonts.css
Normal file
@ -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;
|
||||
}
|
||||
BIN
src/assets/fonts/Montserrat-Bold.woff2
Normal file
BIN
src/assets/fonts/Montserrat-Bold.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/Montserrat-Regular.woff2
Normal file
BIN
src/assets/fonts/Montserrat-Regular.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/Product Sans Bold Italic.woff2
Normal file
BIN
src/assets/fonts/Product Sans Bold Italic.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/Product Sans Bold.woff2
Normal file
BIN
src/assets/fonts/Product Sans Bold.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/Product Sans Italic.woff2
Normal file
BIN
src/assets/fonts/Product Sans Italic.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/Product Sans Regular.woff2
Normal file
BIN
src/assets/fonts/Product Sans Regular.woff2
Normal file
Binary file not shown.
BIN
src/assets/images/1.jpg
Normal file
BIN
src/assets/images/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
src/assets/images/2.jpg
Normal file
BIN
src/assets/images/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
BIN
src/assets/images/HeaderLogo.png
Normal file
BIN
src/assets/images/HeaderLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/Logo.psd
Normal file
BIN
src/assets/images/Logo.psd
Normal file
Binary file not shown.
BIN
src/assets/images/LogoHorizontal.png
Normal file
BIN
src/assets/images/LogoHorizontal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/images/LogoVertical.png
Normal file
BIN
src/assets/images/LogoVertical.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
6
src/assets/images/bookmark.svg
Normal file
6
src/assets/images/bookmark.svg
Normal file
@ -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>
|
||||
BIN
src/assets/images/search-icon.png
Normal file
BIN
src/assets/images/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
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>
|
||||
118
src/components/JobListing.vue
Normal file
118
src/components/JobListing.vue
Normal file
@ -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 VueRouter from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
import Index from '../views/Index.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home
|
||||
component: Index
|
||||
},
|
||||
{
|
||||
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({
|
||||
|
||||
@ -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>
|
||||
26
src/views/Index.vue
Normal file
26
src/views/Index.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user