1 Creampuff HTML Fri Sep 17, 2010 9:16 pm
Wlajky
Ninja
Ime: Creampuff
Tip: HTML + CSS stranica + Jquery navigacija
Autor: Wlajky
Demo: http://twilight-site.comeze.com/
Copyright: Ovu stranu možete da editujete, da menjate boje i grafike, sve dok link u footeru da sam ja kodirao ostaje nepromenjen. Bilo kakvo uklanjanje toga će vas koštati tužbe vašoj hosting kompaniji jer sam sve sam kodirao, od početka do kraja.
Kod
Nadam se da vam se sviđa
Tip: HTML + CSS stranica + Jquery navigacija
Autor: Wlajky
Demo: http://twilight-site.comeze.com/
Copyright: Ovu stranu možete da editujete, da menjate boje i grafike, sve dok link u footeru da sam ja kodirao ostaje nepromenjen. Bilo kakvo uklanjanje toga će vas koštati tužbe vašoj hosting kompaniji jer sam sve sam kodirao, od početka do kraja.
Kod
- Code:
<!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" xml:lang="en" lang="en">
<head>
<title>Website Title</title>
<style>
/*
Theme Name: Cream
Theme URI: http://www.forumoforumima.net
Description: Cream WordPress theme
Version: 1
Author: Vladimir
Author URI: http://www.forumoforumima.net
*/
body, html {
padding:0;
margin:0;
}
body {
background: #e6e6e6 url('http://i37.tinypic.com/v2u1au.png');
font: 11px Verdana;
line-height: 20px;
color: #000;
}
#container {
width: 740px;
text-align: left;
margin: 0 auto;
background-color: #f6efe3;
border-bottom: 1px solid #e6ccb0;
border-top: 0px;
border-left: 1px solid #e6ccb0;
border-right: 1px solid #e6ccb0;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}
#header {
height: 250px;
background: #f6efe3 url('http://i33.tinypic.com/1zecvfs.png') no-repeat center;
text-align: center;
border-bottom: 1px solid #e6ccb0;
}
#sidebar {
width: 200px;
float: left;
padding: 10px;
}
.sidebox {
width: 190px;
padding: 8px;
border: 1px solid #e6ccb0;
background-color: #f6efe3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-khtml-border-radius: 4px;
margin-bottom: 10px;
}
#content {
width: 480px;
padding: 10px;
float: right;
border: 1px solid #e6ccb0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-khtml-border-radius: 4px;
margin: 10px 10px 10px 5px;
}
#footer {
clear: both;
text-align: center;
background: #f6efe3;
border-top: 1px solid #e6ccb0;
padding: 5px;
height: 40px;
}
.meta {
background: #fff;
padding: 3px;
font-size: 10px;
margin-top: 0px;
border: 1px solid #98cdd4;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
}
h3 {
font-family: georgia;
font-size: 12px;
color:#ffffff;
font-weight:bold;
background-image: url('http://i37.tinypic.com/24e6zrt.png');
border: 1px solid #98cdd4;
padding: 3px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-khtml-border-radius: 4px;
margin: 0px 0px 10px 0px;
}
h2 {
font-family: georgia;
font-size: 12px;
color:#ffffff;
font-weight:bold;
background-image: url('http://i37.tinypic.com/24e6zrt.png');
border: 1px solid #98cdd4;
padding: 3px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
margin: 0px 0px 0px 0px;
}
a:link {color:#98cdd4; font-weight: bold; text-decoration: none;}
a:visited {color:#98cdd4; font-weight: bold; text-decoration: none;}
a:hover {color:#e6ccb0;}
a:active {color:#98cdd4;}
strong, b {color: #504d47; font-weight: bold; }
em, i {color:#504d47; font-style: italic; }
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://twilight-site.comeze.com/lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="http://twilight-site.comeze.com/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="http://twilight-site.comeze.com/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://twilight-site.comeze.com/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>
</head>
<body>
<div id="header">
</div>
<div id="container">
<center>
<ul class="lavaLampNoImage" id="2">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Website</a></li>
</ul>
</center>
<div id="sidebar">
<div class="sidebox">
<h3>Hay Ho!</h3>
<a href="#">Hello</a> and welcome to my <b>lair</b>. What is this site? Simply, a <i>presonal</i> website of mine.
For best site browsing use:
<center><a href='http://www.mozilla.com/?from=sfx&uid=0&t=312'><img src='http://sfx-images.mozilla.org/affiliates/Buttons/firefox3/FF3_80x15_o.png' alt='Spread Firefox Affiliate Button' border='0' /></a></center>
</div>
<div class="sidebox">
<h3>Hay Ho!</h3>
Hello and welcome to my lair.
</div>
<div class="sidebox">
<h3>Hay Ho!</h3>
Hello and welcome to my lair.
</div>
</div> <!-- closes sidebar div -->
<div id="content">
<h2>Blog me <a href="#">~</a></h2>
<div class="meta"><strong>Posted on:</strong> 12. Aug 2010 · <strong>Posted under:</strong> Wheel of time · <strong>Comments:</strong> 4</div>
<p>Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template. Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template. Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template. Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template.</p>
<p>Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template. Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template. Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template. Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template.</p>
<p>Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template. Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template. Content goes here. You can add images, text, links and so on. Please do not remove my link from the footer. Credit is required for using this template.</p>
</div> <!-- closes content div --> <div id="footer">
<strong>yourweb.com</strong> 2010 unless otherwise stated.
Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> · Theme by <a href="http://www.forumoforumima.net" target="_blank">Vladimir</a>
</div>
</div> <!-- closes container div -->
</body>
</html>
Nadam se da vam se sviđa
Last edited by Wlajky on Mon Oct 04, 2010 11:13 am; edited 1 time in total