First of all, thank you for purchasing the Frisk 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.
Frisk Butcher & Meat Shop HTML Template.
In download folder you will find Two folders:
Documentation (Documentation for main template)Frisk (Main Template)
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.
Follow the steps below to setup your site template:
Template folder to find all the template files. You wil get Frisk 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. Without Live or Local server you may see something broken on your website. Because some plugin are not working without server.Frisk/assets/scss - Scss filesFrisk/assets/css - Stylesheet filesFrisk/assets/fonts - Icon/fonts filesFrisk/assets/img - Image filesFrisk/assets/js - JS filesWe are used Bootstrap Latest Version v5.3.2 framework in this template.
The general template structure is the same throughout the template. Here is the general structure.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Frisk - Creative Portfolio & Agency HTML Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
<!-- Place favicon.ico in the root directory -->
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/.....">
<link rel="stylesheet" href="assets/css/.....">
<link rel="stylesheet" href="assets/css/....">
<link rel="stylesheet" href="assets/css/...">
</head>
<body>
<!-- header-area -->
<header id="home">
</header>
<!-- header-area-end -->
<!-- main-area -->
<main class="main-area fix">
<!-- All Section Here -->
</main>
<!-- main-area-end -->
<!-- Footer-area -->
<footer class="footer-area">
</footer>
<!-- Footer-area-end -->
<!-- JS here -->
<script src="assets/js/vendor/....."></script>
<script src="assets/js/...."></script>
<script src="assets/js/..."></script>
</body>
</html>
Introduce Frisk All Pages
index.html is ====> Digital Agencyhome-2.html is ====> Creative Agencyhome-3.html is ====> Design Studiohome-4.html is ====> Digital Marketinghome-5.html is ====> Modern Agencyhome-6.html is ====> Creative Studiohome-7.html is ====> Startup Agencyhome-8.html is ====> Personal Portfolioabout-us.html is ====> About Us Pageservice.html is ====> Service Pageservice-2.html is ====> Service Page 02service-3.html is ====> Service Page 03service-details.html is ====> Service Details Pageteam.html is ====> Team Pageteam-details.html is ====> Team Details Pagepricing.html is ====> Pricing Pagefaq.html is ====> FAQ Pageproject.html is ====> Portfolio Masonaryproject-2.html is ====> Portfolio Pinterestproject-3.html is ====> Portfolio Galleryproject-4.html is ====> Portfolio Full Widthproject-5.html is ====> Portfolio Sliderproject-6.html is ====> Portfolio Interactiveproject-details.html is ====> Portfolio Detailsblog.html is ====> Blog Standard Pageblog-2.html is ====> Blog Column Pageblog-details.html is ====> Blog Details Pagecontact.html is ====> Contact Us Pageerror.html is ====> 404 Error PageFavicon Will be found in <head> section.
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
The Logo will be found in the <nav class="navbar"> tag.
<div class="logo"><a href="index.html"><img src="img/logo/logo.svg" alt="logo"></a></div>
You can replace any .jpg .png .svg logo. And set the width according to your logo size.
In Frisk we use Inter & Poppins font.
You can change both fonts form assets/scss/utils/_typography.scss file:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Unbounded:wght@400;500;600;700&display=swap");
You can edit your form simply and quickly. Open mail.php from Frisk folder and add your email into $recipient field
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove MORALspace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "founder@stthemes.com";
?>
The main.css file contains all of the specific stylings for the page. The file is separated into sections using:
This file includes core bootstrap styles
SourceThis file contains styles about Fontawesome icon library
Source
<i class="fab fa-facebook-square"></i>
This file contains styles about Popup Style
Sourceanimate.css is a bunch of cool, fun, and cross-browser animations for you to use in projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
<div class="wow slideInLeft">
...
</div>
This file contains styles about Popup Style
SourceThis file contains styles about Slick Slider plugin
SourceAll styles about template
jQuery is a fast, small, and feature-rich JavaScript library.
SourceCore bootstrap js file
SourcejQuery carousel plugin from Slick Slider
SourceA lightweight script to animate scrolling.Reveal Animations When You Scroll.
SourceThis file contains all script about site.