Sliding Windows Basic [HTML + Javascript]

Sliding Window Basic

Index.html

<html>

 <head>

  <link rel="stylesheet" type="text/css" href="style.css">

  <title>Sliding Windows</title>

 </head>

 <body>

  <div id="container">

   <div id="leftpane" onclick = "retract(this.id)">

   </div>

   <div id="rightpane" onclick = "retract(this.id)">

   </div>

   <Button id="left" onclick="move(this.id)" style="transition: all 1s linear; z-index: 10; position:absolute; top: 48%; left: 30%; width: 70px;">Left</Button>

   <Button id="right" onclick="move(this.id)" style="transition: all 1s linear; z-index: 10; position:absolute; top: 48%; right: 30%; width: 70px;">Right</Button>

  </div>



  <script>

   var leftpane = document.getElementById("leftpane");

   var rightpane = document.getElementById("rightpane");

   

   var move = function (varid) {

     if(varid == "left")

     {

      leftpane.style.left =  "0%";



     }

     else

     {

      rightpane.style.right =  "0%";

     }

     document.getElementById(varid).style.opacity = "0";

   };



   var retract = function(varid)

   {

    if(varid == "leftpane")

    {

     leftpane.style.left =  "-50%";

     document.getElementById("left").style.opacity = "1";

    

    }

    else

    {

     rightpane.style.right =  "-50%";

     document.getElementById("right").style.opacity = "1";

    }

   }



  </script>



 </body>

</html>

Style.css

#container
{
 height: 101%;
 width: 101%;
 position: absolute;
 background-color: black;
 overflow: hidden;
 margin-left: -1%;
 margin-top: -1%
}

#leftpane
{
 position: relative;
 width: 50%;
 height:100%;
 background-color: green;
 left: -50%;
 float: left;
 transition: all 1s linear;
}

#rightpane
{
 position: relative;
 width: 50%;
 height:100%;
 background-color: yellow;
 float: right;
 right: -50%;
 transition: all 1s linear;
}

Basic Circular Menu [HTML + Javascript]

Circular Menu

Index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- The main circle -->
<div id="circle">
<!-- Sub Circles that contains your options -->
<div id="circle1" onclick="funct1(0,this.id)"></div> <!-- Passes angle of circle from the center to function -->
<div id="circle2" onclick="funct1(-90,this.id)"></div><!-- Hence making the circle rotate whenever the clicked circle is not on top. -->
<div id="circle3" onclick="funct1(180,this.id)"></div>
<div id="circle4" onclick="funct1(-270,this.id)"></div>
</div>

<script>
var circle = document.getElementById("circle"); //assigning html elements to variables //via ID
var circle1 = document.getElementById("circle1");
var circle2 = document.getElementById("circle2");
var circle3 = document.getElementById("circle3");
var circle4 = document.getElementById("circle4");
//function intended for chrome...
var funct1 = function(val,id) {
var  scircle = document.getElementById(id);
circle.style.webkitTransform = "rotate("+val+"deg)"; //Change of the Transform value with the                                                 //transition effect in the css makes each circle rotate in the given angle.
circle1.style.webkitTransform = "rotate("+(-val)+"deg)";
circle2.style.webkitTransform = "rotate("+(-val)+"deg)";
circle3.style.webkitTransform = "rotate("+(-val)+"deg)";
circle4.style.webkitTransform = "rotate("+(-val)+"deg)";

};
</script>

</body>

</html>

Style.css

#circle
{
position: absolute;
width: 500px;
height: 500px;
border-radius: 100%;
border: 1px solid black;
transition: all 1s linear;
background-color: blue;
}


#circle1
{
position:absolute;
left: 175px;
height: 150px;
width: 150px;
border-radius: 100%;
border:1px solid black;
background-image: url(1.jpg);
transition: all 1s linear;
}

#circle3
{
position:absolute;
bottom:0px;
left: 175px;
height: 150px;
width: 150px;
border-radius: 100%;
border:1px solid black;
background-image: url(1.jpg);
transition: all 1s linear;
}

#circle4
{
position:absolute;
top:175px;
height: 150px;
width: 150px;
border-radius: 100%;
border:1px solid black;
background-image: url(1.jpg);
transition: all 1s linear;
}

#circle2
{
position:absolute;
top:175px;
left: 350px;
height: 150px;
width: 150px;
border-radius: 100%;
border:1px solid black;
background-image: url(1.jpg);
transition: all 1s linear;
}

Web-P first Assignment

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);
}