I use to write code a lot last year, mainly HTML and CSS. I love web design. I still do! A lot of all of this is really outdated. Especially CSS since CSS3 is way better.

I don't find these useful, I posted them mainly on gaming sites as I use to be a heavy gamer, someone might find them useful?


HTML Code:
<!DOCTYPE html>
        <title>Hello</title>
        <link rel="stylesheet" type="text/css" href="./css/style.css">
        <head>
        </head>
        <body>
        <div id="headerMenu">
        <form action="search.php?" method="GET">
          <input type="text" name="search" placeholder="Search Now" />
          </form>
          <div id="line">
          </div>
          <button>Register</button>
        </div>

        <div id="Login">
        <img src="images/Login.jpg">
        <input type="text" name="Username" Placeholder="Username"><br>
        <input type="password" name="Password" Placeholder="Password"><br>
        <input type="submit" name="submit" value="Log in">
        </div>
       

        </body>
        </html>
And the CSS!

HTML Code:
     
body {
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    font-family: arial, helvetica, sans-serif;
}
#headerMenu {
    background-color: white;
    box-shadow: 0 1px 4px #ccc;
    height: 50px;
    width: 100%;
}
#headerMenu input[type="text"] {
    background-color: #f2f2f2;
    margin-top: 10px;
    margin-left: 350px;
    border-radius: 4px;
    border: 1px solid #ccc;
    height: 25px;
    4px;
    text-indent: 10px;
    width: 500px;
    outline: 0;

}
#headerMenu input[type="text"]:hover {
    background-color: white;
}
#line {
    background-color: #ccc;
    height: 25px;
    width: 1px;
    margin-left: 880px;
    margin-top: -26px;
}
#headerMenu button {
height: 30px;
background-color: #81BEF7;
margin-left: 900px;
margin-top: -27px;
color: white;
position: absolute;
border: 1px solid #ccc;
border-radius: 4px;
width:100px;
outline: 0;

}
#headerMenu button:hover {
    background-color: #58ACFA;
}
#Login {

    background-color: white;
    height: 400px;px;
    margin-top: 20px;
    border-radius: 15px;
    width: 400px;
    margin-left: 400px;
    box-shadow: 0 1px 4px 4px #ccc;
}
#Login img {
    margin-left: 80px;
}
#Login input[name="Username"] {
width: 250px;
border-radius: 
4px;
height: 30px;
background-color: #f2f2f2;
margin-top: 10px;
outline: 0;
margin-left: 75px;
text-indent: 10px;
border: 1px solid #ccc;

}
#Login input[name="Password"]{
    width: 250px;
    background-color: #f2f2f2;
    border-radius: 4px;
    height: 30px;
    text-indent: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    outline: 0;
    margin-left: 75px;
}
#Login input[type="submit"] {
    width: 125px;
    height: 30px;
    margin-top:10px;
    background-color: #81BEF7;
    border-radius: 4px;
    border:1px solid #ccc;
    color: white;
    margin-left: 140px;
}
#Login input[type="submit"]:hover {

    background-color: #58ACFA;
}
I'm looking back at this now and think that looks terrible! Hope someone can tweak it up though!

Here is a different one of mine! This one I very much like.



HTML Code:
<html>
<head>
<title>Social Look</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<div id="head">
<img src="images/ic.png">
<button><a href="Register.php">Register</a></button>
</div>

<div id="logit">
<form action="member.php" method="POST">
<input type="text" name="username" placeholder="Username">
<input type="password" name="pass" placeholder="********">
<input type="submit" name="login" value="Login">
</form>
</div>
</body>

</html>
Again the CSS.

HTML Code:
body {
    margin:0;
    background: #f2f2f2;
}
#head {
    height: 50px;
    background-color: #03B3B2;
}
#head img {
    margin-left: 200px;
}
#head button {
    position: absolute;
    background: #03B3B2;
    cursor: pointer;
    margin-top: 10px;
    margin-left: 10px;
    height: 30px;
    border-radius: 3px;
    width: 100px;
    border: 2px solid white;
}
#head button a {
    text-decoration: none;
    color: white;
    font-family: bold;
}
#head button:hover {
    background: skyblue;
    border: 2px solid skyblue;
}
#logit {
    height: 220px;
    width: 400px;
    background: white;
    margin-top: 50px;
    position: absolute;
    margin-left: 450px;
    border-top: 50px solid #03B3B2;
}
#logit input[type="text"] {
    height: 40px;
    background: #f2f2f2;
    border: 1px solid #f1f1f1;
    margin-top: 30px;
    border-radius: 3px;
    margin-left: 50px;
    width: 300px;
    text-indent: 5px;
    outline: none;
    position: absolute;
}
#logit input[type="text"]:hover {
    border: 2px solid #03B3B2;
}
#logit input[type="password"] {
    height: 40px;
    position: absolute;
    margin-left: 50px;
    outline: none;
    width: 300px;
    margin-top: 80px;
    background: #f1f1f1;
    border: 1px solid #f2f2f2;
    border-radius: 3px;
    text-indent: 5px;
}
#logit input[type="password"]:hover {
    border: 2px solid #03B3B2;
}
#logit input[type="submit"] {
    height: 40px;
    margin-left: 50px;
    width: 300px;
    position: absolute;
    margin-top: 130px;
    color: white;
    background: #03B3B2;
    border: 2px solid #03B3B2;
    border-radius: 3px;
    outline: none;
}
I done tiny updates on it and will post pictures here.



I enjoyed web design, I really did!