Permalink
Browse files

JAVASCRIPT

  • Loading branch information...
1 parent 18c1754 commit d0730d7d47b5e268b84cde6a80eb1a8cac666e7e @excid3 committed Oct 17, 2010
Showing with 113 additions and 83 deletions.
  1. 0 README
  2. +71 −52 index.html
  3. +42 −31 style.css
View
0 README
No changes.
View
@@ -8,63 +8,82 @@
<title>Chris Oliver | excid3.com</title>
<link rel="shortcut icon" href="favicon.ico">
-
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
-
+ <script type="text/javascript"
+ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
- <body>
- <div id="border">
- <div id="page">
- <div id="title">
- <a href="/">Chris Oliver</a>
- <span>#!/usr/bin/env python</span>
- <span>-*- coding: utf-8 -*-</span>
- </div>
- <hr />
- <div id="content">
-
- <a href="/blog/projects" class="column red">
- <h1>Projects</h1>
- <p>See examples of my work. Most projects are released freely under the GPL license.</p>
- </a>
-
- <a href="/blog" class="column green">
- <h1>Blog</h1>
- <p>A look into my thoughts as a developer, student, and all around technology addict.</p>
- </a>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $("#default").click(function() {
+ return something("#default_info");
+ });
+
+ $("#projects").click(function() {
+ return something("#projects_info", "red");
+ });
+
+ $("#blog").click(function() {
+ return something("#blog_info", "green");
+ });
+
+ $("#contact").click(function() {
+ return something("#contact_info", "blue");
+ });
+ });
+
+ function something(obj, text, background) {
+ $(".current").removeClass("current");
+ $(obj).addClass("current");
+ return false;
+ }
+ </script>
+<body>
+ <a href="http://github.com/excid3"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+ <div id="border">
+ <div id="page">
+ <div id="title">
+ <a href="/" id="default">Chris Oliver</a>
+ </div>
+ <hr />
- <a href="/blog/contact" class="column blue">
- <h1>Hire</h1>
- <p>Looking for a developer? Send me an email and we can start a discussion.</p>
- </a>
+ <div id="content">
+ <ul>
+ <li class="red">
+ <a href="/blog/projects" id="projects">Projects</a>
+ </li>
- <div style="clear:both"></div>
+ <li class="green">
+ <a href="/blog" id="blog">Blog</a>
+ </li>
- <div class="main">
- Excellence is not a skill; it is an attitude.
- </div>
+ <li class="blue">
+ <a href="/blog/contact" id="contact">Contact</a>
+ </li>
+ </ul>
- <div style="clear:both"></div>
+ <div id="info">
+ <div id="default_info" class="current">
+ WOAH
+ </div>
+ <div id="projects_info" class="red">
+ WOAH
+ </div>
+ <div id="blog_info" class="green">
+ WOAH
+ </div>
+ <div id="contact_info" class="blue">
+ WOAH
+ </div>
+ </div>
+ <div style="clear:both"></div>
+ </div>
+ </div>
+ </div>
- </div>
- </div>
- </div>
- <div id="footer">
- <span class="left">Source available on <a href="http://github.com/excid3/landing">Github</a></span>
- Copyright &copy; 2010 Chris Oliver
- </div>
-
- <!--
- <script type="text/javascript">
- var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C /script%3E"));
- </script>
- <script type="text/javascript">
- try {
- var pageTracker = _gat._getTracker("INSERT YOUR GOOGLE CODE ANALYTICS UA-XXXXXXX-X CODE HERE ");
- pageTracker._trackPageview();
- } catch(err) {}</script>
- -->
+ <div id="footer">
+ <span class="left">Source available on <a href="http://github.com/excid3/landing">Github</a></span>
+ Copyright &copy; 2010 Chris Oliver
+ </div>
- </body>
-</html>
+</body>
+</html>
View
@@ -20,7 +20,8 @@ body {
/*background-color: #E3E3E3;*/
background-color: #FFFFFF;
color: #58595B;
- font: Georgia,Times,"Times New Roman",serif
+ text-shadow: 2px 2px #FFFFFF;
+ font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}
a, a:hover, a:visited{
@@ -29,11 +30,11 @@ a, a:hover, a:visited{
}
a:hover { text-decoration: underline; }
-p { margin-top: 20px; }
+p { margin-bottom: 10px; }
hr {
color: #ffffff;
- background-color: #ffffff;
+ background-color: #ffffff;
border: 1px dotted #BDBDBD;
border-style: none none dotted;
}
@@ -42,6 +43,7 @@ hr {
border: 10px solid #E0E0E0;
margin: 80px auto 0;
width: 800px;
+ border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
@@ -58,16 +60,16 @@ hr {
}
#border #page #title a {
color: #38393B;
- font-weight: normal;
- text-shadow: 2px 2px #FFFFFF;
+ font-weight: bold;
}
#border #page #title span {
clear: right;
color: #737A7D;
font-size: 13.34px;
float: right;
- width: 150px;
+ text-align: right;
+ width: 550px;
text-shadow: 1px 1px #FFFFFF;
}
@@ -84,27 +86,30 @@ hr {
#border #page #content #nav a { margin-bottom: 15px; }
-.column {
+#content ul {
float: left;
- height: 150px;
- width: 218px;
- padding: 3px 8px 3px 8px;
- margin: 0 7px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- color: #FFFFFF;
-}
-.column h1 {
- font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
- font-weight: lighter;
- font-size: 20px;
- border: 1px dotted #FFFFFF;
- border-style: none none dotted;
}
-.column p {
- margin: 0;
- padding: 5px 0;
- font-size: 13.34px;
+#content ul li {
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ list-style-type: none;
+ margin: 10px;
+ padding: 10px;
+ text-align: center;
+ width: 100px;
+}
+
+#content ul li a {
+ color: white;
+ padding: 10px;
+}
+
+.blue, .red, .green {
+ border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ color: white;
}
.blue {
@@ -120,17 +125,23 @@ hr {
text-shadow: 1px 1px #5E9D0E;
}
-.main {
- margin: 20px 0 0 10px;
- font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
- font-size: 12px;
- text-align: center;
+#info {
+ float: left;
+}
+
+#info div {
+ display: none;
+ margin: 10px 10px 10px 25px;
+ padding: 10px;
+ width: 550px;
+}
+#info .current {
+ display: block;
}
#footer, #footer a, #footer a:hover {
font-size: 10px;
color: #666666;
- font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
margin: 7px auto 20px;
width: 800px;
}

0 comments on commit d0730d7

Please sign in to comment.