second page added as 'otherpage' with the styles for that in screen2.…

…css, which can be combined in rails
jamierumbelow · Nov 13, 2011 · 71f5d7d · 71f5d7d
1 parent 2eb7fb6
commit 71f5d7d
Show file tree

Hide file tree

Showing 2 changed files with 224 additions and 0 deletions.
diff --git a/shizzle/otherpage.htm b/shizzle/otherpage.htm
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>RevisionHub - Whatever the search result</title>
+
+ 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  	<meta name="description" content="[description]" />    
+  	<meta name="keywords" content="[keywords]" />    
+  	<meta name="author" lang="en" content="[author]" />    
+  	<meta name="copyright" content="&copy; [copyright]" />
+	<meta name="date" content="[date]" />
+
+  	<link rel="stylesheet" type="text/css" href="styles/screen2.css" media="screen" />
+
+  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script> 
+  	<script src="scripts/scripts.js"></script>
+
+  	<link rel="shortcut icon" href="favicon.ico">
+
+</head>
+
+<body>
+
+<div id="container">
+
+	<!-- Panel --> 
+	<div id="toppanel">
+
+		<!-- Hidden Panel -->
+		<div id="panel">
+
+			<div class="content clearfix">
+
+				<div class="left">
+
+					<h1>Welcome to RevisionHub</h1>
+
+					<h2>It's just plain Bonerific.</h2>		
+
+					<p class="grey">You can search through stuff without logging in, but for submitting you'll need an account.</p>
+				</div>
+
+				<div class="left">
+
+					<!-- Login Form -->
+					<form class="clearfix" action="#" method="post">
+
+						<h1>Member Login</h1>
+
+						<label class="grey" for="login">Email:</label>
+						<input class="field" type="text" name="login" id="login" value="" size="25" />
+
+						<label class="grey" for="pass">Password:</label>
+						<input class="field" type="password" name="pass" id="pwd" size="25" />
+
+	            		<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />
+	            		&nbsp;Remember me</label>
+
+        				<br class="clear" />
+
+						<input type="submit" name="submit" value="Login" class="bt_login" />
+
+						<a class="lost-pass" href="#">Lost your password?</a>
+
+					</form>
+					<!-- /Login Form --> 
+
+				</div>
+
+				<div class="left right">			
+
+					<!-- Register Form -->
+					<form action="#" method="post">
+
+						<h1>Not a member yet? Sign Up!</h1>				
+
+						<label class="grey" for="signup">Username:</label>
+						<input class="field" type="text" name="signup" id="signup" value="" size="23" />
+
+						<label class="grey" for="email">Email:</label>
+						<input class="field" type="text" name="email" id="email" size="23" />
+
+						<label>A password will be e-mailed to you.</label>
+						<input type="submit" name="submit" value="Register" class="bt_register" />
+
+					</form>
+					<!-- /Registration Form -->
+
+				</div>
+
+			</div>
+
+		</div>	
+		<!-- /Hidden Panel --> 
+
+		<!-- Top Tab -->	
+		<div class="tab">
+
+			<ul class="login">
+				<li class="left">&nbsp;</li>
+				<li>Hello Guest!</li>
+				<li class="sep">|</li>
+				<li id="toggle">
+					<a id="open" class="open" href="#">Log In | Register</a>
+					<a id="close" style="display: none;" class="close" href="#">Close Panel</a>			
+				</li>
+				<li class="right">&nbsp;</li>
+			</ul>
+
+		</div> 
+		<!-- /Top Tag -->
+
+	</div>
+	<!-- /Panel -->
+
+	<div id="wrapper">
+
+    	<div id="header">
+    		<img id="logo" src="images/logo.png" /><span class="hidden">RevisionHub</span>
+    	</div>
+
+    	<div id="content">
+
+
+    	</div>
+
+  	</div>
+
+  	<div id="footer"><p class="links">&nbsp;</p></div>
+  	<div id="bottom">&nbsp;</div>
+
+</div>
+
+</body>
+</html>
diff --git a/shizzle/styles/screen2.css b/shizzle/styles/screen2.css
@@ -0,0 +1,89 @@
+@import url("reset.css");
+@import url("slide.css");
+
+/*==============================*/
+
+/*
+Colour hashes:
+Owl Yellow: eab625
+Owl Brown: 79301e
+Text Light Orange: de7d40
+Text Bright Orange: cc4e1a
+
+*/
+html { 
+	overflow: auto; 
+	height: 100%; 
+}
+
+body { 
+   	font-family: Helvetica, Geneva, Arial, Helvetica, sans-serif;
+    width: 100%;
+    height: 100%;
+    line-height: 1.5em;
+    background: #fff;
+    margin: 0 auto; 
+    font-size: 12pt; 
+}
+
+a {
+	color: #eab625;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #cc4e1a;
+}
+
+a img {
+  border: none;/*remove border for linked images*/
+}
+
+
+h1 {
+	font-size: 1.6em;
+	height: 20px;
+	padding-top: 0;
+}
+
+h2 {
+	font-size: 1.2em;
+	height: 20px;
+	padding-top: 0;
+}
+
+
+/*======================*/
+
+#header { 
+	height: 120px; 
+	width: 800px; 
+	position: relative;
+}
+
+
+#logo { position: absolute; left: 15px; top: -20px; width: 250px; }
+
+
+#footer {
+	position: relative;
+	bottom: 10px;
+}
+
+#footer > .links {
+	margin-top: 10px;
+	margin-left: 10px;
+}
+
+#bottom { 
+	width: 100%; 
+	height: 60px;
+	position: absolute; 
+	bottom: 0; 
+	background: #272727;
+	border-top: 1px solid #000;
+}
+
+/*=====================*/
+.hidden { display: none; }
+