Thank you for having chosen LEGEND!
Almost 1 month has 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.
How To Install LEGEND Via FTP :
Step 1 - Log into your hosting space via an FTP software (Filezilla for example).
Step 2 - Unzip your Download Pack file and use the extracted LEGEND theme folder.
Step 3 - Upload the extracted LEGEND theme folder into one folder or at the root of your server.
This is an Easy to use animated countdown javascript.
You just have to set up your end date in the script part of your HTML, see the screenshot below.
<script> $("#getting-started") // Year/Month/Day Hour:Minute:Second .countdown("2019/10/24 15:30:30", function(event) { $(this).html( event.strftime('%D Days %Hh %Mm <span class="second-timer">%Ss</span>') ); }); </script>
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 screenshot below.
This is a jQuery component that let you play a Youtube® movie as background of your HTML page.
Add easily your video with just your link in the HTML code, see the screenshot below.
For more options, please visit this page.
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 slideshow with the pictures of your choice.
Set up this one in js/jquery.mb.YTPlayer.js, see the screenshot below.
4 clouds are integrated in the variant, 4 png files provided in your download pack.
Change the speed of clouds directly in your main CSS/SCSS file, see the screenshot below.
This powerful plugin called Flat Surface Shader is really easy to edit.
Specific color options are in the html file, see the screenshot below.
Using a very simple sass function, and CSS animation keyframes, built parallax scrolling stars in space. The sass function creates a random star field on each load.
Change the color, speed and number of stars you need directly in your main CSS/SCSS file.
SASS users, settings in _mixins.scss & style.scss see the screenshots below.
CSS users, settings in style.css see the screenshot below.
Animation settings in style.css see the screenshot below.
To removing the effect, delete simply the lines on the screenshot below.
This variant uses WebGL experiments. The idea is to create a very realistic looking rain effect.
More information here : http://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/
To get your effect, you just have to replace 2 pictures by yours.
Please note also, you’ll need to put your files on Localhost or immediately online. Indeed, the rain effect will not work locally.
As said previously, in the folder img/weather, you will find 2 pictures.
I advise you to use the next resolutions :
texture-rain-bg.png : 960×640
texture-rain-fg.png : 240x160
Simple tip, I started with a default picture with the size 1920x1280.
texture-rain-bg = 1920x1280 / 2
texture-rain-fg = 1920x1280 / 8
Please note that the effect is highly experimental and might not work as expected in all browsers. Best viewed in Chrome.
For the background color, you just have to edit the body's background in your main css file (style.css)
Specific color options and settings are in the file js/square.js.
Don't hesitate to contact me for more informations ;-)
Create a deep "Star Wars" environment for your page
You can edit the colors of the background and the stars.
Specific color options and settings are in the file js/starfield.js, see the screenshot below.
This powerful plugin of Constellation effect is really easy to edit.
Specific color options and settings are in the file js/constellation.js, see the screenshot below.
Photoswipe is a JavaScript image gallery for mobile and desktop.
Check out the official documentation here.
Main settings, see the screenshot below.
Don't forget to add the class "clear-second" on each first figure of 2, see the screenshot below.
1st solution : Mailchimp
Newsletter service
More than 6 million people 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 must just 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 something else.
Get your API Key :
Step 1 - Click your profile name to open the Account Panel and choose Account.
Step 2 - Click the Extras drop-down menu and choose API keys.
Step 3 - Copy an existing API key or click the Create A Key button.
Step 4 - Be careful that your list asks just the email address, Lists > Signup forms > General forms > Build it. See the screenshot below.
Get your List ID :
Step 1 - Navigate to the Lists page on the top left of your dashboard.
Step 2 - Click the list's drop down menu and select Settings.
Step 3 - Click on List name & defaults to find the unique List ID for the list, see the screenshot below.
Final step
Open the file "notify-me.php" findable in the folder php/notify-me.php and fill up the API_KEY and LIST_ID fields.
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 "notify-me.php" findable in php/notify-me.php
Step 4 - You have to fill up the fields as on the screenshot below:
3rd solution : Email
Receive in your mail box
Third solution, you can receive directly in your mail box, the subscribers's emails
Set up the email sending :
Step 1 - Open notify-me-2.php findable in php/notify-me-2.php
Step 2 - Rewrite your email and don't forget to change the path in your html, see the screenshots below
Set your email in the contact-me.php file.
Edit some properties of the contact form in the same file, contact-me.php, see the screenshot below.
Documentation
Just below the nav on your left, you will find 4 useful links to learn or improve your knowledges in SASS, Bootstrap, Bourbon & IonIcons