Satner Portfolio Html5 Responsive Template

Welcome To Satner Portfolio Html5 Responsive Template

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to email at support@colorlib.com Thank you so much!

Template Features

  • Clean & Simple Design
  • HTML5 & CSS3
  • Fully Responsive Design
  • PHP/Ajax Powered Working Contact Form
  • All files are well commented
  • Cross Browser Compatible with IE11+, Firefox, Safari, Opera, Chrome
  • Extensive Documentation

Satner Portfolio Html5 Responsive Template

Installing Template.

  1. After unzip the download pack, you'll found a Template Folder with all the files.
  2. You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not wotrk fonts and google map).
  3. The only section that will not work is the Contact Section which contains PHP code and requires a server environment for send messages.
  4. Now go to your cpanel or open your FTP Client (like Filezilla) and upload the content of the Template on your server root.
  5. Once the files are done uploading go to www.yourdomainname.com/index.html

Template Structure

All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of main page (index.html).

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<header class="site-header">
     
</header>
<main class="site-main">
    <section class="section">
         
    </section>
    <section class="section">
         
    </section>
    <section class="section">
         
    </section>
</main>
<footer class="site-footer">
     
</footer>

CSS Files and Structure

These are the css files that are loaded into templates in Head Section.

?
1
2
3
4
5
6
7
8
9
10
11
<!--
CSS
============================================= -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="vendors/linericon/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
<link rel="stylesheet" href="css/style.css">

Google Web Fonts

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.

?
1
2
3
4
5
<!--
Google Font
=========================== -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500|Rubik:500,700" rel="stylesheet">

Remember to change the font into main.css

Javascript Files and Structure

These are the list of Javascript files that are loaded into templates in end of the Body Section.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--
JavaScripts
========================== -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendors/isotope/isotope-min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/mail-script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=?"></script>
<script src="js/gmaps.min.js"></script>
<script src="js/theme.js"></script>

Contact Form

This is a PHP Script for sending messages to your email, you should replace support@colorlib.com to your email to start receive messages.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
                $to = 'demo@site.com'; // replace this mail with yours
$firstname = $_POST["fname"];
$email= $_POST["email"];
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= "From: " . $email . "\r\n"; // Sender's E-mail
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$message ='<table style="width:100%">
        <tbody><tr>
                <td>'.$firstname.'  '.$laststname.'</td>
        </tr>
        <tr><td>Email: '.$email.'</td></tr>
</tbody></table>';
if (@mail($to, $email, $message, $headers))
{
    echo 'The message has been sent.';
}else{
    echo 'failed';
}

Subscription Form

Replace this action with your own mailchimp post URL. Don't remove the "". Just paste the url inside "".

?
1
2
3
4
5
    <div id="mc_embed_signup">
        //Replace this action with your own mailchimp post URL. Don't remove the "". Just paste the url inside "".
    <form target="_blank" novalidate="" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&id=92a4423d01" method="get" class="subscription relative d-flex justify-content-center"></form>
</div>

Video Tutorial

Source and Credit