Little Venice - Documentation

Little Venice - HTML Template - Documentation

Thank you for purchasing Little Venice - A multi-purpose HTML Template! We strongly recommend you read this documentation before using Little Venice Template.

Getting Started

A brief guide to working with Little Venice.

Bootstrap

If you are not familiar with Bootstrap, we strongly recommend you take a look at the online documentation.

FontAwesome icons do not appear when you are viewing the page from a local file. This is because FontAwesome library is linked to an online server.
View online documentation

Please Note: We do not offer support for customizations or plugins in our support policy, If you have a question related to setting up the Template or a Bug, please drop us a line at s.schintu@gmail.com.

File Structure

Uncompress the main folder downloaded from Themeforest - littleVenice_html.zip.

HTML Pages

.html - HTML templates supplied in this template. Contained in these pages is a precompiled static site and equivalent to what you see in the online demo.
Pages are named according to their purpose, and you can open any of the files in your browser to see it in action, or modify the markup to suit your needs.

Image & Video Assets

Images/Videos are intended for the online demo and are "not" included unless specifically stated.

You can find all images included in the demo and more free images at unsplash.com

Contains all of the assets referenced in the html pages. Any images or videos used in the theme are contained inside assets folder.

Images used in html pages should be stored inside assets/img folder & child-folders.
Videos used in html pages should be stored inside assets/video folder & child-folders.

Google Fonts

We use Google fonts library that can be edited as you please. Fonts are uploaded at the beggining on the page.

                        
                            <!-- Upload Font "https://fonts.google.com/" -->

                            <link href="https://fonts.googleapis.com/css?family=Mrs+Saint+Delafield&display=swap" rel="stylesheet">

                            <link href="https://fonts.googleapis.com/css?family=Cormorant:400,400i,600,600i,700,700i&display=swap" rel="stylesheet">

Remember to change the new font you choose inside the style.css sheet


                            <font-family: 'Cormorant', serif;>

Styles (CSS)

Style sheets .css files used in the theme are contained inside css folder.

bootstrap.min.css contains the native styles of Bootstrap 4.3.1
style.css contains the main styles for this Template.
animate.css contains native styles for Animate.css.
aos.css contains native styles for AOS plug-in.
simpleLightbox.min.css contains native styles for Animate.css.

JS & PHP files

JavaScript - `js` folder

bootstrap.min.js contains required Bootstrap 4.3.1 code.
jquery-3.4.1.min.js contains required jQuery scripts.
jquery.validate.js contains jQuery validation for contact form.
contact.js contains the contact form code.
aos.js contains the AOS plug-in code.
main.js contains additional and customized scripts for the Template.
simpleLightbox.min.js contains the AOS plug-in code.

PHP - `php` folder

contact.php file to edit the email & POST information for the contact form elements.

Page Strucutre

All template pages are code friendly, clear and well organized.

Page starts by uploading the style sheets.

                
                    <!-- Upload Font "https://fonts.google.com/" -->

                    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,500i,700&display=swap" rel="stylesheet">

                    <!-- Bootstrap CSS -->

                    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

                    <!-- Styles CSS -->

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

                    <!-- Load Font Awesome Kit -->

                    <script src="https://kit.fontawesome.com/747940bb1c.js"></script>

                    <!-- Load Animate CSS -->

                    <link rel="stylesheet" type="text/css" href="css/animate.css">

                    <!-- Load AOS CSS -->

                    <link rel="stylesheet" type="text/css" href="css/aos.css">

Each section is commented at start

                
                    <body class="dark">

                     <!-- Content Starts -->

                     <header class="">

                      <div class="container"> 

                       <!-- Change path logo here -->

                       <a class="navbar-brand logo t-snow" href="#"><img src="assets/img/logo-white.png" alt="Little Venice" class="img-fluid">Little Venice</a>

                       </div>

                      </div>

                     </header>

                    <!-- Section -->

                    <div id="start" class="section back one">

and end

                
                     </div>

                    </div><!-- Section Ends -->

At the very end of each page we load the script files. (JS and extra coding functions)

                
                    <!-- JS files upload -->

                    <script src="js/jquery-3.4.1.min.js"></script> 

                    <script src="js/bootstrap.min.js"></script>

                    <script src="js/jquery.validate.js"></script>

                    <script src="js/contact.js"></script> 

                    <script src="js/main.js"></script>

                    <script src="js/aos.js"></script>

                    <script src="js/simpleLightbox.min.js"></script>

Styles & Colors

Understanding how the style logic works is key to create stunning variations. This template gives you the flexibility to generate unlimited color combinations by simply changing the class name. You can easily change colors from the style.css sheet, but we added some awesome web colors ready for you to use.

Available stunning vintage colors for this template:

#060e10 dark
#3f382eclay
#000000black
#cacbc6rain
#ffffffwhite
#f7f7efwedding-white
#d5dee5light-sky
#e3d9cflight-moon
#ddcba7weat
#f8f7f6snow
#c9c0bbwolf
#edededlavender
#b0b3a2sage
#6d7975pine
#cf816abrick
#111b24marina
#19191fviola
#e6b89esalt
#e3d9cfmoon
#fef3edpink

Style Variations

The class color is related to the background color of any element. eg:. dark

To remove the background color of any element. eg:. no-bg

Adding shadow will add a shadow to the element. eg:. shadow
Adding b- (for border) will color the border of the element. eg:. b-dark
Adding t- (for text) will color the text of the element. eg:. t-dark

Example:

dark t-white
pine t-snow
b-brick t-brick
I am a moon! t-moon
I am clay t-clay

To apply a border only at the top or the bottom, work with the class variation border-b as in border bottom.

To modify the border weight, work with the class variation border-t-2 as in border top 2px

Do not add the border class as it will apply a border on all sides.

To recap:

Adding -t or -b will add a the respective border top/bottom. eg:. border-t
Adding -2 will increase the border size to 2px. eg:. border-t-2

Example:

b-dark border-t
b-pine border-b-2

Button styles

There are 2 main types of buttons. primary-btn (full colored) & primary-line-btn (adds a border around the button). Both by default with a rounded border.

But it doesn't end here. We've added some nice variations to give you full flexibility.

Adding round will add a border radius of 50px. eg:. primary-btn round
Adding square will remove any border radius making the button square. eg:. primary-btn square
Adding small will reduce the button size. eg:. primary-btn small
Adding large will increase the button size. eg:. primary-btn large

Example:

primary-btn small dark t-snow
primary-btn pine t-white
primary-btn large shadow light-sky t-dark
primary-line-btn b-salt t-salt
primary-line-btn round b-light-moon t-light-moon
primary-btn square viola t-lavender

Margin & Padding

You can apply a margin or a padding to a specific element, div or section by using the class p & m + the value. eg:. m-50 - p-50

It works for both (padding and margin).

Available values for margin are m-20 m-50 m-100 m-150 m-200.
Available values for margin-top are mt-20 mt-50 mt-100 mt-150 mt-200.
Available values for margin-bottom are mb-20 mb-50 mb-100 mb-150 mb-200.

You can also remove margin top, left & right by using mt & -minus + the value. eg:. mt-minus-50 (only for margin)

Available values for mt, ml & mr are -20 -50 -100 -150 -200 -250 -300. eg:. mt-minus-50

Backgrounds

As explained, to change the background color simply add the color class. viola

To add a background image (jpg or png) simply add the class back and the number of background two.
This template comes with 5 background classes. ("one" "two" "tree" "four" "five")
Background images are stored inside assets/img/backs

Featured Title

The featured title includes 2 Google fonts that can be edited as you please and needs to be placed as described in order to work properly.

                
                    <div class="hero-container mt-150">

                     <div class="back-title absolute t-white" data-aos="fade-right" data-aos-anchor-placement="center-bottom">know me</div>

                     <div class="front-title absolute" data-aos="fade-left" data-aos-anchor-placement="center-bottom"><h3>ANALISA BELL</h3></div>

                        </div>

Remeber you can easily add a class color to any div, p, text, span etc...

For example, let's add a different color to the h3 tag <h3 class="t-snow">ANALISA BELL</h3>

Got it? Limitless for real.

know me

ANALISA BELL

Bell tries to approach a wide scale of subjects in a multi-layered way, likes to involve the viewer in a way that is sometimes physical and believes in the idea of function following form in a work.

Main Slide

To change the add or to edit the main slide, go to the start of the page to the SLIDER code line.


                        <!-- SLIDER -->

The slide uses 2 background to create the lower arrow FX. Each item is customizable with classes using colors and styles explained above.

In order to create the FX, you will need to apply the same background color to both the mask and the next section.

                
                    <div class="mask-left dark"></div>

                    <div class="mask-right dark"></div>

Remember, same background color as the below section.

                    
                        <!-- Section -->

                        <div id="about" class="section dark"></div>

Background slide works with the same logic as backgrounds.

To add a background image (jpg or png) simply add the class slide and the number of background two.
This template comes with 5 slide background classes. ("one" "two" "tree" "four" "five")
Background images are stored inside assets/img/slider

                    
                        <!-- Slide -->

                        <div class="carousel-item active></div>

                         <div class="img-container center slide two></div>

Inside the content-box div you can create or modify the slide.

                    
                        <div class="content-box></div>

                         <div class="content-data></div>

The Main slide is styles to work with Bootstrap carousel, so you can add slides as you please.

If you are not familiar with Bootstrap, we strongly recommend you take a look at the carousel documentation.

Testimonial Carousel

To change to add or to edit the testimonials widget go to Testimonial code line.

                    
                        <!-- Testimonials -->

                <div class="testimonial-container" data-aos="fade-down" data-aos-anchor-placement="center-bottom">

The widget uses Bootstrap default carousel. Each item is customizable with classes using colors and styles explained above.

If you are not familiar with Bootstrap, we strongly recommend you take a look at the carousel documentation.

                
                    <!-- Testimonial Item -->

                    <div class="carousel-item active"> 

                     <div class="item">

                      <div class="img center"><img src="assets/img/user2.jpg"  alt="Venice" class="img-fluid"></div>

                       <div class="icon t-white"><i class="fas fa-quote-right"></i></div>

                       <div class="text t-white">A must-have tool. Maybe one of the best product launch templates so far in the market. Recommended 100%.</div>

                       <div class="name t-dark">MARIA De ANDRE'</div>

                       <div class="role t-snow">Artist</div>

                      </div>

                     </div>

Price Table Packs

To change to add or to edit the Price Packs widget go to Price Table code line.

                    
                        <!-- Price Table -->

                    <div class="col-lg-4" data-aos="fade-right" data-aos-anchor-placement="center-bottom">

The widget uses Bootstrap default grid system. Each item is customizable with classes using colors and styles explained above.

If you are not familiar with Bootstrap grid system, we strongly recommend you take a look at the bootstrap grid system.

                
                    <!-- Price Table -->

                    <div class="col-lg-4" data-aos="fade-right" data-aos-anchor-placement="center-bottom">

                     <div class="info-box white">

                      <div class="t-dark mini-title">Free</div>

                       <div class="price t-blue-vibrant"><span class="currency">$</span>0<span class="value">/mo</span></div>

                           <ul class="highlights">

                            <li class="hg-item t-dark"><i class="fas fa-check t-green"></i> Create unique websites</li>

                            <li class="hg-item t-dark"><i class="fas fa-check t-green"></i> Built in Boostrap 4</li>

                            <li class="hg-item not-included t-dark"><i class="fas fa-times t-red"></i> Stunning ready colors</li>

                            <li class="hg-item not-included t-dark"><i class="fas fa-times t-red"></i> Limiteless variations</li>

                        <li class="hg-item not-included t-dark"><i class="fas fa-times t-red"></i> Optimize all your efforts</li>

                            <li class="hg-item t-dark"><i class="fas fa-check t-green"></i> Basic Support</li>

                            <li class="hg-item"><a href="" class="primary-line-btn b-blue-vibrant t-blue-vibrant">Get Started</a></li>

                          </ul>

                        </div>

                    <!-- End -->

To mask a line as "not included" add the not-included class

                    
                            <li class="hg-item not-included t-dark"><i class="fas fa-times t-red"></i> Optimize all your efforts</li>

To highlight a specific table, add the featured class at main item level

                    
                        <!-- Price Table -->

                    <div class="col-lg-4" data-aos="fade-right" data-aos-anchor-placement="center-bottom">

                         <div class="info-box featured white">

Contact Form

To change the email and other email settings, open the php folder.

Open contact.php file.
Each editable line is commented. Replace placeholder info with your personalized info.
Save & Publish

                
                    <// an email address that will be in the From field of the email.>

                    $from = 'Demo contact form <demo@domain.com>';

                    <// an email address that will receive the email with the output of the form>

                    $sendTo = 'Send to <demo@domain.com>';

Gallery

The widget uses simpleLightbox by Damir Brekalo

If you are not familiar with this library, we strongly recommend you take a look at the documentation.

Editing the Gallery:

Open a gallery-demo.html template file.
Scroll down till the GALLERY section.
Change the image url & caption at each -- Image -- line

                
                    <!-- GALLERY -->

                     <!-- Image -->

                      <a href="assets/img/gallery/01.jpg" title="New York: Your Caption goes here"><img src="assets/img/gallery/01.jpg" class="thumb" alt="Little Venice" /></a>

Make sure at the end of the page to call the gallery.

                
                    <!-- Launch SimpleLightbox script -->

                 <script>

                  $('.imageGallery1 a').simpleLightbox();

                </script>

Timeline

To add or modify the timeline, scroll down to TIMELINE code line.

Each timeline element is separeted by:


                    <!-- Timeline Item -->

                
                    <!-- Timeline Item -->

                    <div class="tl-item" data-aos="fade-right" data-aos-anchor-placement="center-bottom">

                     <span class="line b-pine"></span>

                     <div class="date" >Oct 17 2005</div>

                     <div class="img"><img src="assets/img/user2.jpg"  alt="Little Venice" class="img-fluid"></div>

                       <div class="info viola">

                        <h5 class="t-snow">A Passion Starts</h5>

                        <div class="excerpt t-moon">At a young age I discover my passion for photography.</div>

                      </div>

                    </div>

Animation FX

The beautiful animations are created using:

Animate.css by: Daniel Eden
AOS animation by: michalsnik

At each section, block or div, you can change the direction and type of animation

data-aos="fade-left" data-aos-anchor-placement="center-bottom"

To understand better how it works and all available FX's - visit AOS animation by: michalsnik

                
                    <div class="content row center">

                     <div class="col-lg-3" data-aos="fade-right" data-aos-anchor-placement="center-bottom">

                    <div class="info-box border b-blue-vibrant">

Little Venice - HTML Template - Documentation

Getting Started

Bootstrap

File Structure

HTML Pages

Image & Video Assets

Google Fonts

Styles (CSS)

JS & PHP files

JavaScript - js folder

PHP - php folder

Page Strucutre

Styles & Colors

Available stunning vintage colors for this template:

Style Variations

Button styles

Margin & Padding

Backgrounds

Featured Title

ANALISA BELL

Main Slide

Testimonial Carousel

Price Table Packs

Contact Form

Gallery

Timeline

Animation FX

JavaScript - `js` folder

PHP - `php` folder