Build your online business: 2018

Wednesday, January 24, 2018

Wordpress January 24, 2018

The best Free Frameworks to start your own Landing page on Wordpress

If you just started in wordpress development these frameworks will be the best selection for WordPress starter themes for theme developers.

Understrap

The Bootstrap 4 + WordPress Theme Framework

Free download here

FoundationPress

the ultimate WordPress starter-theme built on Foundation 6 by Zurb.
Free download here

HTML5 + boilerplate

An open source boilerplate theme for WordPress
Free Download here

WP RootStrap is a flat and minimal design theme powered by TwitterBootstrap 3.0. It has unique designed for SEO optimization with faster page loading. It can be used as a started theme for development of any website. It has lots of theme hook to help developer for further development. The flat look starter theme having a lot of theme functionality to manage logo fav icon and social media profile etc. The theme can be used for any kind of blog or news websites. This is fully responsive theme, works perfectly with any mobile devices or tablet.

Tuesday, January 23, 2018

website design January 23, 2018

Contact form for Landing Page

by Irene

If you build a website with MODx m you may need a good quality contact form for your website

Contact form for Landing Page free download -

WEBBPLATSER LANDNINGSSIDOR SEO

Modal Contact for Landing Page January 23, 2018

Modal Contact for Landing Page

by Irene

Fully working Modal contact form for any Landing page

Get free right here

Tuesday, January 2, 2018

landing page January 02, 2018

4 Bootstrap Gallery Templates

by Irene

Download

In this post we would like to share with you 4 awesome image gallery templates for Bootstrap 3. Just like all our freebies, these templates are completely free to use (no attribution required), fully responsive, and super easy to implement - just copy and paste!

The Templates

The four templates use the Bootstrap 3 grid for their layouts. The HTML is fully compliant with the framework and follows the recommended practices. For styling we've used good ol' CSS, while making sure to keep it self contained so it won't mess up the rest of your styles.

Each template has unique CSS-only hover effects, as well as Lightbox functionality thanks to the baguetteBox.jsplugin. There are many other Lightbox libraries out there but we chose that one because of the cool name (although it having no dependencies and being super easy to use were taking into account as well).

How to use

To use any of the templates from the demo, follow these simple steps:

Grab the zip archive from the Download button near the top of the page and extract it.
There are separate folders for each template + a folder of placeholder images (courtesy to Unsplash). Decide which template you want and grab it's HTML from the .tz-gallery element in the index.html file.
Paste the HTML into your project. Make sure you have Bootstrap 3 on that page.
The styles are located in separate CSS files for each design. Link to the CSS file or copy its contents and add them to your styles.
For the Lightbox effect add the baguetteBox CSS and JS, and initialize it in a script tag - baguetteBox.run('.tz-gallery');.

Free for Commercial Use

You have all rights to customize and use these templates in both personal and commercial projects. All our freebies are 100% royalty free, no attribution required (our license page). Enjoy!

Via

landing page January 02, 2018

5 Easy Ways to Modify Your Bootstrap Button Styles

by Irene

In the following tutorial, we’re going to show you 5 easy ways to modify your Bootstrap button styles. This is a quick and easy way to differentiate your site from the default Bootstrap look.

If you like what you see, you can download our free Bootstrap button pack (Demo | Download).

Initial Setup

We modified the default Bootstrap .btn class with the following CSS styles. These styles are only required if you’re looking to achieve the same look and feel as our button pack. Otherwise, you can stick with the default Bootstrap styles for now.

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

.btn {

    padding: 14px 24px;

    border: 0 none;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.btn:focus, .btn:active:focus, .btn.active:focus {

    outline: 0 none;

}

.btn-primary {

    background: #0099cc;

    color: #ffffff;

}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {

    background: #33a6cc;

}

.btn-primary:active, .btn-primary.active {

    background: #007299;

    box-shadow: none;

}

Now that we’ve modified our .btn class, let’s go over our custom button classes.

Sharp Buttons

To create sharp buttons, simply set your border radius to 0.

1

2

3

.btn.sharp {

  border-radius:0;

}

Outline Buttons

The first step in creating an outline button is to remove the background. Since we’ll be increasing the border width, you also need to reduce the button padding. Otherwise, your button will appear oversized.

1

2

3

4

.btn.outline {

 background: none;

 padding: 12px 22px;

}

Next, you need to increase the thickness of the border and change the color to match the border.

1

2

3

4

.btn-primary.outline {

 border: 2px solid #0099cc;

 color: #0099cc;

}

Finally, you can add some hover effects by modifying the color and border colors when hovering over the button.

1

2

3

4

5

6

7

8

9

.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {

 color: #33a6cc;

 border-color: #33a6cc;

}

.btn-primary.outline:active, .btn-primary.outline.active {

 border-color: #007299;

 color: #007299;

 box-shadow: none;

}

Gradient Buttons

With gradient buttons, you’ll need a starting and ending color. While a typical linear gradient starts with one color and fades to another, this example has a hard shift in color halfway through the button. You’ll notice all the different lines we’ve added and that’s simply for compatibility across older browsers.

1

2

3

4

5

6

7

8

9

.btn-primary.gradient {

 background: -moz-linear-gradient(top,  #33a6cc 50%, #0099cc 50%); /* FF3.6+ */

 background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */

 background: -webkit-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */

 background: -o-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */

 background: -ms-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* IE10+ */

 background: linear-gradient(to bottom,  #33a6cc 50%,#0099cc 50%); /* W3C */

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */

}

Next, we lighten the buttons when hovering over them.

1

2

3

4

5

6

7

8

9

.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {

 background: -moz-linear-gradient(top,  #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */

 background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */

 background: -webkit-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */

 background: -o-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */

 background: -ms-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* IE10+ */

 background: linear-gradient(to bottom,  #66b2cc 50%,#33a6cc 50%); /* W3C */

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */

}

Finally, we darken the buttons when they’re active/clicked.

1

2

3

4

5

6

7

8

9

.btn-primary.gradient:active, .btn-primary.gradient.active {

 background: -moz-linear-gradient(top,  #267c99 50%, #007299 50%); /* FF3.6+ */

 background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */

 background: -webkit-linear-gradient(top,  #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */

 background: -o-linear-gradient(top,  #267c99 50%,#007299 50%); /* Opera 11.10+ */

 background: -ms-linear-gradient(top,  #267c99 50%,#007299 50%); /* IE10+ */

 background: linear-gradient(to bottom,  #267c99 50%,#007299 50%); /* W3C */

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */

}

Rounded Buttons

To get the rounded look, simply increase the pixel size on the border radius.

1

2

3

.btn-lg.round {

 border-radius: 24px;

}

Raised Buttons

First, you need to create a box shadow to give the effect that the button is raised.

1

2

3

.btn-primary.raised {

 box-shadow: 0 3px 0 0 #007299;

}

Then, you need to remove the box shadow and modify the margins when the button is activated.

1

2

3

4

5

6

.btn-primary.raised:active, .btn-primary.raised.active {

 background: #33a6cc;

 box-shadow: none;

 margin-bottom: -3px;

 margin-top: 3px;

}

Download The Button Pack

I hope you found this tutorial helpful. If you liked these button styles, make sure to download the button pack.

VIA

Wednesday, January 24, 2018

The best Free Frameworks to start your own Landing page on Wordpress

Understrap

FoundationPress

HTML5 + boilerplate

WP RootStrap

Tuesday, January 23, 2018

Contact form for Landing Page

Modal Contact for Landing Page

Tuesday, January 2, 2018

4 Bootstrap Gallery Templates

The Templates

How to use

Free for Commercial Use

5 Easy Ways to Modify Your Bootstrap Button Styles

Initial Setup

Sharp Buttons

Outline Buttons

Gradient Buttons

Rounded Buttons

Raised Buttons

Download The Button Pack

Links

Follow me

Useful websites and Tools

Popular

Tags

Blog Archive