help file of paidjoo bus...st builder landing page
TRANSCRIPT
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
1/13
Works of Wisnu
Start
HTML structure
CSS FIles and Structure
Elements
Javascript
PHP File
PSD File
Sources and Credits
1. Paidjoo Business and ListBuilder Landing PageResponsive business and list builder landing page built with Bootstrap
Paidjoo Business andList Builder LandingPageResponsive business and list builder landing page built with
Bootstrap by Works of Wisnu.
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
2/13
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
3/13
24.
25.
26.
27.
28.
29.
30.
31. Your Tagline Goes Here
32.
33.
34.
35. Lorem ipsum dolor sit amet... .
36. John Doe, United Kingdom
37.
38. ...
39. ...40.
41.
42. ...
43. ..
44.
45.
3. CSS FIles and Structure
There are some CSS Files used in this theme. And here are the short explanations about them :
bootstrap.css - The Twitter Bootstrap Framework, do not edit this file.
bootstrap-responsive.css - The Twitter Bootstrap Framework for Responsive layout, do not edit
this file.
style.css - This is the main CSS file that controls almost everything on the Green Loan layout
style2.css - This is the main CSS for Blue List layout
style-flat1.css - This is the main CSS for Flat Green Loan layout
style-flat2.css - This is the main CSS for Flat Blue List layout
style-responsive.css - The resposive style for all layouts above
flexslider.css - The style for jQuery Flexslider plugin Please note that this theme has a bit
custom flexslider style on the header of each layout
prettyPhoto.css - The style for jQuery Pretty Photo lightbox plugin
animate.min.css - The style for making some effects on Head Banner and Slider
Here is the presets of the Green Loan layout (style.css):
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
4/13
1. /************************************************************************
**********
2.
3. Project Name: Green Skeuomorph Style for Paidjoo Landing Page
4. Project Description: Paidjoo is a business, corporate landing pag
e, and subscribe list page
5. Author: xWisnux (Works of Wisnu)
6. Author URI: http://www.worksofwisnu.com
7. Version: 1.0.0
8.
9. *************************************************************************
*********/
10. @font-face, Icon Fonts style
11.
12. /* General */
13.
14. body, list, paragraph, headings, link, section, .centered, .uppercase, .rollover
15.
16. /* Gradient BG */
17. .green-gradient, .blue-gradient
18.
19. /* Buttons */
20. /btn, .btn-small, .btn-yellow
21.
22. /* Social Buttons */
23. .social, .social li, .social li a
24.
25. /* Alerts */
26. .alert .alert-icon, .alert-success, .alert-info, .alert-error, .form-erro
r-message
27.
28. /* #Top Header Section */
29.
30. top-header, .head-social, .head-email
31.
32. /* #Head Content Section */
33. head-content, .chat-box, .login-box
34.
35. /* #Head Banner Section */
36. head-banner, .tagline, .sub-tagline, .testi, .author, .video-button, .hea
dbanner-form, .form-spacer, .headbanner-form input, .headbanner-form labe
l, .headbanner-form select, .small-form-text, .layout-slider
37.
38. /* #Marketing Section */39. marketing, marketing .title, .marketing-content, .marketing-icon
40.
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
5/13
41. /* #Featurettes Section */
42. featurettes, .dark-section, .dark-section .title, .dark-section h3, .dar
k-section span*, .dark-subtitle, .checklist, .green-list, .blue-list
43.
44. /* #Lower Content Section */
45. lower-content, lower-content .title, lower-content h3, .subtitle, .toggl
e-content, .toggle-group, .toggle-heading .toggle-button, .toggle-faq, .t
oggle-inner, .map, .contact-info p, .contact-info li, .green-contact-info-icon, .blue-contact-info-icon, .flexslider-content-testimonial, .flexsl
ider-content-testimonial ul.testimonials-list li
46.
47. /* #Breakline Section */
48. breakline, breakline h3, .counter, .clients
49.
50. /* #Footer Section */
51. footer, .copyright, .footer-subscribe, .footer-subscribe input, .footer-s
ubscribe-text, .toTop52.
4. ElementsBelow are some example codes to make the elements used in this template:
4.1. Head Banner Testimonial Slider
1.
2.
3.
4. Lorem ipsum dolor sit amet... .
5. John Doe, United Kingdom
6.
7.
8. ...
9. ...
10.
11.
12.
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
6/13
4.2. Dark Section Featurettes Slider
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12. Some Feature Here?13. some description about your special se
rvice here
14. Lorem ipsum dolor sit amet...
.
15.
16.
17. ...
18. ...
19.
20.
21.
4.3. Lower Content Testimonial Slider
1.
2.
3.
4.
5.
Lorem ipsum dolor sit amet... .
6. John Doe / Some Profession
7.
8. ...
9. ...
10.
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
7/13
11.
4.4 Toggle FAQ
1.
2.
3.
4.
5. QMaecenas faucibus mollis interdum?
6.
7.
8.
Cras mattis consectetur purus sit amet fermentum. Sed posuere co
nsectetur est at lobortis. Donec ullamcorper nulla non metus auctor fring
illa. Nulla vitae elit libero, a pharetra augue.
9.
10.
11.
12.
13.
14. QDuis mollis, est non commodo luctus, nisi erat porttitor ligula?15.
16.
17.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra a
ugue. Cum sociis natoque penatibus et magnis dis parturient montes, nasce
tur ridiculus mus.
18.
19.
20. ...21. ...
22.
If you want to apply the toggle without "Q" marks, simply remove the span .toggle-faq .
4.5. Clients Counter on Breakline
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
8/13
1.
2.
3. 1
4.
5.
6. 2
7.
8.
9. 3
10.
11.
12. 4
13.
14.
15. 5
16.
17.
5. Javascript
This theme uses several scripts many of which are documented within the theme's code. If you're a
developer, you will find this particularly useful.
jQuery
bootstrap.min.js - Minified version of Bootstrap jQuery plugins
Gmap3 - jQuery Google Map
jQuery EasingFlexslider
prettyPhoto, and
jQuery Input Slider (jSlider)
All those jQuery plugins controled under paidjoo.js, except the classie.js(take a look at the javascript
code before the closing of body tags).
6. PHP File
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
9/13
There are 3 PHP files included in this theme, they are subscribe.php, and footer-subscribe.php
Subscribe
subscribe.php used in List template layout(Blue) on the head banner form and will make a list of
subscriber data such as name, email, and telephone into a text file called subscriber-data.txt, this file
will placed in your server folder. Below is the example code to make a subscribe form :
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. ... The Alerts here ...
27.
28.
29.
30.
31.
32.
33.
34. 35.
36.
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
10/13
37. By clicking the buttons above, you certify tha
t you have read & agreed to our Privacy Policy and Terms. See Rates & Fee
s.
38.
39.
40.
Footer Subscribe
footer-subscribe.php used in Loan template layout(Green) on the footer subscribe form and will make
a list of subscriber email address only into a text file called list.txt, this file will also placed in your
server folder. Below is the example code to make a footer subscribe form :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12. ... The Alerts here ...
13.
14.
15.
16.
17. * Don't worry to subscribe. We hate spam
too!
18.19.
All the forms above will only works with some javascript, and you can
find the javascript on the paidjoo.js file inside the js folder. This
javasript works for the validation of the forms and the execution of the
php files. Note, Why I didn't made the PHP file for loan form is
because I only provide the place-holder as every loan/lender site has
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
11/13
it own "logic"
Contact
contact.php used in contact.html file(Contact Page). Below is the example code to make a contact
form :
1.
2.
3.
4.
5. .. The alerts here ..
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.
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
12/13
t" value="Submit">
35.
36.
37.
38.
39.
7. PSD File
I've included 2 psd files with this theme. The PSD files are well
documented on the groups and layered
8. Sources and Credits
I've used the following images, icons or other files as listed.
Animate CSS
Soft Media Icons vol.1 and 2
Linecons
Icon Fonts and Some Icons (Entypo)
Atmosphere Apps background
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to
help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
If you have a more general question relating to the themes on Themeforest, you might consider
visiting the forums and asking your question in the "Item Discussion" section.
Fitryan Wisnu Pratama
-
8/9/2019 Help File of Paidjoo Bus...St Builder Landing Page
13/13