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
Contact Form
Template comes with ready to use: Contact Form Newsletter Form All needed files are in /form directory. Remember to includeon page. To configure form just edit form/form.php and change e-mails to your own:
|
1 2 |
$to = "mail@example.com"; $from = "mail@example.com |
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 |
<div class="ct-contactForm"> <div class="successMessage alert alert-success" style="display: none"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Thank You! </div> <div class="errorMessage alert alert-danger" style="display: none"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Ups! An error occured. Please try again later. </div> <form role="form" action="./assets/form/send.php" method="post" class="contactForm validateIt" data-email-subject="Contact Form" data-show-errors="true"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input id="contact_name" placeholder="Name" required="" type="text" name="field[]" class="form-control"> <label for="contact_name">Name</label> </div> <div class="form-group"> <input id="contact_email" placeholder="Email" required="" type="email" name="field[]" class="form-control"> <label for="contact_email">Email</label> </div> <div class="form-group"> <input id="contact_subject" placeholder="Subject" required="" type="text" name="field[]" class="form-control"> <label for="contact_subject">Subject</label> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <textarea id="contact_message" placeholder="Message" class="form-control" rows="8" name="field[]" required=""></textarea> <label for="contact_message">Message</label> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <button type="submit" class="btn ct-btn--perspective btn-primary btn-lg text-uppercase pull-right"><i class="fa fa-paper-plane"></i> Send Message </button> </div> </div> </form> </div> |
Javascript
4.1. Javascrpt library and files All javascripts are placed in folder /js. In main.js file we implement all functions calls. This theme uses following Javascript files: Bootstrap v 3 framework (powerful front-end framework for faster and easier web development) jQuery v1.10.2 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform […]
Features
3.1. Media Sections Orlando supports media sections with Slice effect, Push effect, Particles effect, slider effect, Parallax, KenBurns effect and videos. 3.1.1. Slice Effect:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--This is the slice effect--> <header class="ct-intro-topImage"> <div class="bg-img"><img src="{{@blog.cover}}" alt="Background Image"/></div> <div class="ct-intro-title"> <h1 class="ct-u-colorWhite ct-fw-600">welcome. <small class="ct-u-colorMotive ct-fw-300">We have a passion for design and code</small> </h1> </div> <div class="bg-img"><img src="{{@blog.cover}}" alt="Background Image"/></div> </header> <button class="trigger" data-info="Continue"><span>Trigger</span></button> <script type="text/javascript" src="{{asset "js/intro-effects/classie.js"}}"></script> <script type="text/javascript" src="{{asset "js/intro-effects/slice.js"}}"></script> |
Slice Effect is in sliced_effect.hbs file. If you want to have this effect, just make available in home.hbs file. 3.1.2. Push Effect:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!--This is the push effect--> <header class="ct-intro-topImage"> <div class="bg-img"><img src="{{@blog.cover}}" alt="Background Image"/></div> <div class="ct-intro-title"> <h3 class="ct-u-colorMotive ct-fw-600 ct-u-hrMid"> <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small> <span class="ct-fw-300">User</span> Xperiences </h3> <p class="ct-u-colorWhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit dont<br>emet suspendisse, condimentum porttitor cursus duis neclim.</p> </div> </header> <button class="trigger" data-info="Continue"><span>Trigger</span></button> <script type="text/javascript" src="{{asset "js/intro-effects/classie.js"}}"></script> <script type="text/javascript" src="{{asset "js/intro-effects/push.js"}}"></script> |
Push Effect is in sliced_effect.hbs file. If […]
CSS Files and Structure
If you would like to edit the color, font, or style of any elements, you would do the following:
|
1 |
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 […]