Ja is a HTML/CSS template based on Bootstrap 4 framework. It allows to built modern, fast and mobile friendly personal webistes. It is perfect as a virtual busiess card or online resume / CV.
This is the base of each HTML file:
Template supports all features of Bootstrap 4 Grid System - go to Bootrstrap's page and check how does it work.
Neat & Useful elements to create content.
All HTML Tags made to create nice texts.
Phasellus et sagittis odio. Sed in enim condimentum, lacinia metus id, sollicitudin libero. In ac ultricies justo.
Maecenas a risus quis ipsum convallis fringilla in ut magna. Phasellus et sagittis odio. Sed in enim condimentum, lacinia metus id, sollicitudin libero. In ac ultricies justo.
Curabitur sit amet turpis eu diam luctus viverra. Sed viverra ornare ex, quis lobortis diam vehicula a. In imperdiet est tristique, malesuada odio quis, volutpat ante. Nulla ullamcorper, nisl sed faucibus posuere, dui turpis mattis turpis, in porttitor massa odio nec sapien.
It was the best coach I’ve ever had!
Create nice donut charts - set your components look by
Easy & effectife way pricing tables. Add
featured class to highlight the table.
There are few types of media items.
It is also required to put video modal html code somewhere before the
Really solid & creatve front-end developer and great teammate!
Easy & effectife way to present code. More at Bootstrap's 4 page.
<span></span> should be wrapped as inline.
<p>Sample text here...</p> <p>And another line of sample text here...</p>
Thanks to the prepared components you will be able to create really useful and easy to use websites. Let's start exploring them!
Carousel is a component perfect to preset any kind of content like photos, icons, texts, etc. Go to the Slick's page to see full documentation of this component.
To validate the form please add
data-validate attribute and
required atribute to
Modal may be open by a button or any link element.
It is also required to put modal html code somewhere before the
Below are listed important configuration options for whole template.
Primary and secondary color depends on picked color scheme.
It is possible to add any color form Available Colors section by
Similar to text colors it is possible to add backgorund color from Available Colors section by
For dark background colors it is necessary to add
dark class to adjust font colors and other styles. Sometimes, if inside dark element is placed element with light background you should add
light class to such element.
More useful helper classes are listed on Bootstrap's 4 website!
The template includes some configurable elements - here you will find informations how to use them!
The template allows to add really cool animations for each of html elements. Let's check how to use it!
This animation fires when element appears in the browser viewport. To add such animation you need to place
.animated class in the animted element and preciese which animation do you want to use by
data-animationattribute. It is also possible to add some delay to the animation (in ms) by
To configure Google Map it is necessary to set latitude and longitude parameters by
data-longitude attributes of
#google-map element. To get it please visit site like this.
To configure booing form please open
offer-form.php file from
/assets/php/ directory and go the line with an e-mail address to change it to your own - like this.
After that you will recieve the messages from your websites to this e-mail address.
If you want to use local scroll somewhere in the content please add
data-local-scroll attribute in the parent tag of a link to local element.
The template was made with NPM package manager and Grunt.js task manager.
The template includes two
This file includes necessary grunt tasks to make developemnt process nice and easy. Run
npm install task to install them.
This file includes all plugins used in this theme. To install those plugins you need to run
npm install as previously but after that you have to run
grunt copy and
grunt removetasks to move them into right directory
The package includes some grunt tasks to make development process easier:
grunt sasstasks after each .scss file change
grunt sass- compiles all .scss files
grunt validation- makes HTML5 validation of each .html file
Check all template's assets which was usead while development proccess.
The template uses couple of CSS files:
CSS Theme has - was divided into some important sections:
CSS Theme is also available in couple of different color versions:
CSS files are generated thanks to well organized SCSS files.
theme-[color-scheme].scssis a main SCSS file where main colors have been set.
_base.cssfile is a base for each theme which imports other partials.
_config.cssfile with SASS variables which configure colors, fonts and more.
On the end of the body of each html file there are placed JavaScrpt files:
Third-part plugins- third-part plugins sources
https://maps.googleapis.com/maps/api/jsGoogle Map API
The template includes few PHP scripts:
/php/contact-form.php- configuration file for contact form
The template is so awesome because of some third-part plugins and external assets!
npm install; grunt copy; grunt removetasks in
Some images used in the template was free and have been included in a package. Rest of them was blurred becouse of licensing reasons.
Let's check what has changed since the first version...