Its priests, the developers and designers have to create material that is pleasing to the eye and friendly to its other servants and at the end of a day’s work or a project, just like the people of old, they can look back onto what they’ve done and be pleased about themselves. However, coming up with something that covers the two prerequisites above and is also not too expensive is not so easy but it can be: Website Maker is the tool to use.

The whole process only takes three steps to complete and they’re a breeze.

Step 1

Once you click the ‘Start Now’ button, you will be asked to choose from three bases for creating your website: a predesigned template, a blank site or one of the sites you’re already working on. For the sake of practice, we’ll assume you’ll be using one of the many templates IM Creator is putting at your disposal, carefully structured in categories like Mobile Sites, Photography, Musician, Model/Actor, Bio/Résumé, Real Estate. This classification will make it easier to choose, depending on the type of project you’re working on.

Step 2

Customize your template anyway you want to. You can change everything related to content, like text, pictures, layout, all with only a few clicks. If you need assistance in creating the website, the IM Creator support team and community will be there to assist you when clicking the ‘Support’ tab.

Step 3

If you think that what you had to do up to this point was easy, wait till you hear about the part that involves publishing the site you just finished customizing. This really stressful action you dreaded in the past has now been reduced to clicking the ‘Publish’ button. It’s a really easy, yet very smart kids play. The tool allows you to either link the newly created website to your existing domain or to one that you’ll need to purchase.

If you’re an advanced web designer, the guys at IM Creator welcome you to submit your work to their ever growing catalog and receive a monthly income from each use of the designs.

If you’ve tried the process as described above you can now say with confidence: I’m a creator and have the great god Internet pat you on the head for a job well done.

The template comes with three home pages:

1. Animation rich slider
2. Another beautiful slider
3. Bold static header with lovely type

This new generation minimalist modern template is fully responsive, equipped with documentation that is easy to read and understand.

Features

• Super clean & corporate
• Fully responsive
• Touch optimized full screen portfolio slider
• Three home pages – Two beautiful sliders and one with bold static header
• Valid and well commented code
• Working contact form
• Well documented
• Kick-ass support
• Pages:
• Home Page (animation rich slider)
• Home Page (another animated slider)
• Home Page (without slider but with bold & super clean header)
• Services
• About
• Portfolio 3 Cols with filter & an eye catching full screen lightbox
• Portfolio 4 Cols with filter & an eye catching full screen lightbox
• Portfolio Details Page
• Pricing (2 and 3 cols)
• 404
• FAQ
• Contact Form
• Components
• Blog
• Blog Single

Thank you so much for coming this down. While giving your feedback and rating please provide us with the best feedback and rating, as we will really appreciate your positive feedback and ratings.

View DemoDownload Wee

Teamwork Gantt is a JavaScript component built on jQuery for creating Gantts, task trees, dependencies which exports the resulting data in JSON format.

It has a wide array of features including zooming, drag ‘n’ drops, in-place-editing, resize, scroll and many more. Click here to read more

Free Responsive HTML5 Portfolio / Business Website Template: Brownie

If you need a responsive website for your business, you just want to show case your portfolio or you are developer who loves ready made work, Brownie Responsive Template is perfect for you. Created by using the latest HTML5 and CSS3 techniques, Brownie is a simple and clean Free Responsive HTML5 portfolio and business website template.

A Starting Point To Responsive Web Design: Responsive Boilerplate

Responsive Boilerplate is a lightweight (2kb) micro-framework, elegant & minimalistic CSS3 grid system, made with only one container and 12 columns. It`s very easy to use and understand, pre-packed with some extra css helpers for mobile devices.

Include in the package: PSD Template, HTML5 starting point file for fast development and two Sublime Text snippets for CSS grid and HTML file.

CSS-only Lavalamp-like Fancy Menu

This tutorial recreates the all time favorite sliding menu effect, also known as the Lavalamp effect with pure CSS – using CSS3 transitions and the general sibling combinator selector.

10 High Resolution Free Blurred Backgrounds

This is a collection of high-resolution blurred backgrounds (1920x1200px) to use as a great backdrop to present your designs and products and also as web backgrounds.

30 Abstract and Colorful Desktop Wallpapers

Abstract art is, at its core, a visual representation of something that most of us will neither see nor understand. Sad to say, unless you’re an art critic, the meaning behind most pieces of abstract art will be completely lost on you.

The only way to be sure, is to see it. That could mean a lot of abstract wallpapers to flick through, so, to help you get started, here’s thirty good ones for you to look over.

Awesomeness UI Widgets – Free PSD

A beautiful and very attractive free PSD having some awesome UI widgets.

Responsive Premium Business Portfolio WordPress Theme: Agency

Agency is a powerful multi-purpose html5 responsive WordPress theme perfect for business and portfolio sites. It follows a clean, eye catching and minimal approach to showcase contents.

This responsive WordPress theme is built using Bootstrap – the awesome framework by Twitter guys.

Responsive HTML Premium Template – Bound

Bound is a multi-purpose responsive html template with a neat and clean interface, perfect for businesses and professionals who want to showcase their portfolio/work. The template is flexible, easily customizable and well documented.

Additionally, Bound comes with Dreamweaver web template file. Dreamweaver templates can easily be edited and customized with Macromedia Dreamweaver®.

With Dreamweaver template file, you can edit your constant sections on all pages in on file. For example, you need to change menu and footer content, simply open the Dreamweaver template file and make your changes it will be reflected on all HTML pages automatically. But if you don’t have Dreamweaver then the plain HTML files are also packaged for your convenience.

Sneak Peek Into The Future: Selectors, Level 4

The buzzword “CSS4” came out of nowhere, just as we were getting used to the fact that CSS3 is here and will stick around for some time. Browser vendors are working hard to implement the latest features, and front-end developers are creating more and more tools to be able to work with the style sheets more effectively. But now, on hearing about CSS4, you might ask, “Hey, what about CSS3? Is it over already?”

Free Responsive Portfolio WordPress Theme: Gallery

Gallery WordPress theme is completely responsive, making it easy to showcase your grid of images, videos, quotes, blog posts, and more on any screen! The Gallery theme is extremely easy to customize thanks to the power of SASS and Compass. Simply change a few color values and you have a completely different look! The possibilities are endless!

Using wp-tabbed-news slider plugin

Download and extract the wp-tabbed-news slider plugin in the plugins directory of your WordPress installation. Next step is to activate the plugin. To activate go to plugins > installed plugins and click activate link below the wp-tabbed-news.

At this point your tabbed news slider plugin is ready to use. The plugin can be customized using plugin settings page.

A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control. Profound Grid uses negative margins to calculate columns. Unlike with other grid systems, fluid layouts will look exactly the same in every browser. Click here to read more about Profound Grid

How To Create A Simple Mult-Item Slider

This tutorial shows how to create a simple item slider with CSS animations and jQuery. The idea was inspired by the Apple product slider where several little items fly in with a bouncing animation. This tutorial translates this concept to a modern-looking alternative for a minimal online store design where the items represent different categories. Categories as use-case fit quite well because of the limited nature of this type of slider. For more items to be shown, this is certainly a far-from-optimal solution. If the amount of items is limited this might give an interesting little touch to the experience.

Make Pretty Charts For Your App with jQuery And xCharts

Charts are a great visual aid when presenting data. You can’t build a professional admin panel without them. They are also tricky to set up. However, there is a new library that makes things easier – xCharts. This tutorial uses it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table.

jQuery Plugin for Sharing & Displaying Social Network Buttons

A jQuery plugin for listing social accounts and sharing on social media with some nice overlay options.

Free jQuery Plugin For Instagram API

Brilliant Regex (Regular Expression) Visualization Tool: Regexper

Regexper is a brilliant regex visualization tool that will help you understanding any regular expression you are working with.

All you need to know about CSS Transitions

CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye.

This post is going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions.

Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU.

With a custom facebook template you can also integrate other social media like twitter etc. Custom templates having compelling reasons to adopt, here we are releasing a professional looking HTML5 facebook template for free and we call it Facebuk.

Facebuk is not just a page its a complete website fully packed with exciting features like.

• Feature Slider
• Filtered Portfolio
• Testimonials
• Working Contact Form
• Flickr Feed
• Twitter Integration
• Pricing Tables

and many more…

View Demo-Dark ThemeView Demo-Light ThemeDownload Facebuk Template

Framer is a modern prototyping tool. It can help you to quickly build and test complex interactions and rich animations for both desktop and mobile.

It uses webkit css transforms to render on the GPU for smooth performance, offers built in easy spring physics for iOS like animations. Click here to read more…

Create Video, Animation and Realtime Graphics For Web – Radi

Radi is a visual design application for Mac OS X. It produces 100% standard and human-readable HTML + JavaScript code. You can take this output and easily place it anywhere that accepts HTML code. This way, animations and interactive web pages designed in Radi can be embedded into anything that uses web technology: web apps, mobile apps with web content, and even HTML5-compatible electronic books like Apple iBooks, Amazon’s Kindle Format 8 and the EPub 3 standard.

• Draw vector shapes and give them life with motion animation and shape poses
  Create effects and add animations to your video files
  Export as HTML5 video with all formats automatically generated
  Mix in realtime graphics and web content without limitations

Open Source PHP FAQ Software – phpMyFAQ

phpMyFAQ is a multilingual, open source, database-driven FAQ-system with support of MySQL, PostgreSQL and other databases.

Google Analytics A/B Testing – ABalytics.js

This pure javascript library allows you to do simple A/B testing working only on your client-side code. All data is registered as custom variables in your website Google Analytics profile, so you don’t need to configure anything server side.

Make Detailed, Interactive Maps With Open Buildings Data – Majuro.JS

Majuro.JS is an open source library helps you make detailed, interactive maps with open buildings data. If offers iInstant, intuitive neighborhood maps that are ready to download to Google Earth or store in the cloud.

Customizing County

County offers various customization options using parameters and by using these parameters you can’t only customize the look and feel of the plugin but also many other aspects. Here is the list of complete customization parameters.

Using County

Using county is pretty straight forward, you just need need a block element(e.g. div) and call the county initialization function with required customization parameters. Here are the isolated steps.

• Add a reference to latest jQuery library
• Add a reference to county.js
• Add a reference to county.css

Add the following to the head section of your HTML document.

    <link rel="stylesheet" type="text/css" href="css/county.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/county.js" type="text/javascript"></script>

• Add a block element in body of HTML document
• Call the initializer function with required parameters and your count down is ready

  <div id="count-down"></div>

$('#count-down').county({ endDateTime: new Date('2013/12/27 10:00:00'), reflection: true, animation: 'scroll', theme: 'black' });

Here is the complete working example.

<html>
<head>
    <title>County Example</title>
    <link href="css/county.css" rel="stylesheet" type="text/css" />
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/county.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#my-count-down').county({ endDateTime: new Date('2013/12/27 10:00:00'), reflection: true, animation: 'scroll', theme: 'black' });
        });
    </script>
</head>
<body>
    <div id="my-count-down">
    </div>
</body>
</html>

Download CountyView Demo

Last year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using conditional comments, conditional classes, and other IE-specific hacks.

But without conditional comments in IE10, the only options we’re left with to target CSS problems are hacks or browser sniffing — and we certainly don’t want to resort to the latter.

Interestingly, there have been a few posts and code snippets floating around that apparently do target IE10 specifically using a hack. This post is a summary of those techniques.

Generate App Icons Of All Sizes In A Click

This tool resizes and optimizes your icon designs into all formats needed for iOS and Android mobile app!

Responsive HTML Tables: FooTable

FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them, FooTable transforms your HTML tables into expandable responsive tables.

Prime Free Font (Sans Serif Typeface)

Prime is a simple typeface with a techy feel and a strict, geometric origin. Designer wanted to create something that offers great readability in various sizes yet still offers enough subtle differences to stand out. Basic and somewhat neutral, it can be used in a variety of ways from distinct titles to body text.

Free Windows 8 Wireframe Templates for PowerPoint

To help minimize the prototyping effort, author has created a set of interface templates for PowerPoint. Using these templates, you can quickly put together a Windows 8 app layout and iterate on it. All elements in the set are based upon regular PowerPoint vector shapes, and are fully editable and customizable.

Notify Your Users When Their Network Goes Down

Heyoffline.js warns your users when their network goes down. In order to make sure they don’t lose anything. It is framework-agnostic, written in CoffeeScript, and compiled into JavaScript.

The Single Element HTML/CSS Icon Database: One Div

One div aims to highlight the potential of CSS3 through a library of single element logos.All icons displayed on the website are realised in pure css with only one html div. The challenge is also to provide an alternative to SVG. Indeed icons allow precise borders preserved even resized (As vector format). Then we can see a clear interest in responsive design.

Free Tool To Style & Add Special Effects to Icons: Iconbench

Iconbench is a free web based tool which allows you to style icons and add effects to your icons. Currently, Iconbench offers more than 5 different iconsets having more than 700 different icons for you to choose from.

Create Quality Print Versions of Web Pages With CSS3 Filters

Print stylesheets tend to be somewhat neglected by web developers, but their presence is often greatly appreciated by users. This article discusses how to create quality print versions with CSS3 filters.

raccordion parameters

• speed: animation speed in milliseconds for each slide.
• sliderWidth: max width for the slider.
• sliderHeight: max height for the slider.
• autoCollapse: if true the active slider will automatically collapse when the mouse leaves.
• activeSlide: 0 based index for initial active slide

Using raccordion slider

Using raccordion image slider is pretty easy. You just need to add references to necessary files, create the HTML markup for the slider and call the initilizer function of raccordion and your responsive horizontal accordion image slider is ready. Here are the isolated steps.

Add the following to the head section of your HTML document.

    <link rel="stylesheet" type="text/css" href="css/raccordion.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery.raccordion.js" type="text/javascript"></script>
    <script src="js/jquery.animation.easing.js" type="text/javascript"></script>

Here is the example markup to be used in your HTML document. You need to be aware that “slide” and “caption” classes are neccessary for the slider to work. Each slide must be wrapped within block element with “slide” class and for the caption its “caption” class.

<div id="accordion-wrapper">
            <div class="slide">
                <img src="images/slide1.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide2.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide3.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide4.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis, Sed pharetra consectetur
                        risus eu blandit. Fusce volutpat adipiscing eleifend. Aliquam gravida mollis odio,
                        a consequat urna dictum quis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide5.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide6.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
        </div>
    </div>

Finally call the initlializer function, you can customize the parameters as per you requirements.

 <script type="text/javascript">
        $(window).load(function () {
            $('#accordion-wrapper').raccordion({
                speed: 1000,
                sliderWidth: 940,
                sliderHeight: 300,
                autoCollapse: false
            });

        });
    </script>

Here is the complete working example.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/raccordion.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery.raccordion.js" type="text/javascript"></script>
    <script src="js/jquery.animation.easing.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $('#accordion-wrapper').raccordion({
                speed: 1000,
                sliderWidth: 940,
                sliderHeight: 300,
                autoCollapse: false
            });

        });
    </script>
 <!--Dynamically creates ads markup-->
   <?php include("http://www.egrappler.com/no-ads-header.php"); ?>
    <div class="wrapper">
        <div id="logo">
            <h2>
                raccordion</h2>
            <hr />
            <h3>
                responsive image accordion</h3>
        </div>
<div id="accordion-wrapper">
            <div class="slide">
                <img src="images/slide1.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide2.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide3.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide4.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis, Sed pharetra consectetur
                        risus eu blandit. Fusce volutpat adipiscing eleifend. Aliquam gravida mollis odio,
                        a consequat urna dictum quis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide5.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
            <div class="slide">
                <img src="images/slide6.jpg" />
                <div class="caption">
                    <a href="#">
                        <h1>
                            Caption title</h1>
                    </a>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh
                        ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

View DemoDownload Source Code