Hi Devs!
I am in the making of a front-page Template for Potterlands.
Check the template out here: http://evaluategraphics.com/
Spam me with constructive critique.
Potterlands - Template
- Losdivinos
- Posts: 139
- Joined: Tue Mar 01, 2011 5:44 pm
Potterlands - Template
Ask me anything about SEO & Marketing.
Skype: rasmus_355
Skype: rasmus_355
- Jackolantern
- Posts: 10891
- Joined: Wed Jul 01, 2009 11:00 pm
Re: Potterlands - Template
Nice looking! The spinning cube is cool looking, and very impressive that it is not with Flash!
The indelible lord of tl;dr
- Losdivinos
- Posts: 139
- Joined: Tue Mar 01, 2011 5:44 pm
Re: Potterlands - Template
Thanks! The 3D slider is not my creation though, so I dont wanna take credit for that.
Ask me anything about SEO & Marketing.
Skype: rasmus_355
Skype: rasmus_355
Re: Potterlands - Template
Looks amazing, wish I had the skill to create a page like that.. Very nice!
- Losdivinos
- Posts: 139
- Joined: Tue Mar 01, 2011 5:44 pm
Re: Potterlands - Template
Thank you very much.
Ask me anything about SEO & Marketing.
Skype: rasmus_355
Skype: rasmus_355
- Losdivinos
- Posts: 139
- Joined: Tue Mar 01, 2011 5:44 pm
Re: Potterlands - Template
Yeah I have some issues getting visibility to change at the register now onClick.
Yes, the slider works only poperly in Google Chrome, which is sad.
And thank you very much!
Yes, the slider works only poperly in Google Chrome, which is sad.
And thank you very much!
Ask me anything about SEO & Marketing.
Skype: rasmus_355
Skype: rasmus_355
Re: Potterlands - Template
I had a quick look at your source and fixed it up. Don't use HTML5 with an XHTML 1.0 doctype.Losdivinos wrote:Yeah I have some issues getting visibility to change at the register now onClick.!
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Potterlands</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Volkhov:400italic,700" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="img/potter-favicon.png" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.13303.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.min.js"></script>
<script type="text/javascript">
(function(window,document,$,undefined){
$(document).ready( function()
{
$(function()
{
$('#sb-slider').slicebox();
if( !Modernizr.csstransforms3d )
{
$('#sb-note').show();
$('body').append(
$('script').attr('type', 'text/javascript').attr('src', 'js/jquery.easing.1.3.js')
);
}
});
// hide register div on load
$('#hideShow').hide();
// add event listener to register button
$('#topitems input[name="register"]').click( function()
{
// onclick event callback for register button
$('#hideShow').fadeIn(); // fadein hideShow
});
});
})(window,document,$)
</script>
</head>
<body>
<img src="img/bg.jpg" style="z-index: -3; position: absolute; left:0; top:0; width:100%; height:100%;" />
<div id="beta-reminder">
Our site is currently in development.<br />
Errors may occur.<br />
Thanks for visiting Potterlands!
</div>
<div id="hideShow">
<form method="post" autocomplete="off" action="auth/register.php">
Username<br />
<input type="text" class="userpass" required="required" name="username" /><br />
Password<br />
<input type="password" class="userpass" required="required" name="password" /><br />
Password again<br />
<input type="password" class="userpass" required="required" name="password2" /><br />
Email<br />
<input type="email" class="userpass" required="required" name="email" /><br />
<input type="submit" class="login" style="cursor:pointer;" name="register" value="Register" />
</form>
</div>
<div id="imgglow">
<img src="img/glow/1.png" />
</div>
<div class="container">
<div id="topitems">
<span class="left">
<input type="button" style="cursor:pointer;" class="register" name="register" value="" />
</span>
<span class="right">
<form method="post" autocomplete="off" action="auth/login.php">
<input type="text" class="userpass" required="required" name="username" placeholder="Username..." />
<img src="img/chain1.png" alt="" />
<input type="password" class="userpass" required="required" name="password" placeholder="Password..." />
<img src="img/chain2.png" alt="" />
<input type="submit" class="login"style="cursor:pointer;" name="login" value="Login" />
</form>
</span>
</div>
<div class="topbar">
</div>
<div class="header-img" style="text-align: center">
<img src="img/welcome.png" id="welcome" alt="" />
<h1 class="text">
"Join Hogwarts School of Witchcraft and Wizardry today!
<br />
Save the world of magic or lead the dark to the throne..."
</h1>
</div>
<div id="sb-slider" class="sb-slider">
<img src="img/1.jpg" title="Creative Lifesaver" alt="Creative Lifesaver" />
<img src="img/2.jpg" title="Honest Entertainer" alt="Honest Entertainer" />
<img src="img/3.jpg" title="Brave Astronaut" alt="Brave Astronaut" />
</div>
</div>
</body>
</html>
I rewrote the JavaScript for you, use this as a guideline when writing other scripts.
Code: Select all
(function(window,document,$,undefined){
$(document).ready( function()
{
// slider code
$(function()
{
$('#sb-slider').slicebox();
if( !Modernizr.csstransforms3d )
{
$('#sb-note').show();
$('body').append(
$('script').attr('type', 'text/javascript').attr('src', 'js/jquery.easing.1.3.js')
);
}
});
// hide #hideShow (register div) on load (can also use css)
$('#hideShow').hide();
// add event listener to register button
$('#topitems input[name="register"]').click( function()
{
// onclick event callback for register button
$('#hideShow').fadeIn(); // fadein hideShow
});
});
})(window,document,$)
Fighting for peace is declaring war on war. If you want peace be peaceful.
- Losdivinos
- Posts: 139
- Joined: Tue Mar 01, 2011 5:44 pm
Re: Potterlands - Template
Thanks alot! I am gonna change it.
Ask me anything about SEO & Marketing.
Skype: rasmus_355
Skype: rasmus_355