4 Attachment(s)
[HTML5][CSS3] Legacy: Phoenix Login
This is a legacy release from the once popular CMS PhoenixCMS. The changes that I have contributed are the following:
- HTML5 functionality
- CSS3 functionality
- Validation and accessibility
HTML source:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Page</title>
<meta name="description" content="Login page" />
<link href="./css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header id="cTop">
<h1 id="cTLogo">Habbo</h1>
<p id="cTStatus">0 user(s) online.</p>
</header>
<main id="cMiddle">
<section id="cMBox">
<h2>Login</h2>
<p>Please enter your credentials below or <a href="#" target="_self">register here</a>.</p>
<form action="" method="post" autocomplete="off" id="cMBCredentials">
<label>Username:<input type="text" name="loginUsername" /></label>
<label>Password:<input type="password" name="loginPassword" /></label>
<input type="submit" value="Login" />
</form>
</section>
</main>
<footer id="cBottom">
<p id="cBText"><a href="#" target="_self">Homepage</a> | <a href="#" target="_self">Terms & Conditions</a> | <a href="#" target="_self">Privacy Policy</a></p>
</footer>
</div>
</body>
</html>
CSS source:
Code:
body{background-color:#bce0ee;font:11px Verdana,Arial,Helvetica,sans-serif;margin:0;}
body h1,
body h2,
body p{margin:10px;word-wrap:break-word;}
body a{color:#fc6204;text-decoration:none;}
body a:hover{text-decoration:underline;}
body input[type=text],
body input[type=password]{text-indent:5px;width:246px;height:25px;margin:5px 0 2px;display:block;}
body input[type=submit]{height:25px;margin:5px 0 10px;float:right;}
body div#container{background-color:#fff;width:1022px;margin:20px auto 20px auto;border:solid #96b3be;border-width:1px 1px 2px;}
div#container header#cTop,
div#container footer#cBottom{height:60px;line-height:60px;}
div#container header#cTop h1#cTLogo{background:url(../img/cTopBackground.gif) no-repeat;width:110px;height:40px;color:transparent;display:inline-block;}
div#container header#cTop p#cTStatus{margin:0 10px;vertical-align:top;display:inline-block;}
div#container main#cMiddle{background:url(../img/cBodyBackground.png) no-repeat;background-size:100%;width:100%;height:431px;position:relative;}
main#cMiddle section#cMBox{background-color:#fff;width:270px;border:solid #000;border-width:1px 1px 2px;position:absolute;top:10px;right:10px;}
section#cMBox form#cMBCredentials{margin:10px;}
div#container footer#cBottom{}
footer#cBottom p#cBText{margin:0;text-align:center;} @Media screen and (max-width:1024px)
{
body input[type=text],
body input[type=password]{text-indent:5px;width:100%;height:25px;margin:5px 0 2px;display:block;}
body div#container{width:100%;margin:0;border-width:0 0 2px;}
div#container main#cMiddle{background:none;height:100%;}
main#cMiddle section#cMBox{width:100%;border-width:0;overflow:hidden;position:relative;top:0;right:0;}
}
The attached thumbnails show you:
- Desktop version with CSS
- Desktop version without CSS
- Mobile version with CSS
All ranges of accessibility has been assigned
I have attached .zip file to download all the contents required for this webpage.
I hope you like my work, thank you.
Re: [HTML5][CSS3] Legacy: Phoenix Login
Never really liked the Phoenix log-in, but anyway thank you for this great release! You've done a great work!
Re: [HTML5][CSS3] Legacy: Phoenix Login
Thanks for the release, but I'm pretty sure nobody uses PhoenixCMS anymore. :p
Re: [HTML5][CSS3] Legacy: Phoenix Login
Always liked the Phoenix layout, simple and distraction-free :P:
Re: [HTML5][CSS3] Legacy: Phoenix Login
I am not a huge fan of the layout.
But I still like it!
Re: [HTML5][CSS3] Legacy: Phoenix Login
Nice OldSchool look, I've seen alot more people going to these designs recently.
