Jobi - Job Portal & Job Board Svelte Template

Thank you


First of all, thank you for purchasing the Jobi-Sveltekit HTML5 Template. You can find the detailed information about the template in this document. If there is anything you cannot find in this document, you can send an e-mail via the profile page.

Jobi In A Brief

Jobi-Sveltekit is a multi-purpose, powerful, beautiful and high-performance website template which is Designed for job board websites
In download folder you will find Three folder:


Remember, when you want to use the shortcode/element in any pages you need to adjust the section spacing by giving margin or padding. Don't get panic if you messed up anything when you edit the template. We are always available to support our customer.

1Installation

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the Template folder to find all the template files. You wil get jobi folder in there. You need to upload this folder to your hosting web server using FTP or cPanel in order to use it on your website.
  2. Below is the folder structure you will see in your website root directory:
    • jobi-sveltekit/.svelte-kit - Svelte-kit files
    • jobi-sveltekit/src - Src files
    • jobi-sveltekit/static - static file
    • jobi-sveltekit/gitignore
    • jobi-sveltekit/package
    • jobi-sveltekit/package-lock
    • jobi-sveltekit/README.md
    • jobi-sveltekit/svelte.config
    • jobi-sveltekit/vite.config
  3. open terminal and run command
    4. npm install
  4. run command
    5. npm run dev
  5. And now you are ready to go to generate your webiste with this awesome template.

2HTML Structure

We are used Bootstrapv5.1.3 framework in this template.
The general template structure is the same throughout the template. Here is the general structure.

view source
print?
01    <script>
02    import Category1 from './../lib/Components/Category/Category1.svelte';
03    import Model1 from './../lib/Components/Model/Model1.svelte';
04    import JobPortel from './../lib/Components/JobSection/JobPortel.svelte';
05    import Features1 from './../lib/Components/Features/Features1.svelte';
06    import HeroBanner from './../lib/Components/Banners/HeroBanner.svelte';
07    import BackToTop from './../lib/BackToTop.svelte';
08    import LazyImageLoader from './../lib/LazyImageLoader.svelte';
09    import Preloader from '../lib/Preloader.svelte';
10    import Header from '../lib/Header.svelte';
11    import HowToWork from '../lib/Components/HowToWork/HowToWork.svelte';
12    import ExpertSection from '../lib/Components/Section/ExpertSection.svelte';
13    import Feedack1 from '../lib/Components/Feedback/Feedack1.svelte';
14    import Features2 from '../lib/Components/Features/Features2.svelte';
15    import Blog1 from '../lib/Components/Blogs/Blog1.svelte';
16    import FancyBanner1 from '../lib/Components/Banners/FancyBanner1.svelte';
17    import Footer from '../lib/Components/Footers/Footer.svelte';
18    import { onMount } from 'svelte';
19    // Props
20    let isPreloading = true;
21</script>
22 
23<div class="main-page-wrapper">
24    <Preloader bind:isPreloading />
25    {#if !isPreloading}
26    <LazyImageLoader />
27    <Header>
28        <div slot="right-widget" class="right-widget ms-auto order-lg-3">
29            <ul class="d-flex align-items-center style-none">
30                <li class="d-none d-md-block">
31                    <a href="/dashboard/employer-dashboard-submit-job" class="job-post-btn tran3s">Post Job</a>
32                </li>
33                <li>
34                    <a href="!#" class="login-btn-one" data-bs-toggle="modal" data-bs-target="#loginModal">Login</a>
35                </li>
36                <li class="d-none d-md-block ms-4">
37                    <a href="/candidates-v1" class="btn-one">Hire Top Talents</a>
38                </li>
39            </ul>
40        </div>
41        <!--/.right-widget-->
42    </Header>
43    <HeroBanner />
44    <Category1 />
45    <Features1 />
46    <HowToWork />
47    <ExpertSection />
48    <Feedack1 />
49    <Features2 />
50    <Blog1 />
51    <FancyBanner1 />
52    <JobPortel />
53    <Footer />
54    <BackToTop />
55    <Model1 />
56    {/if}
57</div>

The code block above is powered by SyntaxHighlighter.

3Favicon Settings

Favicon Will be found in app.html head section.

<link rel="icon" href="/assets/images/fav-icon/icon.png">

4Logo Settings

The Logo will be found in the src/lib/Components/header.svelte section.

<div class="logo order-lg-0">
<slot name="logo">
<a href="/index" class="d-block">
<img src="images/logo/logo_01.png" alt="" width="95">
</a>
<slot></div>

You can replace any .jpg .png .svg logo. And set the width according to your logo size.

5Fonts Settings

In Jobi-sveltekit we use gordita font.
You can change both fonts form src/lib/fonts file: 

import "$lib/fonts/gordita/stylesheet.css";

6Activeted PHP Contact Form

You can edit your form simply and quickly. Open contact.php from inc folder and add your email into $sendTo field


    <?php
/*
 *  CONFIGURE EVERYTHING HERE
 */

// an email address that will be in the From field of the email.
$from = 'jobi <demo@domain.com>';

// an email address that will receive the email with the output of the form
$sendTo = 'jobi contact form <demo@domain.com>'; // Add Your emnail here

// subject of the email
$subject = 'New message from jobi';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Subject', 'message' => 'Message'); 

// message that will be displayed when everything is OK :)
$okMessage = 'Thank you, We will get back to you soon!';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';

?>

7CSS Structure

The style.css file contains all of the specific stylings for the page. The file is separated into sections using:

8JavaScripts

9Credits

10Changelog:

Dates are formated in dd/mm/yy 
________________________________
----- (6/09/2024) ------
Initial Released - v1.0.0