Sugarfree Lolly

A Responsive One Page HTML5 Bootstrap3 Corporate Template presented by Sugarfree Themes


Thank You for purchasing our Sugarfree Lolly Template.
If you have any questions that are beyond the scope of this documentation, please feel free to email us. Thank You! :)

HTML Structure


The hierarchical file structure:

3 Different Design Versions


There are three different design versions as follows:

***** Image Header Version *****

The following files are used for Image Header Version:

***** Video Header Version *****

The following files are used for Video Header Version:

***** Slider Header Version *****

The following files are used for Slider Header Version:

Head Section


The Head Section of all the 3 Different Design Versions is almost the same except their version name are changed.

The following is the head section of Image Header Version:


	
	
	
	
	
	
	
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	Sugarfree Lolly - A Responsive One Page HTML5 Bootstrap3 Corporate Template presented by Sugarfree Themes

	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
  

Generating Your Favicon

We have used Real Favicon Generator for generating our favicon.

Just upload your logo on Real Favicon Generator. Your picture should be at least 260x260 for optimal results.

Copy the code & Download the file which you will get from the favicon generator. Place the code in your header (like above in the example).

The code will look like this:

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

Social Meta Tags

Social Meta Tags are used because when someone types/posts your website url on social media they would see your website's title, description and banner image.

You should have an image that must be alteast 250x250 (ideal would be 500x500) that you will use for displaying your website on social media.

Twitter Meta Tag
	
	
	
	
	
	
	
	

Change "sugarfreethemes" with your website's name.
Change "Sugarfree Lolly - Image Header Version" with your own title.
Change "A Responsive One Page HTML5 Bootstrap3 Corporate Template presented by Sugarfree Themes" with your own description.
Change "http://sugarfreethemes.com/img/SugarfreeThemesBanner1.png" with your banner image's link.
Change "http://sugarfreethemes.com/lolly/template-lolly" with your website url.

Check your Twitter Card Validation: Twitter Card Validator

Facebook / Open Graph Meta Tag
	
	
	
	
	
	
	
	
	

For "fb:admins" you will need your Facebook ID which you can get at FB Graph. Write Your FB Username after the link. For Example: "http://graph.facebook.com/HatimZuzzerShamsuddin" where "HatimZuzzerShamsuddin" is my username. Now replace "100000470428099" with your Facebook ID.

For "fb:app_id" you will need to create a Facebook App for your website which you can get at Facebook App Development. Replace "730216680425018" with your Facebook App ID.

Change "http://sugarfreethemes.com/lolly/template-lolly/" with your Website URL.
Change "Sugarfree Lolly - Image Header Version" with your Website Title.
Change "http://sugarfreethemes.com/img/SugarfreeThemesBanner1.png" with your banner image's link.
Change "A Responsive One Page HTML5 Bootstrap3 Corporate Template presented by Sugarfree Themes" with your own description.
Change "Sugarfree Themes" with your Website Name.

Check your validation using: Facebook Debugger Tool

Google+ / Schema.org / Pinterest Meta Tag
	
	
	
	
	
	

Replace "https://plus.google.com/+HatimShamsuddin" with your Google+ Plus Profile URL.
Replace "Sugarfree Lolly - Image Header Version" with your Website Name.
Replace "A Responsive One Page HTML5 Bootstrap3 Corporate Template presented by Sugarfree Themes" with your Website Description.
Replace "http://sugarfreethemes.com/img/SugarfreeThemesBanner1.png" with your banner image's link.

Check your validation using: Google Structured Data Testing Tool

Preloader Section


	    
		

WELCOME TO LOLLY

Replace "WELCOME TO LOLLY" with your own message.
Replace "lollyloader-small.png" with your own small(150x150) logo. (This is for devices having width < 1920px).

		  	
        

Replace "lollyloader-large.png" with your own large(500x500) logo. (This is for devices having width ≥ 1920px).

     	#preloader img {
          content: url(../img/lollyloader-large.png);
        }
     

To change the name of "lollyloader-large.png" in the above code, you can change as following:

# For Image Header Version
Go to the "css" folder and open "image-header.css", go to line 1203 where you will see the above code. Simply replace "lollyloader-large.png" with your desired image name.

# For Video Header Version
Go to the "css" folder and open "video-header.css", go to line 1231 where you will see the above code. Simply replace "lollyloader-large.png" with your desired image name.

# For Slider Header Version
Go to the "css" folder and open "slider-header.css", go to line 1233 where you will see the above code. Simply replace "lollyloader-large.png" with your desired image name.

Logo & Navigation Section


    
    
    
	

Replace "LOLLY" with your website name.
Replace "lollylogo-small.png" with your own small(35x35) logo. (This is for devices having width < 1920px).

        LOLLY
    

Replace "lollylogo-large.png" with your own large(45x45) logo. (This is for devices having width ≥ 1920px).

	  .navbar-brand img {
	    content: url(../img/lollylogo-large.png);
	  }
     

To change the name of "lollylogo-large.png" in the above code, you can change as following:

# For Image Header Version
Go to the "css" folder and open "image-header.css", go to line 1216 where you will see the above code. Simply replace "lollylogo-large.png" with your desired image name.

# For Video Header Version
Go to the "css" folder and open "video-header.css", go to line 1244 where you will see the above code. Simply replace "lollylogo-large.png" with your desired image name.

# For Slider Header Version
Go to the "css" folder and open "slider-header.css", go to line 1246 where you will see the above code. Simply replace "lollylogo-large.png" with your desired image name.

Home Section


There are three different design versions for Home Section:

***** Image Header Version *****

		    
		    

GREETINGS FROM LOLLY

ENJOY MAKING THE WEB SUGARFREE WITH LOLLY

To Replace the Background Image, open image-header.css file and go to line 375:

        	background: url(../img/bg1.jpg) no-repeat top center;
        

***** Video Header Version *****

	    
	    

GREETINGS FROM LOLLY

ENJOY MAKING THE WEB SUGARFREE WITH LOLLY

***** Slider Header Version *****

		    
		    
Yummy Cereals

GREETINGS FROM LOLLY

ENJOY YUMMY CEREALS WITH SUGARFREE LOLLY

Delicious Pizza

DELICIOUS PIZZA

ENJOY THIS DELICIOUS PIZZA WITH SUGARFREE LOLLY

Superb Fried Chicken

SUPERB FRIED CHICKEN

ENJOY THIS SUPERB CHICKEN WITH SUGARFREE LOLLY

Healthy Berries

HEALTHY BERRIES

ENJOY HEALTHY BERRIES WITH SUGARFREE LOLLY

Tasty Dry Fruits

TASTY DRY FRUITS

ENJOY DRY FRUITS WITH SUGARFREE LOLLY

Adorable CupCakes

ADORABLE CUPCAKES

ENJOY ADORABLE CUPCAKES WITH SUGARFREE LOLLY

Images for slider should be atleast 3000px(width) & 1875px(height).

About Section



	
    

About Us

We Are Sugarfree Lolly

We are a family of talented designers & developers with a passion for awesome and unique designs that makes us standout amongst a crowded marketplace.

We are Creative
with our work

We are a small, fun to work with and a creative team.

We are Supportive
because we care

We help businesses communicate better with their customers.

We drink Coffee
to start our engine

We start our work by drinking coffee in the morning to spark our creative minds.

We love Experimenting
with our talent

We are a little excited, fun and experimental team. And affordable too :)

What We Do

Inside Peek in our Agency

Sugarfree Lolly has been based in SweetCandy Land, Lollyville since 2005.

Started from a bedroom by John Doe.

Built with a strong ethical values, our team consists of highly talented people who strive for excellence, doing the hard work the smart way.

We have a friendly working environment which helps our business to communicate better with our customers delivering unique performance.

We are small, talented and fun-loving people. We are affordable too :)

Our Skills

Check Out our Talent!

90% CompleteWeb Design
85% CompleteWeb Development
75% CompleteSEO
80% CompleteBrand Identity
70% CompleteGraphic Design
89% CompletePhotoshop
68% CompleteJavaScript
74% CompleteRuby

Team Members

Our Precious Family

Services Section


	
    

Our Services

We provide highly skilled professional service with a creative touch.

Clean Coding
Professional Look

We provide professional and clean code.

Customer Support
24 x 7 on Drill

We offer 24x7 support to our customers without any hassle.

Web Optimization
Fast Websites

We optimize websites to make them run.

Professional Touch
Just Relax

You have hired the right professionals. Just sit back and relax.

Branding
Recognize Yourself

Designing a new look.

Web Solutions
Complex to Easy

We provide you with complete web solutions.

Armour Protect
You are Secure

We provide bullet-proof protection to your business.

You are Happy
We are Happy

We will do our best to put a smile on your face!

Our Pricing

We provide high quality service at an affordable price

  • Starter
  • $38 / Month
  • 50GB Storage
  • 10GB RAM
  • 400GB Bandwidth
  • 3 Email Address
  • -
  • Sign Up
  • Advanced
  • $115 / Month
  • 500GB Storage
  • 50GB RAM
  • 1024GB Bandwidth
  • 25 Email Address
  • Forum Support
  • Sign Up
  • Expert
  • $299 / Month
  • Unlimited Storage
  • 500GB RAM
  • Unlimited Bandwidth
  • Unlimited Email Address
  • Forum Support
  • Sign Up

Portfolio Section


	
    

Our Portfolio

Showcase of our Awesome Work

Portfolio 1
Portfolio 1
Portfolio 2
Portfolio 2
Portfolio 3
Portfolio 3
Portfolio 4
Portfolio 4
Portfolio 5
Portfolio 5
Portfolio 6
Portfolio 6
Portfolio 7
Portfolio 7
Portfolio 8
Portfolio 8
Portfolio 9
Portfolio 9
Portfolio 10
Portfolio 10
Portfolio 11
Portfolio 11
Portfolio 12
Portfolio 12
Portfolio 13
Portfolio 13
Portfolio 14
Portfolio 14
Portfolio 15
Portfolio 15
Portfolio 16
Portfolio 16
Portfolio 17
Portfolio 17

Clients Section


    
    

Our Clients

Prestigious Testimonials & Clients

  • client1
  • client2
  • client3
  • client4
  • client5
  • client6
  • client7
  • client8
  • client9

Buy Now Section


    
	

Love This Sugarfree Lolly Bootstrap3 HTML5 Template!

Buy Now

Contact Us Section


    
    

Contact Us

We are available 24 x 7

+

=

For changing your map location, go to the folder "js" and open "maps.js". In "maps.js" replace the lat & long on line 12 and line 32.

Change your Email Address where you want to receive the contact form info of your customers/visitors, go to the folder "sendingmail" and open "sendmail.php". In "sendmail.php" replace the email address & email subject on line 14,15 & 16 respectively. Please note that the email address on line 14 & 15 should be same.

Email Subscription Section


    
	

Core JavaScript Files Section


    
    
    
        
    
    
        
    
            
    
    
    
    

    
    

    
    
	
	
	
    


Replace "UA-52137979-4" with your own Google Analytics Tracking ID

Credits & Sources


Thank-You very much for providing us with these great resources :)

The resources used for Sugarfree Lolly are listed as below:


Thank You for purchasing our Sugarfree Lolly Template.
If you have any questions that are beyond the scope of this documentation, please feel free to email us. Thank You! :)

Sugarfree Lolly