h180效果图
部分源码
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Cooker</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="css/style.css?v=2">
<link rel="stylesheet" href="../css/jcarousel.css">
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body class="home">
<!-- LOGIN POP UPS -->
<div id="popup-overlay"></div>
<div class="popup" id="popup-login">
<h2>Login form</h2>
<hr class="separator">
<form method="post" action="" class="form clearfix">
<fieldset>
<label for="login-username">Username:</label>
<input type="text" name="" id="login-username" class="input text">
<label for="login-password">Password:</label>
<input type="password" name="" id="login-password" class="input text">
</fieldset>
</form>
<hr class="separator">
<button class="button submit">Login</button>
<div class="links"><a href="#">Forgotten password </a> | <a href="#" class="register-btn"> New account</a></div>
<a class="close" href="#"></a>
</div>
<div class="popup" id="popup-register">
<h2>Registration form</h2>
<hr class="separator">
<form method="post" action="" class="form clearfix">
<fieldset>
<label for="login-username">Username:</label>
<input type="text" name="" id="login-username" class="input text">
<label for="login-email">Email:</label>
<input type="text" name="" id="login-email" class="input text error" value="Error">
<label for="login-password">Password:</label>
<input type="password" name="" id="login-password" class="input text">
<label for="login-confirm-password">Confirm password:</label>
<input type="password" name="" id="login-confirm-password" class="input text">
</fieldset>
<hr class="separator">
<div class="checks">
<div class="check-row">
<label><input type="checkbox" class="input checkbox">I have read and agree to the <a href="#">Terms & Conditions</a></label>
&l