Friend 814 "a Personal Blog / Portfolio Html Template"

File Structure

- The structure of our template is very easy, here is an overview of the files that included in the downloaded zip file:

Friend_814
│
└───Documentation
│   │ index.html
│   │
│   └───assets
│       └─ ... ─
│
└───Template
    │   index.html         --   index-rtl.html
    │   blog-list.html     --   blog-list-rtl.html
    │   single-blog.html   --   single-blog-rtl.html
    │   404.html           --   404-rtl.html
    │
    └───assets
        │
        └───fonts
        │   └─ ... ──
        │
        └───images
        │   └─ ... ──
        │
        └───scss
        │   │   style.scss
        │   │   _general.scss
        │   │   _responsive.scss
        │   │
        │   └───partials
        │   │   │   _navbar.scss
        │   │   │   _sidebar.scss
        │   │   │   _blog_header.scss
        │   │   │   _footer.scss
        │   │   └──────────────────────
        │   │
        │   └───pages
        │   │   │ _404.scss
        │   │   │
        │   │   └───home
        │   │   │   │   _home.scss
        │   │   │   │   _about.scss
        │   │   │   └────── ... ──────
        │   │   │
        │   │   └───blog
        │   │       │   _list.scss
        │   │       │   _single.scss
        │   │       └──────────────────
        │   │
        │   └───rtl
        │   │   │   _rtl.scss
        │   │   │   _responsive.scss
        │   │   └──────────────────────
        │   │
        │   └───fontawesome
        │       └─── ... ───
        │
        └───css
        │   │   style.css
        │   │   style.css.map
        │   │
        │   └───libs
        │   │   │   bootstrap.min.css
        │   │   │   magnific-popup.css
        │   │   └────────────────────────
        │   │
        │   └───themes
        │       │   box.css
        │       │   00deff.css
        │       │   6ea3f3.css
        │       └────── ... ──────
        │
        └───js
            │   script.js
            │   jquery-3.4.1.min.js
            │   bootstrap.min.js
            └──────── ... ────────

Favicon

- Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

- If you wanna add a Favicon to your Website, follow this steps:

• place the image in the assets/images directory.
• put this line inside the head tag on the top of the html files:

  <!-- PAGE ICON -->
  <link rel="icon" type="image/x-icon" href="assests/images/thumbnail.png">

Header Style

- There are 3 different styles for the header [the default style, particles style, snow style]

Particles:

If you wanna add the particles style, Just follow these 2 steps:

• Inside the index.html file, in the Home section, add this line below the div.background tag.

  <div class="canvas-header" id="particles-js"></div>

• At the end of the index.html file, before the </body> tag, add this line before the SCRIPT JS comment.

  <script src="assests/js/particles.min.js"></script>

Snow:

If you wanna add the Snow style, Just follow these 2 steps:

• Inside the index.html file, in the Home section, add this line below the div.background tag.

  <canvas class="canvas-header" id="snow-js"></canvas>

• At the end of the index.html file, before the </body> tag, add this line before the SCRIPT JS comment.

  <script src="assests/js/jquery.let_it_snow.min.js"></script>

Color Schemes

- You can change your website’s color scheme in an instant.

- There are 2 options to change your website color, here is the easy option:

• inside the assets/css/themes directory, choose the file of your prefered color or create a new file with the new color.
• put this line inside the head tag on the top of the html files:

  <link href="assets/css/themes/{file_name}.css" rel="stylesheet" type="text/css" />

  Note: this line should be inserted below the main style.css link - this line -:

  <link href="assets/css/style.css" rel="stylesheet" />

The process of creating a new file of your color is very easy, you just need to:

• copy any file inside the assets/css/themes directory
• open the file with any text editor and replace all the existing colors to your prefered color

- the second option is using Scss which we are going to discuss in the next section.

Using Scss

- Sass is perhaps the most popular of the CSS pre-processors. for years it’s helped us write clean, reusable and modular CSS.

- All the Scss file are included in the assets/scss directory.

- After you make any change in the scss files you need to compile it to the style.css file.

- There are many ways to compile the scss files, one of the easiest ways is using koala, you can download it from here, it's free.

- Before make changes in the scss files, take a look at the structure of the files in the File structure section.

Variables:

- Inside the assets/scss/style.scss file you can see the Variables section.

/*-------------------------------
*   Variables
*------------------------------*/
$primaryColor: #09aaaa;
$headerShadow: rgba(30, 30, 30, 0.8);
$navbarBackground: rgba(30,30,30,0.95);

$blogHeader: url("http://placehold.it/1920x400/222");
$headerImage: url("http://placehold.it/1920x1080/222");
$page404Image: url("http://placehold.it/1920x1080/222");

$dark0: #000000;
$dark1: #222222;
$dark2: #333333;
$dark3: #444444;

$light0: #ffffff;
$light1: #cccccc;
$light2: #aaaaaa;
$light3: #888888;

- Here You can change the background images and the most colors used inside the theme.

Fonts:

- To change the fonts of the theme, just follow these steps:

• Get your prefered fonts from Google Fonts
• Open the assets/scss/style.scss file.
• Inside the External Assets section, update this line with your fonts.

  @import url(https://fonts.googleapis.com/css?family=Poppins|Montserrat|Cairo|El+Messiri)

• After that you need to update the font-family attribute of the body, h2 inside the assets/scss/style.scss file.

RTL Support

- Our theme support the RTL languages, all you need to do is adding the rtl class to the body tag:

<body class="home-page rtl">

- To choose a font for any RTL language, just follow the steps:

• Get your prefered fonts from Google Fonts
• Open the assets/scss/style.scss file.
• Inside the External Assets section, update this line with your fonts.

  @import url(https://fonts.googleapis.com/css?family=Poppins|Montserrat|Cairo|El+Messiri)

• After that you need to update the font-family attribute of the body, h2 inside the assets/scss/rtl/_rtl.scss file.

Thanks

- Finally, Thanks for purchasing this item. and if you have any question please contact me via my email, Have a good day!