dennis/Website-Templates
1
0
Fork 0
mirror of https://github.com/dawidolko/Website-Templates.git synced 2026-02-04 09:30:05 +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

65
my-portfolio-two/about.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE HTML>
<html>
<head>
<title>my portfolio two</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>MY<a href="#">PORTFOLIO</a>TWO</h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li><a href="index.html">home</a></li>
<li class="current"><a href="about.html">about me</a></li>
<li><a href="portfolio.html">my portfolio</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<div class="gallery">
<ul class="images">
<li class="show"><img width="450" height="450" src="images/1.jpg" alt="photo_one" /></li>
<li><img width="450" height="450" src="images/2.jpg" alt="photo_two" /></li>
<li><img width="450" height="450" src="images/3.jpg" alt="photo_three" /></li>
<li><img width="450" height="450" src="images/4.jpg" alt="photo_four" /></li>
<li><img width="450" height="450" src="images/5.jpg" alt="photo_five" /></li>
</ul>
</div>
</div>
<div id="content">
<h1>About Me</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 my portfolio two. 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/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
</body>
</html>

72
my-portfolio-two/blog.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE HTML>
<html>
<head>
<title>my portfolio two</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>MY<a href="#">PORTFOLIO</a>TWO</h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="portfolio.html">my portfolio</a></li>
<li class="current"><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<div id="gallery">
<ul class="images">
<li class="show"><img width="450" height="450" src="images/1.jpg" alt="photo_one" /></li>
<li><img width="450" height="450" src="images/2.jpg" alt="photo_two" /></li>
<li><img width="450" height="450" src="images/3.jpg" alt="photo_three" /></li>
<li><img width="450" height="450" src="images/4.jpg" alt="photo_four" /></li>
<li><img width="450" height="450" src="images/5.jpg" alt="photo_five" /></li>
</ul>
</div>
</div>
<div id="content">
<h1>Blog</h1>
<div id="blog_container">
<div class="blog"><h2>Nov</h2><h3>22nd</h3></div>
<h4 class="select"><a href="#">Magazine Photo-Shoot on the Isle-Of-Islay</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">read more.....</a></p>
<div class="blog"><h2>Oct</h2><h3>25th</h3></div>
<h4><a href="#">Wedding Shoot in Edinburgh</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="#">read more.....</a></p>
</div>
<p></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 my portfolio two. 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/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
</body>
</html>

113
my-portfolio-two/contact.php Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE HTML>
<html>
<head>
<title>my portfolio two</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>MY<a href="#">PORTFOLIO</a>TWO</h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="portfolio.html">my portfolio</a></li>
<li><a href="blog.html">blog</a></li>
<li class="current"><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<div id="gallery">
<ul class="images">
<li class="show"><img width="450" height="450" src="images/1.jpg" alt="photo_one" /></li>
<li><img width="450" height="450" src="images/2.jpg" alt="photo_two" /></li>
<li><img width="450" height="450" src="images/3.jpg" alt="photo_three" /></li>
<li><img width="450" height="450" src="images/4.jpg" alt="photo_four" /></li>
<li><img width="450" height="450" src="images/5.jpg" alt="photo_five" /></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 my portfolio two. 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/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
</body>
</html>

385
my-portfolio-two/css/style.css Normal file
View File

@@ -0,0 +1,385 @@
@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 170% 'News Cycle', arial, sans-serif;
color: #666;
margin: 0;
padding: 0 0 8px 0;
}
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;
text-decoration: none;
color: #00B7EC;
}
a:hover {
text-decoration: underline;
color: #00B7EC;
}
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;
}
#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: 220px;
float: left;
height: 100px;
background: transparent;
padding: 0 0 10px 10px;
}
#logo h1 {
font: normal 330% 'News Cycle', arial, sans-serif;
padding: 37px 0 0 17px;
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: 720px;
margin: 1px auto 0 auto;
float: right;
padding: 35px 0 0 0;
}
#site_content {
width: 950px;
overflow: hidden;
margin: 4px auto 0 auto;
padding: 0;
background: #eee;
border-top: 0;
border-bottom: 0;
}
#sidebar_container {
float: left;
width: 450px;
padding: 0;
height: 450px;
}
#content {
text-align: justify;
width: 444px;
padding: 0 0 5px 30px;
margin: 0;
float: left;
}
#content ul {
margin: 2px 0 5px 0px;
}
#content 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;
}
#blog_container h4 {
font: normal 170% 'News Cycle', arial, sans-serif;
margin: 0 0 15px 0;
padding: 5px 0;}
#blog_container h4.select {
width: 475px;}
.blog {
background: url(../images/calendar.png) no-repeat;
width: 54px;
height: 46px;
float: left;
margin: 0 15px 0 0;
}
.blog h2 {
font: normal 90% arial, sans-serif;
text-shadow: none;
text-align: center;
margin: 0;
padding: 4px 0 0 0;
color: #FFF;
}
.blog h3 {
font: 140% arial, sans-serif;
text-shadow: none;
margin: -15px 0 0 0;
text-align: center;
color: #222;
}
footer {
width: 950px;
font: normal 130% 'News Cycle', arial, sans-serif;
height: 90px;
padding: 20px 0 5px 0;
text-align: center;
color: #222;
background: #D4D4D4;
}
footer p {
padding: 0 0 10px 0;
}
footer a, footer a:hover {
color: #222;
text-decoration: none;
}
footer a:hover {
color: #FFF;
text-decoration: underline;
}
/* 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: 304px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
ul.images {
width:450px;
height:450px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
ul.images li {
position:absolute;
margin:0;
padding:0;
left:0;
right:0;
list-style:none;
}
ul.images li.show {
z-index:500;
}
ul img {
border: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: #DDD;
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 9px 0 9px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}

175
my-portfolio-two/documentation/index.html Normal file
View File

@@ -0,0 +1,175 @@
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>My Portfolio two 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;My Portfolio two&rdquo; Template Documentation</h1>
<p><strong>Template version: 2.0<br />Created: March 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>
<li><a href="#galleries">Image Fader</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;div id=&quot;sidebar_container&quot;&gt;
&lt;div class=&quot;gallery&quot;&gt;
&lt;ul class="images"&gt;
&lt;li class=&quot;show&quot;&gt;&lt;img src=&quot;images/1.jpg&quot; width=&quot;450&quot; height=&quot;450&quot; alt=&quot;photo_one&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/2.jpg&quot; width=&quot;450&quot; height=&quot;450&quot; alt=&quot;photo_two&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/3.jpg&quot; width=&quot;450&quot; height=&quot;450&quot; alt=&quot;photo_three&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/4.jpg&quot; width=&quot;450&quot; height=&quot;450&quot; alt=&quot;photo_four&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/5.jpg&quot; width=&quot;450&quot; height=&quot;450&quot; alt=&quot;photo_five&quot; /&gt;&lt;/li&gt;
&lt;/ul&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;!-- menu --&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.image_fade.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>Image fade</b> contains the functions for the gallery image fader.</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.dezinerfolio.com/freebie/project-icon-set">Project Icons - Designed by Navdeep Raj</a>
</ul>
<hr>
<h3 id="galleries"><strong>F) Image Fader</strong> - <a href="#toc">top</a></h3>
<p>The image fader has the following format:</p>
<pre>
&lt;li&gt;&lt;img width="450" height="450" src="images/image_name.jpg" alt="image one" /&gt;&lt;/li&gt;
</pre>
<p>To add an image to the image fader simply add a new list item (li) to the unordered list (ul) with class="images". You need to specify the width of the image, the height of the image, the src and an 'alt' for the image. If you would like the image to hyperlink to another page, simply add an &lt;a&gt;&lt;/a&gt; around the &lt;img&gt; tag.</p>
<p>NOTE: Remember to put 'class="show"' on the first &lt;li&gt; in the list, so that the image fader knows which one to start with.</p>
<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>

94
my-portfolio-two/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
my-portfolio-two/fonts/newscycle-regular.eot Normal file
View File

Binary file not shown.

BIN
my-portfolio-two/fonts/newscycle-regular.ttf Normal file
View File

Binary file not shown.

BIN
my-portfolio-two/images/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
my-portfolio-two/images/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
my-portfolio-two/images/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
my-portfolio-two/images/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
my-portfolio-two/images/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
my-portfolio-two/images/bullet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 B

BIN
my-portfolio-two/images/calendar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
my-portfolio-two/images/pattern.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 B

73
my-portfolio-two/index.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE HTML>
<html>
<head>
<title>my portfolio two</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>MY<a href="#">PORTFOLIO</a>TWO</h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li class="current"><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="portfolio.html">my portfolio</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<div class="gallery">
<ul class="images">
<li class="show"><img width="450" height="450" src="images/1.jpg" alt="photo_one" /></li>
<li><img width="450" height="450" src="images/2.jpg" alt="photo_two" /></li>
<li><img width="450" height="450" src="images/3.jpg" alt="photo_three" /></li>
<li><img width="450" height="450" src="images/4.jpg" alt="photo_four" /></li>
<li><img width="450" height="450" src="images/5.jpg" alt="photo_five" /></li>
</ul>
</div>
</div>
<div id="content">
<h1>Welcome to My Portfolio Two</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; 2012 my portfolio two. 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/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
</body>
</html>

54
my-portfolio-two/js/image_fade.js Normal file
View File

@@ -0,0 +1,54 @@
$(document).ready(function() {
// execute the slideShow, set 4 seconds (4000) for each image
slideShow(4000);
});
function slideShow(speed) {
// append an 'li' item to the 'ul' list for displaying the caption
$('ul.images').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');
// set the opacity of all images to 0
$('ul.images li').css({opacity: 0.0});
// get the first image and display it
$('ul.images li:first').css({opacity: 1.0}).addClass('show');
// call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
// pause the slideshow on mouse over
$('ul.images').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no images have the show class, grab the first image
var current = ($('ul.images li.show')? $('ul.images li.show') : $('#ul.images li:first'));
// trying to avoid speed issue
if(current.queue('fx').length == 0) {
// get the next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.images li:first') :current.next()) : $('ul.images li:first'));
// get the next image caption
var desc = next.find('img').attr('alt');
// set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
// hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
}

11
my-portfolio-two/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}};

1
my-portfolio-two/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
my-portfolio-two/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

28
my-portfolio-two/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);

66
my-portfolio-two/portfolio.html Normal file
View File

@@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<html>
<head>
<title>my portfolio two</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>MY<a href="#">PORTFOLIO</a>TWO</h1></div>
<nav>
<ul class="lavaLampWithImage" id="lava_menu">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li class="current"><a href="portfolio.html">my portfolio</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<div id="site_content">
<div id="sidebar_container">
<div id="gallery">
<ul class="images">
<li class="show"><img width="450" height="450" src="images/1.jpg" alt="photo_one" /></li>
<li><img width="450" height="450" src="images/2.jpg" alt="photo_two" /></li>
<li><img width="450" height="450" src="images/3.jpg" alt="photo_three" /></li>
<li><img width="450" height="450" src="images/4.jpg" alt="photo_four" /></li>
<li><img width="450" height="450" src="images/5.jpg" alt="photo_five" /></li>
</ul>
</div>
</div>
<div id="content">
<h1>My Portfolio</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>
<p></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 my portfolio two. 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/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
</body>
</html>

5
my-portfolio-two/readme.md Normal file
View File

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