dennis/Website-Templates
1
0
Fork 0
mirror of https://github.com/dawidolko/Website-Templates.git synced 2026-02-04 01:30:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Website templates

Browse Source
This commit is contained in:
Dawid Olko
2023-07-26 19:33:39 +02:00
commit 0d2d73a034
10339 changed files with 2002333 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
css3-bw/another_page.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3_B&W</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo"><h1>CSS3_<a href="#">B&amp;W</a></h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li><a href="index.html">home</a></li>
<li><a href="examples.html">examples</a></li>
<li><a href="page.html">a page</a></li>
<li class="current"><a href="another_page.html">another page</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<ul id="images">
<li><img src="images/1.jpg" width="600" height="300" alt="photo_one" /></li>
<li><img src="images/2.jpg" width="600" height="300" alt="photo_two" /></li>
<li><img src="images/3.jpg" width="600" height="300" alt="photo_three" /></li>
<li><img src="images/4.jpg" width="600" height="300" alt="photo_four" /></li>
<li><img src="images/5.jpg" width="600" height="300" alt="photo_five" /></li>
<li><img src="images/6.jpg" width="600" height="300" alt="photo_six" /></li>
</ul>
<div id="sidebar_container">
<div class="sidebar">
<h3>Latest News</h3>
<h4>New Website Launched</h4>
<h5>January 1st, 2012</h5>
<p>2012 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
</div>
<div class="sidebar">
<h3>Useful Links</h3>
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">And Another</a></li>
<li><a href="#">Last One</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Another Page</h1>
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
</div>
</div>
<footer>
<p><a href="index.html">home</a> | <a href="about.html">about me</a> | <a href="portfolio.html">my portfolio</a> | <a href="blog.html">blog</a> | <a href="contact.php">contact</a></p>
<p>&copy; 2012 CSS3_B&W. All Rights Reserved. | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
</footer>
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#images').kwicks({
max : 600,
spacing : 2
});
});
</script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
</body>
</html>

135
css3-bw/contact.php Normal file
View File

@@ -0,0 +1,135 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3_B&W</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo"><h1>CSS3_<a href="#">B&amp;W</a></h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li><a href="index.html">home</a></li>
<li><a href="examples.html">examples</a></li>
<li><a href="page.html">a page</a></li>
<li><a href="another_page.html">another page</a></li>
<li class="current"><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<ul id="images">
<li><img src="images/1.jpg" width="600" height="300" alt="photo_one" /></li>
<li><img src="images/2.jpg" width="600" height="300" alt="photo_two" /></li>
<li><img src="images/3.jpg" width="600" height="300" alt="photo_three" /></li>
<li><img src="images/4.jpg" width="600" height="300" alt="photo_four" /></li>
<li><img src="images/5.jpg" width="600" height="300" alt="photo_five" /></li>
<li><img src="images/6.jpg" width="600" height="300" alt="photo_six" /></li>
</ul>
<div id="sidebar_container">
<div class="sidebar">
<h3>Latest News</h3>
<h4>New Website Launched</h4>
<h5>January 1st, 2012</h5>
<p>2012 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
</div>
<div class="sidebar">
<h3>Useful Links</h3>
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">And Another</a></li>
<li><a href="#">Last One</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Contact</h1>
<?php
// Set-up these 3 parameters
// 1. Enter the email address you would like the enquiry sent to
// 2. Enter the subject of the email you will receive, when someone contacts you
// 3. Enter the text that you would like the user to see once they submit the contact form
$to = 'email@emailaddress.com';
$subject = 'Enquiry from the website';
$contact_submitted = 'Your message has been sent.';
// Do not amend anything below here, unless you know PHP
function email_is_valid($email) {
return preg_match('/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i',$email);
}
if (!email_is_valid($to)) {
echo '<p style="color: red;">You must set-up a valid (to) email address before this contact page will work.</p>';
}
if (isset($_POST['contact_submitted'])) {
$return = "\r";
$youremail = trim(htmlspecialchars($_POST['your_email']));
$yourname = stripslashes(strip_tags($_POST['your_name']));
$yourmessage = stripslashes(strip_tags($_POST['your_message']));
$contact_name = "Name: ".$yourname;
$message_text = "Message: ".$yourmessage;
$user_answer = trim(htmlspecialchars($_POST['user_answer']));
$answer = trim(htmlspecialchars($_POST['answer']));
$message = $contact_name . $return . $message_text;
$headers = "From: ".$youremail;
if (email_is_valid($youremail) && !eregi("\r",$youremail) && !eregi("\n",$youremail) && $yourname != "" && $yourmessage != "" && substr(md5($user_answer),5,10) === $answer) {
mail($to,$subject,$message,$headers);
$yourname = '';
$youremail = '';
$yourmessage = '';
echo '<p style="color: blue;">'.$contact_submitted.'</p>';
}
else echo '<p style="color: red;">Please enter your name, a valid email address, your message and the answer to the simple maths question before sending your message.</p>';
}
$number_1 = rand(1, 9);
$number_2 = rand(1, 9);
$answer = substr(md5($number_1+$number_2),5,10);
?>
<form id="contact" action="contact.php" method="post">
<div class="form_settings">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="<?php echo $yourname; ?>" /></p>
<p><span>Email Address</span><input class="contact" type="text" name="your_email" value="<?php echo $youremail; ?>" /></p>
<p><span>Message</span><textarea class="contact textarea" rows="5" cols="50" name="your_message"><?php echo $yourmessage; ?></textarea></p>
<p style="padding: 10px 0; line-height: 2em;">To help prevent spam, please enter the answer to this question:</p>
<p><span><?php echo $number_1; ?> + <?php echo $number_2; ?> = ?</span><input type="text" name="user_answer" /><input type="hidden" name="answer" value="<?php echo $answer; ?>" /></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="send" /></p>
</div>
</form>
</div>
</div>
<footer>
<p><a href="index.html">home</a> | <a href="about.html">about me</a> | <a href="portfolio.html">my portfolio</a> | <a href="blog.html">blog</a> | <a href="contact.php">contact</a></p>
<p>&copy; 2012 CSS3_B&W. All Rights Reserved. | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
</footer>
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#images').kwicks({
max : 600,
spacing : 2
});
});
</script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
</body>
</html>

396
css3-bw/css/style.css Normal file
View File

@@ -0,0 +1,396 @@
@font-face {
font-family: News Cycle;
src: url('../fonts/NewsCycle-Regular.eot');
src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .85em arial, sans-serif;
background: #F5F5F5 url(../images/pattern.png);
color: #444;
padding-bottom: 40px;
}
p {
padding: 0 0 20px 0;
line-height: 1.5em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font: normal 200% 'News Cycle', arial, sans-serif;
color: #222;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
h1 {
text-shadow: 1px 1px #FFF;
}
h2 {
font: normal 200% 'News Cycle', arial, sans-serif;
color: #222;
margin: 0;
padding: 0 0 8px 0;
text-shadow: 1px 1px #FFF;
}
h3 {
font: normal 125% 'trebuchet ms', arial, sans-serif;
}
h4, h5, h6 {
margin: 0;
padding: 0 0 5px 0;
font: normal 110% arial, sans-serif;
color: #999;
line-height: 1.5em;
}
h5, h6 {
font: italic 95% arial, sans-serif;
color: #888;
padding-bottom: 15px;
}
h6 {
color: #362C20;
}
a, a:hover {
outline: none;
color: #000;
text-decoration: underline;
}
a:hover {
text-decoration: none;
color: #666;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 0 0;
padding: 0 0 4px 5px;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, header, #logo, nav, #site_content, footer {
margin-left: auto;
margin-right: auto;
}
#main {
width: 950px;
margin: 20px auto 0 auto;
}
header {
width: 950px;
height: 105px;
}
#logo {
width: 200px;
float: left;
height: 100px;
background: transparent;
padding: 0 0 10px 0;
}
#logo h1 {
font: normal 330% 'News Cycle', arial, sans-serif;
padding: 37px 0 0 0;
color: #222;
letter-spacing: -2px;
}
#logo h1 a {
color: #999;
text-decoration: none;
}
#logo h1 a:hover {
color: #222;
text-decoration: none;
}
nav {
height: 26px;
width: 740px;
margin: 1px auto 0 auto;
float: right;
padding: 35px 10px 0 0;
}
#site_content {
width: 950px;
overflow: hidden;
margin: 4px auto 0 auto;
padding: 0;
border-top: 0;
border-bottom: 0;
}
#sidebar_container {
float: right;
width: 250px;
padding: 16px 0 0 0;
height: 450px;
}
.sidebar {
float: right;
width: 200px;
margin: 0 0 17px 0;
padding: 0 15px 5px 13px;
}
.sidebar h3 {
padding: 0 15px 20px 0;
font: 200% 'News Cycle', arial, sans-serif;
text-shadow: #FFF 1px 1px;
margin: 0 1px;
color: #222;
}
.sidebar_item, .content_item {
padding: 15px 0;
}
#content {
text-align: justify;
width: 670px;
padding: 0 0 5px 0;
margin: 0;
float: left;
}
#content ul, .sidebar ul {
margin: 2px 0 5px 0px;
}
#content ul li, .sidebar ul li {
list-style-type: none;
background: transparent url(../images/bullet.png) no-repeat left center;
margin: 0 0 0 0;
padding: 2px 0 2px 28px;
line-height: 1.5em;
}
footer {
width: 950px;
font: normal 130% 'News Cycle', arial, sans-serif;
height: 90px;
padding: 20px 0 5px 0;
text-align: center;
color: #222;
background: #D5D5D6;
}
footer p {
padding: 0 0 10px 0;
}
footer a, footer a:hover {
color: #222;
text-decoration: underline;
}
footer a:hover {
color: #FFF;
text-decoration: none;
}
/* form styling */
.form_settings {
margin: 0;
}
.form_settings p {
padding: 0 0 10px 0;
}
.form_settings span {
padding: 5px 0;
float: left;
width: 170px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 4px;
width: 252px;
font: 100% arial, sans-serif;
border: 0;
border-bottom: 1px solid #666;
background: transparent;
}
.form_settings .submit {
font: 140% 'News Cycle', arial, sans-serif;
border: 0;
width: 100px;
margin: 0 0 0 162px;
height: 30px;
padding: 0 0 6px 0;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
background: #444;
text-shadow: 1px 1px #000;
color: #FFF;
line-height: 15px;
}
.form_settings textarea, .form_settings select {
font: 100% 'trebuchet ms', arial, sans-serif;
border: 1px solid #666;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
width: 250px;
overflow: auto;
}
.form_settings select {
width: 260px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #BBB;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #DDD;
color: #47433F;
border-top: 1px solid #FFF;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
list-style: none;
}
/* from here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers */
.lavaLampWithImage {
position: relative;
height: 25px;
padding: 15px 5px 15px 0;
margin: 10px 0 0 0;
overflow: hidden;
float: right;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: #D5D5D6;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
height: 28px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li a {
font: normal 130% 'News Cycle', sans-serif;
text-shadow:1px 1px #FFF;
text-decoration: none;
color: #222;
outline: none;
text-align: center;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
padding: 0px 7px 0 7px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}

169
css3-bw/documentation/index.html Normal file
View File

@@ -0,0 +1,169 @@
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>CSS3_B&W Template</title>
<style type="text/css" media="screen">
p, table, hr, .box { font-family: arial; margin-bottom:25px; }
.box p { margin-bottom:10px; }
</style>
</head>
<body>
<div>
<h1>&ldquo;CSS3_B&W&rdquo; Template Documentation</h1>
<p><strong>Template version: 2.0<br />Created: July 19th 2012</strong></p>
<div>
<p>Thank you for downloading this template.</p>
<p>This template is released under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>. This means you are free to download and use it for personal and commercial projects. However, you <strong>must leave the 'design from css3templates.co.uk' link in the footer of the template</strong>.</p>
<p>If you have any questions that are beyond the scope of this help file, please feel free to contact me via my <a href="http://www.css3templates.co.uk">website</a>. Thank you!</p>
</div>
<hr>
<h2 id="toc">Table of Contents</h2>
<ol>
<li><a href="#htmlStructure">HTML Structure</a></li>
<li><a href="#cssFiles">CSS Files and Structure</a></li>
<li><a href="#fontFiles">Fonts</a></li>
<li><a href="#javascript">JavaScript</a></li>
<li><a href="#credits">Sources and Credits</a></li>
</ol>
<hr>
<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
<p>Here is the HTML structure for this template.</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;!-- Header Metatags --&gt;
&lt;!-- Main Stylesheet --&gt;
&lt;!-- Modernizr JS Enables HTML5 Elements --&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;main&quot;&gt;
&lt;!-- begin header --&gt;
&lt;header&gt;
&lt;div id=&quot;logo&quot;&lt;/div&gt;
&lt;nav&gt;
&lt;!-- menu --&gt;
&lt;/nav&gt;
&lt;/header&gt;
&lt;!-- end header --&gt;
&lt;!-- begin content --&gt;
&lt;div id=&quot;site_content&quot;&gt;
&lt;ul id="images"&gt;
&lt;li&gt;&lt;img src=&quot;images/1.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_one&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/2.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_two&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/3.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_three&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/4.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_four&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/5.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_five&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/6.jpg&quot; width=&quot;600&quot; height=&quot;300&quot; alt=&quot;photo_six&quot; /&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div id=&quot;sidebar_container&quot;&gt;
&lt;div class=&quot;sidebar&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- end content --&gt;
&lt;!-- begin footer --&gt;
&lt;footer&gt;&lt;/footer&gt;
&lt;!-- end footer --&gt;
&lt;/div&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;!-- jQuery with plugins --&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
&lt;!-- initialise image transition --&gt;
$('#images').kwicks({
max : 600,
spacing : 2
});
});
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function() {
$(&quot;#lava_menu&quot;).lavaLamp({
fx: &quot;backout&quot;,
speed: 700
});
});
&lt;/script&gt;
&lt;/html&gt;
&lt;/body&gt;
</pre>
<hr>
<h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>
<p>There is one stylesheet used in this theme:</p>
<ol>
<li><b>css/style.css</b></li>
</ol>
<ol>
<li><b>style.css</b> is the main stylesheet and is included in all pages. It contains all the structural stylings for the template.</li>
</ol>
<hr>
<h3 id="fontFiles"><strong>C) Fonts</strong> - <a href="#toc">top</a></h3>
<p>There is 1 font used in this theme. The font is News Cycle. The font files are</p>
<ol>
<li><b>fonts/NewsCycle-Regular.ttf</b></li>
<li><b>fonts/NewsCycle-Regular.eot</b> (IE Specific)</li>
</ol>
<hr>
<h3 id="javascript"><strong>D) JavaScript</strong> - <a href="#toc">top</a></h3>
<p>This theme imports several Javascript files.</p>
<ol>
<li>js/modernizr-1.5.min.js</li>
<li>js/jquery.min.js</li>
<li>js/jquery.easing.min.js</li>
<li>js/jquery.lavalamp.min.js</li>
<li>js/jquery.kwicks-1.5.1.js</li>
</ol>
<ol>
<li><b>modernizr</b> is a Javascript library that enables HTML5 elements and feature detects.</li>
<li><b>jQuery</b> is a Javascript library containing lots of commonly used Javascript functions.</li>
<li><b>Easing</b> is a jQuery plugin for easing transitions.</li>
<li><b>Lavalamp</b> is a jQuery plugin for the lavalamp menu.</li>
<li><b>Kwicks</b> is a jQuery plugin for the image transitions.</li>
</ol>
<hr>
<h3 id="credits"><strong>E) Sources and Credits</strong> - <a href="#toc">top</a></h3>
<p>I've used the following images, icons or other files as listed.
<ul>
<li><a href="http://www.modernizr.com">modernizr</a> (MIT and BSD licenses)</li>
<li><a href="http://www.jquery.com">jQuery</a> (MIT and GPL licenses)</li>
<li><a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/">Lavalamp menu</a></li>
<li><a href="http://www.jeremymartin.name/projects.php?project=kwicks">Kwicks</a> (MIT license)</li>
</ul>
<hr>
<p>Once again, thank you for downloading this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.</p>
<p><a href="#toc">Go To Table of Contents</a></p>
<hr>
</div>
</body>
</html>

151
css3-bw/examples.html Normal file
View File

@@ -0,0 +1,151 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3_B&W</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo"><h1>CSS3_<a href="#">B&amp;W</a></h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li><a href="index.html">home</a></li>
<li class="current"><a href="examples.html">examples</a></li>
<li><a href="page.html">a page</a></li>
<li><a href="another_page.html">another page</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<ul id="images">
<li><img src="images/1.jpg" width="600" height="300" alt="photo_one" /></li>
<li><img src="images/2.jpg" width="600" height="300" alt="photo_two" /></li>
<li><img src="images/3.jpg" width="600" height="300" alt="photo_three" /></li>
<li><img src="images/4.jpg" width="600" height="300" alt="photo_four" /></li>
<li><img src="images/5.jpg" width="600" height="300" alt="photo_five" /></li>
<li><img src="images/6.jpg" width="600" height="300" alt="photo_six" /></li>
</ul>
<div id="sidebar_container">
<div class="sidebar">
<h3>Latest News</h3>
<h4>New Website Launched</h4>
<h5>January 1st, 2012</h5>
<p>2012 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
</div>
<div class="sidebar">
<h3>Useful Links</h3>
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">And Another</a></li>
<li><a href="#">Last One</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Examples</h1>
<p>This page contains examples of all the styled elements available as part of this design. Use this page for reference, whilst you build your website.</p>
<h2>Headings</h2>
<p>These are the different heading formats:</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h2>Text</h2>
<p>The following examples show how the text (within '&lt;p&gt;&lt;/p&gt;' tags) will appear:</p>
<p><strong>This is an example of bold text</strong></p>
<p><i>This is an example of italic text</i></p>
<p><a href="#">This is a hyperlink</a></p>
<h2>Lists</h2>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h2>Images</h2>
<p>images can be placed on the left, in the center or on the right:</p>
<span class="left"><img src="images/graphic.jpg" alt="example graphic" /></span>
<p>
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. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum.
</p>
<span class="center"><img src="images/graphic.jpg" alt="example graphic" /></span>
<span class="right"><img src="images/graphic.jpg" alt="example graphic" /></span>
<p>
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. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</p>
<h2>Tables</h2>
<p>Tables should be used to display data and not used for laying out your website:</p>
<table style="width:100%; border-spacing:0;">
<tr><th>Item</th><th>Description</th></tr>
<tr><td>Item 1</td><td>Description of Item 1</td></tr>
<tr><td>Item 2</td><td>Description of Item 2</td></tr>
<tr><td>Item 3</td><td>Description of Item 3</td></tr>
<tr><td>Item 4</td><td>Description of Item 4</td></tr>
</table>
<h2>Form Elements</h2>
<form action="#" method="post">
<div class="form_settings">
<p><span>Form field example</span><input type="text" name="name" value="" /></p>
<p><span>Textarea example</span><textarea rows="8" cols="50" name="name"></textarea></p>
<p><span>Checkbox example</span><input class="checkbox" type="checkbox" name="name" value="" /></p>
<p><span>Dropdown list example</span><select id="id" name="name"><option value="1">Example 1</option><option value="2">Example 2</option></select></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="name" value="button" /></p>
</div>
</form>
</div>
</div>
<footer>
<p><a href="index.html">home</a> | <a href="about.html">about me</a> | <a href="portfolio.html">my portfolio</a> | <a href="blog.html">blog</a> | <a href="contact.php">contact</a></p>
<p>&copy; 2012 CSS3_B&W. All Rights Reserved. | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
</footer>
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#images').kwicks({
max : 600,
spacing : 2
});
});
</script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
</body>
</html>

94
css3-bw/fonts/news cycle sil ofl font license 1.1.txt Normal file
View File

@@ -0,0 +1,94 @@
Copyright (c) 2010-2011, Nathan Willis (nwillis@glyphography.com),
with Reserved Font Name "News Cycle."
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
css3-bw/fonts/newscycle-regular.eot Normal file
View File

Binary file not shown.

BIN
css3-bw/fonts/newscycle-regular.ttf Normal file
View File

Binary file not shown.

BIN
css3-bw/images/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
css3-bw/images/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
css3-bw/images/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
css3-bw/images/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
css3-bw/images/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
css3-bw/images/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
css3-bw/images/bullet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 989 B

BIN
css3-bw/images/graphic.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
css3-bw/images/pattern.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

98
css3-bw/index.html Normal file
View File

@@ -0,0 +1,98 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3_B&W</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo"><h1>CSS3_<a href="#">B&amp;W</a></h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li class="current"><a href="index.html">home</a></li>
<li><a href="examples.html">examples</a></li>
<li><a href="page.html">a page</a></li>
<li><a href="another_page.html">another page</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<ul id="images">
<li><img src="images/1.jpg" width="600" height="300" alt="photo_one" /></li>
<li><img src="images/2.jpg" width="600" height="300" alt="photo_two" /></li>
<li><img src="images/3.jpg" width="600" height="300" alt="photo_three" /></li>
<li><img src="images/4.jpg" width="600" height="300" alt="photo_four" /></li>
<li><img src="images/5.jpg" width="600" height="300" alt="photo_five" /></li>
<li><img src="images/6.jpg" width="600" height="300" alt="photo_six" /></li>
</ul>
<div id="sidebar_container">
<div class="sidebar">
<h3>Latest News</h3>
<h4>New Website Launched</h4>
<h5>January 1st, 2012</h5>
<p>2012 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
</div>
<div class="sidebar">
<h3>Useful Links</h3>
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">And Another</a></li>
<li><a href="#">Last One</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Welcome to CSS3_B&W</h1>
<p>This standards compliant, fixed width website template is released as an 'open source' design (under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>), which means that you are free to use it for anything you want (including modifying and amending it). All I ask is that you leave the 'design from css3templates.co.uk' link in the footer of the template.</p>
<p>The template uses a lavalamp menu (based on jQuery) from <a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/">here</a>. All of the images were shot by me - use as you wish.</p>
<h2>Browser Compatibility</h2>
<p>This template has been tested in the following browsers:</p>
<ul>
<li>Internet Explorer 8</li>
<li>Internet Explorer 7</li>
<li>FireFox 10</li>
<li>Google Chrome 17</li>
</ul>
</div>
</div>
<footer>
<p><a href="index.html">home</a> | <a href="about.html">about me</a> | <a href="portfolio.html">my portfolio</a> | <a href="blog.html">blog</a> | <a href="contact.php">contact</a></p>
<p>&copy; <span id="year"></span> CSS3_B&W. All Rights Reserved. | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
</footer>
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#images').kwicks({
max : 600,
spacing : 2
});
});
</script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
var d = new Date();
document.getElementById('year').innerHTML = d.getFullYear();
</script>
</body>
</html>

11
css3-bw/js/jquery.easing.min.js vendored Normal file
View File

@@ -0,0 +1,11 @@
/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
jQuery.easing={easein:function(x,t,b,c,d){return c*(t/=d)*t+b},easeinout:function(x,t,b,c,d){if(t<d/2)return 2*c*t*t/(d*d)+b;var a=t-d/2;return-2*c*a*a/(d*d)+2*c*a/d+c/2+b},easeout:function(x,t,b,c,d){return-c*t*t/(d*d)+2*c*t/d+b},expoin:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(Math.exp(Math.log(c)/d*t))+b},expoout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}return a*(-Math.exp(-Math.log(c)/d*(t-d))+c+1)+b},expoinout:function(x,t,b,c,d){var a=1;if(c<0){a*=-1;c*=-1}if(t<d/2)return a*(Math.exp(Math.log(c/2)/(d/2)*t))+b;return a*(-Math.exp(-2*Math.log(c/2)/d*(t-d))+c+1)+b},bouncein:function(x,t,b,c,d){return c-jQuery.easing['bounceout'](x,d-t,0,c,d)+b},bounceout:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},bounceinout:function(x,t,b,c,d){if(t<d/2)return jQuery.easing['bouncein'](x,t*2,0,c,d)*.5+b;return jQuery.easing['bounceout'](x,t*2-d,0,c,d)*.5+c*.5+b},elasin:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},elasout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},elasinout:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},backin:function(x,t,b,c,d){var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},backout:function(x,t,b,c,d){var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},backinout:function(x,t,b,c,d){var s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},linear:function(x,t,b,c,d){return c*t/d+b}};

158
css3-bw/js/jquery.kwicks-1.5.1.js Normal file
View File

@@ -0,0 +1,158 @@
/*
Kwicks for jQuery (version 1.5.1)
Copyright (c) 2008 Jeremy Martin
http://www.jeremymartin.name/projects.php?project=kwicks
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){
$.fn.kwicks = function(options) {
var defaults = {
isVertical: false,
sticky: false,
defaultKwick: 0,
event: 'mouseover',
spacing: 0,
duration: 500
};
var o = $.extend(defaults, options);
var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
return this.each(function() {
container = $(this);
var kwicks = container.children('li');
var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
if(!o.max) {
o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
} else {
o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
}
// set width of container ul
if(o.isVertical) {
container.css({
width : kwicks.eq(0).css('width'),
height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
});
} else {
container.css({
width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
height : kwicks.eq(0).css('height')
});
}
// pre calculate left or top values for all kwicks but the first and last
// i = index of currently hovered kwick, j = index of kwick we're calculating
var preCalcLoTs = []; // preCalcLoTs = pre-calculated Left or Top's
for(i = 0; i < kwicks.size(); i++) {
preCalcLoTs[i] = [];
// don't need to calculate values for first or last kwick
for(j = 1; j < kwicks.size() - 1; j++) {
if(i == j) {
preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing) : j * o.min + (j * o.spacing);
} else {
preCalcLoTs[i][j] = (j <= i ? (j * o.min) : (j-1) * o.min + o.max) + (j * o.spacing);
}
}
}
// loop through all kwick elements
kwicks.each(function(i) {
var kwick = $(this);
// set initial width or height and left or top values
// set first kwick
if(i === 0) {
kwick.css(LoT, '0px');
}
// set last kwick
else if(i == kwicks.size() - 1) {
kwick.css(o.isVertical ? 'bottom' : 'right', '0px');
}
// set all other kwicks
else {
if(o.sticky) {
kwick.css(LoT, preCalcLoTs[o.defaultKwick][i]);
} else {
kwick.css(LoT, (i * normWoH) + (i * o.spacing));
}
}
// correct size in sticky mode
if(o.sticky) {
if(o.defaultKwick == i) {
kwick.css(WoH, o.max + 'px');
kwick.addClass('active');
} else {
kwick.css(WoH, o.min + 'px');
}
}
kwick.css({
margin: 0,
position: 'absolute'
});
kwick.bind(o.event, function() {
// calculate previous width or heights and left or top values
var prevWoHs = []; // prevWoHs = previous Widths or Heights
var prevLoTs = []; // prevLoTs = previous Left or Tops
kwicks.stop().removeClass('active');
for(j = 0; j < kwicks.size(); j++) {
prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/, '');
prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/, '');
}
var aniObj = {};
aniObj[WoH] = o.max;
var maxDif = o.max - prevWoHs[i];
var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
kwick.addClass('active').animate(aniObj, {
step: function(now) {
// calculate animation completeness as percentage
var percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio : 1;
// adjsut other elements based on percentage
kwicks.each(function(j) {
if(j != i) {
kwicks.eq(j).css(WoH, prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
}
if(j > 0 && j < kwicks.size() - 1) { // if not the first or last kwick
kwicks.eq(j).css(LoT, prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
}
});
},
duration: o.duration,
easing: o.easing
});
});
});
if(!o.sticky) {
container.bind("mouseleave", function() {
var prevWoHs = [];
var prevLoTs = [];
kwicks.removeClass('active').stop();
for(i = 0; i < kwicks.size(); i++) {
prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/, '');
prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/, '');
}
var aniObj = {};
aniObj[WoH] = normWoH;
var normDif = normWoH - prevWoHs[0];
kwicks.eq(0).animate(aniObj, {
step: function(now) {
var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif : 1;
for(i = 1; i < kwicks.size(); i++) {
kwicks.eq(i).css(WoH, prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
if(i < kwicks.size() - 1) {
kwicks.eq(i).css(LoT, prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
}
}
},
duration: o.duration,
easing: o.easing
});
});
}
});
};
})(jQuery);

1
css3-bw/js/jquery.lavalamp.min.js vendored Normal file
View File

@@ -0,0 +1 @@
(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$.dequeue(this,"fx")}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);

19
css3-bw/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

28
css3-bw/js/modernizr-1.5.min.js vendored Normal file
View File

@@ -0,0 +1,28 @@
/*!
* Modernizr JavaScript library 1.5
* http://www.modernizr.com/
*
* Copyright (c) 2009-2010 Faruk Ates - http://farukat.es/
* Dual-licensed under the BSD and MIT licenses.
* http://www.modernizr.com/license/
*
* Featuring major contributions by
* Paul Irish - http://paulirish.com
*/
window.Modernizr=function(i,e,I){function C(a,b){for(var c in a)if(m[a[c]]!==I&&(!b||b(a[c],D)))return true}function r(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1);return!!C([a,"Webkit"+c,"Moz"+c,"O"+c,"ms"+c,"Khtml"+c],b)}function P(){j[E]=function(a){for(var b=0,c=a.length;b<c;b++)J[a[b]]=!!(a[b]in n);return J}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));j[Q]=function(a){for(var b=0,c,h=a.length;b<h;b++){n.setAttribute("type",a[b]);if(c=n.type!==
"text"){n.value=K;/tel|search/.test(n.type)||(c=/url|email/.test(n.type)?n.checkValidity&&n.checkValidity()===false:n.value!=K)}L[a[b]]=!!c}return L}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var j={},s=e.documentElement,D=e.createElement("modernizr"),m=D.style,n=e.createElement("input"),E="input",Q=E+"types",K=":)",M=Object.prototype.toString,y=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d={},L={},J={},N=[],u=function(){var a={select:"input",
change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"},b={};return function(c,h){var t=arguments.length==1;if(t&&b[c])return b[c];h=h||document.createElement(a[c]||"div");c="on"+c;var g=c in h;if(!g&&h.setAttribute){h.setAttribute(c,"return;");g=typeof h[c]=="function"}h=null;return t?(b[c]=g):g}}(),F={}.hasOwnProperty,O;O=typeof F!=="undefined"&&typeof F.call!=="undefined"?function(a,b){return F.call(a,b)}:function(a,b){return b in a&&typeof a.constructor.prototype[b]==="undefined"};
d.canvas=function(){return!!e.createElement("canvas").getContext};d.canvastext=function(){return!!(d.canvas()&&typeof e.createElement("canvas").getContext("2d").fillText=="function")};d.geolocation=function(){return!!navigator.geolocation};d.crosswindowmessaging=function(){return!!i.postMessage};d.websqldatabase=function(){var a=!!i.openDatabase;if(a)try{a=!!openDatabase("testdb","1.0","html5 test db",2E5)}catch(b){a=false}return a};d.indexedDB=function(){return!!i.indexedDB};d.hashchange=function(){return u("hashchange",
i)&&(document.documentMode===I||document.documentMode>7)};d.historymanagement=function(){return!!(i.history&&history.pushState)};d.draganddrop=function(){return u("drag")&&u("dragstart")&&u("dragenter")&&u("dragover")&&u("dragleave")&&u("dragend")&&u("drop")};d.websockets=function(){return"WebSocket"in i};d.rgba=function(){m.cssText="background-color:rgba(150,255,150,.5)";return(""+m.backgroundColor).indexOf("rgba")!==-1};d.hsla=function(){m.cssText="background-color:hsla(120,40%,100%,.5)";return(""+
m.backgroundColor).indexOf("rgba")!==-1};d.multiplebgs=function(){m.cssText="background:url(//:),url(//:),red url(//:)";return/(url\s*\(.*?){3}/.test(m.background)};d.backgroundsize=function(){return r("backgroundSize")};d.borderimage=function(){return r("borderImage")};d.borderradius=function(){return r("borderRadius","",function(a){return(""+a).indexOf("orderRadius")!==-1})};d.boxshadow=function(){return r("boxShadow")};d.opacity=function(){var a=y.join("opacity:.5;")+"";m.cssText=a;return(""+m.opacity).indexOf("0.5")!==
-1};d.cssanimations=function(){return r("animationName")};d.csscolumns=function(){return r("columnCount")};d.cssgradients=function(){var a=("background-image:"+y.join("gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:")+y.join("linear-gradient(left top,#9f9, white);background-image:")).slice(0,-17);m.cssText=a;return(""+m.backgroundImage).indexOf("gradient")!==-1};d.cssreflections=function(){return r("boxReflect")};d.csstransforms=function(){return!!C(["transformProperty",
"WebkitTransform","MozTransform","OTransform","msTransform"])};d.csstransforms3d=function(){var a=!!C(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);if(a){var b=document.createElement("style"),c=e.createElement("div");b.textContent="@media ("+y.join("transform-3d),(")+"modernizr){#modernizr{height:3px}}";e.getElementsByTagName("head")[0].appendChild(b);c.id="modernizr";s.appendChild(c);a=c.offsetHeight===3;b.parentNode.removeChild(b);c.parentNode.removeChild(c)}return a};
d.csstransitions=function(){return r("transitionProperty")};d.fontface=function(){var a;if(/*@cc_on@if(@_jscript_version>=5)!@end@*/0)a=true;else{var b=e.createElement("style"),c=e.createElement("span"),h,t=false,g=e.body,o,w;b.textContent="@font-face{font-family:testfont;src:url('data:font/ttf;base64,AAEAAAAMAIAAAwBAT1MvMliohmwAAADMAAAAVmNtYXCp5qrBAAABJAAAANhjdnQgACICiAAAAfwAAAAEZ2FzcP//AAMAAAIAAAAACGdseWYv5OZoAAACCAAAANxoZWFk69bnvwAAAuQAAAA2aGhlYQUJAt8AAAMcAAAAJGhtdHgGDgC4AAADQAAAABRsb2NhAIQAwgAAA1QAAAAMbWF4cABVANgAAANgAAAAIG5hbWUgXduAAAADgAAABPVwb3N03NkzmgAACHgAAAA4AAECBAEsAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAACAAMDAAAAAAAAgAACbwAAAAoAAAAAAAAAAFBmRWQAAAAgqS8DM/8zAFwDMwDNAAAABQAAAAAAAAAAAAMAAAADAAAAHAABAAAAAABGAAMAAQAAAK4ABAAqAAAABgAEAAEAAgAuqQD//wAAAC6pAP///9ZXAwAAAAAAAAACAAAABgBoAAAAAAAvAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEACoAAAAGAAQAAQACAC6pAP//AAAALqkA////1lcDAAAAAAAAAAIAAAAiAogAAAAB//8AAgACACIAAAEyAqoAAwAHAC6xAQAvPLIHBADtMrEGBdw8sgMCAO0yALEDAC88sgUEAO0ysgcGAfw8sgECAO0yMxEhESczESMiARDuzMwCqv1WIgJmAAACAFUAAAIRAc0ADwAfAAATFRQWOwEyNj0BNCYrASIGARQGKwEiJj0BNDY7ATIWFX8aIvAiGhoi8CIaAZIoN/43KCg3/jcoAWD0JB4eJPQkHh7++EY2NkbVRjY2RgAAAAABAEH/+QCdAEEACQAANjQ2MzIWFAYjIkEeEA8fHw8QDxwWFhwWAAAAAQAAAAIAAIuYbWpfDzz1AAsEAAAAAADFn9IuAAAAAMWf0i797/8zA4gDMwAAAAgAAgAAAAAAAAABAAADM/8zAFwDx/3v/98DiAABAAAAAAAAAAAAAAAAAAAABQF2ACIAAAAAAVUAAAJmAFUA3QBBAAAAKgAqACoAWgBuAAEAAAAFAFAABwBUAAQAAgAAAAEAAQAAAEAALgADAAMAAAAQAMYAAQAAAAAAAACLAAAAAQAAAAAAAQAhAIsAAQAAAAAAAgAFAKwAAQAAAAAAAwBDALEAAQAAAAAABAAnAPQAAQAAAAAABQAKARsAAQAAAAAABgAmASUAAQAAAAAADgAaAUsAAwABBAkAAAEWAWUAAwABBAkAAQBCAnsAAwABBAkAAgAKAr0AAwABBAkAAwCGAscAAwABBAkABABOA00AAwABBAkABQAUA5sAAwABBAkABgBMA68AAwABBAkADgA0A/tDb3B5cmlnaHQgMjAwOSBieSBEYW5pZWwgSm9obnNvbi4gIFJlbGVhc2VkIHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgT3BlbiBGb250IExpY2Vuc2UuIEtheWFoIExpIGdseXBocyBhcmUgcmVsZWFzZWQgdW5kZXIgdGhlIEdQTCB2ZXJzaW9uIDMuYmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhTGlnaHRiYWVjMmE5MmJmZmU1MDMyIC0gc3Vic2V0IG9mIEZvbnRGb3JnZSAyLjAgOiBKdXJhIExpZ2h0IDogMjMtMS0yMDA5YmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhIExpZ2h0VmVyc2lvbiAyIGJhZWMyYTkyYmZmZTUwMzIgLSBzdWJzZXQgb2YgSnVyYUxpZ2h0aHR0cDovL3NjcmlwdHMuc2lsLm9yZy9PRkwAQwBvAHAAeQByAGkAZwBoAHQAIAAyADAAMAA5ACAAYgB5ACAARABhAG4AaQBlAGwAIABKAG8AaABuAHMAbwBuAC4AIAAgAFIAZQBsAGUAYQBzAGUAZAAgAHUAbgBkAGUAcgAgAHQAaABlACAAdABlAHIAbQBzACAAbwBmACAAdABoAGUAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUALgAgAEsAYQB5AGEAaAAgAEwAaQAgAGcAbAB5AHAAaABzACAAYQByAGUAIAByAGUAbABlAGEAcwBlAGQAIAB1AG4AZABlAHIAIAB0AGgAZQAgAEcAUABMACAAdgBlAHIAcwBpAG8AbgAgADMALgBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQBMAGkAZwBoAHQAYgBhAGUAYwAyAGEAOQAyAGIAZgBmAGUANQAwADMAMgAgAC0AIABzAHUAYgBzAGUAdAAgAG8AZgAgAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAASgB1AHIAYQAgAEwAaQBnAGgAdAAgADoAIAAyADMALQAxAC0AMgAwADAAOQBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQAgAEwAaQBnAGgAdABWAGUAcgBzAGkAbwBuACAAMgAgAGIAYQBlAGMAMgBhADkAMgBiAGYAZgBlADUAMAAzADIAIAAtACAAcwB1AGIAcwBlAHQAIABvAGYAIABKAHUAcgBhAEwAaQBnAGgAdABoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAAAAAgAAAAAAAP+BADMAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAQACAQIAEQt6ZXJva2F5YWhsaQ==')}";
e.getElementsByTagName("head")[0].appendChild(b);c.setAttribute("style","font:99px _,arial,helvetica;position:absolute;visibility:hidden");if(!g){g=s.appendChild(e.createElement("fontface"));t=true}c.innerHTML="........";c.id="fonttest";g.appendChild(c);h=c.offsetWidth*c.offsetHeight;c.style.font="99px testfont,_,arial,helvetica";a=h!==c.offsetWidth*c.offsetHeight;var v=function(){if(g.parentNode){a=j.fontface=h!==c.offsetWidth*c.offsetHeight;s.className=s.className.replace(/(no-)?fontface\b/,"")+
(a?" ":" no-")+"fontface"}};setTimeout(v,75);setTimeout(v,150);addEventListener("load",function(){v();(w=true)&&o&&o(a);setTimeout(function(){t||(g=c);g.parentNode.removeChild(g);b.parentNode.removeChild(b)},50)},false)}j._fontfaceready=function(p){w||a?p(a):(o=p)};return a||h!==c.offsetWidth};d.video=function(){var a=e.createElement("video"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('video/ogg; codecs="theora"');b.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"');b.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return b};
d.audio=function(){var a=e.createElement("audio"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('audio/ogg; codecs="vorbis"');b.mp3=a.canPlayType("audio/mpeg;");b.wav=a.canPlayType('audio/wav; codecs="1"');b.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}return b};d.localStorage=function(){return"localStorage"in i&&i.localStorage!==null};d.sessionStorage=function(){try{return"sessionStorage"in i&&i.sessionStorage!==null}catch(a){return false}};d.webworkers=function(){return!!i.Worker};
d.applicationCache=function(){var a=i.applicationCache;return!!(a&&typeof a.status!="undefined"&&typeof a.update=="function"&&typeof a.swapCache=="function")};d.svg=function(){return!!e.createElementNS&&!!e.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect};d.smil=function(){return!!e.createElementNS&&/SVG/.test(M.call(e.createElementNS("http://www.w3.org/2000/svg","animate")))};d.svgclippaths=function(){return!!e.createElementNS&&/SVG/.test(M.call(e.createElementNS("http://www.w3.org/2000/svg",
"clipPath")))};for(var z in d)if(O(d,z))N.push(((j[z.toLowerCase()]=d[z]())?"":"no-")+z.toLowerCase());j[E]||P();j.addTest=function(a,b){a=a.toLowerCase();if(!j[a]){b=!!b();s.className+=" "+(b?"":"no-")+a;j[a]=b;return j}};m.cssText="";D=n=null;(function(){var a=e.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1})()&&function(a,b){function c(f,k){if(o[f])o[f].styleSheet.cssText+=k;else{var l=t[G],q=b[A]("style");q.media=f;l.insertBefore(q,l[G]);o[f]=q;c(f,k)}}function h(f,
k){for(var l=new RegExp("\\b("+w+")\\b(?!.*[;}])","gi"),q=function(B){return".iepp_"+B},x=-1;++x<f.length;){k=f[x].media||k;h(f[x].imports,k);c(k,f[x].cssText.replace(l,q))}}for(var t=b.documentElement,g=b.createDocumentFragment(),o={},w="abbr|article|aside|audio|canvas|command|datalist|details|figure|figcaption|footer|header|hgroup|keygen|mark|meter|nav|output|progress|section|source|summary|time|video",v=w.split("|"),p=[],H=-1,G="firstChild",A="createElement";++H<v.length;){b[A](v[H]);g[A](v[H])}g=
g.appendChild(b[A]("div"));a.attachEvent("onbeforeprint",function(){for(var f,k=b.getElementsByTagName("*"),l,q,x=new RegExp("^"+w+"$","i"),B=-1;++B<k.length;)if((f=k[B])&&(q=f.nodeName.match(x))){l=new RegExp("^\\s*<"+q+"(.*)\\/"+q+">\\s*$","i");g.innerHTML=f.outerHTML.replace(/\r|\n/g," ").replace(l,f.currentStyle.display=="block"?"<div$1/div>":"<span$1/span>");l=g.childNodes[0];l.className+=" iepp_"+q;l=p[p.length]=[f,l];f.parentNode.replaceChild(l[1],l[0])}h(b.styleSheets,"all")});a.attachEvent("onafterprint",
function(){for(var f=-1,k;++f<p.length;)p[f][1].parentNode.replaceChild(p[f][0],p[f][1]);for(k in o)t[G].removeChild(o[k]);o={};p=[]})}(this,e);j._enableHTML5=true;j._version="1.5";s.className=s.className.replace(/\bno-js\b/,"")+" js";s.className+=" "+N.join(" ");return j}(this,this.document);

87
css3-bw/page.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3_B&W</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo"><h1>CSS3_<a href="#">B&amp;W</a></h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li><a href="index.html">home</a></li>
<li><a href="examples.html">examples</a></li>
<li class="current"><a href="page.html">a page</a></li>
<li><a href="another_page.html">another page</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<ul id="images">
<li><img src="images/1.jpg" width="600" height="300" alt="photo_one" /></li>
<li><img src="images/2.jpg" width="600" height="300" alt="photo_two" /></li>
<li><img src="images/3.jpg" width="600" height="300" alt="photo_three" /></li>
<li><img src="images/4.jpg" width="600" height="300" alt="photo_four" /></li>
<li><img src="images/5.jpg" width="600" height="300" alt="photo_five" /></li>
<li><img src="images/6.jpg" width="600" height="300" alt="photo_six" /></li>
</ul>
<div id="sidebar_container">
<div class="sidebar">
<h3>Latest News</h3>
<h4>New Website Launched</h4>
<h5>January 1st, 2012</h5>
<p>2012 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p>
</div>
<div class="sidebar">
<h3>Useful Links</h3>
<ul>
<li><a href="#">First Link</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">And Another</a></li>
<li><a href="#">Last One</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>A Page</h1>
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
</div>
</div>
<footer>
<p><a href="index.html">home</a> | <a href="about.html">about me</a> | <a href="portfolio.html">my portfolio</a> | <a href="blog.html">blog</a> | <a href="contact.php">contact</a></p>
<p>&copy; 2012 CSS3_B&W. All Rights Reserved. | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
</footer>
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#images').kwicks({
max : 600,
spacing : 2
});
});
</script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
</body>
</html>

5
css3-bw/readme.md Normal file
View File

@@ -0,0 +1,5 @@
## Project Description
* [live example](https://learning-zone.github.io/website-templates/css3-bw/)
![alt text](https://github.com/learning-zone/Website-Templates/blob/master/assets/CSS3_BW.png "CSS3_BW")