tamizhvendan/iGoogle-Sample.html

## iGoogle-Sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample iGoogle Page</title>

    <style type="text/css">

        /* Entire Page has been divided into 3Columns.
           Note: iGoogle Page has 3 columns */
        #column1,#column2,#column3
        {
            display:inline-block;
            float:left;
            width: 33%;
            height: auto;
            text-align:center;
            padding-bottom: 100px;
        }

        /* Css Classes for Entire Widget */

        .Widget
        {
        	margin: 10px;
        	margin-left: auto;
        	margin-right: auto;
        	width: 95%;
        	min-height: 200px;
        	border: 1px solid Black;
        }


        /* Css Classes for Widget Headers */

        .WidgetHeader
        {
        	height: 25px;
        	cursor: move;
        	text-align: left;
        	padding-left: 3px;
            color: White;
            font-weight: bold;
        }

        .GreenWidgetHeader
        {
        	background-color:Green;
        }

        .GrayWidgetHeader
        {
        	background-color:Gray;
        }

        .PurpleWidgetHeader
        {
        	background-color:Purple;
        }

        /* Css Classes for Widget Body */
        .WidgetBody
        {
        	min-height: 175px;
        	height:auto;
        	background: #F0F0F0;
        }

        /* Placeholder while dragging the widget using jQuery*/
        .ui-sortable-placeholder { border: 1px dashed black; visibility: visible !important; height: 50px !important; }
    	.ui-sortable-placeholder * { visibility: hidden; }

        .footer
        {
        	clear:both;
        	display:block;
        	position:absolute;
        	color: Green;
        	bottom: 5px;
        	right: 5px;
        }

    </style>

    <!-- jQuery Magic Starts Here -->

    <!-- Referring the jQuery API files neccessary for designing this sample iGoogle page -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.core.js" type="text/javascript"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.widget.js" type="text/javascript"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.sortable.js" type="text/javascript"></script>

    <!-- Enabling the Drag and Drop Support -->
    <script type="text/javascript">
        $(document).ready(function () {

            $("#column1,#column2,#column3").sortable({
                connectWith: "#column1,#column2,#column3",
                handle: '.WidgetHeader',
                opacity: 0.6
            });

            $("#column1,#column2,#column3").disableSelection();

    });
    </script>


</head>
<body>

    <div id="iGoogle">

    <!-- HTML Mock up for Colum1 -->
    <div id="column1">
        <div class="Widget">
            <div class="WidgetHeader PurpleWidgetHeader">Widget 1</div>
            <div class="WidgetBody"></div>
        </div>
        <div class="Widget">
            <div class="WidgetHeader GreenWidgetHeader">Widget 2</div>
            <div class="WidgetBody"></div>
        </div>
        <div class="Widget">
            <div class="WidgetHeader GrayWidgetHeader">Widget 3</div>
            <div class="WidgetBody"></div>
        </div>
    </div>

    <!-- HTML Mock up for Column2 -->
    <div id="column2">
        <div class="Widget">
            <div class="WidgetHeader GrayWidgetHeader">Widget 4</div>
            <div class="WidgetBody"></div>
        </div>
    </div>

    <!-- HTML Mock up for Column3 -->
    <div id="column3">
        <div class="Widget">
            <div class="WidgetHeader GreenWidgetHeader">Widget 5</div>
                <div class="WidgetBody"></div>
        </div>
        <div class="Widget">
            <div class="WidgetHeader GrayWidgetHeader">Widget 6</div>
            <div class="WidgetBody"></div>
        </div>
    </div>

    </div>
    <div class="footer">Created by Tamizhvendan.S-tamizh88@gmail.com</div>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Sample iGoogle Page</title>

	<style type="text/css">

	/* Entire Page has been divided into 3Columns.
	Note: iGoogle Page has 3 columns */
	#column1,#column2,#column3
	{
	display:inline-block;
	float:left;
	width: 33%;
	height: auto;
	text-align:center;
	padding-bottom: 100px;
	}

	/* Css Classes for Entire Widget */

	.Widget
	{
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	min-height: 200px;
	border: 1px solid Black;
	}


	/* Css Classes for Widget Headers */

	.WidgetHeader
	{
	height: 25px;
	cursor: move;
	text-align: left;
	padding-left: 3px;
	color: White;
	font-weight: bold;
	}

	.GreenWidgetHeader
	{
	background-color:Green;
	}

	.GrayWidgetHeader
	{
	background-color:Gray;
	}

	.PurpleWidgetHeader
	{
	background-color:Purple;
	}

	/* Css Classes for Widget Body */
	.WidgetBody
	{
	min-height: 175px;
	height:auto;
	background: #F0F0F0;
	}

	/* Placeholder while dragging the widget using jQuery*/
	.ui-sortable-placeholder { border: 1px dashed black; visibility: visible !important; height: 50px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }

	.footer
	{
	clear:both;
	display:block;
	position:absolute;
	color: Green;
	bottom: 5px;
	right: 5px;
	}

	</style>

	<!-- jQuery Magic Starts Here -->

	<!-- Referring the jQuery API files neccessary for designing this sample iGoogle page -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.core.js" type="text/javascript"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.widget.js" type="text/javascript"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.mouse.js" type="text/javascript"></script>
	<script src="http://jqueryui.com/ui/jquery.ui.sortable.js" type="text/javascript"></script>

	<!-- Enabling the Drag and Drop Support -->
	<script type="text/javascript">
	$(document).ready(function () {

	$("#column1,#column2,#column3").sortable({
	connectWith: "#column1,#column2,#column3",
	handle: '.WidgetHeader',
	opacity: 0.6
	});

	$("#column1,#column2,#column3").disableSelection();

	});
	</script>


	</head>
	<body>

	<div id="iGoogle">

	<!-- HTML Mock up for Colum1 -->
	<div id="column1">
	<div class="Widget">
	<div class="WidgetHeader PurpleWidgetHeader">Widget 1</div>
	<div class="WidgetBody"></div>
	</div>
	<div class="Widget">
	<div class="WidgetHeader GreenWidgetHeader">Widget 2</div>
	<div class="WidgetBody"></div>
	</div>
	<div class="Widget">
	<div class="WidgetHeader GrayWidgetHeader">Widget 3</div>
	<div class="WidgetBody"></div>
	</div>
	</div>

	<!-- HTML Mock up for Column2 -->
	<div id="column2">
	<div class="Widget">
	<div class="WidgetHeader GrayWidgetHeader">Widget 4</div>
	<div class="WidgetBody"></div>
	</div>
	</div>

	<!-- HTML Mock up for Column3 -->
	<div id="column3">
	<div class="Widget">
	<div class="WidgetHeader GreenWidgetHeader">Widget 5</div>
	<div class="WidgetBody"></div>
	</div>
	<div class="Widget">
	<div class="WidgetHeader GrayWidgetHeader">Widget 6</div>
	<div class="WidgetBody"></div>
	</div>
	</div>

	</div>
	<div class="footer">Created by Tamizhvendan.S-tamizh88@gmail.com</div>

	</body>
	</html>