WEB-MASKA WINNING PAGE



<html>

<head>
<title>Avishkar</title>
<!--link rel="stylesheet" type="text/css" href="Avishkar.css"/-->
<style type="text/css">
 body
{
                background-image:url('body_bg.jpg');
                background-repeat:no-repeat;
                background-position:center top;
}
.top
{
                background-image:url('banner.png');
                width:900px;
                height:120px;
                background-position:left top;
                background-repeat:no-repeat;
}
.head
{
                width:450px;
                margin:20 auto;
                font-face:Times New Roman;
                font-size:65px;
                font-weight:Bold;
}
.head a
{
                display:block;
                -webkit-transition:all 0.3s ease-in-out;
                -moz-transition:all 0.3s ease-in-out;
                transition:all 0.3s ease-in-out;
                color:#c4d92e;
                text-decoration:none;
}
.head a span
{
                -webkit-transition:all 0.3s ease-in-out;
                -moz-transition:all 0.3s ease-in-out;
                transition:all 0.3s ease-in-out;
                color:#fff;
}
.head a:hover
{
                color:#fff;
}
.head a:hover span
{
                color:#c4d92e;
}
#nav
{
                background-image:url('list_bg.png');
                background-repeat:repeat-x;
                background-position:left top;
                list-style:none;
                margin:0 auto;
                width:770px;
                height:45px;
}
#nav li
{
                float:left;
}
#nav li a
{
                display:block;
                text-decoration:none;
                padding:5px 20px;
                color:#fff;
                float:left;
                font-size:25px;
                -moz-transition:all 0.3s ease-in-out;
                -webkit-transition:all 0.3s ease-in-out;
                transition:all 0.3s ease-in-out;
               
}
#nav li a:hover
{
                color:#c4d92e;
}
#back
{
                width:800px;
                margin:0 auto;
                background-image:url('bg-shade.png');
                background-repeat:repeat;
}
#content-slider
{
                width:500px;
                margin:0 auto;
                font-face:Times New Roman;
                margin-top:20px;
}
#content
{
                width:500px;
                height:312px;
                -moz-box-shadow:0px 0px 50px 10px #c9c9c9;
                box-shadow:0px 0px 50px 10px #c9c9c9;
                -webkit-box-shadow:0px 0px 50px 10px #c9c9c9;
                overflow:hidden;
               
}
#content-inner
{
                width:10000px;
                height:312px;
}
.page
{
                width:500px;
                height:312px;
                float:left;
}
#content-inner1:target #content-inner
{
                -moz-transition:all 400ms ease;
                transition:all 400ms ease;
                -webkit-transition:all 400ms ease;
                margin-left:0px;
}
#content-inner2:target #content-inner
{
                -moz-transition:all 400ms ease;
                -webkit-transition:all 400ms ease;
                transition:all 400ms ease;
                margin-left:-500px;
}
#content-inner3:target #content-inner
{
                -moz-transition:all 400ms ease;
                -webkit-transition:all 400ms ease;
                transition:all 400ms ease;
                margin-left:-1000px;
}
#content-inner4:target #content-inner
{
                -moz-transition:all 400ms ease;
                -webkit-transition:all 400ms ease;
                transition:all 400ms ease;
                margin-left:-1500px;
}
#content-inner5:target #content-inner
{
                -moz-transition:all 400ms ease;
                -webkit-transition:all 400ms ease;
                transition:all 400ms ease;
                margin-left:-2000px;
}
#content-inner6:target #content-inner
{
                -moz-transition:all 400ms ease;
                -webkit-transition:all 400ms ease;
                transition:all 400ms ease;
                margin-left:-2500px;
}
#nav1
{
                list-style:none;
                width:156px;
                height:16px;
                margin:0 auto;
}
.button
{
                width:16px;
                height:16px;
                -moz-border-radius:8px;
                -webkit-border-radius:8px;
                border-radius:8px;
                text-decoration:none;
                float:left;
                margin:20 5;
                background:#bababa;
}
.button a
{
                width:16px;
                height:16px;
                display:block;
}
</style>
</head>
<body>
<div class="top">
</div>
<h1 class="head">
<a href="#"><span>Avishkar</span> 2k12</a>
</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Robotics</a></li>
<li><a href="#">Code-war</a></li>
<li><a href="#">Web-maska</a></li>
<li><a href="#">Junkyard-wars</a></li>
</ul>
<div id="back">
<div id="content-slider">
<div id="content">
<div id="content-inner1">
<div id="content-inner2">
<div id="content-inner3">
<div id="content-inner4">
<div id="content-inner5">
<div id="content-inner6">
<div id="content-inner">
<div class="page">
<img src="Aldebaran2.jpg" width="500" height="312"/>
</div>
<div class="page">
<img src="digitalworld.jpg" width="500" height="312"/>
</div>
<div class="page">
<img src="counterstrike_1024.jpg" width="500" height="312"/>
</div>
<div class="page">
<img src="FIFA08 3.jpg" width="500" height="312"/>
</div>
<div class="page">
<img src="nfs_most_wanted_s60v2.jpg" width="500" height="312"/>
</div>
<div class="page">
<img src="quiz.jpg" width="500" height="312"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul id="nav1">
<li class="button"><a href="#content-inner1"></a></li>
<li class="button"><a href="#content-inner2"></a></li>
<li class="button"><a href="#content-inner3"></a></li>
<li class="button"><a href="#content-inner4"></a></li>
<li class="button"><a href="#content-inner5"></a></li>
<li class="button"><a href="#content-inner6"></a></li>
</ul>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------------     

-------------------------------------------------------------------------------------------------











Posted by vivek nayyar at 19:19 0 comments

 

Navigation bar


The navigation bar is an inevitable element in every website. In this post I want to share with you some simple practices and suggestions aimed at designing a perfect HTML navigation bar.
Let’s start illustrating the typical HTML structure. Here is a schematization of a typical navigation bar that contains some links:

The HTML code is really simple, nothing more than <div> layer with an unordered list inside. As you probably know, the HTML5 specification introduced a new element that identifies the navigation bar which is the <nav> tag. The <nav> tag substitutes the more general <div> tag but, as you can see in the following code, it doesn’t change the conceptual structure of the navigation bar.
HTML 4 Code
<div id="nav">
<ul>
<li><a href="/index">Home</a></li>
<li><a href="/link1">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<ul>
</div>
HTML 5 Code
<nav>
<ul>
<li><a href="/index">Home</a></li>
<li><a href="/link1">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<ul>
</nav>
Using an unordered list for organizing the navigation bar is always a good practice to follow especially when you have to implement a little bit more complex interaction between main links and any submenus. Furthermore, this approach allows you to have more control on the CSS code of the various elements that compose the navigation, thus simplifying the customization.

Here is an example of HTML structure for a basic navigation bar with submenus:
<div id="nav"> <!-- nav container -->
<ul>
<li><a href="/link1">Link 1</a> <!-- main item -->
<ul> <!-- item submenu -->
<li><a href="/s-link1">Sub Link 1</a></li>
<li><a href="/s-link2">Sub Link 2</a></li>
</ul> <!-- close submenu -->
</li>
<ul>
</div>
CSS code suggestions
Now take note of the following three simple suggestions for great CSS code. Set the “height” attribute for the tag <li> equal to the height attribute of the <ul> tag:

For a perfect vertical alignment of the text, set the “line-height” attribute for the tag<li> equal to the height attribute of the <ul> tag:


To make the area of your link fully clickable set the attribute “display” of the tag <a>to block:



Posted by vivek nayyar at 23:17 0 comments

 

ip exp-4 css file


<html>
<head><title>My css</title>
<link rel="stylesheet" type="text/css" href="Cssexp4.css"/>
<body background="Colorful (2).jpg">
<div class="top">
</div>
<h1>MY CSS CREATIONS</h1>
<table>
<tr>
<th>Mechanical</th>
<th>I.T</th>
<th>Computer</th>
<th>Extc</th>
<th>Civil</th>
<th>Instumentation</th>
</tr>
</table>
<div class="info">
<ul id="nav">
<li><img src="mechanical-engineering.jpg" width="150" height="150"/></li>
<li><img src="civil-engineering.jpg" width="150" height="150"/></li>
<li><img src="Technology-Management.jpg" width="150" height="150"/></li>
<li><img src="computer-engineering-seminar-topics.jpg" width="150" height="150"/></li>
<li><img src="civeng.jpg" width="150" height="150"/></li>
</ul>
</div>

</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------
CSS FILE
body
{
font-face:Arial;
font-size:20pt;
line-height:25pt;
margin:20pt;
color:maroon;
font-style:Italic;
font-weight:Bold;
text-align:center;
background-image:url('Colorful (42).jpg');
backgound-repeat:no-repeat;
background-position:left top;


}
.top
{
                background-image:url('banner.png');
                width:900px;
                height:120px;
                background-repeat:no-repeat;
                background-position:left top;
}
h1
{
font-face:Vineta BT;
font-size:25pt;
color:pink;
font-style:Italic;
text-decoration:underline;
text-align:center;
}
table
{
border-collapse:collapse;
border:1px Solid Black;
color:white;
width:100pt;
margin:0 auto;
}
td
{
border:1px Solid Black;
vertical-align:top;
text-transform:UpperCase;
padding:5px 40px;
}
th
{
background-color:#2f8be8;
border:1px Solid Black;
vertical-align:top;
text-transform:UpperCase;
padding:5px 40px;
}
.info
{
                width:1000px;
                margin:0 auto;
}
#nav
{
                list-style:none;
                float:left;
}
#nav li
{
                float:left;
                padding:10px 10px 20px 10px;
}
#nav li img
{
                border:2px solid white;
                border-bottom:30px solid white;
}
Posted by vivek nayyar at 22:21 0 comments

 

ip experiment no:3-Forms and frames


<html>
<head><title>Firstpage</title>
</head>
<body bgcolor="#99ff99">
<marquee>Welcome to parshvanath college of engineering</marquee>
</body>
</html>
-----------------------------------------------------------------
<html>
<head><title>Admission form</title>
</head>
<body bgcolor="#ff5522">
<a href="AdmissionForm.html"><center><u><b><i>Click here to fill the form</i></b></u></center></a>
</body>
</html>
-----------------------------------------------------------------
<html>
<head><title>Admission form</title>
</head>
<body bgcolor="#ff5522">
<div align="center" style="font-face:Viner Hand ITC;color:black;font-weight:bold;text-transform:UPPERCASE;text-decoration:overline;font-style:Italic;"><u>Admission form</u>
</div>
<pre>
<form method="post" action="mailto:vivek.of.nayyar@gmail.com">
Full name:<input type="text" size="10" maxsize="20" name="fullname" /></span>
Gender:
Male<input type="radio" name="gender" value="m"/>
Female<input type="radio" name="gender" value="f"/>
<div align="absmiddle">Address</div><textarea name="address" rows="3" cols="10" align="middle">Enter ur address</textarea>
Email-id:<input type="text" size="20" maxsize="30"/>
Select your age
<select name="age" size="1">
<option>15.</option>
<option>16.</option>
<option>17.</option>
<option>18.</option>
<option>19.</option>
<option>20.</option>
</select>
<input type="submit" value="Click here to submit"/>
<input type="reset" value="Click here to reset"/>
</form>
</pre>
</body>
</html>
------------------------------------------------------------------
<html>
<head><title>FeedbackForm</title>
</head>
<body bgcolor="#ff8899">
<div align="center"><u>FeedbackForm</u></div>
<pre>
<form method="post" action="vivek.of.nayyar@gmail.com">
Name:<input type="password" size="5" maxsize="15"/>
Age
<select name="age" size="1">
<option>15.</option>
<option>16.</option>
<option>17.</option>
<option>18.</option>
<option>19.</option>
<option>20.</option>
</select>
Gender:
Male<input type="radio" name="gender" value="m"/>
Female<input type="radio" name="gender" value="f"/>
Email-id:<input type="text" size="20" maxsize="30"/>
Rate the seminar
Excellent<input type="checkbox" name="excellent"/>
Good<input type="checkbox" name="good"/>
Bad<input type="checkbox" name="bad"/>
worst<input type="checkbox" name="bad"/>
<input type="submit" value="Click here to submit"/>
<input type="reset" value="Click here to reset"/>
</form>
</pre>
</body>
</html>
-------------------------------------------------------------------
<html>
<head>
<title>Frames and Forms</title>
<frameset rows="25%,75%">
<frame src="Firstpage.html"></frame>
<frameset cols="25%,75%">
<frame src="Link.html"></frame>
<frame src="FeedbackForm.html"></frame>
</frameset>
</frameset>
</head>
<body bgcolor="#ff2255" link="yellow" vlink="red" alink="blue">
</body>
</html>


-------------------------------------------------------------------
Posted by vivek nayyar at 22:14 0 comments

 

code for i.p experiment no:1


<html>
<head>
<title>Experiment no:1</title>
</head>
<body>
<h1>This is heading no:1 of maximum size</h1>
<h2>This is heading no:2 </h2>
<h3>This is heading no:3</h3>
<h4>This is heading no:4</h4>
<h5>This is heading no:5</h5>
<h6>This is heading no:6 of minimum size</h6>
<p><q>Don<super>'</super>t ever let some one tell you<br/>
 that you can<super>'</super>t do something.<br/>
Not even me.You got a dream<sub>,</sub><br/>
you gotta protect it.<br/>
When people can<super>'</super>t do<br/>
something themselves<sub>,</sub><br/>
they are gonna tell you<br/>that you can<super>'</super>do it.<br/>
You want something go get it.</q>
</p>
<p>
<font size="5" face="Monotype Corsiva" color="Black">
<p>
<u>This will be underlined</u> <sup>Super</sup><strong> this is strong</strong>
H<sub>2</sub>O <em>italics</em> will <strike>strike out</strike> any stain, <big>big</big> or <small>small</small>.Look for new <sup>Super></sup><b>Strength</b> H<sub>2</sub>O<i> plus</i> in a stream near you.
<i>plus</i> in a stream near you.</p></font>
<p><tt>COLLEGE INFORMATION</tt></p>
<pre>                    No of students
MECHANICAL          120   
CIVIL                           120   
I.T                                 60    
COMPUTER               60    
</pre>
<ul type="circle">
<li>Mechanical</li>
<li>computer</li>
</ul>
<ol type="I">
<li>I.T</li>
<li>Civil</li>
</ol>
<dl>
<dt>Astute</dt>
<dd>clever</dd>
</dl>
</body>
</html>
Posted by vivek nayyar at 22:02 0 comments

 
Subscribe to: Posts (Atom)