My Confetti - Kids Party Planner – Responsive HTML5 Template
Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!
Scope of free support
We can help you with:
- Responding to questions or problems regarding the item and its features
- Fixing any discovered item’s bugs
- Providing updates to ensure compatibility with new software versions
Back to top
Was this article helpful ?
HTML Structure
This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).
If you would like to read more
about bootstrap framework click here :
Grid System and Single row structure
The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here
Basic grid HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> |
Page structure
Below you will find default page structure :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> [css] </head> <body> [header] [main menu] <!-- main container --> <div id="wrapper"> [component 1] <!-- fullwidth element --> </div> [fullwidth parallax] <div class="container"> <!-- / fullwidth element --> [component 6] </div> <!-- / main container --> [footer] [javascripts] </body> </html> |
Back to top
Was this article helpful ?
CSS files and structure
If you would like to edit the color, font, or style of any elements, you would do the following:
|
1 |
#primaryContent a {color: #someColor;} |
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.
I.E.
|
1 |
#wrap #primaryContent a {color: #someColor;} |
So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.
Colors
The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:
|
1 2 3 4 5 |
<head> (..) <link rel="stylesheet" type="text/css" href="css/motive.css"> (..) </head> |
Icons
We’ve included 360+ font icons.
Awesome Icons – http://fontawesome.io/icons/
HTML markup:
|
1 2 |
<!-- Awesome Icons --> <i class="fa fa-cog"></i> |
CSS Files & Structure
We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.
style.less
1. Variables
2. Mixins
3. Animate
4. Slick
5. Selectize
6. Magnific Popup
7. nstSlider
8. Scaffolding
9. Utilities
10. Buttons
11. Typography
12. Form
13. Address
14. Socials
15. Pagination
16. Boxes
17. Sidebar
18. Blog
19. Newsletter
20. Shop
21. Widgets
22. Sliders
23. Navbar
24. Dropdown
25. Footer
26. Page Headers
27. Mobile Menu
28. Coming Soon Page
29. Gallery
30. Accordion
31. 404 Page
32. Map
33. Twitter
34. Demo Styles
The template also includes:
Google Fonts
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,400italic,700,900);
Mixins and Variables
@import ‘variables.scss’;
@import ‘_bootstrap/bootstrap/mixins’;
@import ‘mixins’;
— Plugins
Animate CSS
@import ‘_animate-css/animate’;
Slick
@import ‘../plugins/slick/slick’;
@import ‘../plugins/slick/slick-theme’;
Selectize
@import ‘../plugins/selectize/selectize.bootstrap3’;
Magnific Popup
@import “../plugins/magnific-popup/main”;
Bootstrap Slider
@import “../plugins/nstSlider/jquery.nstSlider”;
Global
@import ‘global’;
@import ‘utilities’;
— Components
Small Elements
@import ‘components/buttons’;
@import ‘components/typography’;
@import ‘components/form’;
@import ‘components/address’;
@import ‘components/socials’;
@import ‘components/pagination’;
Page Elements
@import ‘components/boxes’;
@import ‘components/sidebar’;
@import ‘components/blog’;
@import ‘components/newsletter’;
@import ‘components/shop’;
@import ‘components/widgets’;
@import ‘components/sliders’;
@import ‘components/navbar’;
@import ‘components/dropdown’;
@import ‘components/footer’;
@import ‘components/page-headers’;
@import ‘components/mobile-menu’;
@import ‘components/coming-soon’;
@import ‘components/gallery’;
@import “components/accordion”;
@import “components/404”;
@import “components/map”;
@import “components/demo”;
Back to top
Was this article helpful ?
Javascript Components
JavaScript files:
- jquery.min.js – https://jquery.com/
- bootstrap.min.js – http://getbootstrap.com/getting-started/
- browser.min.js – https://github.com/gabceb/jquery-browser-plugin
- device.min.js – https://github.com/borismus/device.js/tree/master/build
- hammer.min.js – http://hammerjs.github.io/
- jquery.hammer.js
- jquery.placeholder.min.js – https://github.com/mathiasbynens/jquery-placeholder
- jquery.visible.js – https://github.com/customd/jquery-visible
- skrollr.min.js – http://prinzhorn.github.io/skrollr/
- slick.min.js – http://kenwheeler.github.io/slick/
- init.js – custom script for slick slider
- isotope.min.js – http://isotope.metafizzy.co/
- jquery.magnific-popup.min.js – http://dimsemenov.com/plugins/magnific-popup/
- jquery.nstSlider.js – http://lokku.github.io/jquery-nstslider/
- selectize.min.js – https://brianreavis.github.io/selectize.js/
- helpers.js – custom script
Screenshot
Back to top
Was this article helpful ?
Navigation
Navigation is really important part of the theme. In My Confetti - Kids Party Planner we have 2 variations of it. The menu markup also contains search bar.
- Default Navigation
- Sticky Navigation (activate on scroll)
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<nav class="ct-menu"> <div class="topbar"> <div class="topbar__inner"> <address class="ct-address ct-footer__address topbar__address"><a href="https://goo.gl/maps/obRcgtwGH5K2" class="media ct-address__box" target="_blank"> <div class="media-left"><i class="fa fa-map-marker"></i></div> <div class="media-body"><span class="media-heading">9870 St Vincent Place, Glasgow, DC 45 Fr 45.</span></div></a><a href="mailto:contact@myconfetti.com" class="media ct-address__box"> <div class="media-left"><i class="fa fa-envelope"></i></div> <div class="media-body"><span class="media-heading">contact@myconfetti.com</span></div></a><a href="tel:0123456789" class="media ct-address__box"> <div class="media-left"><i class="fa fa-phone"></i></div> <div class="media-body"><span class="media-heading">(012) 345-6789</span></div></a> </address> </div> <div class="topbar__inner"> <ul class="ct-socials list-inline list-unstyled"> <li class="ct-socials__item ct-socials__item--facebook"><a href="https://www.facebook.com/createITpl"><i class="fa fa-facebook"></i></a></li> <li class="ct-socials__item ct-socials__item--twitter"><a href="https://twitter.com/createitpl"><i class="fa fa-twitter"></i></a></li> <li class="ct-socials__item ct-socials__item--flickr"><a href="#"><i class="fa fa-flickr"></i></a></li> </ul> </div> </div> <div class="midbar"> <div class="midbar__inner"> <ul class="midbar-nav list-inline"> <li class="nav-item"><a href="event-picnics.html">Picnics</a> </li> <li class="nav-item"><a href="event-church.html">Church Events</a> </li> <li class="nav-item"><a href="event-neighborhood.html">Neighborhood Parties</a> </li> <li class="nav-item"><a href="event-sports-teams.html">Sports Teams</a> </li> <li class="nav-item"><a href="event-adult.html">Fundraisers</a> </li> <li class="nav-item"><a href="event-schools.html">Schools</a> </li> <li class="nav-item"><a href="event-special.html">Special Events</a> </li> <li class="nav-item"><a href="event-birthday.html">Birthday Parties</a> </li> </ul> </div> <div class="midbar__inner"><a href="#" class="midbar__search-toggle"><i class="fa fa-search"></i></a></div> <div class="midbar__search midbar__search--default"> <form class="ct-search form-group"> <input id="midbar-search" placeholder="Search..." required="required" class="form-control"/> <label for="midbar-search" class="sr-only">Search...</label> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> <div class="navbar navbar-default"> <div class="navbar-header"><a href="index.html" class="navbar-brand"><img src="assets/images/demo-content/logo.png" alt="logo"></a></div><a href="#" class="btn btn-motive pull-right">Book Now</a> <ul class="nav navbar-nav navbar-right"> <li class="nav-item"><a href="index.html">Home</a> </li> <li role="presentation" class="dropdown nav-item nav-item"><a href="about.html" class="dropdown-toggle">Pages<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="about.html">About Us</a> </li> <li><a href="testimonials.html">Testimonials</a> </li> <li><a href="book-party.html">Book Party</a> </li> <li><a href="faq.html">Faq</a> </li> <li><a href="coming-soon.html">Coming Soon</a> </li> <li role="presentation" class="submenu"><a href="#" class="submenu-toggle">Submenu<i class="fa fa-caret-right"></i></a> <ul class="dropdown-menu"> <li><a href="#">Submenu-1</a> </li> <li><a href="#">Submenu-2</a> </li> <li><a href="#">Submenu-3</a> </li> <li><a href="#">Submenu-4 </a> </li> </ul> </li> </ul> </li> <li class="nav-item"><a href="gallery.html">Portfolio</a> </li> <li role="presentation" class="dropdown nav-item nav-item"><a href="packages.html" class="dropdown-toggle">Packages<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="package-detail-1.html">Coloring Party With Clowns</a> </li> <li><a href="package-detail-2.html">Tutus & Twinkle Toes</a> </li> <li><a href="package-detail-3.html">Cooking In The Backyard</a> </li> <li><a href="package-detail-4.html">Barnyard Bash With Toddlers</a> </li> <li><a href="package-detail-5.html">Cooking In The Backyard</a> </li> <li><a href="package-detail-6.html">Getting Ready For Indian Party</a> </li> </ul> </li> <li role="presentation" class="dropdown nav-item nav-item"><a href="blog.html" class="dropdown-toggle">Blog<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="blog.html">Page 1</a> </li> <li><a href="blog2.html">Page 2</a> </li> </ul> </li> <li class="nav-item"><a href="contact-us.html">Contact Us</a> </li> </ul> </div> </nav> |
Screenshots
Default Navigation
Fixed Navigation (activate on scroll)
Needed class:
.midbar__search–default
Navbar Search Default
Needed class:
.midbar__search–transparent
Navbar Search Transparent
JavaScript
You will find this code inside main.js file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Midbar Search */ $('.midbar__search-toggle').on('click', function(e) { var input, midbar; e.preventDefault(); midbar = $('.midbar'); input = $('.midbar__search input'); if (midbar.hasClass('search-open')) { midbar.removeClass('search-open'); } else { midbar.addClass('search-open'); } input.focus(); return false; }); |
Back to top
Was this article helpful ?
Page Headers
My Confetti - Kids Party Planner has two variations for page headers you can use in your website!
— Small
HTML markup
|
1 2 3 4 5 6 7 8 9 10 |
<header data-parallax="50" class="ct-page-header ct-page-header--small"> <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="ct-page-header__svg"> <path d="M0,100 L 100,100 100,0 Z"></path> </svg> <div class="ct-page-header__inner"> <div class="container"> <h1 class="h1 ct-page-header__title">Our <b>Faq</b></h1> </div> </div> </header> |
Screenshot
Small Page Header
— Big
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<header data-parallax="30" class="ct-page-header ct-page-header--big"> <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="ct-page-header__svg"> <path d="M0,100 L 100,100 100,0 Z"></path> </svg> <div class="ct-page-header__inner"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1>Parties & Events With <b>Personalized Fun!</b></h1> <p>We set up, organize, and supervise all of the festivities with fun, engaging, and age appropriate games & activities. Mom & Dad never have to worry about boredom or safety!</p><a href="#" class="btn btn-default-o">See Parties</a> </div> </div> </div> </div> </header> |
Screenshot
Big Page Header
Back to top
Was this article helpful ?
Sidebar
HTML markup
|
1 2 3 4 |
<aside class="ct-sidebar ct-blog__sidebar"> <div class="ct-sidebar__inner"> </div> </aside> |
Screenshot
Sidebar
To swap sidebar on mobile you need add is-sidebar class on body
HTML markup
|
1 |
<body class"is-sidebar">...</body> |
Screenshot
Sidebar Mobile
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* Sidebar */ if (el_body.hasClass('is-sidebar') && device_width < 992 && (device.mobile() || device.tablet())) { /* Sidebar Toggle */ sidebar_toggle = $('.ct-sidebar__mobile-toggle'); sidebar_toggle.on('click', function(e) { e.preventDefault(); if (el_html.hasClass('sidebar-open')) { el_html.removeClass('sidebar-open'); } else { el_html.addClass('sidebar-open'); } return false; }); /* Sidebar */ sidebar = $('.ct-sidebar'); sidebar.hammer().bind('swipeleft', function() { return el_html.addClass('sidebar-open'); }); el_body.hammer().bind('swiperight', function() { return el_html.removeClass('sidebar-open'); }); } |
Back to top
Was this article helpful ?
Section Headers
HTML markup
|
1 2 3 |
<h2 class="ct-section-header"> Parties <b>Include</b> </h2> |
Screenshot
Section Headers
Back to top
Was this article helpful ?
Accordion
You can find 7 types of variation in My Confetti - Kids Party Planner for Accordion
- .panel-motive
- .panel-default
- .panel-primary
- .panel-success
- .panel-info
- .panel-warning
- .panel-danger
HTML markup example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="example" role="tablist" aria-multiselectable="true" class="panel-group"> <div class="panel panel-motive"> <div role="tab" id="header-example-1" class="panel-heading"> <h4 class="panel-title"><a aria-controls="collapse-example-1" aria-expanded="false" data-parent="#example" data-toggle="collapse" href="#collapse-example-1" role="button" class="collapsed">Example Title</a></h4> </div> <div id="collapse-example-1" role="tabpanel" aria-labelledby="header-example-1" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div> |
Screenshot
Accordion example
Back to top
Was this article helpful ?
Isotope
— Filters
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="ct-isotope-filtering"> <button class="btn btn-gray-o is-active" data-filter="*">Show All </button> <button class="btn btn-gray-o" data-filter=".august">August, 2015 </button> <button class="btn btn-gray-o" data-filter=".july">July, 2015 </button> <button class="btn btn-gray-o" data-filter=".june">June, 2015 </button> <button class="btn btn-gray-o" data-filter=".may">May, 2015 </button> </div> |
Screenshot
Filters
— Item
HTML markup
|
1 2 3 4 5 6 7 8 |
<figure class="ct-isotope-item august"> <div class="ct-isotope-item__media"><img src="assets/images/demo-content/gallery-01.jpg" alt="Gallery Item"/> <div class="ct-isotope-item__hover"> <div class="ct-isotope-item__inner"><a href="assets/images/demo-content/gallery-01.jpg" class="btn btn-default-o--type2 btn-sm mfp-image">View Image</a><a href="#" class="btn btn-default-o--type2 btn-sm">Read More</a> </div> </div> </div> </figure> |
Screenshots
Isotope Item
Isotope Hover
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
/* Isotope */ (isotope_gallery = function() { var isotope_filter, isotope_load; if ($().isotope) { isotope_gallery = $('.ct-isotope-gallery'); isotope_filter = $('.ct-isotope-filtering button'); isotope_load = $('#load-more'); isotope_gallery.isotope({ itemSelector: '.ct-isotope-item', percentPosition: true, masonry: { columnWidth: '.isotope-grid-sizer' } }); isotope_filter.on('click', function() { var filter_value, that; that = $(this); isotope_filter.removeClass('is-active'); that.addClass('is-active'); filter_value = that.attr('data-filter'); return isotope_gallery.isotope({ filter: filter_value }); }); return isotope_load.on('click', function() { var load_name, load_page, response, that; that = $(this); load_name = that.attr('data-load-name'); load_page = parseInt(that.attr('data-load-page')); response = ''; $.ajax({ type: 'GET', url: load_name + load_page + '.html', async: false, success: function(value) { response = value; return isotope_gallery.isotope('insert', $(response)); }, complete: function() { magnific_popup(); return $.ajax({ type: 'GET', url: load_name + (load_page + 1) + '.html', async: false, error: function() { return that.remove(); } }); } }); return that.attr('data-load-page', load_page + 1); }); } })(); |
Isotope Documentation can be found here Files are bundled inside confetti.min.js & style.css
Back to top
Was this article helpful ?
Testimonials
The best way to adversize your company is to let your customers speak for you. In My Confetti - Kids Party Planner you can do this by using testimonials markup.
HTML markup
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-testimonial"> <div class="ct-testimonial__inner"> <div class="ct-testimonial__image"><img src="assets/images/demo-content/team-01.jpg" alt="Jessica Johns"/></div> <h4 class="ct-testimonial__name">Jessica Johns</h4> <h5 class="ct-testimonial__job">Manager</h5> <p class="ct-testimonial__content">“My Confetti made putting my party together a breeze! Incredible success! I'd suggest it to anyone!” </p> </div> </div> |
Screenshots
Testimonials
Back to top
Was this article helpful ?
Buttons
In My Confetti - Kids Party Planner you will find several variations of sizes and colors for buttons
- Size
- btn-lg
- btn-sm
- btn-xs
- Color Full
- motive
- default
- gray
- primary
- success
- info
- warning
- danger
- accent
- Color Open
- motive-o
- default-o
- gray-o
- primary-o
- success-o
- info-o
- warning-o
- danger-o
- accent-o
HTML markup example
|
1 2 |
<button class="btn btn-motive btn-lg">Read More</button> <a href="#" class="btn btn-motive btn-lg">Read More</a> |
Screenshot
Buttons variations
Back to top
Was this article helpful ?
Data Attributes
- data-color – custom text color
- data-font-size – custom font size
- data-height – custom height
- data-background – custom background
- data-show – show hidden content
- data-parallax – set parallax value
Check the markup example with the use of data attributes:
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<header data-parallax="30" class="ct-page-header ct-page-header--big"> <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="ct-page-header__svg"> <path d="M0,100 L 100,100 100,0 Z"></path> </svg> <div class="ct-page-header__inner"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1>Parties & Events With <b>Personalized Fun!</b></h1> <p>We set up, organize, and supervise all of the festivities with fun, engaging, and age appropriate games & activities. Mom & Dad never have to worry about boredom or safety!</p><a href="packages.html" class="btn btn-default-o">See Parties</a> </div> </div> </div> </div> </header> |
Screenshot
Slider example with data attributes
Back to top
Was this article helpful ?
Sliders
There are two types of sliders used in the My Confetti - Kids Party Planner
- Main Slider
- Slick Custom Tweaks
— Main Slider
HTML markup
|
1 2 3 4 5 |
<div class="ct-slick ct-js-slick"> <div class="item">...</div> ... <div class="item">...</div> </div> |
Screenshot
Main Slider
–Slick Custom Tweaks
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="ct-slick ct-js-slick"> <div data-background="assets/images/demo-content/slider-01.jpg" class="item"> <div class="ct-slick__footer"> <div class="inner"> <h3>Garden Tea Time In The Backyard</h3> <div role="separator" class="divider"></div><span>And to top it all of, your princess and her court will enjoy a tea party at a table fit for a queen!</span> </div> <div class="inner"><a href="#" class="btn btn-default-o">See Gallery</a> </div> </div> </div> ... </div> |
Screenshot
Slick Custom Tweaks
New Responsive data-atributes for ease of use:
- data-items-xl
- data-items-lg
- data-items-md
- data-items-sm
- data-items-xs
Slick Documentation can be found here. Files are bundled inside confetti.min.js & style.css
Back to top
Was this article helpful ?
Icon Box
You can easily change what icon will be displayed in box by changing the svg icone code you want to use.
Full set of the icons used in the My Confetti - Kids Party Planner you will find in svg-icons.html. All you need to do is to copy the code the the Icon Box markup.
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<a href="#" class="ct-icon-box"> <div class="ct-icon-box__inner"> <div class="ct-icon-box__icon"> <div class="inner"> <svg width="36px" height="43px" viewbox="0 0 36 43" class="ct-icon ct-icon--timer"> <path></path> </svg> </div> </div> <h3 class="ct-icon-box__header">Crazy Relay Races</h3> <p class="ct-icon-box__content">Phasellus cursus, nulla sit amet prei tium iegestaus, nisii diam ultiricies mauris cresciam nunc. </p> </div> </a> |
Screenshot
Icon Box
Back to top
Was this article helpful ?
Event Box
You can easily change what icon will be displayed in box by changing the svg icone code you want to use.
Full set of the icons used in the My Confetti - Kids Party Planner you will find in svg-icons.html. All you need to do is to copy the code the the Event Box markup.
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<a href="#" class="ct-event-box"> <div class="ct-event-box__inner"> <div class="ct-event-box__icon"> <div class="inner"> <svg width="28px" height="31px" viewbox="0 0 28 31" class="ct-icon ct-icon--return"> <path d="M 16.6 3.82C 16.65 3 16.69 2.17 16.73 1.34 16.78 0.37 15.56-0.37 14.74 0.19 12.91 1.45 10.79 2.08 9.04 3.47 8.61 3.81 8.52 4.64 8.83 5.08 10.16 6.92 11.8 8.62 13.72 9.87 13.86 10.05 14.06 10.17 14.29 10.22 15.09 10.6 15.82 10.07 16.04 9.38 16.09 9.27 16.12 9.15 16.14 9.01 16.25 8.17 16.33 7.32 16.4 6.47 24.27 7.15 27.32 15.79 24.01 22.67 22.14 26.58 18.5 28.37 14.3 28.35 6.71 28.33 2.01 23.07 2.73 15.46 2.89 13.76 0.25 13.78 0.09 15.46-0.67 23.43 3.93 29.69 11.85 30.81 17.39 31.59 22.49 29.93 25.64 25.16 28.27 21.2 28.67 15.74 27.01 11.35 25.29 6.78 21.26 4.19 16.6 3.82ZM 13.75 6.6C 13.07 6.02 12.44 5.38 11.87 4.7 12.54 4.3 13.25 3.97 13.96 3.63 13.9 4.62 13.83 5.61 13.75 6.6Z"></path> </svg> </div> </div> <h3 class="ct-event-box__header">Everyday Parties</h3> <div class="ct-event-box__hover"> <div class="inner"> <h5 class="ct-event-box__header">Everyday Parties</h5> <p class="ct-event-box__content">Lorem ipsum dolor sitam consectetur brevis estia nunc aeneat brevis es. </p> </div> </div> </div></a> |
Screenshot
Event Box
Back to top
Was this article helpful ?
Image Box
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<a href="#" class="ct-image-box"> <div class="ct-image-box__media"> <div class="inner"><img src="assets/images/demo-content/image-01.jpg" alt="Indoor Parties"/></div> <div class="ct-image-box__hover"> <div class="ct-image-box__inner"> <button class="btn btn-default-o">See All </button> </div> </div> </div> <h3 class="ct-image-box__title"><span class="ct-image-box__colored">18 </span><span>Indoor Parties</span></h3> </a> |
Screenshot
Image Box
Back to top
Was this article helpful ?
Pricing Box
Present your prices with sweet and fun tables by just adding this simple HTML markup:
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="ct-pricing-box"> <div class="ct-pricing-box__inner"> <div class="ct-pricing-box__header"> <div class="ct-pricing-box__skew-outer"></div> <div class="ct-pricing-box__skew-inner"></div> <div class="ct-pricing-box__price"><span>$250</span></div> <h4 class="ct-pricing-box__title">Fantastic</h4> </div> <div class="ct-pricing-box__content"> <ul class="ct-pricing-box__list"> <li>Personalized Games</li> <li>Crazy Relay Races</li> <li>Parachute Games</li> <li>Wacky Sports Games</li> <li>Airbounce Games</li> <li>Obstacle Course Inflatable</li> </ul> <div class="clearfix"></div><a href="book-party.html" class="btn btn-default-o--type2">Read More</a> </div> </div> </div> |
Screenshot
Pricing Box
Back to top
Was this article helpful ?
Party Box
Present all the awsome parties you can made by using this party box markup.
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<figure class="ct-party-box"> <div class="ct-party-box__inner"> <div class="ct-party-box__media"><a href="party-1.html" class="btn btn-accent mfp-ajax">Quick View</a><img src="assets/images/demo-content/party-01.jpg" alt="Balloons and Bubbles Party"/> </div> <div class="ct-party-box__content"> <h3 class="ct-party-box__header"><span>Balloons and Bubbles Party</span></h3> <div class="ct-party-box__price"> <span>$289</span> </div> <p>Hire a ballon artist to craft your guest's favorite animals.</p><a href="book-party.html" class="btn btn-motive">Choose This</a> </div> </div> </figure> |
Screenshot
Party Box
Back to top
Was this article helpful ?
Feature Box
if you want to tell something about your company or yourself you can use this feature box. It can’t be easier! The only thing you need to do is to use the markup you can see down below.
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="ct-feature-box"> <div class="ct-feature-box__header"> <h2 class="ct-feature-box__heading">How We<b>Behave</b></h2> </div> <div class="ct-feature-box__inner"><span class="ct-feature-box__number">/01</span> <div class="ct-feature-box__image"> <div class="inner"><img src="assets/images/demo-content/feature-01.png" alt="How We Behave"/></div> </div> <h4 class="ct-feature-box__title">Our commitment to excellence</h4> <div class="ct-feature-box__content"> <p>Is demonstrated most meaningfully in the examples we set for each other and our young guests. </p> <div class="ct-feature-box__hidden ct-js-hidden"> <div class="inner"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> <button class="btn btn-motive" data-alternate-text="Show Less">Read More </button> </div> </div> |
Screenshots
Feature Box
JavaScript
|
1 2 3 4 5 6 7 8 9 10 |
/* Party Read More */ (read_more_wrapper = function() { var box; box = $('.ct-party-box--simple, .ct-feature-box'); if (box.length) { return box.each(function() { return show_more($(this)); }); } })(); |
You can find this code on path:
<script src=”../assets/js/slick/js/main.js”></script>
Back to top
Was this article helpful ?
Packages
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="ct-party-detailed__container"> <div class="ct-party-detailed ct-party-detailed--default"> <div class="ct-party-detailed__media"><img src="assets/images/demo-content/package-01.jpg" alt="Coloring Party With Clowns Up To 3 Hours"/> </div> <div class="ct-party-detailed__body"> <h4 class="ct-party-detailed__title">Coloring Party With Clowns Up To 3 Hours</h4> <div class="ct-party-detailed__price"><span>$250</span> </div> <div class="ct-party-detailed__content">Etiam nec aliquet dolor, sed egestas est. Sed vestibulum consequat lorem, et tinci dunt ligula volutpat non. Nam id convallis mauris. </div><a href="package-detail-1.html" class="btn btn-motive">See Package</a> </div> </div> </div> |
Screenshots
Packages
Back to top
Was this article helpful ?
Magnific Popup
You can create 3 variations of Magnific Popups by adding one of this custom classes:
Magnific Popup custom classes:
1. mfp-ajax – ajax popup
2. mfp-image – image-popup
3. mfp-video – video popup
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="container ct-party-detailed__container"> <div class="ct-party-detailed ct-party-detailed--popup"> <div class="row"> <div class="col-md-6"> <div class="ct-party-detailed__media"> <div class="ct-party-detailed__time"> <div class="ct-party-detailed__number">90</div> <div class="ct-party-detailed__minutes">minutes</div> </div> <img src="assets/images/demo-content/party-01.jpg" alt="Outdoor Party With Costumes For Kids Between 7-12" /> </div> </div> <div class="col-md-6"> <div class="ct-party-detailed__body"> <h4 class="ct-party-detailed__title">Outdoor Party With Costumes For Kids Between 7-12</h4> <div class="ct-party-detailed__price">$190</div> <div class="ct-party-detailed__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div><a href="#" class="btn btn-motive">See Package</a> </div> </div> </div> </div> </div> |
Screenshot
Popup
Magnific Popup Documentation can be found here.
Files are bundled inside confetti.min.js & style.css
* This Block show only the way how to create the Popup element. To make it work you need also to create the sctructure that will activate it. The Popup above was created for the Party Box.
Back to top
Was this article helpful ?
Pagination
To add pagination, use the simple HTML markup:
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="ct-pagination ct-blog__pagination"> <a href=blog2.html class="btn btn-arrow btn-arrow-left"> <svg></path> </svg><span class="btn-arrow__text">Previous Posts</span> </a href=blog2.html> <a href=blog2.html class="btn btn-arrow btn-arrow-right"><span class="btn-arrow__text">Next Posts</span> <svg width="31" height="24" viewbox="0 0 31 24" class="btn-arrow__svg"> <path></path> </svg> </a href=blog2.html> </div> |
Screenshot
Pagination
Back to top
Was this article helpful ?
Blog Posts
In My Confetti - Kids Party Planner we have 5 types of blog posts you can created using this markups:
Blog Image
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--image"> <div class="ct-blog-post__media"><img src="assets/images/demo-content/blog-05.png" alt="Beautiful Party With Fairies & Lillies"/></div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">17</span><span class="ct-blog-post__month">august</span></div> <div class="ct-blog-post__description">By <a href="blog-post-5.html" class="ct-blog-post__author">Carmen Robin</a><a href="blog-post-5.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-5.html" class="ct-blog-post__comments"><span>15 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">Beautiful Party With Fairies & Lillies</h3> <div class="ct-blog-post__content"> <p>Spoon the marshmallows into the first color of Jell-O powder that you want to make. Close the bag tightly and shake to coat the marshmallow.</p> </div><a href="blog-post-5.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog image
Blog Slider
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--slider"> <div class="ct-blog-post__media"> <div data-arrows="false" data-autoplay="true" data-fade="true" data-dots="true" class="ct-slick ct-js-slick"> <div class="item"><img src="assets/images/demo-content/blog-06.png" alt="The Cupcakes are coming"/></div> <div class="item"><img src="assets/images/demo-content/blog-05.png" alt="The Cupcakes are coming"/></div> <div class="item"><img src="assets/images/demo-content/blog-04.png" alt="The Cupcakes are coming"/></div> <div class="item"><img src="assets/images/demo-content/blog-03.png" alt="The Cupcakes are coming"/></div> </div> </div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">13</span><span class="ct-blog-post__month">august</span></div> <div class="ct-blog-post__description">By <a href="blog-post-9.html" class="ct-blog-post__author">Arya Stark</a><a href="blog-post-9.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-9.html" class="ct-blog-post__comments"><span>12 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">The Cupcakes are coming</h3> <div class="ct-blog-post__content"> <p>Can you tell we are excited about graduation this year? This oh-so-simple party idea will have you looking like the smartest (and most clever) hostess in town!</p> </div><a href="blog-post-9.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog slider
Blog Audio
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--audio"> <div class="ct-blog-post__media"> <div class="embed-responsive embed-responsive-square"> <iframe src="http://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/97869394&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;visual=true" class="embed-responsive-item"></iframe> </div> </div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">12</span><span class="ct-blog-post__month">august</span></div> <div class="ct-blog-post__description">By <a href="blog-post-10.html" class="ct-blog-post__author">Lindsey Stirling</a><a href="blog-post-10.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-10.html" class="ct-blog-post__comments"><span>9 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">Elements</h3> <div class="ct-blog-post__content"> <p>Skewers (easiest) or Cake Wire (to shape the cake wire like a rainbow, an adult will have to cut the wire and bend it like an arc to fit the bowl or cup that you use.)</p> </div><a href="blog-post-10.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog Audio
Blog Quote
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--quote"> <div class="ct-blog-post__media"> <div class="ct-blog-post__quote"> <div class="ct-blog-post__quote-inner"> <div class="ct-blog-post__quote-content">"You Shall Not Pass"</div> <div class="ct-blog-post__quote-author">- Gandalf</div> </div> </div> </div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">29</span><span class="ct-blog-post__month">July</span></div> <div class="ct-blog-post__description">By <a href="blog-post-12.html" class="ct-blog-post__author">J. R. R. Tolkien</a><a href="blog-post-12.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-12.html" class="ct-blog-post__comments"><span>56 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">The Fellowship of the Ring</h3> <div class="ct-blog-post__content"> <p>Can you tell we are excited about graduation this year? This oh-so-simple party idea will have you looking like the smartest (and most clever) hostess in town!</p> </div><a href="blog-post-12.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog Quote
Blog Video
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<article itemprop="blogPost" itemscope="itemtype" itemtype="http://schema.org/BlogPosting" class="ct-blog-post ct-blog-post--video"> <div class="ct-blog-post__media"> <div class="embed-responsive embed-responsive-16by9"> <iframe src="https://player.vimeo.com/video/44332989?title=0&byline=0&portrait=0" class="embed-responsive-item"></iframe> </div> </div> <div class="ct-blog-post__body"> <div itemprop="dateCreated" class="ct-blog-post__date"><span class="ct-blog-post__day">14</span><span class="ct-blog-post__month">august</span></div> <div class="ct-blog-post__description">By <a href="blog-post-8.html" class="ct-blog-post__author">Miles Nathan</a><a href="blog-post-8.html" class="ct-blog-post__category"><span>Food & Drinks</span></a><a href="blog-post-8.html" class="ct-blog-post__comments"><span>0 Comments</span></a></div> <h3 class="h4 ct-blog-post__title">Tesco Mobile Cupcake</h3> <div class="ct-blog-post__content"> <p>Spoon the marshmallows into the first color of Jell-O powder that you want to make. Close the bag tightly and shake to coat the marshmallow.</p> </div><a href="blog-post-8.html" class="btn btn-gray-o" itemprop="url">Read Article</a> </div> </article> |
Screenshot
Blog Video
Back to top
Was this article helpful ?
Contact Form
All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :
|
1 2 |
$to = "mail@example.com"; $from = "mail@example.com"; |
That’s it!
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="ct-form-section ct-form-section--type2"> <h2 class="h4 ct-form-section__title text-left">Get In Touch</h2> <form role="form" action="assets/form/send.php" method="POST" data-email-subject="My Confetti" class="ct-js-validate ct-form-section__form"><span class="ct-form-section__header">We promise to get back to you within 48h.</span> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <input type="text" placeholder="Name" id="name" name="field[]" required="required" class="form-control"/> <label for="name" class="sr-only">Name</label> </div> <div class="form-group"> <input type="email" placeholder="Email" id="email" name="field[]" required="required" class="form-control"/> <label for="email" class="sr-only">Email</label> </div> <div class="form-group"> <input type="text" placeholder="Website" id="website" name="field[]" required="required" class="form-control"/> <label for="website" class="sr-only">Website</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <textarea placeholder="Message" id="message" rows="7" type="text" required="required" name="field[]" class="form-control"></textarea> <label for="message" class="sr-only">Message</label> </div> </div> <div class="col-xs-12"> <button type="submit" class="btn btn-motive">Send </button> </div> </div> <div role="alert" class="successMessage alert alert-success alert-dismissible"> <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>Your Email has been sent successfully. </div> <div role="alert" class="errorMessage alert alert-danger alert-dismissible"> <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>Ups, something went wrong. </div> </form> </div> |
Screenshot
Contact Form
Options (can be changed in HTML) :
- Mail Subject – just change value in :
- Success Message – change successMessage div content
- Error Message – change errorMessage div content
Back to top
Was this article helpful ?
Newsletter
HTML markup
|
1 2 3 4 5 6 |
<form class="ct-newsletter__form form-group from-inline"> <label for="newsletter-input" class="ct-newsletter__label">E-mail Address</label> <input type="email" id="newsletter-input" placeholder="Enter your E-mail" required class="ct-newsletter__input form-control"> <button type="submit" class="btn btn-default ct-newsletter__button"><span class="ct-newsletter__submit">Subscribe</span><span class="ct-newsletter__wait"><i class="fa fa-spinner"></i></span> </button><span class="ct-newsletter__subscribed">Thank you for subscribing</span> </form> |
Screenshots
Newsletter
Back to top
Was this article helpful ?
Search
HTML markup
|
1 2 3 4 5 |
<form class="ct-search form-group"> <input id="mobile-search" placeholder="Search..." required="required" class="form-control"/> <label for="mobile-search" class="sr-only">Search...</label> <button type="submit"><i class="fa fa-search"></i></button> </form> |
Screenshots
Search form
Back to top
Was this article helpful ?
Booking Party Form
The configuration process is the same as in the Contact form. This form will let your customers send informations to you abouth the party they want to book.
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 |
<main> <section class="ct-form-section"> <h2 class="h4 ct-form-section__title">Feel free to phone us at <a href="tel:0123456789">(012) 345 6789</a> to get started right away! Or use the form below:</h2> <form role="form" action="assets/form/send.php" method="POST" data-email-subject="My Confetti" class="ct-form-section__form ct-js-validate"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <input type="text" placeholder="Name" id="name" name="field[]" required="required" class="form-control"/> <label for="name" class="sr-only">Name</label> </div> <div class="form-group"> <input type="email" placeholder="Email" id="email" name="field[]" required="required" class="form-control"/> <label for="email" class="sr-only">Email</label> </div> <div class="form-group"> <input type="tel" placeholder="Phone" id="phone" name="field[]" required="required" class="form-control"/> <label for="phone" class="sr-only">Phone</label> </div> <div class="form-group"> <input type="text" placeholder="Address" id="address" name="field[]" required="required" class="form-control"/> <label for="address" class="sr-only">Address</label> </div> <div class="form-group"> <input type="text" placeholder="City" id="city" name="field[]" required="required" class="form-control"/> <label for="city" class="sr-only">City</label> </div> <div class="form-group"> <input type="text" placeholder="State" id="state" name="field[]" required="required" class="form-control"/> <label for="state" class="sr-only">State</label> </div> <div class="form-group"> <input type="text" placeholder="Zipcode" id="zipcode" name="field[]" required="required" class="form-control"/> <label for="zipcode" class="sr-only">Zipcode</label> </div><span class="ct-form-section__header">Schedule Party For:</span> <div class="row"> <div class="col-md-4"> <div class="form-group"> <select id="month" placeholder="Month" required="required" name="field[]" class="ct-select"> <option disabled="disabled" selected="selected" hidden="hidden" value="">Month</option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="Nobember">Nobember</option> <option value="December">December</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <select id="day" placeholder="Day" required="required" name="field[]" class="ct-select"> <option disabled="disabled" selected="selected" hidden="hidden" value="">Day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <select id="time" placeholder="Time" required="required" name="field[]" class="ct-select"> <option disabled="disabled" selected="selected" hidden="hidden" value="">Time</option> <option value="6:00 AM">6:00 AM</option> <option value="7:00 AM">7:00 AM</option> <option value="8:00 AM">8:00 AM</option> <option value="9:00 AM">9:00 AM</option> <option value="10:00 AM">10:00 AM</option> <option value="11:00 AM">11:00 AM</option> <option value="12:00 PM">12:00 PM</option> <option value="1:00 PM">1:00 PM</option> <option value="2:00 PM">2:00 PM</option> <option value="3:00 PM">3:00 PM</option> <option value="4:00 PM">4:00 PM</option> <option value="5:00 PM">5:00 PM</option> <option value="6:00 PM">6:00 PM</option> <option value="7:00 PM">7:00 PM</option> <option value="8:00 PM">8:00 PM</option> <option value="9:00 PM">9:00 PM</option> </select> </div> </div> </div> <div class="form-group"> <input type="number" placeholder="Number of Children" id="number-of-children" name="field[]" required="required" class="form-control"/> <label for="number-of-children" class="sr-only">Number of Children</label> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input type="text" placeholder="Event Location" id="event-location" name="field[]" required="required" class="form-control"/> <label for="event-location" class="sr-only">Event Location</label> </div> <div class="form-group"> <input type="text" placeholder="Event Theme" id="event-theme" name="field[]" required="required" class="form-control"/> <label for="event-theme" class="sr-only">Event Theme</label> </div> <div class="form-group"> <input type="number" placeholder="Number of Guests" id="number-of-guests" name="field[]" required="required" class="form-control"/> <label for="number-of-guests" class="sr-only">Number of Guests</label> </div> <div class="form-group"> <input type="text" placeholder="Guests Age Range" id="guests-age-range" name="field[]" required="required" class="form-control"/> <label for="guests-age-range" class="sr-only">Guests Age Range</label> </div><span class="ct-form-section__header">Event Budget</span> <div class="ct-range-slider__wrapper"> <div data-range_min="1" data-range_max="9999" data-cur_min="850" data-cur_max="9999" class="ct-range-slider"> <div class="ct-range-slider__bar"></div> <div class="ct-range-slider__left-grip ct-range-slider__grip"> <div class="ct-range-slider__left-label ct-range-slider__label"></div> </div> <div class="ct-range-slider__right-grip ct-range-slider__grip"> <div class="ct-range-slider__right-label ct-range-slider__label"></div> </div> </div> </div> <div class="form-group"> <select id="how-did-you-hear" placeholder="How did you hear about us?" required="required" name="field[]" class="ct-select"> <option disabled="disabled" selected="selected" hidden="hidden" value="">How did you hear about us?</option> <option value="Internet">Internet</option> <option value="Friends">Friends</option> <option value="Family">Family</option> <option value="Newspaper">Newspaper</option> </select> </div><span class="ct-form-section__header">Planning Options (Check all that apply)</span> <div class="row"> <div class="col-sm-6"> <div class="checkbox-group"> <input type="checkbox" placeholder="Girlfriend Getaway" id="girlfriend-getaway" name="field[]" class="hidden"/> <label for="girlfriend-getaway">Girlfriend Getaway</label> </div> <div class="checkbox-group"> <input type="checkbox" placeholder="Spa Party" id="spa-party" name="field[]" class="hidden"/> <label for="spa-party">Spa Party</label> </div> <div class="checkbox-group"> <input type="checkbox" placeholder="Children's Party" id="childrens-party" name="field[]" class="hidden"/> <label for="childrens-party">Children's Party</label> </div> <div class="checkbox-group"> <input type="checkbox" placeholder="Baby Shower" id="baby-shower" name="field[]" class="hidden"/> <label for="baby-shower">Baby Shower</label> </div> </div> <div class="col-sm-6"> <div class="checkbox-group"> <input type="checkbox" placeholder="School Event" id="school-event" name="field[]" class="hidden"/> <label for="school-event">School Event</label> </div> <div class="checkbox-group"> <input type="checkbox" placeholder="Corporate Event" id="corporate-event" name="field[]" class="hidden"/> <label for="corporate-event">Corporate Event</label> </div> <div class="checkbox-group"> <input type="checkbox" placeholder="Social Event" id="social-event" name="field[]" class="hidden"/> <label for="social-event">Social Event</label> </div> <div class="checkbox-group"> <input type="checkbox" placeholder="Adult Birthday Party" id="adult-birthday-party" name="field[]" class="hidden"/> <label for="adult-birthday-party">Adult Birthday Party</label> </div> </div> </div> </div> <div class="col-xs-12"> <div class="form-group"> <textarea placeholder="Questions or Comments" id="questions-or-comments" rows="8" type="text" required="required" name="field[]" class="form-control ct-u-margin-top-15"></textarea> <label for="questions-or-comments" class="sr-only">Questions or Comments</label> </div> <button type="submit" class="btn btn-motive">Book Now </button> <div role="alert" class="successMessage alert alert-success alert-dismissible"> <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>Your Email has been sent successfully. </div> <div role="alert" class="errorMessage alert alert-danger alert-dismissible"> <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>Ups, something went wrong. </div> </div> </div> </form> </section> </main> |
Screenshot
Booking Party Form
JavaScript
All needed scripts you will find in confetti.min.js file.
* More information about Booking form elements you will find in next Blocks
Back to top
Was this article helpful ?
Select
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="form-group"> <select id="month" required="required" class="ct-select"> <option disabled="disabled" selected="selected" hidden="hidden" value="">Month</option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="Nobember">Nobember</option> <option value="December">December</option> </select> </div> |
Screenshot
Select
JavaScript
|
1 2 3 4 5 6 7 8 |
/* Selectize */ if ($().selectize) { $('.ct-select').each(function() { $(this).selectize({ create: true }); }); } |
Selectize Documentation can be found here Files are bundled inside confetti.min.js & style.css
Back to top
Was this article helpful ?
Checkbox
HTML markup
|
1 2 3 4 |
<div class="checkbox-group"> <input type="checkbox" id="girlfriend-getaway" class="hidden"/> <label for="girlfriend-getaway">Girlfriend Getaway</label> </div> |
Screenshot
Checkbox
Back to top
Was this article helpful ?
Range Slider
HTML markup
|
1 2 3 4 5 6 7 8 9 |
<div data-range_min="1" data-range_max="9999" data-cur_min="850" data-cur_max="9999" class="ct-range-slider"> <div class="ct-range-slider__bar"></div> <div class="ct-range-slider__left-grip ct-range-slider__grip"> <div class="ct-range-slider__left-label ct-range-slider__label"></div> </div> <div class="ct-range-slider__right-grip ct-range-slider__grip"> <div class="ct-range-slider__right-label ct-range-slider__label"></div> </div> </div> |
Extra data attributes
- data-currency=”$” – set the currency
- data-postfix=”false” – set the currency position (after or before the price)
Screenshot
Range Slider
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* nst Slider */ (nst_slider = function() { var range_slider; range_slider = $('.ct-range-slider'); return range_slider.each(function() { var that; that = $(this); return that.nstSlider({ 'left_grip_selector': '.ct-range-slider__left-grip', 'right_grip_selector': '.ct-range-slider__right-grip', 'value_bar_selector': '.ct-range-slider__bar', 'value_changed_callback': function(cause, leftValue, rightValue) { that.find('.ct-range-slider__left-label').text(leftValue); return that.find('.ct-range-slider__right-label').text(rightValue); } }); }); })(); |
For Range Slider we are using a plugin called nstSlider, you can find documentation here Files are bundled inside confetti.min.js & style.css
Back to top
Was this article helpful ?
Shop Locator plugin
Back to top
Was this article helpful ?
Sources & Credits
The following sources and files have been used to build up this theme
Twitter Bootstrap – http://twitter.github.com/bootstrap/
jQuery – http://www.jquery.com
Back to top
Was this article helpful ?