Here is a simple implementation of an image slideshow using the jQuery application at http://www.serie3.info/s3slider/
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#s3slider
{
width:240px;
height:180px;
position:relative;
overflow:hidden;
}
#s3sliderContent
{
width:240px;
position: absolute;
bottom:0;
margin-left:0;
list-style:none;
}
.s3sliderImage
{
float:left;
position:relative;
display: none;
}
.s3sliderImage span
{
position: absolute;
left:0;
width:240px;
background-color:#000000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
color:#FFFFFF;
display:none;
bottom:0;
}
.clear
{
clear: both;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script>
$(document).ready(function()
{
$('#s3slider').s3Slider(
{
timeOut:4000
});
});
</script>
</head>
<body>
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
</body>
</html>
Tuesday 28 September 2010
Add an RSS reader to your site
Here, I used the Google Reader API Feedcontrol to add an RSS feed to my page.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RSS</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("feeds", "1");
function initialize()
{
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://effectivewebdesigns.blogspot.com/feeds/posts/default?alt=rss", "Effective Web Designs Blog");
feedControl.setLinkTarget("LINK_TARGET_BLANK");
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<br /><br />
<div id="feedControl"></div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RSS</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("feeds", "1");
function initialize()
{
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://effectivewebdesigns.blogspot.com/feeds/posts/default?alt=rss", "Effective Web Designs Blog");
feedControl.setLinkTarget("LINK_TARGET_BLANK");
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<br /><br />
<div id="feedControl"></div>
</body>
</html>
Friday 24 September 2010
SMTP from XAMPP on a localhost using your Google mail Account
This may seem a little obscure but believe me, this blog could save you a lot of time.
Imagine you have XAMPP installed on your Windows computer as localhost. You are writing an application which requires e-mails to be sent and you need to test your code. You have a Google e-mail account and you'd like to use the SMTP service which comes with that.
Let's start by creating our little PHP script which we are going to use for testing.
<?php
mail('jimmy@googlemail.com','test subject','test body');
?>
There. That wasn't too difficult was it.
Next we need to edit our php.ini file. The php.ini file will be in something like C:\XAMPP\php. We are looking for the [mail function] variables. For which we need entries like this:
[mail function]
sendmail_path = "C:/xampp/sendmail/sendmail.exe -t"
Couple things to note from above. The smtp_port and look carefully at the slashes of the sendmail_path.
Now we are on to our final step. We need to edit sendmail.php which would be under something like C:\XAMPP\sendmail. You need to replace the contents of the file with something like this:
[sendmail]
smtp_server=smtp.googlemail.com
smtp_port=587
error_logfile=error.log
debug_logfile=debug.log
auth_username=myaccountname@googlemail.com
auth_password=mypassword
force_sender=myaccountname@googlemail.com
You must now restart your Apache service in order for it to work.
Now to test your script. Open up your web browser and load it like this http://localhost/myscript.php
Check your Google mail account to see if it's arrived.
Good luck!
Imagine you have XAMPP installed on your Windows computer as localhost. You are writing an application which requires e-mails to be sent and you need to test your code. You have a Google e-mail account and you'd like to use the SMTP service which comes with that.
Let's start by creating our little PHP script which we are going to use for testing.
<?php
mail('jimmy@googlemail.com','test subject','test body');
?>
There. That wasn't too difficult was it.
Next we need to edit our php.ini file. The php.ini file will be in something like C:\XAMPP\php. We are looking for the [mail function] variables. For which we need entries like this:
[mail function]
sendmail_path = "C:/xampp/sendmail/sendmail.exe -t"
Couple things to note from above. The smtp_port and look carefully at the slashes of the sendmail_path.
Now we are on to our final step. We need to edit sendmail.php which would be under something like C:\XAMPP\sendmail. You need to replace the contents of the file with something like this:
[sendmail]
smtp_server=smtp.googlemail.com
smtp_port=587
error_logfile=error.log
debug_logfile=debug.log
auth_username=myaccountname@googlemail.com
auth_password=mypassword
force_sender=myaccountname@googlemail.com
You must now restart your Apache service in order for it to work.
Now to test your script. Open up your web browser and load it like this http://localhost/myscript.php
Check your Google mail account to see if it's arrived.
Good luck!
Simple layout #12
This design puts to earlier blog posts together. Simple layout #11 and Static Image Overlay.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #12</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart, #overlayedText
{
color:#FFFFFF;
}
#bottomPart, #overlayedText
{
background:#000000;
}
#topPart
{
height:200px;
background:#73C2FF;
}
h1
{
font-size:4.4em;
}
#topPart h1
{
padding-top:136px;
}
#middlePart
{
height:400px;
}
#overlayedText, #bottomPart h1
{
position:relative;
}
#overlayedText
{
clear:both;
top:-144px;
font-size:2em;
height:84px;
padding-top:80px;
opacity:0.6;
filter:alpha(opacity=60);
}
h1, #overlayedText
{
padding-left:10px;
}
#middlePart h1
{
float:left;
color:#FF0000;
width:360px;
}
#middlePart img
{
float:right;
}
#bottomPart
{
min-height:200px;
}
#bottomPart h1
{
top:-10px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>MY TITLE</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
<img src="http://farm5.static.flickr.com/4145/5020151472_5651a1321d.jpg" alt="girl" />
<div id="overlayedText">My overlayed text</div>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #12</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart, #overlayedText
{
color:#FFFFFF;
}
#bottomPart, #overlayedText
{
background:#000000;
}
#topPart
{
height:200px;
background:#73C2FF;
}
h1
{
font-size:4.4em;
}
#topPart h1
{
padding-top:136px;
}
#middlePart
{
height:400px;
}
#overlayedText, #bottomPart h1
{
position:relative;
}
#overlayedText
{
clear:both;
top:-144px;
font-size:2em;
height:84px;
padding-top:80px;
opacity:0.6;
filter:alpha(opacity=60);
}
h1, #overlayedText
{
padding-left:10px;
}
#middlePart h1
{
float:left;
color:#FF0000;
width:360px;
}
#middlePart img
{
float:right;
}
#bottomPart
{
min-height:200px;
}
#bottomPart h1
{
top:-10px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>MY TITLE</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
<img src="http://farm5.static.flickr.com/4145/5020151472_5651a1321d.jpg" alt="girl" />
<div id="overlayedText">My overlayed text</div>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
Static Image Overlay
Here is how to put those descriptions placed at the bottom of your images with a semi-opaque background.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Image Overlay</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
}
.imgHolder p, .imgHolder img
{
display:block;
width:100px;
}
.imgHolder p
{
position:relative;
top:-46px;
background:#000000;
color:#FFFFFF;
font-size:0.8em;
height:24px;
padding-top:8px;
text-align:center;
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>
<body>
<div id="mainContent">
<h1>Static Image Overlay</h1>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4092/5019367535_053592b411_t.jpg" alt="red ring" /><p>red ring</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4083/5019367559_f575c61142_t.jpg" alt="tea pot" /><p>tea pot</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4086/5019973694_8dd67f644d_t.jpg" alt="fruit basket" /><p>fruit basket</p></div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Image Overlay</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
}
.imgHolder p, .imgHolder img
{
display:block;
width:100px;
}
.imgHolder p
{
position:relative;
top:-46px;
background:#000000;
color:#FFFFFF;
font-size:0.8em;
height:24px;
padding-top:8px;
text-align:center;
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>
<body>
<div id="mainContent">
<h1>Static Image Overlay</h1>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4092/5019367535_053592b411_t.jpg" alt="red ring" /><p>red ring</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4083/5019367559_f575c61142_t.jpg" alt="tea pot" /><p>tea pot</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4086/5019973694_8dd67f644d_t.jpg" alt="fruit basket" /><p>fruit basket</p></div>
</div>
</body>
</html>
Thursday 23 September 2010
Simple layout #11
This layout shows how to put your backgrounds across the screen at a width of 100%, take up 100% of the height, but centre the content within the page with uniformity.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #11</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
border-left:10px dotted #69FFBF;
border-right:10px dotted #69FFBF;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:200px;
background:#73C2FF;
}
#middlePart
{
height:400px;
}
#bottomPart
{
background:#000000;
min-height:200px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #11</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
border-left:10px dotted #69FFBF;
border-right:10px dotted #69FFBF;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:200px;
background:#73C2FF;
}
#middlePart
{
height:400px;
}
#bottomPart
{
background:#000000;
min-height:200px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
Prettier scrollbars
This demo offers a starting point to having prettier scrollbars for your web page. I am using jScrollPane at
http://jscrollpane.kelvinluck.com/
Naturally in this instance, I am referring to a CSS file on the jScrollPane website, but you should download a copy of this and make the colours work for your theme.
The page layout is a bit like the old Microsoft Word for DOS. Sorry about all the text, you need that to show how the scrollbar looks for real.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prettier Scrollbars</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
background:#000000;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
font-size:1.2em;
}
#container
{
margin:0 auto;
width:920px;
}
#contentWindow, #navigation
{
display:block;
margin-top:20px;
}
#contentWindow
{
background:#0000FF;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
border:2px solid #FFFFFF;
font-size:0.8em;
height:602px;
width:876px;
padding:20px;
}
#navigation, #navigation a
{
height:100px;
text-decoration:none;
text-align:center;
}
#navigation
{
margin-left:80px;
}
#navigation a
{
float:left;
width:180px;
color:#CCCCCC;
}
#navigation a:hover
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
</head>
<body>
<div id="container">
<div id="contentWindow" class="scroll-pane">
<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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="navigation">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">contact</a>
</div>
</div>
</body>
</html>
http://jscrollpane.kelvinluck.com/
Naturally in this instance, I am referring to a CSS file on the jScrollPane website, but you should download a copy of this and make the colours work for your theme.
The page layout is a bit like the old Microsoft Word for DOS. Sorry about all the text, you need that to show how the scrollbar looks for real.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prettier Scrollbars</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
background:#000000;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
font-size:1.2em;
}
#container
{
margin:0 auto;
width:920px;
}
#contentWindow, #navigation
{
display:block;
margin-top:20px;
}
#contentWindow
{
background:#0000FF;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
border:2px solid #FFFFFF;
font-size:0.8em;
height:602px;
width:876px;
padding:20px;
}
#navigation, #navigation a
{
height:100px;
text-decoration:none;
text-align:center;
}
#navigation
{
margin-left:80px;
}
#navigation a
{
float:left;
width:180px;
color:#CCCCCC;
}
#navigation a:hover
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
</head>
<body>
<div id="container">
<div id="contentWindow" class="scroll-pane">
<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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p><br /><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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="navigation">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">contact</a>
</div>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)