Thank you so much for having chosen TYCAN!
Believe it or not, 6 months have been necessary to build this template for having a perfect layout on every screen, an advanced design and the last trends coupled with an accurate coding.
I would be very grateful if you could rate my item at this link with 5 stars and leave your feedback, this is very important for me, Thanks! :-)
If you have any questions, feel free to email me via my user page with the contact form Here
I try to answer as soon as possible, 7/7 and almost 24/24!
Time in my country :
During your customization, I advise you to be connected to Internet for the correct running of jQuery
All the lines of style written in this document are the lines of the CSS files. The line numbers for the SASS users are almost the same, thanks for your comprehension.
For the customization, I advise you to get a look on the following link, explaining how HTML template can be edited : How to Customize an HTML Template
How To Install TYCAN Via FTP :
Step 1 – Log into your hosting space via an FTP software (Filezilla for example).
Step 2 – Unzip your Download Pack file and open the extracted TYCAN template folder.
Step 3 – Edit the variant of your choice, then rename it as index.html.
Step 4 – Upload the HTML file corresponding to the variant of your choice along with all directories (css,js,php,img) in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder.
A simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites or onepage sites).
Check the awesome official documentation of this plugin here for all the settings available.
You can set up the navigation tooltips/anchors in your jquery.fullPage.js or jquery.fullPage_youtube.js file, see the code below.
menu: '#topMenu',
anchors: ['Home', 'About', 'Works', 'Services', 'Contact'],
lockAnchors: false,
navigation: false,
navigationPosition: 'nav-position',
navigationTooltips: ['Home', 'About', 'Works', 'Services', 'Contact'],
And for the menu, you have to edit it at the top of your html, see the code below.
<ul id="topMenu" class="navbar-nav ml-auto">
<li data-menuanchor="Home" class="nav-item active">
<a href="#Home">Home</a>
</li>
<li data-menuanchor="About" class="nav-item">
<a href="#About">About</a>
</li>
<li data-menuanchor="Works" class="nav-item">
<a href="#Works">Works</a>
</li>
<li data-menuanchor="Services" class="nav-item">
<a href="#Services">Services</a>
</li>
<li data-menuanchor="Contact" class="nav-item">
<a href="#Contact">Contact</a>
</li>
</ul>
HTML structure looks like this :
<!-- *** Fullpage sections *** -->
<div id="fullpage">
<!-- +++ START - Home +++ -->
<div class="section" id="section0">...
</div>
<!-- +++ END - Home +++ -->
<!-- +++ START - About +++ -->
<div class="section" id="section1">...
</div>
<!-- +++ END - About +++ -->
<!-- +++ START - Work +++ -->
<div class="section" id="section2">...
</div>
<!-- +++ END - Work +++ -->
<!-- +++ START - Services +++ -->
<div class="section" id="section3">...
</div>
<!-- +++ END - Services +++ -->
<!-- +++ START - Contact +++ -->
<div class="section" id="section4">...
</div>
<!-- +++ END - Contact +++ -->
</div>
<!-- +++ / Fullpage sections +++ -->
If you want for example, add a new section, you have to create 1 new div with the correct id="sectionX", see the code below :
<!-- *** Fullpage sections *** -->
<div id="fullpage">
...
<!-- +++ START - Contact +++ -->
<div class="section" id="section4">...
</div>
<!-- +++ END - Contact +++ -->
<!-- +++ START - NEW SECTION +++ -->
<div class="section" id="section5">...
</div>
<!-- +++ END - NEW SECTION +++ -->
</div>
<!-- +++ / Fullpage sections +++ -->
Also, don't forget to add the new tooltips/anchors in your jquery.fullPage.js or jquery.fullPage_youtube.js file and the correct anchor in your HTML menu.
For each version, you have to the choice to display headline text with or without dynamic countdown.
What you have to do is simply to remove the part you don't want to use. See the code below :
<!-- *** TEXT TITLE *** -->
<h1>
We are coming, get ready for the best experience of the whole century.
</h1>
<!-- *** COUNTDOWN TITLE *** -->
<!-- Set your date at the bottom of js/jquery.countdown.js -->
<h1>
All-new,<br>
Ready for your project.<br>
Launch in <span id="getting-started"></span>
</h1>
So, if you don't use the title with countdown, don't forget to remove the plugin at the end of your HTML :
<!-- Countdown plugin -->
<script src="js/jquery.countdown.js"></script>
This is an Easy to use animated countdown javascript.
Set up your end date at the end of your js/jquery.countdown.js file, see the code below.
// Year/Month/Day Hour:Minute:Second
$("#getting-started").countdown("2021/11/24 15:30:30", function(a) {
$(this).html(a.strftime('%D days %H:%M:%S'));
});
VEGAS is a jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.
Check the awesome official documentation of this plugin here for all the settings available.
Specific slide options and settings are in the file js/vegas.js, see the code below.
$('.slideshow').vegas({
slides: [
{ src: 'img/home-slide-1.jpg' },
{ src: 'img/home-slide-2.jpg' },
{ src: 'img/home-slide-3.jpg' },
],
// Delay beetween slides in milliseconds.
delay: 5000,
// Choose your transition effect (See the documentation provided in your download pack)
transition: 'fade',
overlay: true,
// If you set overlay to true, several patterns are available in your css/overlays folder, set the one you need in your style.css file
// with the following rule or just use a specific color like it is by default.
//.vegas-overlay {
// opacity: .5;
// background: transparent url("overlays/01.png") center center repeat;
// }
});
IMPORTANT NOTE: This variant is using a different file for the fullpage effect: js/jquery.fullPage_youtube.js
A wrapper for the Youtube API - Great for fullscreen background videos or just regular videos.
For more options, please visit this page.
Settings and link to your video are in js/jquery.youtubebackground.js.
defaults: {
ratio: 16 / 9,
videoId: 'LSmgKRx5pBo',
mute: true,
repeat: true,
width: $(window).width(),
playButtonClass: 'YTPlayer-play',
pauseButtonClass: 'YTPlayer-pause',
muteButtonClass: 'YTPlayer-mute',
volumeUpClass: 'YTPlayer-volume-up',
volumeDownClass: 'YTPlayer-volume-down',
start: 0,
pauseOnScroll: false,
fitToBackground: true,
playerVars: {
iv_load_policy: 3,
modestbranding: 1,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: 'opaque',
branding: 0,
autohide: 0
},
events: null
},
The player doesn’t work as background for mobile devices due to the restriction policy adopted by all on managing multimedia files via javascript.
To solve this, instead of to have only the color of your body, I added a fullscreen div with the picture of your choice.
Set up this one in your style.css or style-dark.css in the YouTube part, see the code below.
.video-overlay .img_fallback {
...
background: url("../img/home-slide-1.jpg") center center;
background-size: cover;
}
Eye-catching effect, created by K-T.
Specific color options and settings are in the file js/particles.js, see the code below.
Color options from line 165:
// 1ST OPTION - HSL stands for hue, saturation, and lightness.
context.fillStyle = 'hsl(41, 71%, 77%)';
// 2ND OPTION - Random colors based on transformShape function
context.fillStyle = 'hsl(' + this.hue + ', 70%, 40%)';
// 3RD OPTION - Specific color code used by default
context.fillStyle = "#EAB543";
subtle-slideshow.js is a jQuery plugin used for generating a responsive fullscreen slideshow from background images. With Ken Burns effects (subtle image zoom & pan effects) based on CSS3 transforms and animations.
Specific options and settings are in the file js/jquery.subtle-slideshow.js, see the code below.
Specific options from line 9:
var settings = $.extend({
randomize: true,
slideDuration: 6000,
fadeDuration: 1000,
animate: true,
pauseOnTabBlur: true,
enableLog: false,
slideElementClass: 'slide', // This is also defined in the CSS!
slideshowId: 'slideshow' // This is also defined in the CSS!
}, options);
Paths and transition options like (out, in, down, up, right, left) at the top of your HTML:
<div id="slides">
<div class="slide">
<span class="animate down" style="background-image: url(img/home-slide-1.jpg)"></span>
</div>
<div class="slide">
<span class="animate in" style="background-image: url(img/home-slide-2.jpg)"></span>
</div>
<div class="slide">
<span class="animate out" style="background-image: url(img/home-slide-3.jpg)"></span>
</div>
</div>
This is a pure CSS animation, no plugin used.
Specific color options and settings are at the top of your HTML, mainly for the color, line 50-54, see the code below.
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(234,181,67,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(234,181,67,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(234,181,67,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#EAB543" />
</g>
</svg>
Featherlight is a very lightweight jQuery lightbox.
Check out the official website here.
How is it working, here is the HTML code used, coupled with the great plugin Slick slider.
<div class="works_slider" data-featherlight-gallery data-featherlight-filter="a">
<a href="img/work-1.jpg" data-title="Protect our biodiversity" data-text="1. Nostrud dolor aute sed proident et ea et duis proident quis ex magna enim aliquip esse aute non elit in eu in aliquip.">
<figure>
<img src="img/work-1.jpg" alt="" />
<figcaption>Protect our biodiversity</figcaption>
</figure>
</a>
<a href="img/work-2.jpg" data-title="Above the sky" data-text="2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
<figure>
<img src="img/work-2.jpg" alt="" />
<figcaption>Above the sky</figcaption>
</figure>
</a>
<a href="img/work-3.jpg" data-title="At the heart of the city" data-text="3. Nostrud dolor aute sed proident et ea et duis proident quis ex magna enim aliquip esse aute non elit in eu in aliquip.">
<figure>
<img src="img/work-3.jpg" alt="" />
<figcaption>At the heart of the city</figcaption>
</figure>
</a>
<a href="img/work-4.jpg" data-title="The color among the black" data-text="4. Nostrud dolor aute sed proident et ea et duis proident quis ex magna enim aliquip esse aute non elit in eu in aliquip.">
<figure>
<img src="img/work-4.jpg" alt="" />
<figcaption>The color among the black</figcaption>
</figure>
</a>
<a href="img/work-5.jpg" data-title="Be green" data-text="5. Nostrud dolor aute sed proident et ea et duis proident quis ex magna enim aliquip esse aute non elit in eu in aliquip.">
<figure>
<img src="img/work-5.jpg" alt="" />
<figcaption>Be green</figcaption>
</figure>
</a>
</div>
Slick slider is used for the "Works carousel". Check out the official website here for more info.
The settings used for the carousel can be found in your main.js file line 67.
$('.works_slider').slick({
dots: true,
infinite: true,
draggable: true,
loop: true,
speed: 550,
centerMode: false,
variableWidth: true,
arrows: true,
autoplay: false,
swipeToSlide: true,
slidesToShow: 3
});
1st solution : Mailchimp
Newsletter service
More than 12 million people and businesses around the world use MailChimp to create, send, and track email newsletters. Whether you're self-employed, you manage projects for clients, or you work for a Fortune 500 company, MailChimp has features and integrations that will suit your email marketing needs. More informations
For the configuration with Mailchimp, you just need to know your API Key and the ID of your list.
Be sure that the form created in your mailchimp dashboard is asking only the email address and not the name, surname or anything else.
Find or Generate Your API Key
Users with Manager permissions can generate and view their own API keys. Users with Admin permissions can also see API keys for other account users.
Below, you'll learn how to grab an existing API key or generate a new one.
Click on the following link to know how to get it: About API Keys
Find Your List/Audience ID
Each MailChimp list has a unique List ID that integrations, plugins, and widgets may require to connect and transfer subscriber data.
The List ID is generated by our system when the list is created and cannot be changed. There are two ways to find the List ID for a MailChimp list.
Click on the following link to know how to get it: Find Your List/Audience ID
Final step
Open the file php/newsletter_form_mailchimp.php, set store mode to mailchimp and fill out the API_KEY and LIST_ID fields.
// Set to "mailchimp" or "file"
$STORE_MODE = "mailchimp";
// MailChimp API Key findable in your Mailchimp's dashboard
$API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-XX0";
// MailChimp List/Audience ID findable in your Mailchimp's dashboard
$LIST_ID = "XXXXXXXXXX";
2nd solution : File
Save the emails in a .txt file
Second solution, the save of the subscribers's emails in a txt file at the root of your server
Set up the file storage :
• Step 1 - Create a .txt file empty or use the file subscription-list.txt provided in your download pack.
• Step 2 - Upload the file at the root of your server
• Step 3 - Open the file php/newsletter_form_mailchimp.php
• Step 4 - You have to set up store mode to file and comment/remove the Mailchimp settings as on the code below:
// Set to "mailchimp" or "file" $STORE_MODE = "file"; // MailChimp API Key findable in your Mailchimp's dashboard // $API_KEY = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-XX0"; // MailChimp List ID findable in your Mailchimp's dashboard // $LIST_ID = "XXXXXXXXXX"; // After $_SERVER["DOCUMENT_ROOT"]." , write the path to your .txt to save the emails of the subscribers $STORE_FILE = $_SERVER["DOCUMENT_ROOT"]."/subscription-list.txt";
3rd solution : Email
Receive into your inbox
Third solution, you can receive directly into your inbox, the subscribers's emails
Set up the email sending :
• Step 1 - Open the file php/newsletter_form.php
• Step 2 - Rewrite your email and subject.
If you get troubles to receive the form submissions, you can try to set the from value to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form like: From: Your website <noreply@yourdomain.com>
$to = 'myemail@email.com';
$subject = 'New subscriber';
...
// prepare headers
$headers = 'MIME-Version: 1.1' . PHP_EOL;
$headers .= 'Content-type: text/html; charset=utf-8' . PHP_EOL;
$headers .= "From: Your website <$newsletter>" . PHP_EOL;
$headers .= "Reply-To: $newsletter" . PHP_EOL;
$headers .= "X-Mailer: PHP/". phpversion() . PHP_EOL;
Then you can edit the content about the email you will receive into your inbox in php/newsletter_form.php, see the code below.
I built up an elegant email body, this is why you will find some html and css in the next part of code.
$mailbody = "
<head>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
</head>
<body style='font-family:Verdana;background:#f2f2f2;color:#606060;'>
<style>
h3 {
font-weight: bold;
color: #EAB543;
margin-bottom: 0;
font-size: 14px;
}
a , h2 {
color: #000000;
}
p {
margin-top: 5px;
line-height:1.5;
font-size: 14px;
}
</style>
<table cellpadding='0' width='100%' cellspacing='0' border='0'>
<tr>
<td>
<table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' style='border-collapse:collapse;'>
<tr>
<td>
<div>
<table cellpadding='0' cellspacing='0' border='0' align='center' style='width: 100%;max-width:600px;background:#FFFFFF;margin:0 auto;border-radius:5px;padding:50px 30px'>
<tr>
<td width='100%' colspan='3' align='left' style='padding-bottom:0;'>
<div>
<h2>New subscriber!</h2>
</div>
</td>
</tr>
<tr>
<td width='100%' align='left' style='padding-bottom:30px;'>
<div>
<p>Hello, you've just get a new subscriber on your website.</p>
</div>
</td>
</tr>
<tr>
<td width='100%' align='left' style='padding-bottom:20px;'>
<div>
<h3>Email Address</h3>
<p>$newsletter</p>
</div>
</td>
</tr>
</table>
</div>
<div style='margin-top:30px;text-align:center;color:#b3b3b3'>
<p style='font-size:12px;'>2019-2XXX Madeon08®, All Rights Reserved.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>";
1st step
Set your email and the subject in the file php/contact_form.php.
$to = 'myemail@email.com';
$subject = 'New message from TYCAN';
2nd step
We're using Parsley.js for the form checking, you can set alert message directly in your HTML, see the code below.
Alert + Validation messages
<div class="sub_validated d-none">
<i class="far fa-check-circle"></i>
<h4>You request has been sent!</h4>
<p>Your message will be examined and we will get back to you as soon as possible.</p>
</div>
<div class="sub_error d-none">
<i class="far fa-times-circle"></i>
<h4>Oops!</h4>
<p>Looks like something went wrong, please try again later.</p>
</div>
<div class="row">
<!-- Full name -->
<div class="col-12">
<div class="form-group">
<input type="text" class="form form-control" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'" data-parsley-required-message="What's your name?" id="fullname" name="fullname" required="">
</div>
</div>
<!-- E-mail -->
<div class="col-12">
<div class="form-group">
<input type="email" class="form form-control" placeholder="Email Address*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address*'"data-parsley-required-message="Your email is required." id="email" name="email" data-parsley-trigger="change" required="">
</div>
</div>
<!-- Message -->
<div class="col-12">
<div class="form-group">
<textarea id="message" class="form textarea form-control" placeholder="Tell us what you want boss*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Tell us what you want boss*'" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="20 characters minimum please." data-parsley-validation-threshold="8"data-parsley-required-message="Tell us what you need." required=""></textarea>
</div>
</div>
</div>
Email's body you will receive into your inbox I built up an elegant email body, this is why you will find some html and css in the next part of code.
$mailbody = "
<head>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
</head>
<body style='font-family:Verdana;background:#f2f2f2;color:#606060;'>
<style>
h3 {
font-weight: bold;
color: #EAB543;
margin-bottom: 0;
font-size: 14px;
}
a , h2 {
color: #000000;
}
p {
margin-top: 5px;
line-height:1.5;
font-size: 14px;
}
</style>
<table cellpadding='0' width='100%' cellspacing='0' border='0'>
<tr>
<td>
<table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' style='border-collapse:collapse;'>
<tr>
<td>
<div>
<table cellpadding='0' cellspacing='0' border='0' align='center' style='width: 100%;max-width:600px;background:#FFFFFF;margin:0 auto;border-radius:5px;padding:50px 30px'>
<tr>
<td width='100%' colspan='3' align='left' style='padding-bottom:0;'>
<div>
<h2>New message</h2>
</div>
</td>
</tr>
<tr>
<td width='100%' align='left' style='padding-bottom:30px;'>
<div>
<p>Hello, you've just received a new message sent from the contact form on your website.</p>
</div>
</td>
</tr>
<tr>
<td width='100%' align='left' style='padding-bottom:20px;'>
<div>
<h3>From</h3>
<p>$name</p>
</div>
</td>
</tr>
<tr>
<td width='100%' align='left' style='padding-bottom:20px;'>
<div>
<h3>Email Address</h3>
<p>$email</p>
</div>
</td>
</tr>
<tr>
<td width='100%' align='left' style='padding-bottom:20px;'>
<div>
<h3>Message</h3>
<p>$message</p>
</div>
</td>
</tr>
</table>
</div>
<div style='margin-top:30px;text-align:center;color:#b3b3b3'>
<p style='font-size:12px;'>2019-2XXX Madeon08®, All Rights Reserved.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>";
The 'From' address
If you get troubles to receive the form submissions, you can try to set the from value to something like 'noreply@yourdomain.com' in order to be based on the same domain as the form like: From: Your website <noreply@yourdomain.com>
$headers .= "From: $name <$email>" . PHP_EOL;
PS : If you're getting some troubles to receive the form submissions, here are some possibilities that could block the sending :
• Check your spam folder
• Is PHP Mail() function active on your server?
• Try to change your email with a Gmail address
• Upgrade the PHP version running on your server to 5.5 (can be done in your hosting provider's panel or by their)
How to know if PHP Mail function is active on my server?
It’s quite possible PHP mail() function is either disabled or not configured properly on your server. An easy way to check if e-mail sending is working is using this code. It’s as simple as it gets, if this code doesn’t work no other will:
<?php
mail('you@yourmail.com','Test mail','The mail function is working!');
echo 'Mail sent!';
?>
• Save this code as mailtest.php
• change you@yourmail.com to your e-mail address
• upload mailtest.php to your server
• open mailtest.php in your browser (http://yourwebsite.com/mailtest.php)
• check your inbox to see if a test message arrived.
Documentation
Just below the nav on your left, you will find some useful links to discover or improve your knowledges in SASS, Bootstrap, Font Awesome & IonIcons