Heal – Multipurpose Charity WordPress Theme

Heal is a Multipurpose Premium Non-profit Charity WordPress Theme what can be used to build a nice website for a Non Profit Projector or Charity foundation project. Heal is clean, flexible, SEO ready and has a fully responsive layout. Heal WordPress theme loaded with lots of features and has a professional customization option panel.

Demo  Get the Charity WP Theme

Responsive Charity WordPress Theme
Responsive Charity WordPress Theme


Charity WordPress Theme with event managemtn
Charity WordPress Theme with event managemtn

Heal Multipurpose Charity WordPress Theme is  also built with a powerful payment gateway and magnificent event system.

Features of Heal  Multipurpose Charity WordPress Theme

  • Parallax Slider
  • Bootstrap Latest 3.1.1
  • W3C Validate
  • One Page Parallax Theme
  • Fully Responsive
  • CSS3 Effects
  • Smooth Scrolling
  • Isotope Gallery
  • Owl Carousel and Pretty Photo integrated
  • Professional and Flat Pricing Table
  • Google Map and Google Fonts  integrated
  • Lincolns Font  and FontAwesome  font integrated
  • Event and News Page Attached

CSS Hexagon Buttons

Few days ago I have created CSS Hexagon Buttons and Share it on Github as a free product under MIT License.  That is you are free to use it where ever you want. To download those buttons go to https://github.com/shariarbd/CSS3-Hexagon-Buttons. I have added four different size of Buttons and integrated with Font-Awesome.

css3 hexagon buttons
css3 hexagon buttons

The demo of the buttons is at http://shariarbd.com/demo/css3-hexagon-buttons/ and also added a nice documentation to use those buttons what you will find at http://shariarbd.com/demo/css3-hexagon-buttons/documentation/

I have added minimized css and js and following are the file structure

  • assets/
  • ├── css/
  • ├── font-awesome.min.css
  • ├── hexagons.css
  • └── hexagons.min.css
  • ├── js/
  • ├── hexagons.js
  • ├── hexagons.min.js
  • ├── jquery-2.1.0.min.js
  • └── jquery-2.1.0.min.map
  • └── fonts/
  • ├── FontAwesome.otf
  • ├── fontawesome-webfont.eot
  • ├── fontawesome-webfont.svg
  • ├── fontawesome-webfont.ttf
  • └── fontawesome-webfont.woff

In the CSS file, I have added  all class discretion and proper comments  to make it easy to understand and customize.

If you have any suggestion or query regarding this item, please feel free to drop a comment on it, I would love to update it.

If you want to create hexagon buttons by your own, I have some words for that too :) see Create Hexagon Buttons 

MobiHolic – Ultimate App Landing Business Template Fully Responsive

We have a new product on Themeforest based on App Landing Business Template and titled as MobiHolic - Ultimate App Landing Business Template what is Fully Responsive.  This HTML5  Apps Landing template has two version. One is Light Verison and the other is Dark Version.  The flowing fetuses is belongs to the Template

Fully Responsive Layout
Professional & Elegant
Unique & Modern Design
Parallax Image Background
Parallax Video Background
Screenshot Slider with modal feature
Team Section Slider with modal feature
Built with Bootstrap 3.1.1
Gmap3/Google Map
Smooth Navigation
and more...

MobiHolic - Ultimate App Landing Business Template
MobiHolic - Ultimate App Landing Business Template

Create CSS3 Hexagon

There are two easy way to make CSS3 Hexagon  and I am gonna show you the way in details that how to create css3 hexagon. In both case we will use ':after' and ':before'  Pseudo-classes. Actually my target is to use only one container in HTML to create a hexagon because  we need three elements. By using :after  and :before css3 Pseudo-classes, we will get other tow container. Well, let us see how to create Hexagon.

Pure CSS3 Hexagon Box
Pure CSS3 Hexagon Box

First way of CSS3 Hexagon.

Hexagon with 2 triangle and 1 rectangle
Hexagon with 2 triangle and 1 rectangle

First we will take a container, in my case,  a div tag as our HTML markup for Hexagon. Consider a  class hex1 for that. HTML markup is as follows. Continue reading

CSS Hexagon Ratio of Height Width

A hexagon is a polygon with 6 edges and 6 vertex.  Following is a example of hexagon taken from Wikipedia and there you will get more details about hexagon geometrically .


But we are here find the ratio of height and width to create hexagon in web designing. Well, there are two easy way to create hexagon as following images. First is with 2 triangle and 1 rectangle and second one is with 3 rectangle.

2 way to create css3 Hexagon
Two way to create css3 Hexagon

In both case we need rectangle and the question is that what will be the ratio of width and height of the rectangle? Well, we are here to calculate this. We will take a triangle from the hexagon for our calculation. Continue reading

Md. Shariar's Blog