Here is another layout which uses jquery corners.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 15</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
}
header
{
float:left;
color:#FF9200;
}
h1, h2, p
{
font-weight:normal;
}
h1, h2
{
font-family:Georgia, Times New Roman, Times, serif;
text-transform:uppercase;
color:#000000;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
letter-spacing:0.1em;
text-align:justify;
}
p
{
font-size: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
header p
{
width:360px;
}
#tl
{
float:right;
width:400px;
height:400px;
background:#FF9200;
color:#FFFFFF;
}
#tl p
{
float:right;
width:280px;
padding-top:160px;
padding-right:20px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('tl 400px');
});
</script>
</head>
<body>
<header>
<h1>header 1</h1>
<h2>header 2</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
</header>
<div id="tl" class="">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</body>
</html>
No comments:
Post a Comment