Search Google

Wednesday 30 July 2014

Web font embedding

It really is quick and simple:
1. Choose a font. You can add it to your collection or use “quick-use” to generate the code and options for that font.
2. Copy and paste the code generated into your <Head>
 
 <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> 
 </head>

3. The font is now accessible in your CSS code
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
 
 
 http://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html 
 
 
https://www.google.com/fonts#ChoosePlace:select 
 https://developers.google.com/fonts/docs/getting_started
 
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

Then open the file in a modern web browser. You should see a page displaying the following, in the font called Tangerine:
Making the Web Beautiful!
That sentence is ordinary text, so you can change how it looks by using CSS. Try adding a shadow to the style in the previous example:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; } You should now see a drop shadow under the text:
Making the Web Beautiful!
And that's only the beginning of what you can do with the Fonts API and CSS.

Overview

You can start using the Google Fonts API in just two steps:
  1. Add a stylesheet link to request the desired web font(s):
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
  2. Style an element with the requested web font, either in a stylesheet:
    CSS selector {
      font-family: 'Font Name', serif;
    }
    
    or with an inline style on the element itself:
    <div style="font-family: 'Font Name', serif;">Your text</div>
Note: When specifying a web font in a CSS style, always list at least one fallback web-safe font in order to avoid unexpected behaviors. In particular, add a CSS generic font name like serif or sans-serif to the end of the list, so the browser can fall back to its default fonts if need be.
 

Saturday 26 July 2014

web design css jquery templates

Building a Circular Navigation with CSS Transforms

website designing css jquery


Vertical Timeline

Blueprint_TimelineStyle  

very easy html and css



http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

CircularNavigation

Fullscreen Layout with Page Transitions

A simple responsive layout with some fancy page transitions.

http://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/

FullscreenLayoutPageTransitions

http://jquery.malsup.com/cycle2/demo/carousel.php
 http://www.jqueryrain.com/freetemplates/


Best hover effect

http://tympanus.net/Development/HoverEffectIdeas/#

HoverEffectIdeas

http://tympanus.net/Tutorials/AnimatedBorderMenus/ 

example of jquery Accordion and Tabs with code

 SOURCE FROM DOWNLOAD  http://jqueryui.com/themeroller/

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="jquery-ui.css" rel="stylesheet">
    <style>
                              html{
                                     margin:0 !important;
                                     padding:0 !important;
                                      }
   
    body{
        font: 62.5% "Trebuchet MS", sans-serif;
        margin: 0px;
    }
    .demoHeaders {
        margin-top: 2em;
    }
   
    </style>


</head>
<body>







<!-- Accordion -->
<h2 class="demoHeaders">THIS IS EXAMPLE OF ACCORDION</h2>
<div id="accordion">
    <h3>First</h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    <h3>Second</h3>
    <div>Phasellus mattis tincidunt nibh.</div>
    <h3>Third</h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>





<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
                                        <li><a href="#tabs-4">read fourth</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
    <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
                     <div id="tabs-4">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>











<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>

<script>
$( "#accordion" ).accordion();
$( "#tabs" ).tabs();
</script>




</body>
</html>


------------------------------
ALL FILE

external/jquery/jquery.js
jquery-ui.js
 jquery-ui.css
index.html
 -----------------------
2 js file
1 css
1html

..........................................................................................................................

jquery effects demo

http://www.jqueryrain.com/

http://www.webdesignerdepot.com/2010/07/20-demos-showing-advanced-jquery-effects/

Friday 25 July 2014

website designing add video swf or flash file on back side and on upper side content

 http://tutorialmagento.com/magento-tutorial-for-developer/page/2
 
 
 
 
 
 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <div>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>

    </div>
  </body>
</html>

FLASH CODE

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-»
444553540000" width="300" height="120">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->    
<object type="application/x-shockwave-flash" »
data="myContent.swf" width="300" height="120">

<!--<![endif]-->

<p>Alternative content</p>
<!--[if !IE]>-->    
</object>
<!--<![endif]-->

</object>
 


FULL SCREEN


 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0" width="600" height="400" id="fullscreen" align="middle"> <param name="allowFullScreen" value="true" /> <param name="movie" value="fullscreen.swf" /> <param name="bgcolor" value="#333333" /> <embed src="fullscreen.swf" allowFullScreen="true" bgcolor="#333333" width="600" height="400" name="fullscreen" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>


...........................................................................................................................

1.Download dropbox, and follow their instructions on how to upload your files into it. Don't get confused by the program, it works pretty much like flicker or photobucket, except you have to download it to your computer, and it allows you to upload virtually any file type to the internet and other devices. Dropbox allows you to upload 2GB for free, which should be plenty for you to use for your wix resources



<html>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,40,0"

width="468" height="60"
id="mymoviename">
<param name="movie"
value="YOUR DROPBOX FILE URL  HERE" />

<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="YOUR DROPBOX FILE URL HERE" quality="high" bgcolor="#ffffff"
width="468" height="60"
name="mymoviename" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">

</embed>
</object>
</body>
</html>






-------------------------------------------------------------------------------------------
<html>
<style type="text/css">
html {
overflow: hidden;
}
</style>
update it and  swf will be clean without those sidescrolls
 

Monday 14 July 2014

Learn advance html css jquery @bestsite

 
---------------------------------



Jquery

HTML
1
2
3
4
<div class="notice-warning">
  <div class="notice-close">&#215;</div>
  <strong>Warning!</strong> I&#8217;m about to lose my cool.
</div>
JavaScript
1
2
3
$('.notice-close').on('click', function(event){
  $('.notice-warning').remove();
});

Demo

See the Pen Event by Shay Howe (@shayhowe) on CodePen.

Event Methods

jQuery provides quite a few methods, all of which are based around registering user behaviors as they interact with the browser. These methods register quite a few events, most popularly, but not limited to, browser, form, keyboard, and mouse events. The most popular of these methods include:

Browser Events

  • .resize()
  • .scroll()

Document Loading

  • .ready()

Event Handler Attachment

  • .off()
  • .on()
  • .one()
  • jQuery.proxy()
  • .trigger()
  • .triggerHandler()
  • .unbind()
  • .undelegate()

Event Object

  • event.currentTarget
  • event.preventDefault()
  • event.stopPropagation()
  • event.target
  • event.type

Form Events

  • .blur()
  • .change()
  • .focus()
  • .select()
  • .submit()

Keyboard Events

  • .focusin()
  • .focusout()
  • .keydown()
  • .keypress()
  • .keyup()

Mouse Events

  • .click()
  • .dblclick()
  • .focusin()
  • .focusout()
  • .hover()
  • .mousedown()
  • .mouseenter()
  • .mouseleave()
  • .mousemove()
  • .mouseout()
  • .mouseover()
  • .mouseup

Saturday 12 July 2014

how to install django on win 7 and run your first web app

 HOW  TO RUN

admin.py startproject mysite
    cd mysite
    python manage.py syncdb

    (Follow prompts to setup an initial db. remember the user you used here.)

    python manage.py runserver

-------------------------------------------------

DJANGO can be install by pip or by simply
Django via python setup.py. If it’s not on your path, you can find it in site-packages/django/bin

You can just run django-admin startproject mysite(Note: not django-admin.py), because if you install django by pip, a executable program named 'django-admin.exe' will be added to 'C:\Python34\Scripts', which is already in your environment variable 'PATH' normally(if not, add it to PATH).

 for runing

1. through setup.py type on cmd django-admin startproject mysite

2.pip - django-admin.py startproject mysite



This is a guide for installing Python (a programming language) and Django (a web framework written in Python) on a computer that runs Windows 7. I initially wrote this to help the Windows users on my team (for a project this semester), but I figured it could be immortalized here. Hopefully someone out there on the internet will find this useful.

Part 1: INSTALL PYTHON

Download this: http://python.org/ftp/python/2.7.1/python-2.7.1.msi
Now, run that installer. It should install Python in C:\Python27. If you
choose a different installation directory, that’s fine, but just remember which directory it was for later steps in this tutorial. Great. Python should be installed. However, if you open a command prompt (start -> search cmd.exe), you will notice that the command python.exe will not run the Python interpreter. That’s annoying — you would have to type out C:\Python27\python.exe every time you wanted to run the Python interpreter.
To fix this, we want to add Python to the system path. This lets cmd.exe know what you’re talking about when you invoke python.exe. To add Python to the system path, open the windows menu and search “environment variable”. You should get an option like “Edit your environment variables”. Choose that option. It will open a window.
Click the button “Environment variables…”. There should be two “lists”. Look at the second pane. Scroll down a bit, and you should see a variable called “Path”. Select and click “edit”. Cool. You should have something like:
%SYSTEMROOT%\System32;%SYSTEMROOT%\blabla; and so on.
Add this to the end of it:
;C:\Python27;C:\Python27\Scripts;
(Substitute the path where you installed python if you didn’t install
it in C:\Python27.
Awesome. Open a new cmd.exe and run the command python.exe. You should get a Python interpreter.

PART 2: INSTALL DJANGO

Download this: http://www.djangoproject.com/download/1.2.4/tarball/
Now use 7-zip (or something comparable) to extract it (it doesn’t matter where; your desktop is fine). Now, go into the Django-1.2.3 directory that was just extracted. Figure out the path to this folder (e.g. C:\Windows\Users\Tavish\Desktop\Django-1.2.3).
Now, in cmd.exe (the command prompt), type in cd C:\The\Path\I\Just\Told\You\To\Remember. Then type in python.exe setup.py install. Hopefully a whole bunch of text will show up in your terminal. This is a good sign.
Django should be installed now. To test, go to some directory , where you want to make a django project (do this in your command prompt; cd changes directories, dir lists the contents of the current directory, etc.). Then run the following command:
django-admin.py startproject newproject
That should create a folder called “newproject”. (You can refer to the official Django documentation for a more in-depth explanation.)
Cool. Do cd newproject to change to that directory. The command dir will show that there is a python script called manage.py in there. Run it like this:
python.exe manage.py runserver
A message should appear. Use your web browser to open the address http://127.0.0.1:8000/, just like your terminal says. If you see a web page at that address saying “It worked!”, then, well, it worked.
Let me know if this works or doesn’t work for you. Suggestions are welcome as well.
-------------------------------------------------------------------------------------------

Set PATH             c:\python27 and c:\pythoon27\Scripts 
  1. Copy django-admin.py from c:\python27\Scripts to your desired folder
  2. with cmd go to that folder and run python django-admin.py startproject mysite
if not work set full path add the necessary Path to the System PATH as shown below.
Control Panel -> System -> Advanced -> Environment Variables -> PATH.
Add to the PATH:
C:\Python27\python.exe;C:\Python27\Scripts;C:\Python27\Lib\site-packages\django\bin



read here :http://stackoverflow.com/questions/2870262/django-admin-py-startproject-mysite-not-working-well-on-windows-7


run your first web app on windows 7 django






Let's look at what startproject created:
mysite/
    __init__.py
    manage.py
    settings.py
    urls.py
These files are:
  • __init__.py: An empty file that tells Python that this directory should be considered a Python package. (Read more about packages in the official Python docs if you're a Python beginner.)
  • manage.py: A command-line utility that lets you interact with this Django project in various ways. You can read all the details about manage.py in django-admin.py and manage.py.
  • settings.py: Settings/configuration for this Django project. Django settings will tell you all about how settings work.
  • urls.py: The URL declarations for this Django project; a "table of contents" of your Django-powered site. You can read more about URLs in URL dispatcher.

The development server

Let's verify this worked. Change into the mysite directory, if you haven't already, and run the command python manage.py runserver. You'll see the following output on the command line:
Validating models...
0 errors found.

Django version 1.0, using settings 'mysite.settings'
Development server is running at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
------------------------------------------
--------------------------------

2.
BY pip method

Getting django started on Windows 7 with python 3 and MySQL 5.6

Django is a python web framework library and it works on both python 2 or 3. I will show you how to get python 3 setup in Cygwin environment.

If you're on a Windows OS, the best experience I have when working with Django on Windows is to use Cygwin, a Unix emulator shell that runs on Windows. The pip and django commands would automatically setup in Cygwin's PATH after installed. The default python package on Cygwin is only 2.7 though, so you have to search for "python3" package to get the latest python version. And you can have both versions installed without problem, but the executable are named "python" and "python3" respectively.

1. Install Cygwin python3 package. Verify "python3 -V" is working.
2. Install "pip" by downloading this "get-pip.py" file from http://pip.readthedocs.org/en/latest/installing.html and then run "python3 get-pip.py". Verify "pip3 --version" is working.
(NOTE: If you are running Windows 7, you might run into this issue: https://github.com/pypa/pip/issues/1448 where pip exit without a warning. In this case the workaround is install Cygwin "binutils" and "libuuid-devel" packages, and that fixed the problem for me.)
3. Install "django" by running "pip3 install django"
4. Finally install the MySQL driver with "pip3 install mysql-connector-python --allow-external mysql-connector-python" command.

Now to get a django project started, try these:
 
django-admin.py startproject myapp
 
The "django-admin.py" script should automatically in your PATH. and this create a new project with initial settings. To switch default database from SQLite3 to MySQL, change the "myapp/settings.py" with the following:

DATABASES = {
    'default': {
        'NAME': 'mydb',
        'ENGINE': 'mysql.connector.django',
        'USER': 'root',
        'PASSWORD': 'secret',
    }
}

Now I assume you have MySQL 5.6+ installed on your Windows already. Change the root password to match yours or using different DB user. You can now have django app setup the initial database schema tables for this specif myapp with this commad:
 
cd myapp
python3 manage.py syncdb
 

Follow the prompt and setup your admin user. Now you can start django web app:

 
python3 manage.py runserver 
  

Open browser to http://localhost:8000/admin. Now try to login 








Wednesday 9 July 2014

code.org learn coding for kids and students





Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial starring video lectures by Bill Gates, Mark Zuckerberg, Angry Birds and Plants vs. Zombies. Learn repeat-loops, conditionals, and basic algorithms. Available in 34 languages.
Ages 6-106 | Modern browsers, smartphones, tablets
17,378,455 participants 
 
Learn coding basic for students
 
code.org
 
 

Integrating CKeditor in websites and saving document

 All about ckeditor  and how to integrate in website.

home.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Test Page </title >
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/ >
  <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form action="posteddata.php" method="post">
<textarea id="editor1" name="editor1">
&lt;p&gt;Your text goes here&lt;/p&gt;
</textarea>
<script type="text/javascript">
window.onload = function()
{CKEDITOR.replace( 'editor1' );};
 </script>
<input type="submit" value="Submit"/ >
</form>
</body>
</html>





posteddata.php
<html><body>
<?php
echo $_POST['editor1'];
?>
</body></html>


 ref. http://stackoverflow.com/questions/6545521/ckeditor-how-do-i-save-to-the-web-page-i-am-editing?rq=1


Saving CKEditor data to MySQL Database

 

Follow these steps.  I use a MySQL table called mybase to store the content you want to save (and perhaps reload) that I call mytext
Main document (you can call it main.php)
<!DOCTYPE html>
<title>Save inline stuff</title>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<?php
//you must enter your own connexion details here
$host   = 'host';  
$dbuser = 'dbuser';    
$dbpass = 'dbpass';
$dbname = 'dbname';
$dbconn = mysql_connect($host, $dbuser, $dbpass)
or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db($dbname, $dbconn);
mysql_query("SET NAMES UTF8");

$query = mysql_query("SELECT mytext FROM mybase ");
$row = mysql_fetch_assoc($query);
$mytext = $row['mytext'];
echo "When you click outside the editing area after editing the content of the area is saved to the MySQL table<br><br>";
echo "<div style='border:2px solid;border-radius:25px;' id='mytext' contenteditable='true' onBlur='clickheretosave()'>" . $mytext . "</div>";
echo "<br>If you are successfull you should see that the <b>mytext</b> is also reloading when you hit F5";
 ?>
<script type='text/javascript' language='javascript'>
// <![CDATA[
function clickheretosave () {
var mytext = CKEDITOR.instances.mytext.getData();
       $.post('mybase.php', {
     mytext : mytext
     })
    }
// ]]>
</script>
</body>
</html>
In a separate file called mybase.php add the following code - you must of course fill in your own connection details for the database:
<?php header('Content-type: text/html; charset=UTF-8');
$host   = 'host';  
$dbuser = 'dbuser;    
$dbpass = 'dbpass;
$dbname = 'dbname';
$dbconn = mysql_connect($host, $dbuser, $dbpass)
or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db($dbname, $dbconn);
mysql_query("SET NAMES UTF8");
$sql = "UPDATE mybase SET mytext ='" . stripslashes($_POST['mytext']) . "'";
$queryresource = mysql_query($sql, $dbconn) or die(mysql_error());
?>
I have testet the code so it should work, but you need to create the database table also.
------------------------------------------
NAME tag is for PHP.
ID tag is for javascript and for css used as #
class is for css used as "." DOT
------------------------------
ADD INTO DB

home.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Test Page </title >
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/ >
  <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>

<form method="post" action="add.php">
<table width="958" height="372">
  <tr>
    <td width="69">Name:</td>
    <td width="608"><input name="textfield" type="text" id="textfield" size="40" /></td>
  </tr>




  <tr>
    <td>Section:</td>
    <td><select name="select" id="select">
    </select></td>
  </tr>
  <tr>
    <td>Subject:</td>
    <td><select name="select2" id="select2">
    </select></td>
  </tr>
  <tr>
    <td height="53">Description</td>
    <td><textarea name="textarea" id="textarea" cols="45" rows="3"></textarea></td>
  </tr>
  <tr>
    <td>Upload</td>
    <td>
      <label for="fileField"></label>
      <input name="fileField" type="file" id="fileField" size="40" />
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <label for="textarea2"></label>
      <textarea class="ckeditor" cols="20" id="editor1" name="editor1" rows="10"></textarea>
</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <input type="submit" name="button2" id="button2" value="Upload" />
    </td>
  </tr>
</table>

</form>
</body>
</html>

 


--------------
mysql.php

 <?php
$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("ckeditor",$con);
?>



-----------------
add.php

<?php
include("mysql.php");

if(isset($_POST["button2"]))
{
$sql="INSERT INTO qpaper (papername,subject,section,description,upload,uploadtext)
VALUES
('$_POST[textfield]','$_POST[select]','$_POST[select2]',
'$_POST[textarea]','$_POST[fileField]','$_POST[editor1]')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
  else
  {
echo "Question paper uploaded Successfully";
  }

}

?>

------------

table fields

papername,subject,section,description,upload,uploadtext

Drupal (CMS): design a shopping site like Flipkart

drupal is a good option. you can use the ubercart module or the commerce module.
You can also use the commerce installation profile to speed up the process.



Ubercart is the most popular Drupal E-Commerce platform for your website. It implements everything you need to start selling products online. Web Developers from all skill ranges can use it to support a variety of E-Commerce industries-- including physical goods, digital downloads, or even subscription based billing services. Ubercart can do it all!
For more details, be sure to visit the What is Ubercart? page for more info.

Current Features:

  • Configurable product catalog includes catalog pages and a block to display product categories.
  • Flexible product creation system with product classes.
  • Multiple product image support out of the box.
  • Flexible product attributes system.
  • Basic product stock level tracking and notification.
  • Product features to add file downloads, role promotions, and more to products.
  • Single page checkout.
  • Automatic account generation (anonymous checkout).
  • Customer and administrator checkout notifications.
  • Simple order processing (with workflow for automated order processing).
  • Simple order creation and editing.
  • Integrated payment system that acts as a bridge between acceptable payment methods (check, credit card, purchase order, etc.) and payment gateways (CyberSource, Authorize.net, PayPal, etc.).
  • Shipping quotes and fulfillment, including integration with UPS, FedEx, USPS.
  • Sales, product, and customer reports.
  • Activity logging.
  • Much more... and more to come.
Ubercart is PayPal certified and integrates PayPal Website Payments Standard, Website Payments Pro, and Express Checkout.

Drupal + Commerce module is good way to do a site like Flipkart.

Tuesday 8 July 2014

how to add google webmaster sitemap and seo

here is how you can submit sitemap to google webmaster tools



www.yourwebsite.com/robots.txt

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://thenewcreator.blogspot.com/feeds/posts/default?orderby=UPDATED

 copy the red part and paste it to google webmaster

2.   http://www.xml-sitemaps.com/

3. 

Adding site map to Google Webmaster Tools

Now login to Google Webmaster Tools and select your blog. On the left click Crawl > Sitemaps > Add/Test Sitemap. You’ll see your blog name and a text input box, paste atom.xml?redirect=false&start-index=1&max-results=500, test for errors and submit.

Example Robots.txt Format

Allow indexing of everything
User-agent: *
Disallow:
or
User-agent: *
Allow: /
Disallow indexing of everything
User-agent: *
Disallow: /
Disawllow indexing of a specific folder
User-agent: *
Disallow: /folder/
Disallow Googlebot from indexing of a folder, except for allowing the indexing of one file in that folder
User-agent: Googlebot
Disallow: /folder1/
Allow: /folder1/myfile.html

Monday 7 July 2014

chat application in php and collection of api

BEST Powerful Chat System – Lesson 9

Today I prepared new stage of our php/mysql based chat system. In our ninth lesson I added one important feature: public rooms. Now your members can talk in different public rooms. Right to create and remove rooms belong to administrators.

Today, as usual, we will publish only updated sources of our project. As you know, whole project is well structured: system classes is in ‘classes’ folder, all javascript files in ‘js’ folder, stylesheets in ‘css’ folder, all custom avatars in ‘data’ folder, images in ‘images’ folder, template files in ‘templates’ folder.
Live Demo
download in package
 
http://www.programmableweb.com/apis/directory 

Facebook Chat API http://www.programmableweb.com/api/facebook-chat


 





Sunday 6 July 2014

High Quality Responsive Magento Themes

http://www.script-tutorials.com/high-quality-responsive-magento-themes/

 besat for user interface

http://www.script-tutorials.com/flat-ui-kits/ 

 

 

 

Free Themes

1. Shoes Store

Shoes Store
Demo
Our Shoes Store is perfectly suitable for those who are planning to launch online shoe store for ladies/kids/men. The template delivers a stylish look and feel with a clean and simplistic design.

2. JM Trex

JM Trex
Demo
This premium Magento responsive theme highlights cycle store theme but can be easily adapted to feature any product range. The theme comes in 4 colors: blue, green, yellow and violet and is mobile ready. Moreover, along with responsive layout, JM Trex has the Item List page with 2 styles: List view and Grid view.

3. Ebajes

Ebajes
Demo

web technologies used by Bookmyshow.com

http://w3techs.com/sites   check web technologies used by any site.


Google Hosted Libraries (formerly called Google Libraries API) is a content distribution network for the most popular, open-source JavaScript libraries, provided by Google.
Google Analytics is a free service to get detailed statistics about the visitors of a website, provided by Google.
CrazyEgg is a website visitor and click tracking service.
KISSmetrics is a website analytics solution that provides visual representations of conversion funnels.
The Google Advertising network consists of AdSense, DoubleClick and other services.
Google Ads   

  http://www.slideshare.net/WattoMujeeb/j2me-application-on-book-my-show

http://www.script-tutorials.com/powerful-chat-system-lesson-9/ 

http://www.script-tutorials.com/powerful-chat-system-lesson-9/


Friday 4 July 2014

open source free cart and free cms live chat help php script

  http://codegeekz.com/10-free-chat-applications-for-your-websites/

The #1 Community Live Help System!

Welcome to HelpCenter Live! We are the leading open source Live Chat application, dedicated to provided top quality support products to help you meet your chat and support demands.

What is Help Center Live?

Help Center Live is an open-source, community driven live chat & support system. You may easily provide live support on your website just like large companies do with very little work. With Help Center Live, you can provide a real-time, live support or sales person experience.

 visit here http://www.helpcenterlive.com/

http://www.wpulti.net/best-php-live-chat-messaging-systems/ 

http://www.phpfreechat.net/ 

 

CMS:

http://www.concrete5.org/about/ We recommend Blue Host but there are many others out there. All you have to do for your live site is click a few buttons in your control panel on your chosen server to automatically install Concrete5.
The automatic install makes the database and you get the sign in information in an email (from Blue Host). Now you're ready to go!
Go to bluehost cPanel and find "Simple Scripts". Find Website Builders and choose Concrete5.
You will be directed to a page to "Install concrete5." Scroll down to the bottom of the page and click "Install".
Choose the latest version and add your url. Look at the Advanced Options to add any information needed. Check the Legal Terms stuff and click on "Complete".
You'll get a status "in progress" dialog box.
Now just go back to your cPanel and get the ftp information to upload your new Concrete5 theme.

Local Site:

For ease of use and convenience, you may want to install Concrete5 on your local computer. To do this you will need a web server, some php goodies, mySQL, and Concrete5 all working together. Don't panic! This is easy.
Step 1: If you do not have the latest version of XAMPP, you can dowload it fromthe following link: XAMPP and install it. Just follow the step-by-step directions on their site. The good news is that XAMPP does not slow down your computer. It doesn't use a lot of system resources. You can also turn it off and on as you need it.
Step2: Go into C:\xampp\htdocs and create a new folder. I named mine concretertb.
Step 3: Download the latest version of Concrete5 from Concrete5 and unzip it to the following location C:\xampp\htdocs\concretertb and rename the folder name from concrete5.5.x to concrete.
Step 4: Open your browser window and type the following URL: http://localhost/phpmyadmin and create one database. I named my new database concretertb1.
Step 5: Open your browser window and type the following URL: http://localhost/concretertb/concrete, you will see the installation screen.
Make sure that you get green check marks for Testing Required Items as shown.
Fill in the following fields:
  • Name Your Site: Name of your site.
  • Your Email Address: Enter valid email address.
  • Password: Enter a password you will use for this site. Remember it!!
  • Server: Since you are installing Concrete5 locally, enter localhost.
  • MySQL Username: By default it is root
  • MySQL Password: By default it is blank.
  • Database Name: Name of the database you created in Step 4.
We recommend that you install sample content. After filling all the information correctly click on Install Concrete5 button.
You will see a progress bar that let's you know what portions are being installed. Most installations go smoothly with no errors.
You should see a screen that tells you Concrete5 has been installed. Click to go to your site.
Congratulations! You are now logged into your new site and will see the dashboard panel at the top of your screen. You will also see the default theme and the sample content.
Now it's time to install a new theme and then start editing your new site.

 

 

- Free CMS version 1.5
  - Free CART version 1.6


Free CMS and Free CART are open-source Creative commons license


http://www.freecart.org/


Free Content Management Systems (CMS) PHP Scripts

http://www.thefreecountry.com/php/contentmanagement.shtml 

 

http://www.concrete5.org/ 

learn coding online

Thursday 3 July 2014

Script mogento wordpress plugins

 

All-in-all, Paradigm is an advanced, feature-rich and stylish Magento Template from RocketTheme.
Paradigm Magento Template
Let’s have an overview of features of Paradigm Magento Template:
  • 8 Preset Color Variations
  • Smooth jQuery menu and other animations
  • Recently Viewed Footer Thumblist
  • ModalHeader Extension
  • ProductView Extension
  • ProductScroller Extension
  • MegaMenus Extension
  • ContentSlider Extension
  • HomepageGrid Extension
  • FeaturedProducts Extension
  • ProductVideo Extension
  • ImageBorders Extension

Download Paradigm Magento Template

--------------

Data Management PHP Script xCRUD

------------------------------------------------------
http://www.codefear.com/scripts/data-management-php-script-xcrud/http://www.codefear.com/scripts=============

Get your own classified
website with Osclass for free

Build your own Osclass installation and start
advertising real estate, jobs or whatever you want- in minutes!
Download Live Demo




100% free open
Join a growing community.=========================================
  

 

 

 

 

 

 

 

 

 

 1. Testimonials WordPress Plugin

Testimonials WordPress Plugin is an enhanced testimonial plugin for your WordPress website. Moreover, Testimonials WordPress Plugin is a responsive WordPress Plugin, which can display a list of testimonials in different ways and layouts. The testimonials can be displayed in the slider form, list form as well as in a grid style. In the slider form, the testimonials can be displayed in three different styles and you can set the number of options such as image size, image radius, scroll duration, buttons positions, number of items, font style, order by, etc. In the grid style, the testimonials are displayed in a responsive grid, with a number of columns. When you choose to display the testimonials in a list form, a simple, responsive list of testimonials is generated depending upon your settings.
WordPress Testimonial Plugins

2. Testimonials Showcase

Testimonials Showcase is a WordPress Plugin used to display testimonials, quotes or reviews in a number of ways. Using Testimonials Showcase you can display testimonials from your customers or supporters. It can also be used to display reviews of your product or services. It can even be used to display list of quotes and you can even use it to link case studies. The testimonials can be displayed in grid or slider layouts. You get as much as 15 layout customization options. Some of its other features include support for star rating system, compatibility for rich snippets, and translation ready, including support for many other features as well.
WordPress Testimonial Plugins

read here http://www.codefear.com/wordpress/testimonial-plugins/

http://www.9lessons.info/2011/05/facebook-wall-script-with-php-and.html

http://www.9lessons.info/2011/02/login-with-facebook-and-twitter.html

html css tricks

CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing.Need to build a reduced test case to demonstrate and figure out a bug? CodePen is great for that. Want to show off your latest creation and get feedback from your peers? CodePen is great for that. Want to find example of a particular design pattern for you project? CodePen is great for that.

http://codepen.io/jlalovi/pen/bIyAr

CSS CODE FOR WEB DESIGN

 /** Inspired by: http://graphicburger.com/flat-design-ui-components/ **/
/** Line-chart and donut-chart made by @kseso http://codepen.io/Kseso/pen/phiyL **/


/************************************ FONTS ************************************/
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome|zocial);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
@font-face {
    font-family: 'icomoon';
    src:url('http://jlalovi-cv.herokuapp.com/font/icomoon.eot');
    src:url('http://jlalovi-cv.herokuapp.com/font/icomoon.eot?#iefix') format('embedded-opentype'),
        url('http://jlalovi-cv.herokuapp.com/font/icomoon.ttf') format('truetype'),
        url('http://jlalovi-cv.herokuapp.com/font/icomoon.woff') format('woff'),
        url('http://jlalovi-cv.herokuapp.com/font/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-cloudy:before {
    content: "\e60f";
}
.icon-sun:before {
    content: "\e610";
}
.icon-cloudy2:before {
    content: "\e611";
}
/************************************* END FONTS *************************************/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

body {
    background: #1f253d;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

h1 {
    font-size: 23px;
}

h2 {
    font-size: 17px;
}

p {
    font-size: 15px;
}

a {
    text-decoration: none;
    font-size: 15px;
}
    a:hover {
        text-decoration: underline;
    }

h1, h2, p, a, span{
    color: #fff;
}
    .scnd-font-color {
        color: #9099b7;
    }

.input-container {
    position: relative;
}
    input[type=text]{
        width: 260px;
        height: 50px;
        margin-left: 20px;
        margin-bottom: 20px;
        padding-left: 45px;
        background: #50597b;
        color: #fff;
        border: solid 1px #1f253d;
        border-radius: 5px;      
    }
        input[type=text]::-webkit-input-placeholder { /* WebKit browsers */
               color: #fff;             
           }
        input[type=text]:-moz-input-placeholder { /* Mozilla Firefox 4 to 18 */
               color: #fff;     
           }
        input[type=text]::-moz-input-placeholder { /* Mozilla Firefox 19+ */
               color: #fff;
           }
        input[type=text]:-ms-input-placeholder { /* Internet Explorer 10+ */
               color: #fff;         
           }
           input[type=text]:focus {
               outline: none; /* removes the default orange border when focus */
               border: 1px solid #11a8ab;
           }
    .input-icon {
        font-size: 22px;
        position: absolute;
        left: 31px;
        top: 10px;
    }
        .input-icon.password-icon {
            left: 35px;
        }

.horizontal-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
    .horizontal-list li {
        float: left;
    }

.clear {
    clear: both;
}

.icon {
    font-size: 25px;
}

.titular {
    display: block;
    line-height: 60px;
    margin: 0;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.button {
    display: block;
    width: 175px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin: 0 auto;
    border-radius: 5px;
    -webkit-transition: background .3s;
    transition: background .3s;
}
    .button:hover {
        text-decoration: none;
    }

.arrow-btn-container {
    position: relative;
}
    .arrow-btn {
        position: absolute;
        display: block;
        width: 60px;
        height: 60px;
        -webkit-transition: background .3s;
        transition: background .3s;
    }
        .arrow-btn:hover {
            text-decoration: none;
        }
        .arrow-btn.left {
            border-top-left-radius: 5px;
        }
        .arrow-btn.right {
            border-top-right-radius: 5px;
            right: 0;
            top: 0;
        }
        .arrow-btn .icon {
            display: block;
            font-size: 18px;
            border: 2px solid #fff;
            border-radius: 100%;
            line-height: 17px;
            width: 21px;
            margin: 20px auto;
            text-align: center;
        }
            .arrow-btn.left .icon {
                padding-right: 2px;
            }

.profile-picture {
    border-radius: 100%;
    overflow: hidden;
    -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;  
}
    .big-profile-picture {
        margin: 0 auto;      
        border: 5px solid #50597b;
        width: 150px;
        height: 150px;
    }
    .small-profile-picture {
        border: 2px solid #50597b;
        width: 40px;
        height: 40px;
    }


/** MAIN CONTAINER **/

.main-container {
    font-family: 'Ubuntu', sans-serif;
    width: 950px;
    height: 1725px;
    margin: 6em auto;
}  
    /*********************************************** HEADER ***********************************************/
    header {
        height: 80px;
    }
        .header-menu {
            font-size: 17px;
            line-height: 80px;
        }
            .header-menu li {
                position: relative;
                -webkit-transform: translateZ(0); /** To avoid a flash when hover messages **/
            }
                .header-menu-tab {
                    padding: 0 27px;
                    display: block;
                    line-height: 74px;
                    font-size: 17px;
                    -webkit-transition: background .3s;
                    transition: background .3s;
                }
                    .header-menu-tab:hover {
                        background: #50597b;
                        border-bottom: 4px solid #11a8ab;
                        text-decoration: none;
                    }
                    .header-menu-tab .icon {
                        padding-right: 15px;
                    }
                .header-menu-number {
                    position: absolute;
                    line-height: 22px;
                    padding: 0 6px;
                    font-weight: 700;
                    background: #e64c65;
                    border-radius: 100%;
                    top: 15px;
                    right: 2px;
                    -webkit-transition: all .3s linear;
                    transition: all .3s linear;
                }
                    .header-menu li:hover .header-menu-number {
                        text-decoration: none;
                        -webkit-transform: rotate(360deg);
                        transform: rotate(360deg);

                    }
        .profile-menu {
            float: right;
            height: 80px;
            padding-right: 20px;
        }
            .profile-menu p {
                font-size: 17px;
                display: inline-block;
                line-height: 76px;
                margin: 0;
                padding-right: 10px;
            }
                .profile-menu a {
                    padding-left: 5px;
                }
                    .profile-menu a:hover {
                        text-decoration: none;
                    }
            .small-profile-picture {
                display: inline-block;
                vertical-align: middle;              
            }
    /** CONTAINERS **/
    .container {
        float: left;
        width: 300px;
    }
        .block {
            margin-bottom: 25px;
            background: #394264;
            border-radius: 5px;
        }
        /******************************************** LEFT CONTAINER *****************************************/
        .left-container {}
            .menu-box {
                height: 360px;
            }
                .menu-box .titular {
                    background: #11a8ab;
                }
                .menu-box-menu .icon {
                    display: inline-block;
                    vertical-align: top;
                    width: 28px;
                    margin-left: 20px;
                    margin-right: 15px;
                }
                .menu-box-number {
                    width: 36px;
                    line-height: 22px;
                    background: #50597b;
                    text-align: center;
                    border-radius: 15px;
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    -webkit-transition: all .3s;
                    transition: all .3s;
                }
                .menu-box-menu li{
                    height: 60px;
                    position: relative;                                      
                }
                .menu-box-tab {
                    line-height: 60px;
                    display: block;
                    border-bottom: 1px solid #1f253d;
                    -webkit-transition: background .2s;
                    transition: background .2s;
                }
                    .menu-box-tab:hover {
                        background: #50597b;
                        border-top: 1px solid #1f253d;
                        text-decoration: none;
                    }
                    .menu-box-tab:hover .icon {
                        color: #fff;
                    }
                    .menu-box-tab:hover .menu-box-number {
                        background: #e64c65;
                    }
            .donut-chart-block {
                height: 434px;
            }
                .donut-chart-block .titular {
                    padding: 10px 0;
                }
                .donut-chart {
                    height: 270px;
                }
                /******************************************
                DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
                ******************************************/
                    .donut-chart {
                      position: relative;
                        width: 200px;
                      height: 200px;
                        margin: 0 auto 2rem;
                        border-radius: 100%
                     }
                    p.center-date {
                      background: #394264;
                      position: absolute;
                      text-align: center;
                        font-size: 28px;
                      top:0;left:0;bottom:0;right:0;
                      width: 130px;
                      height: 130px;
                      margin: auto;
                      border-radius: 50%;
                      line-height: 35px;
                      padding: 15% 0 0;
                    }
                    .center-date span.scnd-font-color {
                     line-height: 0;
                    }
                    .recorte {
                        border-radius: 50%;
                        clip: rect(0px, 200px, 200px, 100px);
                        height: 100%;
                        position: absolute;
                        width: 100%;
                      }
                    .quesito {
                        border-radius: 50%;
                        clip: rect(0px, 100px, 200px, 0px);
                        height: 100%;
                        position: absolute;
                        width: 100%;
                        font-family: monospace;
                        font-size: 1.5rem;
                      }
                    #porcion1 {
                        -webkit-transform: rotate(0deg);
                        transform: rotate(0deg);
                      }

                    #porcion1 .quesito {
                        background-color: #E64C65;
                        -webkit-transform: rotate(76deg);
                        transform: rotate(76deg);
                      }
                    #porcion2 {
                        -webkit-transform: rotate(76deg);
                        transform: rotate(76deg);
                      }
                    #porcion2 .quesito {
                        background-color: #11A8AB;
                        -webkit-transform: rotate(140deg);
                        transform: rotate(140deg);
                      }
                    #porcion3 {
                        -webkit-transform: rotate(215deg);
                        transform: rotate(215deg);
                      }
                    #porcion3 .quesito {
                        background-color: #4FC4F6;
                        -webkit-transform: rotate(113deg);
                        transform: rotate(113deg);
                      }
                    #porcionFin {
                        -webkit-transform: rotate(-32deg);
                        transform:rotate(-32deg);
                      }
                    #porcionFin .quesito {
                        background-color: #FCB150;
                        -webkit-transform: rotate(32deg);
                        transform: rotate(32deg);
                      }
                /******************************************
                END DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
                ******************************************/
        .os-percentages {
                    padding-top: 36px;
                }
        .os-percentages li {
                    width: 75px;
                    border-left: 1px solid #394264;
                    text-align: center;                  
                    background: #50597b;
                }
                    .os {
                        margin: 0;
                        padding: 10px 0 5px;
                        font-size: 15px;      
                    }
                        .os.ios {
                            border-top: 4px solid #e64c65;
                        }
                        .os.mac {
                            border-top: 4px solid #11a8ab;
                        }
                        .os.linux {
                            border-top: 4px solid #fcb150;
                        }
                        .os.win {
                            border-top: 4px solid #4fc4f6;
                        }
                    .os-percentage {
                        margin: 0;
                        padding: 0 0 15px 10px;
                        font-size: 25px;
                    }
            .line-chart-block {
                height: 400px;
            }
                .line-chart {
                    height: 200px;
                    background: #11a8ab;
                }
        /******************************************
                LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
                ******************************************/
                .grafico {
                  padding: 2rem 1rem 1rem;
                  width: 100%;
                  height: 100%;
                  position: relative;
                  color: #fff;
                  font-size: 80%;
                }
                .grafico span {
                  display: block;
                  position: absolute;
                  bottom: 3rem;
                  left: 2rem;
                  height: 0;
                  border-top: 2px solid;
                  -webkit-transform-origin: left center;
                  transform-origin: left center;
                }
                .grafico span > span {
                  left: 100%; bottom: 0;
                }
                [data-valor='25'] {width: 75px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
                [data-valor='8'] {width: 24px; -webkit-transform: rotate(65deg); transform: rotate(65deg);}
                [data-valor='13'] {width: 39px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
                [data-valor='5'] {width: 15px; -webkit-transform: rotate(50deg); transform: rotate(50deg);}
                [data-valor='23'] {width: 69px; -webkit-transform: rotate(-70deg); transform: rotate(-70deg);}
                [data-valor='12'] {width: 36px; -webkit-transform: rotate(75deg); transform: rotate(75deg);}
                [data-valor='15'] {width: 45px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

                [data-valor]:before {
                  content: '';
                  position: absolute;
                  display: block;
                  right: -4px;
                  bottom: -3px;
                  padding: 4px;
                  background: #fff;
                  border-radius: 50%;
                }
                [data-valor='23']:after {
                  content: '+' attr(data-valor) '%';
                  position: absolute;
                  right: -2.7rem;
                  top: -1.7rem;
                  padding: .3rem .5rem;
                  background: #50597B;
                  border-radius: .5rem;
                  -webkit-transform: rotate(45deg);
                  transform: rotate(45deg);
                }
                [class^='eje-'] {
                  position: absolute;
                  left: 0;
                  bottom: 0rem;
                  width: 100%;
                  padding: 1rem 1rem 0 2rem;
                  height: 80%;
                }
                .eje-x {
                  height: 2.5rem;
                }
                .eje-y li {
                  height: 25%;
                  border-top: 1px solid #777;
                }
                [data-ejeY]:before {
                  content: attr(data-ejeY);
                  display: inline-block;
                  width: 2rem;
                  text-align: right;
                  line-height: 0;
                  position: relative;
                  left: -2.5rem;
                  top: -.5rem;
                }
                .eje-x li {
                  width: 33%;
                  float: left;
                  text-align: center;
                }
                /******************************************
                END LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
                ******************************************/
                .time-lenght {
                    padding-top: 22px;
                    padding-left: 38px;
                }
                    .time-lenght-btn {
                        display: block;
                        width: 70px;
                        line-height: 32px;
                        background: #50597b;
                        border-radius: 5px;
                        font-size: 14px;
                        text-align: center;
                        margin-right: 5px;
                        -webkit-transition: background .3s;
                        transition: background .3s;
                    }
                        .time-lenght-btn:hover {
                            text-decoration: none;
                            background: #e64c65;
                        }
                .month-data {
                    padding-top: 28px;
                }
                    .month-data p {
                        display: inline-block;
                        margin: 0;
                        padding: 0 25px 15px;          
                        font-size: 16px;
                    }
                        .month-data p:last-child {
                            padding: 0 25px;
              float: right;
                            font-size: 15px;
                        }
                        .increment {
                            color: #e64c65;
                        }
            .media {
                height: 216px;
            }
                #media-display {
                    position: relative;
                    height: 180px;
                    background: #787878 url('http://www.fancinema.com.ar/wp-content/uploads/catwoman1.jpg') center top;
                }
                    #media-display .play {
                        position: absolute;
                        top: 75px;
                        right: 32px;
                        border: 2px solid #fff;
                        border-radius: 100%;
                        padding: 2px 5px 2px 9px;
                    }
                        #media-display .play:hover {
                            border: 2px solid #e64c65;
                    }
                .media-control-bar {
                    padding: 6px 0 0 15px;
                }
                    .media-btn, .time-passed {
                        display: inline-block;
                        margin: 0;                  
                    }
                    .media-btn {
                        font-size: 19px;                      
                    }
                        .media-btn:hover, .media-btn:hover span {
                            text-decoration: none;
                            color: #e64c65;
                        }
                        .play {
                            margin-right: 100px
                        }
                        .volume {
                            margin-left: 30px;
                        }
                        .resize {
                            margin-left: 12px;
                        }
            .left-container .social {
                height: 110px;
            }
                .left-container .social li {
                    width: 75px;
                    height: 110px;                                      
                }
                    .left-container .social li .icon {
                        text-align: center;
                        font-size: 20px;
                        margin: 0;
                        line-height: 75px;
                    }
                    .left-container .social li .number {
                        text-align: center;
                        margin: 0;
                        line-height: 34px;
                    }
                    .left-container .social .facebook {
                        background: #3468af;
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                    }
                        .left-container .social .facebook .number {
                            background: #1a4e95;
                            border-bottom-left-radius: 5px;
                        }
                    .left-container .social .twitter {
                        background: #4fc4f6;                      
                    }
                        .left-container .social .twitter .icon {
                            font-size: 18px;
                        }
                        .left-container .social .twitter .number {
                            background: #35aadc;
                        }
                    .left-container .social .googleplus {
                        background: #e64c65;                      
                    }
                        .left-container .social .googleplus .number{
                            background: #cc324b;
                        }
                    .left-container .social .mailbox {
                        background: #50597b;                      
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                    }
                        .left-container .social .mailbox .number {
                            background: #363f61;
                            border-bottom-right-radius: 5px;
                        }
        /************************************************** MIDDLE CONTAINER **********************************/
        .middle-container {
            margin: 0 25px;          
        }
            .profile {
                height: 410px;
            }
                .add-button .icon {
                    float: right;
                    line-height: 18px;
                    width: 23px;                  
                    border: 2px solid;
                    border-radius: 100%;
                    font-size: 18px;
                    text-align: center;
                    margin: 10px;                  
                }
                    .add-button .icon:hover {
                        color: #e64c65;
                        border-color: #e64c65;
                    }
                .user-name {
                    margin: 25px 0 16px;
                    text-align: center;
                }
                .profile-description {
                    width: 210px;
                    margin: 0 auto;
                    text-align: center;
                }
                .profile-options {
                    padding-top: 23px;
                }
                    .profile-options li {
                        border-left: 1px solid #1f253d;
                    }
                        .profile-options p {
                            margin: 0;
                        }
                        .profile-options a {
                            display: block;                  
                            width: 99px;
                            line-height: 60px;
                            text-align: center;
                            -webkit-transition: background .3s;
                            transition: background .3s;              
                        }
                            .profile-options a:hover {
                                text-decoration: none;
                                background: #50597b;
                            }
                            .profile-options a:hover.comments .icon {
                                color: #fcb150;
                            }
                            .profile-options a:hover.views .icon {
                                color: #11a8ab;
                            }
                            .profile-options a:hover.likes .icon {
                                color: #e64c65;
                            }
                            .profile-options .icon {
                                padding-right: 10px;
                            }
                            .profile-options .comments {
                                border-top: 4px solid #fcb150;
                            }
                            .profile-options .views {
                                border-top: 4px solid #11a8ab;
                            }
                            .profile-options .likes {
                                border-top: 4px solid #e64c65;
                            }
            .weather {
                height: 555px;
            }
                .weather .titular {
                    background: #cc324b;
                }
                    .weather .titular .icon {
                        padding-right: 15px;
                        font-size: 26px;
                    }
                .weather .current-day {
                    height: 135px;
                    background: #e64c65;
                }
                    .weather .current-day p {
                        margin: 0;
                        padding-left: 50px;                  
                    }
                        .current-day-date {
                            font-size: 16px;
                            padding-top: 16px;
                        }
                        .current-day-temperature {
                            font-size: 70px;
                        }
                            .current-day-temperature .icon-cloudy {
                                padding-left: 20px;
                            }
                .weather .next-days{}
                .weather .next-days p {
                    margin: 0;
                    display: inline-block;
                    font-size: 16px;
                }
                .weather .next-days a {
                    display: block;
                    line-height: 58px;
                    border-bottom: 1px solid #1f253d;
                    -webkit-transition: background .3s;
                    transition: background .3s;
                }
                    .weather .next-days a:hover {
                        background: #50597b;
                    }
                    .weather .next-days a:hover .day {
                        color: #e64c65;
                    }
                    .weather .next-days-date {
                        padding-left: 20px;
                    }
                    .weather .next-days-temperature {
                        float: right;
                        padding-right: 20px;
                    }
                        .weather .next-days-temperature .icon {
                            padding-left: 10px;
                        }
            .tweets {
                height: 375px;
            }
                .tweets .titular {
                    background: #35aadc;
                }
                    .tweets .titular .icon {
                        font-size: 18px;
                        padding-right: 20px;
                    }
                .tweet.first {
                    height: 150px;
                    border-bottom: 1px solid #1f253d;
                }
                    .tweet p:first-child {
                        margin: 0;
                        padding: 30px 30px 0;
                    }
                    .tweet p:last-child {
                        margin: 0;
                        padding: 15px 30px 0;
                    }
                    .tweet-link {
                        color: #4fc4f6;
                    }
            .middle-container .social {
                height: 205px;
                background: #1f253d;
            }
                .middle-container .social li {
                    margin-bottom: 12px;
                }
                .middle-container .social a {
                    line-height: 60px;          
                }
                    .middle-container .social a:hover {
                        text-decoration: none;
                    }
                    .middle-container .social .titular {
                        border-radius: 5px;
                    }
                        .middle-container .social .facebook {
                            background: #3468af;
                            -webkit-transition: background .3s;
                            transition: background .3s;
                        }
                            .middle-container .social a:hover .facebook {
                                background: #1a4e95;
                            }
                            .middle-container .social a:hover .icon.facebook {
                                background: #3468af;
                            }
                        .middle-container .social .twitter {
                            background: #4fc4f6;
                            -webkit-transition: background .3s;
                            transition: background .3s;
                        }
                            .middle-container .social a:hover .twitter {
                                background: #35aadc;
                            }
                            .middle-container .social a:hover .icon.twitter {
                                background: #4fc4f6;
                            }
                        .middle-container .social .googleplus {
                            background: #e64c65;
                            -webkit-transition: background .3s;
                            transition: background .3s;
                        }
                            .middle-container .social a:hover .googleplus {
                                background: #cc324b;
                            }
                            .middle-container .social a:hover .icon.googleplus {
                                background: #e64c65;
                            }
                .middle-container .social .icon {
                    float: left;
                    width: 60px;
                    height: 60px;
                    text-align: center;
                    font-size: 20px;
                    border-bottom-left-radius: 5px;
                    border-top-left-radius: 5px;
                }
                    .middle-container .social .icon.facebook {
                        background: #1a4e95;                      
                    }
                    .middle-container .social .icon.twitter {
                        background: #35aadc;                      
                    }
                    .middle-container .social .icon.googleplus {
                        background: #cc324b;                      
                    }
        /********************************************* RIGHT CONTAINER ****************************************/
        .right-container {}
            .join-newsletter {
                height: 230px;
            }
                .join-newsletter .titular {
                    padding-top: 10px;
                }
                .subscribe.button {
                    background: #11a8ab;
                    margin-top: 10px;
                }
                    .subscribe.button:hover {
                        background: #0F9295;
                    }
            .account {
                height: 390px;
            }
                .account .titular {
                    padding: 10px 0;
                }
                .sign-in.button {
                    background: #e64c65;
                    margin: 10px auto;
                }
                    .sign-in.button:hover {
                        background: #cc324b;
                    }
                .account p {
                    text-align: center;
                }
                .fb-sign-in {
                    margin-top: 28px;
                    display: block;
                    line-height: 50px;
                    background: #3468af;
                    border-bottom-left-radius: 5px;
                    border-bottom-right-radius: 5px;
                    -webkit-transition: background .3s;
                    transition: background .3s;
                }
                    .fb-sign-in:hover {
                        background: #1a4e95;
                        text-decoration: none;
                    }
                .fb-sign-in .icon {  
                    line-height: 20px;
                    font-size: 12px;
                    padding-right: 3px;
                }
                    .fb-border {
                        display: inline-block;
                        width: 23px;
                        line-height: 20px;
                        border: 2px solid #fff;
                        border-radius: 100%;
                        margin-right: 10px;
                    }
            .loading {
                height: 200px;
                padding-top: 35px;
            }
                .loading p {
                    display: inline-block;
                    padding-left: 30px;
                    margin: 5px 0 20px;
                }
                    .loading .icon {
                        padding-right: 15px;
                    }
                    .loading .percentage {
                        float: right;
                        padding: 6px 35px 0 0;
                    }
                .loading .progress-bar {
                    width: 250px;
                    height: 20px;
                    background: #50597b;
                    border-radius: 5px;
                    margin: 0 auto;
                }
                    .progress-bar.downloading {
                        background: -webkit-linear-gradient(left, #11a8ab 81%,#50597b 81%); /* Chrome10+,Safari5.1+ */
                        background: -ms-linear-gradient(left, #11a8ab 81%,#50597b 81%); /* IE10+ */
                        background: linear-gradient(to right, #11a8ab 81%,#50597b 81%); /* W3C */
                    }
                    .progress-bar.uploading {
                        background: -webkit-linear-gradient(left, #4fc4f6 43%,#50597b 43%); /* Chrome10+,Safari5.1+ */
                        background: -ms-linear-gradient(left, #4fc4f6 43%,#50597b 43%); /* IE10+ */
                        background: linear-gradient(to right, #4fc4f6 43%,#50597b 43%); /* W3C */
                    }
            .calendar-day {
                height: 320px;
                background: #3468af;
            }
                .calendar-day .titular {
                    background: #1a4e95;
                }
                    .calendar-day .arrow-btn:hover {
                        background: #16417E;
                    }
                .calendar-day .the-day {
                    margin: 0;
                    text-align: center;
                    font-size: 146px;
                }
                .add-event.button {
                    background: #4fc4f6;
                }
                    .add-event.button:hover {
                        background: #35aadc;
                    }
            .calendar-month {
                height: 380px;
            }
                .calendar-month .titular {
                    background: #3468af;
                }
                    .calendar-month .arrow-btn:hover {
                        background: #1a4e95;
                    }
                .calendar {
                    margin: 22px 15px;
                    text-align: center;
                }
                    .calendar a {
                        font-size: 17px;
                    }
                    .calendar td, .calendar th {
                        width: 40px;
                        height: 38px;                      
                    }
                    .calendar .days-week {
                        color: #4fc4f6;
                    }
                    .calendar .today {
                        display: block;
                        width: 34px;
                        line-height: 34px;
                        background: #e64c65;
                        border-radius: 100%;
                    }


HTML CODE FOR WEB DESIGN

    <body>

        <div class="main-container">

            <!-- HEADER -->
            <header class="block">
                <ul class="header-menu horizontal-list">
                    <li>
                        <a class="header-menu-tab" href="#1"><span class="icon entypo-cog scnd-font-color"></span>Settings</a>
                    </li>
                    <li>
                        <a class="header-menu-tab" href="#2"><span class="icon fontawesome-user scnd-font-color"></span>Account</a>
                    </li>
                    <li>
                        <a class="header-menu-tab" href="#3"><span class="icon fontawesome-envelope scnd-font-color"></span>Messages</a>
                        <a class="header-menu-number" href="#4">5</a>
                    </li>
                    <li>
                        <a class="header-menu-tab" href="#5"><span class="icon fontawesome-star-empty scnd-font-color"></span>Favorites</a>
                    </li>
                </ul>
                <div class="profile-menu">
                    <p>Me <a href="#26"><span class="entypo-down-open scnd-font-color"></span></a></p>
                    <div class="profile-picture small-profile-picture">
                        <img width="40px" alt="Anne Hathaway picture" src="http://upload.wikimedia.org/wikipedia/commons/e/e1/Anne_Hathaway_Face.jpg">
                    </div>
                </div>
            </header>

            <!-- LEFT-CONTAINER -->
            <div class="left-container container">
                <div class="menu-box block"> <!-- MENU BOX (LEFT-CONTAINER) -->
                    <h2 class="titular">MENU BOX</h2>
                    <ul class="menu-box-menu">
                        <li>
                            <a class="menu-box-tab" href="#6"><span class="icon fontawesome-envelope scnd-font-color"></span>Messages<div class="menu-box-number">24</div></a>                           
                        </li>
                        <li>
                            <a class="menu-box-tab" href="#8"><span class="icon entypo-paper-plane scnd-font-color"></span>Invites<div class="menu-box-number">3</div></a>                           
                        </li>
                        <li>
                            <a class="menu-box-tab" href="#10"><span class="icon entypo-calendar scnd-font-color"></span>Events<div class="menu-box-number">5</div></a>                           
                        </li>
                        <li>
                            <a class="menu-box-tab" href="#12"><span class="icon entypo-cog scnd-font-color"></span>Account Settings</a>
                        </li>
                        <li>
                            <a class="menu-box-tab" href="#13"><sapn class="icon entypo-chart-line scnd-font-color"></sapn>Statistics</a>
                        </li>                       
                    </ul>
                </div>
                <div class="donut-chart-block block"> <!-- DONUT CHART BLOCK (LEFT-CONTAINER) -->
                    <h2 class="titular">OS AUDIENCE STATS</h2>
                    <div class="donut-chart">
                        <!-- DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL -->
                        <div id="porcion1" class="recorte"><div class="quesito ios" data-rel="21"></div></div>
                        <div id="porcion2" class="recorte"><div class="quesito mac" data-rel="39"></div></div>
                        <div id="porcion3" class="recorte"><div class="quesito win" data-rel="31"></div></div>
                        <div id="porcionFin" class="recorte"><div class="quesito linux" data-rel="9"></div></div>
                        <!-- END DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL -->   
                        <p class="center-date">JUNE<br><span class="scnd-font-color">2013</span></p>
                    </div>
                    <ul class="os-percentages horizontal-list">
                        <li>
                            <p class="ios os scnd-font-color">iOS</p>
                            <p class="os-percentage">21<sup>%</sup></p>
                        </li>
                        <li>
                            <p class="mac os scnd-font-color">Mac</p>
                            <p class="os-percentage">48<sup>%</sup></p>
                        </li>
                        <li>
                            <p class="linux os scnd-font-color">Linux</p>
                            <p class="os-percentage">9<sup>%</sup></p>
                        </li>
                        <li>
                            <p class="win os scnd-font-color">Win</p>
                            <p class="os-percentage">32<sup>%</sup></p>
                        </li>
                    </ul>
                </div>
                <div class="line-chart-block block clear"> <!-- LINE CHART BLOCK (LEFT-CONTAINER) -->
                    <div class="line-chart">
                      <!-- LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL -->
                        <div class='grafico'>
                           <ul class='eje-y'>
                             <li data-ejeY='30'></li>
                             <li data-ejeY='20'></li>
                             <li data-ejeY='10'></li>
                             <li data-ejeY='0'></li>
                           </ul>
                           <ul class='eje-x'>
                             <li>Apr</li>
                             <li>May</li>
                             <li>Jun</li>
                           </ul>
                             <span data-valor='25'>
                               <span data-valor='8'>
                                 <span data-valor='13'>
                                   <span data-valor='5'>  
                                     <span data-valor='23'>  
                                     <span data-valor='12'>
                                         <span data-valor='15'>
                                         </span></span></span></span></span></span></span>
                        </div>
                        <!-- END LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL -->
                    </div>
                    <ul class="time-lenght horizontal-list">
                        <li><a class="time-lenght-btn" href="#14">Week</a></li>
                        <li><a class="time-lenght-btn" href="#15">Month</a></li>
                        <li><a class="time-lenght-btn" href="#16">Year</a></li>
                    </ul>
                    <ul class="month-data clear">
                        <li>
                            <p>APR<span class="scnd-font-color"> 2013</span></p>
                            <p><span class="entypo-plus increment"> </span>21<sup>%</sup></p>
                        </li>
                        <li>
                            <p>MAY<span class="scnd-font-color"> 2013</span></p>
                            <p><span class="entypo-plus increment"> </span>48<sup>%</sup></p>
                        </li>
                        <li>
                            <p>JUN<span class="scnd-font-color"> 2013</span></p>
                            <p><span class="entypo-plus increment"> </span>35<sup>%</sup></p>
                        </li>
                    </ul>
                </div>
                <div class="media block"> <!-- MEDIA (LEFT-CONTAINER) -->
                    <div id="media-display">
                        <a class="media-btn play" href="#23"><span class="fontawesome-play"></span></a>
                    </div>
                    <div class="media-control-bar">
                        <a class="media-btn play" href="#23"><span class="fontawesome-play scnd-font-color"></span></a>
                        <p class="time-passed">4:15 <span class="time-duration scnd-font-color">/ 9:23</span></p>
                        <a class="media-btn volume" href="#24"><span class="fontawesome-volume-up scnd-font-color"></span></a>
                        <a class="media-btn resize" href="#25"><span class="fontawesome-resize-full scnd-font-color"></span></a>
                    </div>
                </div>
                <ul class="social horizontal-list block"> <!-- SOCIAL (LEFT-CONTAINER) -->
                    <li class="facebook"><p class="icon"><span class="zocial-facebook"></span></p><p class="number">248k</p></li>
                    <li class="twitter"><p class="icon"><span class="zocial-twitter"></span></p><p class="number">30k</p></li>
                    <li class="googleplus"><p class="icon"><span class="zocial-googleplus"></span></p><p class="number">124k</p></li>
                    <li class="mailbox"><p class="icon"><span class="fontawesome-envelope"></span></p><p class="number">89k</p></li>
                </ul>
            </div>

            <!-- MIDDLE-CONTAINER -->
            <div class="middle-container container">
                <div class="profile block"> <!-- PROFILE (MIDDLE-CONTAINER) -->
                    <a class="add-button" href="#28"><span class="icon entypo-plus scnd-font-color"></span></a>
                    <div class="profile-picture big-profile-picture clear">
                        <img width="150px" alt="Anne Hathaway picture" src="http://upload.wikimedia.org/wikipedia/commons/e/e1/Anne_Hathaway_Face.jpg" >
                    </div>
                    <h1 class="user-name">Anne Hathaway</h1>
                    <div class="profile-description">
                        <p class="scnd-font-color">Lorem ipsum dolor sit amet consectetuer adipiscing</p>
                    </div>
                    <ul class="profile-options horizontal-list">
                        <li><a class="comments" href="#40"><p><span class="icon fontawesome-comment-alt scnd-font-color"></span>23</li></p></a>
                        <li><a class="views" href="#41"><p><span class="icon fontawesome-eye-open scnd-font-color"></span>841</li></p></a>
                        <li><a class="likes" href="#42"><p><span class="icon fontawesome-heart-empty scnd-font-color"></span>49</li></p></a>
                    </ul>
                </div>
                <div class="weather block clear"> <!-- WEATHER (MIDDLE-CONTAINER) -->
                    <h2 class="titular"><span class="icon entypo-location"></span><strong>CLUJ-NAPOCA</strong>/RO</h2>
                    <div class="current-day">
                        <p class="current-day-date">FRI 29/06</p>
                        <p class="current-day-temperature">24º<span class="icon-cloudy"></span></p>
                    </div>
                    <ul class="next-days">
                        <li>
                            <a href="#43">
                                <p class="next-days-date"><span class="day">SAT</span> <span class="scnd-font-color">29/06</span></p>
                                <p class="next-days-temperature">25º<span class="icon icon-cloudy scnd-font-color"></span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#44">
                                <p class="next-days-date"><span class="day">SUN</span> <span class="scnd-font-color">30/06</span></p>
                                <p class="next-days-temperature">22º<span class="icon icon-cloudy2 scnd-font-color"></span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#45">
                                <p class="next-days-date"><span class="day">MON</span> <span class="scnd-font-color">01/07</span></p>
                                <p class="next-days-temperature">24º<span class="icon icon-cloudy2 scnd-font-color"></span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#46">
                                <p class="next-days-date"><span class="day">TUE</span> <span class="scnd-font-color">02/07</span></p>
                                <p class="next-days-temperature">26º<span class="icon icon-cloudy scnd-font-color"></span></p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <p class="next-days-date"><span class="day">WED</span> <span class="scnd-font-color">03/07</span></p>
                                <p class="next-days-temperature">27º<span class="icon icon-sun scnd-font-color"></span></p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <p class="next-days-date"><span class="day">THU</span> <span class="scnd-font-color">04/07</span></p>
                                <p class="next-days-temperature">29º<span class="icon icon-sun scnd-font-color"></span></p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="tweets block"> <!-- TWEETS (MIDDLE-CONTAINER) -->
                    <h2 class="titular"><span class="icon zocial-twitter"></span>LATEST TWEETS</h2>
                    <div class="tweet first">
                        <p>Ice-cream trucks only play music when out of ice-cream. Well played dad. On <a class="tweet-link" href="#17">@Quora</a></p>
                        <p><a class="time-ago scnd-font-color" href="#18">3 minutes ago</a></p>
                    </div>
                    <div class="tweet">
                        <p>We are in the process of pushing out all of the new CC apps! We will tweet again once they are live <a class="tweet-link" href="#19">#CreativeCloud</a></p>
                        <p><a class="scnd-font-color" href="#20">6 hours ago</a></p>
                    </div>
                </div>
                <ul class="social block"> <!-- SOCIAL (MIDDLE-CONTAINER) -->
                    <li><a href="#50"><div class="facebook icon"><span class="zocial-facebook"></span></div><h2 class="facebook titular">SHARE TO FACEBOOK</h2></li></a>
                    <li><a href="#51"><div class="twitter icon"><span class="zocial-twitter"></span></div><h2 class="twitter titular">SHARE TO TWITTER</h2></li></a>
                    <li><a href="#52"><div class="googleplus icon"><span class="zocial-googleplus"></span></div><h2 class="googleplus titular">SHARE TO GOOGLE+</h2></li></a>
                </ul>
            </div>

            <!-- RIGHT-CONTAINER -->
            <div class="right-container container">
                <div class="join-newsletter block"> <!-- JOIN NEWSLETTER (RIGHT-CONTAINER) -->
                    <h2 class="titular">JOIN THE NEWSLETTER</h2>
                    <div class="input-container">
                        <input type="text" placeholder="yourname@gmail.com" class="email text-input">
                        <div class="input-icon envelope-icon-newsletter"><span class="fontawesome-envelope scnd-font-color"></span></div>
                    </div>
                    <a class="subscribe button" href="#21">SUBSCRIBE</a>
                </div>
                <div class="account block"> <!-- ACCOUNT (RIGHT-CONTAINER) -->
                    <h2 class="titular">SIGN IN TO YOUR ACCOUNT</h2>
                    <div class="input-container">
                        <input type="text" placeholder="yourname@gmail.com" class="email text-input">
                        <div class="input-icon envelope-icon-acount"><span class="fontawesome-envelope scnd-font-color"></span></div>
                    </div>
                    <div class="input-container">
                        <input type="text" placeholder="Password" class="password text-input">
                        <div class="input-icon password-icon"><span class="fontawesome-lock scnd-font-color"></span></div>
                    </div>
                    <a class="sign-in button" href="#22">SIGN IN</a>
                    <p class="scnd-font-color">Forgot Password?</p>
                    <a class="fb-sign-in" href="58">
                        <p><span class="fb-border"><span class="icon zocial-facebook"></span></span>Sign in with Facebook</p>
                    </a>
                </div>
                <div class="loading block"> <!-- LOADING (RIGHT-CONTAINER) -->
                    <div class="progress-bar downloading"></div>
                    <p><span class="icon fontawesome-cloud-download scnd-font-color"></span>Downloading...</p>
                    <p class="percentage">81<sup>%</sup></p>
                    <div class="progress-bar uploading"></div>
                    <p><span class="icon fontawesome-cloud-upload scnd-font-color"></span>Uploading...</p>
                    <p class="percentage">43<sup>%</sup></p>
                </div>
                <div class="calendar-day block"> <!-- CALENDAR DAY (RIGHT-CONTAINER) -->
                    <div class="arrow-btn-container">
                        <a class="arrow-btn left" href="#200"><span class="icon fontawesome-angle-left"></span></a>
                        <h2 class="titular">WEDNESDAY</h2>
                        <a class="arrow-btn right" href="#201"><span class="icon fontawesome-angle-right"></span></a>
                    </div>
                        <p class="the-day">26</p>
                        <a class="add-event button" href="#27">ADD EVENT</a>
                </div>
                <div class="calendar-month block"> <!-- CALENDAR MONTH (RIGHT-CONTAINER) -->
                    <div class="arrow-btn-container">
                        <a class="arrow-btn left" href="#202"><span class="icon fontawesome-angle-left"></span></a>
                        <h2 class="titular">APRIL 2013</h2>
                        <a class="arrow-btn right" href="#203"><span class="icon fontawesome-angle-right"></span></a>
                    </div>
                    <table class="calendar">
                        <thead class="days-week">
                            <tr>
                                <th>S</th>
                                <th>M</th>
                                <th>T</th>
                                <th>W</th>
                                <th>R</th>
                                <th>F</th>
                                <th>S</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td><a class="scnd-font-color" href="#100">1</a></td>
                            </tr>
                            <tr>
                                <td><a class="scnd-font-color" href="#101">2</a></td>
                                <td><a class="scnd-font-color" href="#102">3</a></td>
                                <td><a class="scnd-font-color" href="#103">4</a></td>
                                <td><a class="scnd-font-color" href="#104">5</a></td>
                                <td><a class="scnd-font-color" href="#105">6</a></td>
                                <td><a class="scnd-font-color" href="#106">7</a></td>
                                <td><a class="scnd-font-color" href="#107">8</a></td>
                            </tr>
                            <tr>
                                <td><a class="scnd-font-color" href="#108">9</a></td>
                                <td><a class="scnd-font-color" href="#109">10</a></td>
                                <td><a class="scnd-font-color" href="#110">11</a></td>
                                <td><a class="scnd-font-color" href="#111">12</a></td>
                                <td><a class="scnd-font-color" href="#112">13</a></td>
                                <td><a class="scnd-font-color" href="#113">14</a></td>
                                <td><a class="scnd-font-color" href="#114">15</a></td>
                            </tr>
                            <tr>
                                <td><a class="scnd-font-color" href="#115">16</a></td>
                                <td><a class="scnd-font-color" href="#116">17</a></td>
                                <td><a class="scnd-font-color" href="#117">18</a></td>
                                <td><a class="scnd-font-color" href="#118">19</a></td>
                                <td><a class="scnd-font-color" href="#119">20</a></td>
                                <td><a class="scnd-font-color" href="#120">21</a></td>
                                <td><a class="scnd-font-color" href="#121">22</a></td>
                            </tr>
                            <tr>
                                <td><a class="scnd-font-color" href="#122">23</a></td>
                                <td><a class="scnd-font-color" href="#123">24</a></td>
                                <td><a class="scnd-font-color" href="#124">25</a></td>
                                <td><a class="today" href="#125">26</a></td>
                                <td><a href="#126">27</a></td>
                                <td><a href="#127">28</a></td>
                                <td><a href="#128">29</a></td>
                            </tr>
                            <tr>
                                <td><a href="#129">30</a></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div> <!-- end calendar-month block -->
            </div> <!-- end right-container -->
        </div> <!-- end main-container -->
    </body>