Webpage
HTML Section
Index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="script.js"></script>
<title>LP FAN PAGE</title>
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="footer"></div>
<div id="left"><a href="#">
<table style="margin-left: 100px; margin-top: 20px; text-align:center;">
<tr>
<td><a id="sidelink" href="#" style="color:black">Home</a></td>
</tr>
<tr>
<td><a id="sidelink" href="#">Music</a></td>
</tr>
<tr>
<td><a id="sidelink" href="#">Videos</a></td>
</tr>
<tr>
<td><a id="sidelink" href="#">About Us</a></td>
</tr>
</table>
<div id="image1"></div></a>
<p id="text">Upcoming Concerts</p>
<abbr title="concerts"><table id="tableloca">
<tr>
<th id="text3">Location</th>
<th id="text3">Date</th>
</tr>
<tr>
<td id="text3">Melbourne</td>
<td id="text3">20-August-2013</td>
</tr>
<tr>
<td id="text3">New York</td>
<td id="text3">31-August-2013</td>
</tr>
<tr>
<td id="text3">Toronto</td>
<td id="text3">2-September-2013</td>
</tr>
<tr>
<td id="text3">Frankfurt</td>
<td id="text3">3-October-2013</td>
</tr>
</table></abbr>
</div>
<div id="right">
<p id="signin">Sign IN</p>
<form action="index.html">
<table>
<tr>
<td id="text">Username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td id="text">Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit"></td>
</tr>
<tr>
<td></td>
<td><a id="text2" href="#">Forgot Username/Password</a></td>
</tr>
<tr>
<td></td>
<td id="hide">:P</td>
</tr>
<tr>
<td></td>
<td><a id="signin2" href="signup.html" target="_blank">Sign UP!!!</a></td>
</tr>
</table>
<ul id="text">
<li>LP Updates Daily</li>
<li>Concert Passes</li>
<li>LP Goodies</li>
</ul>
</div>
<div id="middle">
<a href="#" id="texthead">Linkin Park - Castle of Glass</a>
<video id="video" controls>
<source src="video/lpvideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<marquee id="marq">WELCOME TO THE FAN PAGE!</marquee>
</div>
</div>
</body>
</html>
Signup.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>SIGN UP</title>
</head>
<body>
<div id="middle2">
<p id="texthead">SIGN UP!!!</p>
<form id="form1" action="index.html">
<table>
<tr>
<td><span id="text">First Name:</span></td>
<td><abbr title="first name"><input type="text" name="fname"></abbr></td>
</tr>
<tr>
<td><span id="text">Last Name:</span></td>
<td><abbr title="last name"><input type="text" name="lname"></abbr></td>
</tr>
<tr>
<td><span id="text">Username:</span></td>
<td><abbr title="(A-Z) (0-9)"><input type="text" name="username"></abbr></td>
</tr>
<tr>
<td><span id="text">Password:</span></td>
<td><abbr title="Atleast 6 characters long"><input type="password" name="password"></abbr></td>
</tr>
<tr>
<td><span id="text">Re-Confirm Password:</span></td>
<td><input type="password" name="password2"></td>
</tr>
<tr>
<td><span id="text">Email:</span></td>
<td><abbr title="abc@xyz.com"><input type="email" name="email"></abbr></td>
</tr>
<tr>
<td><span id="text">Date of Birth:</span></td>
<td><input type="date" name="dob"></td>
</tr>
<tr>
<td><span id="text">Gender:</span></td>
<td><input type="radio" name="male"><span id="text">Male</span></td>
<td><input type="radio" name="female"><span id="text">Female</span></td>
</tr>
<tr>
<td><span id="text">About you:</span></td>
<td><abbr title="Mention something about yourself."><input type="message" name="message"></abbr></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td><abbr title="Click if you agree"><input type="checkbox" name="check"></abbr></td>
<td><span id="text">I agree to the terms and conditions</span></td>
</tr>
<tr>
<td><input type="submit" name="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</head>
CSS Section
stylesheet.css
#header
{
position:absolute;
border-radius: 10px;
border: 2px solid black;
height: 7.89%;
width: 100%;
margin: auto;
text-align: center;
background-image: url(images/header.png);
overflow:hidden;
}
#image1
{
width:200px;
height: 200px;
background-image: url(images/lplogo.jpg);
overflow: hidden;
border-radius: 10px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: 2px solid white;
}
#texthead
{
position:relative;
margin-left: auto;
margin-top: 40px;
margin-right:auto;
font-family:linkin park;
font-size: 30px;
color: white;
}
#texthead:hover
{
font-size: 40px;
text-shadow: 0 0 10px #00006E;
}
#video
{
}
#signin
{
color: white;
font-family: linkin park;
text-align: center;
font-size: 20px;
}
#hide
{
color: #6B6B6B;
}
#signin2
{
color: white;
font-family: linkin park;
text-align: center;
font-size: 20px;
padding: 10px;
}
#text
{
color: white;
font-family: linkin park;
padding: 10px;
}
#marq
{
position: relative;
margin-top: 100px;
font-family: linkin park;
font-size: 30px;
color: #00006E;
}
#text2
{
color: white;
font-family: linkin park;
padding: 10px;
font-size: 10px;
}
#text3
{
color: white;
font-family: linkin park;
padding: 10px;
font-size: 15px;
border: 1px solid black;
border-radius: 1px;
}
#tableloca
{
position: relative;
margin-left: 30px;
}
@font-face
{
font-family: linkin park;
src: url(font/LINKINPARK.TTF);
}
#left
{
position:absolute;
margin-top: 7%;
width:300px;
height:700px;
background-color:white;
border-radius:10px;
float:left;
background-color: #6B6B6B;
border: 2px solid white;
}
#right
{
position:absolute;
margin-left:1200;
margin-top: 7%;
width:300px;
height:700px;
background-color:white;
border-radius:10px;
float:right;
background-color: #6B6B6B;
border: 2px solid white;
}
#sidelink
{
font-size:20px;
font-family: linkin park;
color: white;
}
#sidelink:hover
{
text-shadow: 0 0 10px green;
color: white;
font-size: 24px;
}
#form1
{
padding: 20px;
}
#middle
{
position:absolute;
background-color: white;
margin-top:7%;
border-radius: 10px;
height: 700px;
width: 860px;
text-align:center;
margin-left: 320px;
background-color: #6B6B6B;
border: 2px solid white;
}
#middle2
{
position:relative;
border-radius: 10px;
height: 700px;
width: 860px;
text-align:center;
margin-left:auto;
margin-right: auto;
margin-top:150px;
background-color: #6B6B6B;
border: 2px solid white;
}
video
{
position: relative;
margin-left: auto;
margin-top: 0px;
margin-right:auto;
height:480px;
width: 640px;
}
#footer
{
position:absolute;
border-radius: 10px;
border: 2px solid black;
height: 75px;
width: 1500px;
text-align: center;
background-color:white;
background-image: url(images/footer.png);
margin-top:835px;
margin-left:0px;
}
#main
{
position:relative;
height: 930px;
width:1500px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}
body
{
background-color: #00006E;
background-image: url(images/background.png);
}
No comments:
Post a Comment