Josh's old Programming designs.
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?
http://i66.tinypic.com/ip7gwi.png
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.
http://i64.tinypic.com/ac9wll.png
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.
http://i63.tinypic.com/2ahgndf.png
http://i66.tinypic.com/2yyt3zk.pnghttp://i63.tinypic.com/102njgm.png
I enjoyed web design, I really did!
