WebPanda/ ├── css/ │ ├── demo-categories │ └── all (demo pages css in this folder (ie:yit-car-rental.css)) │ ├── fonts │ └── all (font related files in this folder (.ttf, .eot, .woff, .svg, .woff2)) │ ├── fonts-icon │ └── all (font icons related files in this folder) │ ├── plugins │ └── all (plugin related files in this folder) │ ├── shortcodes │ └── all (shortcodes related files in this folder) │ ├── other all (root) level css files ├── js/ │ ├── plugins │ └── all (plugin related files in this folder) │ ├── vendor │ └── all (library related files in this folder) │ ├── other all (root) level js files ├── images/ │ ├── all images files with appropriate folder ├── scss/ │ ├── all scss files included with appropriate folder ├── video/ │ ├── demo video (demo.mp4) │ ├── demo audio (audio.mp3) ├── all .html files
WebPanda The Most Powerful Bootstrap 4 Website Templates.
WebPanda is Exclusive multi-purpose 100% responsive template with powerful features. Simple and well-structured coding, high quality and creative, flexible layout, scalable features along with color schemes to create tailor-cut websites. With bootstrap, responsive mega menu and various layouts including incredible blog template, portfolio layouts, business pages and many more..!
Once you've downloaded the installation file on Themeforest, Extract it and locate a file called WebPanda.zip. You can install the template by ftp installation methods.
Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
HTML/css- Stylesheet files
HTML/fonts– Icon font files
HTML/images- Image files
HTML/js- Javacript files
HTML/video– Video / Audio files
You're now good to go..! Start adding your content/images and generate your beautiful, elegant brand & new website for your business.
- Document PDF
WebPanda follows a standard and easy to customize coding structure. Here is the sample for your reference:
<!doctype html> <html class="no-js" lang="en"> <head> <!-- =================== /META BOC ==================== --> <meta charset="utf-8"> <!-- Description --> <meta name="description" content=""> <!-- Keyword / Content --> <meta name="keywords" content=""> <!-- =================== /META EOC ==================== --> <!-- =================== /TITLE BOC ==================== --> <title> :: Page - Title Goes Here ::</title> <!--w =================== /TITLE EOC ==================== --> <!-- =================== /FAVICON BOC ==================== --> <title> Add your website favicon here </title> <!-- =================== /FAVICON EOC ==================== --> <!-- =================== /WEB CSS BOC ==================== --> <link href="css/filename.css" rel="stylesheet" type="text/css"> <!-- =================== /WEB CSS EOC ==================== --> </head> <body> <!-- ====== /WRAPPER BOC ====== --> <div class="page-wrapper"> <!-- ====== /HEADER BOC ====== --> <header> <!-- /Navigation BOC --> <div class="yit-nav"> <nav class="navbar navbar-expand-md navbar-light"> ... </nav> </div> <!-- /Navigation EOC --> </header> <!-- ====== /HEADER EOC ====== --> <!-- ====== /SECTION BOC ====== --> <section> ... </section> <!-- ====== /SECTION EOC ====== --> <!-- ====== /FOOTER BOC ====== --> <footer> <div class="container"> </div> </footer> <!-- ====== /FOOTER EOC ====== --> <!-- ====== /WEB JS BOC ====== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/filename.js"></script> <!-- ====== /WEB JS EOC ====== --> </div> </body> </html>
The Logo can be found in the Navbar -
.navbar block, below is the markup for your reference:
<!-- /Logo BOC --> <nav class="navbar"> <div class="container"> <a href="page-name.html" title="WebPanda" class="navbar-brand"> <img src="images/logo.png" data-at2x="email@example.com" width="" height="" alt="WebPanda"> </a> </div> </nav> <!-- /Logo EOC -->
The .navbar-brandis the standard class of http://getbootstrap.com
WebPanda download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like
<img src="images/image-name.jpg" alt="image alt text" width="" height="">
.img-fluidis the standard class of Boostrap. For image related classes please prefer Helper Class Section.
To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.
<!-- /Favicon BOC --> <link rel="shortcut icon" href="images/favicon.png"> <link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
WebPanda is used
Default Fonts like: Roboto & Montserrat from the Google Fonts Library. You can change the fonts from /css/style.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an example of Self Hosted Fonts. In this case you need to remove below lines and change font names in
/css/style.css file as per your requirement.
<!-- /DEFAULT THEME FONT BOC --> <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"> <!-- /OTHER GOOGLE FONT VARIATION BOC --> <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli:200,200i,300,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,400i,500,700,900" rel="stylesheet">
Font Helper Class
We have created more font family and font variation, you can get fonts variation style from
css/theme.css for your reference:
Heading Helper Class
We have created more heading font with variation, you can get fonts variation style from
css/theme.css for your reference:
Landing Pages Demo
WebPanda is Exclusive multi-purpose 100% responsive template with powerful features with suitable for startup to enterprise level website.
- WebPanda Default
- WebPanda Classic
- WebPanda Digital Agency
- WebPanda Business Parallax
- WebPanda Creative Studio
- WebPanda Creative Designer
- WebPanda Web Agency
- WebPanda Freelancer
- WebPanda Branding Agency
- WebPanda Startup
- WebPanda Digital Marketing
- WebPanda SEO
- WebPanda Hosting
- WebPanda Personal
- WebPanda Web Agency
- WebPanda Startup OnePage
One Pages Demo
A wide range of one-page designs to choose from; one that perefect with different caterogry business. Choose yours demo.
Header Type (Navigation)
You can choose between 28 Types of navigation while creating your Pages. The list of various navigation types & demo for your reference.
We have created standard dropdown menu using boostrap mark with custom css, below is the image demo and page link for your reference:
Note : You can find this simple dropdown demo in feature-navigation-default.html page for your reference.
You can easily make changes in Navigation using custom classs.
Change Background Color: You can easily add your favorite color to your navigation bar by adding color class like
orange-color-bg or whatever you want, please make sure that same css class should be there in theme.css file.
Navbar Variation Style:
.yit-nav-transparent-stylefor create a transparent style navigation no any solid background
.yit-nav-light-stylefor create a light style navigation either white or grey color background
.yit-nav-dark-stylefor create a dark style navigation with grey color background
.yit-nav-color-stylefor create a color style navigation with different color like
yit-nav-fancy-stylefor create a fancy style navigation, for more information please prefer fancy style navigation demo in navigation section.
navbarsection for appplied class effect, but still if you have any query or confusion simply, prefer navigation demos for your reference. For More Info Click Here
WebPanda Use four type of slider to create banner, sliders as mentioned below :
For slider demo just click on slider image then it will be re-direct on appropriate page.
- Flex Slider
- Slick Slider
- Swiper Slider
- OWL Carousel
Element & Shortcodes
Note : We have created 65+ shortcode html pages and also each page have more variations style. If you want to use that particular shortcode in your page, just simply click on below listed pages and prefer demos for your reference.
Icon & Fonts
We have used four types of icon for creating template pages, elements, portfolio & blogs, to make creative and elegant.
- Font Awesome Icon
- Themify Icon
- ET Line Icon
- Dripicons Icon
Note : We have created 64+ portfolio layouts page to fully showcase your products and accomplishments. Please check our megamenu for more portfolio variations OR just simply click on below demo images and prefer demos for your reference.
- Portfolio Parallax
- Portfolio Minimal
- Portfolio Photography
- Portfolio Metro
- Portfolio Personal
- Portfolio Multislide
- Portfolio Verticle
- Portfolio Progressbar
- Portfolio Grid Column
- Portfolio Grid Overly
- Portfolio Grid Animate
- Portfolio Grid Blur
- Portfolio Grid Scale
- Portfolio MasonryMasonry
- Portfolio Metro Scale
- Portfolio Masonry Filter
- Portfolio Metro Filter
- Portfolio Image Gallery
- Portfolio Masonry Gallery
- Portfolio Justified Gallery
- Portfolio Carousel
Note : We have created 50+ blog layouts page to fully show your website news and updates. Please check our megamenu for more blogs variations OR just simply click on below demo images and prefer demos for your reference.
WebPanda created wide range of contact form, inquiry form, quick quote form with more stylist variations.
We have created wide range of really useful helper classes using .scss for you. Below is the listed for your reference :)
Responsive Utilities Class
Align / Text Effect
Word / Text Break Class
Background Position Class
Background Cover Class
Background Overlay Class
Margin Top Spacer Class (.mt = margin-top)
Margin Right Spacer Class (.mr = margin-right)
Margin Bottom Spacer Class (.mb = margin-bottom)
Margin Left Spacer Class (.ml = margin-left)
ml-0for margin left 0
ml-10for margin left 10px space
ml-15for margin left 15px space
ml-20for margin left 20px space
ml-30for margin left 30px space
ml-40for margin left 40px space
ml-50for margin left 50px space
ml-60for margin left 60px space
ml-70for margin left 70px space
ml-80for margin left 80px space
ml-90for margin left 90px space
ml-100for margin left 100px space
ml-110for margin left 110px space
ml-120for margin left 120px space
ml-130for margin left 130px space
ml-140for margin left 140px space
ml-150for margin left 150px space
Padding Top Spacer Class (.pt = paddding-top)
Padding Bottom Spacer Class (.pb = paddding-bottom)
Padding Left Spacer Class (.pl = paddding-left)
Padding Right Spacer Class (.pr = paddding-right)
General Padding Class (.pad = paddding)
General Margin Class (.mrg = margin)
General Width Class
General Height Class
General Gutter Class
Letter Spacing Class
Position Space Class (you should add position:relative for pos-t class)
Border Direction Class
Border Specific Direction Class
Border Utility Class
Border Style Class
Font Sizing Class
Image Variation Class
Icon Size Variation Class
Icon Variation Class
Button Variation Class
Button Size Class
Button Color Variation Class - Hover button auto applied using dark color
Button Border Variation Class - Hover button auto applied using button color
Background Color Variation Class - Text color auto applied as per appropriate background color
Color Variation Class
Border Color Variation Class
Hyperlink Color Variation Class - Hover link auto applied using dark color
Social Icon Variation Class
Don't know how to upload website source on FTP? Would like the website installation to be done by a professional? Feel free to address Envato Studio to get high-quality help installing your website.
Have doubts or need help?
Then simply email on our Support email at enquiry[at]yankeeinfoweb[dot]com OR visit our Themeforest profile at Yankee Themes and generate the message, We will be back with professional help quickly. Expect a response Monday to Friday 10:00 to 18:00 (GMT +5:30) within 1 business day. Our team is open to our customers and aim at getting better!
We are a expert and trusted team of full-time developers having 7+year experience. Sharing the same goals and putting our best knowledge into what we do make us successful. One of our priorities is to bring the feeling of satisfaction with our items to the clients! So you can always rely on us!
If our template doesn't work correctly for your website? Report your issue or bug by describing it in details and send us a link to your website. We'll do our best to find a solution.
We introduce new updates and features regularly. Just check for more informatio in our version history.
We are open to your ideas. If you require some additional features, which could as well improve our product, just share it with us. We will consider adding them in our future updates.
We do not fix bugs or resolve issues of other plugins and themes, created by third party developers. Also we don't supply integration services for third party widgets and themes.
Source & Credits
We would really love to take this opportunity to appreciate guys whose items were helpful to us to make WebPanda a really beautiful theme for our awesome users
- HTML5 Shiv
- jQuery Easing
- Swiper Slider
- Stellar Parallax
- Magnific Popup
- jQuery Skills Bar
- Justified Gallery
- Easy Pie Chart
- Slick Slider
- OWL Carousel2
- OWL Carousel2
- Full Page
- Count Down
- Insta Feed
- jQuery Validation
- Nice Select
- Nice Scroll
- Date Time Picker
- Typer JS
- Google Captcha
- Particles Waves
- jQuery Ripple Effect
- Parallax Scroll
- Flat Surface Shader
- Flat Surface Shader
- Twitter Feed
- Cookie Consent
Images and Videos
Support & Ratings
If you need any help using the file or need special customizing please feel free to contact me via my Themeforest profile. If you have a moment, please rate this item, I'll appreciate it very much!....Thank you. :)
Finally, thank you for visiting our item. If you love it, don't forget to give us 5 Stars rate from your download's page. If you need any question regarding this item, please feel free to contact us at enquiry[at]yankeeinfoweb[dot]com.
We'll happy to talk you, don't hesitate to mail us if there is any problem with our products or you just want to email. Support requests are being processed on business days Monday to Friday 10:00 to 18:00 (GMT +5:30) within 1 business day.
Get In Touch
Email : enquiry[at]yankeeinfoweb[dot]com
# Release Ver 1.2 - 12/09/2018
Fixed : Style CSS
Fixed : Responsive CSS
Fixed : Megamenu CSS
Added : Megamenu Style-01
Added : Megamenu Style-02
Added : Megamenu Style-03
# Release Ver 1.1 - 16/08/2018
Added : GDRP Compliance
Added : Cookie Concent CSS
Added : Cookie Concent JS
Fixed : Navbar Toggler SVG Icon CSS
# Initial Release Ver 1.0 - 07/08/2018