Home
Viết bằng CSS3 và 1 ít HTML5!
Demo: http://jerm.help-out.net/h3-page
File: http://www.mediafire.com/?gdjwxt6nx9dylx1
p/s: Font trong Design là Open Sans Condensed nhưng cái máy nhà mình nó điên điên nên ko hiện font, ai thích thì thêm đoạn này vô sau thẻ <title>
Demo: http://jerm.help-out.net/h3-page
File: http://www.mediafire.com/?gdjwxt6nx9dylx1
- Code:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Hey Guys! HTML page | Design by Juskteez | Copyright © 2012 Deezsign</title>
<style type="text/css">
.designed {position: absolute;bottom:4px;right: 4px;background: url(http://i1245.photobucket.com/albums/gg587/vhuyphong/demoeez/copyright.png) center no-repeat;width: 167px;height: 29px;z-index: -1;opacity: 0.1;}
body {
background: url(http://www.servimg.com/u/f34/15/64/85/86/bg10.jpg) top center no-repeat;
background-size: 100%;
}
a, a:hover, a:active {text-decoration: none;}
:focus {outline: none;}
.heyguyslogo {
background: url(http://i1245.photobucket.com/albums/gg587/vhuyphong/demoeez/heyguys.png) center no-repeat;
display: block;width: 400px;height: 165px;
margin: auto;
}
.welcome {
background: url(http://i1245.photobucket.com/albums/gg587/vhuyphong/demoeez/welcome.png) center no-repeat;
display: block;width: 246px;height: 45px;
float: right;margin-top: 110px;margin-right: -55px;
}
form {margin: auto;text-align: center;width:280px;margin-top: 8%;height: 150px;}
input[type="text"], input[type="password"] {
height:30px;width:240px;padding:5px;
background: url(http://i1245.photobucket.com/albums/gg587/vhuyphong/demoeez/input-bg.jpg) center;text-align: center;
border: none;border-radius: 6px;margin: 5px;
box-shadow: 0 1px 1px rgba(255, 255, 255, .4), 0 1px 1px rgba(0, 0, 0, .5) inset;
font: 18px 'Open Sans Condensed', Arial, sans-serif;color: white;text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
input[type="submit"]{
font: 20px 'Open Sans Condensed', Arial, sans-serif;color: white;
padding-left: 18px;padding-right: 18px;margin: 5px;font-weight:bold;
border: 1px solid #002543;border-radius: 5px;text-transform: uppercase;
text-shadow:0px 2px 1px rgba(0, 0, 0, .7);box-shadow: inset 0px 1px 1px #4b9ada, 0 4px 0 #002543;
background-image: -o-linear-gradient(top, #004b8f 00%, #0057a6 100%);
background-image: -moz-linear-gradient(top, #004b8f 00%, #0057a6 100%);
background-image: -webkit-linear-gradient(top, #004b8f 00%, #0057a6 100%);
-webkit-transition: all 0.15s linear;-moz-transition: all 0.15s linear;-o-transition: all 0.15s linear;
}
input[type="submit"]:active{
margin-top:9px;color: #4585b4;
text-shadow:0px -2px 1px rgba(0, 0, 0, .7);box-shadow: inset 0px 3px 1px #002543;
background-color: #00539f;
-webkit-transition: all 0.15s linear;-moz-transition: all 0.15s linear;-o-transition: all 0.15s linear;
}
#forgot {
font: 16px 'Open Sans Condensed', Arial, sans-serif;
color: white;margin: auto;display: block;width:130px;
text-align: center;text-shadow:0px 2px 1px rgba(0, 0, 0, .7);
margin-top: 5px;
}
/* Responsive Design */
@media screen and (max-width: 1399px) {
body {
background: url(http://www.servimg.com/u/f34/15/64/85/86/bg10.jpg) top center no-repeat;
}
}
@media screen and (min-width: 510px) {input[type="submit"]{height: 40px}}
@media screen and (min-width: 300px) and (max-width: 510px) {
.designed {right: 40px;}
.heyguyslogo {
width: 280px;height: 115px;
background-size: 280px 115px;
}
.welcome {
width: 172px;height: 31px;
background-size: 172px 31px;
margin-top: 90px;margin-right: 55px;
}
form {width:240px;margin: auto;height: 130px;}
input[type="text"], input[type="password"] {font-size: 15px;height:24px;margin: 3px;}
input[type="submit"]{height: 30px;font-size: 16px;margin: 3px;}input[type="submit"]:active{margin-top: 6px;}
}
</style>
</head>
<body>
<a href="" class="heyguyslogo"><span class="welcome"></span></a>
<form class="loginform" method="post" action="/login">
<input type="text" class="username" name="username" placeholder="Tên đăng nhập" required/>
<input type="password" class="password" name="password" placeholder="Mật khẩu" required/>
<input type="checkbox" checked="checked" style="display:none;" name="autologin">
<input type="submit" class="submit" name="login" value="Đăng nhập" />
</form>
<a href="/profile?mode=sendpassword" id="forgot">Quên mật khẩu?</a>
<a href="mailto:vhuyphong@gmail.com" class="designed"></a>
</body>
</html>
p/s: Font trong Design là Open Sans Condensed nhưng cái máy nhà mình nó điên điên nên ko hiện font, ai thích thì thêm đoạn này vô sau thẻ <title>
- Code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
