Introducing Icook - HTML Theme

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.

Thank you for purchasing our product! We are very glad that you have decided on our HTML theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email hi@theslathemes.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us a email.

Modification

To the Top

Icook has 5 HTML Files:

  • index.html - Home Page
  • about.html - About us page
  • post.html - Single blog post
  • gallery.html - Gallery items page
  • contact.html - Contact page

A screen of the Home Page:

theme

All the themes elements like the Testimonial, event, services, skills etc. are all separated DIV-s that can be used on any page you want.

The themes includes javascripts files:

  • jQuery Library 1.9.2
  • bootstrap.js
  • jquery.swipebox.js
  • placeholder.js
  • options.js
  • modernizr.custom.63321.js
  • masonry.pkgd.min.js
  • imagesloaded.pkgd.min.js

CSS Files and Structure

To the Top

This theme has been implemented as a responsive layout. The full width of the template is fluid for screen mode, and it still has a boxed version.

The CSS file is located in the css folder. The css file is registered and included in the "head"..."/head".

CSS file is very good structured and arranged so you can search very easy:

.site-title {
    margin-top: 40px;
    padding-top: 10px;
    text-align: center;
    position: relative;
    margin-bottom: 65px; 
    border-bottom: 2px solid #df294b;
}
.site-title-second {
    margin-top: 40px;
    padding-top: 10px;
    text-align: left;
    position: relative;
    margin-bottom: 65px; 
    border-bottom: 2px solid #df294b;
}
.site-title-second .site-inside,
.site-title .site-inside {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: -19px;
}
.site-title-second .site-inside span,
.site-title .site-inside span {
    color: #191919;
    background: #fff;
    font-size: 14px;
    display: inline-block;
    text-transform: uppercase;
    padding: 10px 50px;
}
.site-title-second .site-inside span {
    padding: 10px 50px 10px 15px;
}
.alert {
    border: 1px solid #d9d9d9;
    background: #f7f7f7 url('../images/elements/alert.png') repeat-y top left;
    border-radius: 3px;
    margin-bottom: 20px;
    padding: 10px 40px 10px 20px; 
}
.alert h4 {
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 14px;
    color: #191919;
}
.alert button {
    background: #ffffff;
    color: #191919;
    border: 1px solid #d9d9d9;
    padding: 3px 5px;
    line-height: 1em;
    font-weight: 700;
    font-size: 12px;
    margin-right: -30px; 
    float: right;
}
.alert button:hover {
    background: #f1f1f1;
}
.alert.alert-regular h4 {
    color: #191919;
}
.alert.alert-warning h4 {
    color: #df294b;
}
.alert.alert-succesuful h4 {
    color: #68af0c;
}
.alert.alert-retry h4 {
    color: #b7b7b7;
}
.alert.alert-attention h4 {
    color: #aa75c5;
}
.button-1 {
    display: inline-block;
    *zoom: 1;
    *display: inline;
    color: #fff;
    text-transform: uppercase;
    border-radius: 7px;
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 15px;
    line-height: 1em;
    text-align: center;
    padding: 20px 40px; 
    background: url('../images/elements/button-bg-1.png') repeat-x top left;
}
.button-2 {
    background: #df294b url('../images/elements/button-bg-2.png') no-repeat center left;
    color: #fff;
    text-transform: uppercase;
    border: 1px solid #df294b;
    border-radius: 3px;
    display: inline-block;
    *zoom: 1;
    line-height: 1em;
    *display: inline;
    font-size: 10px;
    padding: 7px 10px 7px 30px; 
    margin-bottom: 15px;
    text-align: center;
    min-width: 156px;
    font-weight: 700; 
}
.button-3 {
    text-align: center;
    background: #fff url('../images/elements/button-bg-3.png') no-repeat center left;
    color: #b3b3b3;
    text-transform: uppercase;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    display: inline-block;
    *zoom: 1;
    *display: inline;
    font-size: 10px;
    margin-bottom: 15px;
    min-width: 156px;
    line-height: 1em;
    padding: 7px 10px 7px 30px; 
    font-weight: 700; 
}
.button-3:hover {
    color: #333;
}
.button-4 {
    background: #df294b;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 25px; 
    margin-bottom: 15px;
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
.button-5 {
    text-transform: uppercase;
    padding: 10px 20px; 
    color: #fff;
    font-weight: 700;
    display: inline-block;
    *zoom: 1;
    margin-bottom: 15px;
    *display: inline;
    border-radius: 3px;
    min-width: 150px;
    text-align: center;
    font-size: 12px;
    background: url('../images/elements/button-bg.png') repeat-x top left;
}
.button-6 {
    text-transform: uppercase;
    background: #e8e8e8;
    color: #191919;
    font-size: 10px;
    padding: 10px 25px;
    display: inline-block;
    *zoom: 1;
    *display: inline;
    margin-bottom: 15px; 
}
.button-7 {
    background: #df294b;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 25px; 
    border-radius: 5px;
    margin-bottom: 15px;
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
.button-1:hover,
.button-2:hover,
.button-4:hover,
.button-5:hover,
.button-6:hover {
    opacity: 0.9;
    color: #fff;
    filter: alpha(opacity=90);
}
.button-7:hover,
.button-6:hover {
    color: #fff;
    background: #191919;
}
                    

Credits and Sources

To the Top

I've used the following images, icons, fonts or other files as listed.

Fonts used:

Thank you so much for choosing "Icook" we hope you will enjoy using it!