Tuesday, 12 November 2013

How to Create Template ( like W3 School ) in HTML on .Net FrameWork

                No comments   




Wana Download or See Code Here :  Go Inside ->




Download the code from here : http://sdrv.ms/1gFuKjL


or Below is the Coding...  HTML AND CSS

HTML Coding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<title>W3School</title>
</head>
<body style ="">
<div class ="container">
<div class="menu" style="background-color:; width:200px; height:1100px; float:left;">
<h3 style="font-size:17px;font-weight:normal;font-family:Lucida Bright; color:#555555;margin-left:40px;margin-bottom:-5px;"> HTML/CSS
</h3>
<ul>
<li> <a href="#" style="text-decoration:none; color:#555555;font-size:14px; padding-top:;font-family:Verdana;" >Learn HTML </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn HTML5 </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn CSS </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn CSS3 </a> </li>
</ul>
<h3 style="font-size:17px;font-weight:normal;font-family:Lucida Bright; color:#555555;margin-left:40px;margin-bottom:-5px;"> JavaScript
</h3>
<ul>
<li> <a href="#" style="text-decoration:none; color:#555555;font-size:14px;font-family:Verdana; " >Learn JavaScript </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn Jquery </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn JqueryMobile </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn Ajax </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn JSON </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;">Learn GoogleMAps </a> </li>
</ul>
<h3 style="font-size:17px;font-weight:normal;font-family:Lucida Bright; color:#555555;margin-left:40px;margin-bottom:-5px;"> Server Side
</h3>
<ul>
<li> <a href="#" style="text-decoration:none; color:#555555;font-size:14px;font-family:Verdana; " >Learn JavaScript </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn Jquery </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn JqueryMobile </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn Ajax </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;font-family:Verdana;">Learn JSON </a> </li>
<li> <a href="#" style="text-decoration:none;color:#555555;font-size:14px;">Learn GoogleMAps </a> </li>
</ul>
</div>
<div class="images" style=" ">
<div style="background-color:; width:250px; height:130px; float:left; margin-top:10px;" >
<div>
<div style="width:120x; height:100px;float:left; background-color:">
<img src="image/1.png" />
</div>
<div style="background-color:;" class="classh1">
<span> HTML</span>
</div>
</div>
<div style="clear:both" > </div>
<div style ="background-color:";>
<div class="btn" style="background-color:;margin-top:7px;margin-left:5px;" >
<span class="btnfontcolor" style="background-color:;">
HTML Tutorial
</span>
</div>
<div class="btn" style="margin-top:10px; margin-left:5px;" >
<span class="btnfontcolor">
HTML Tag Refrence
</span>
</div>
</div>
</div>
<div style ="width:300px; height:200px; background-color:; margin-top:0px; float:right;">
<div style ="float:left;">
<img src="image/3.png" />
</div>
<div style="background-color: " class="classh2">
<span> JavaScript</span>
</div>
<div style="clear:both" > </div>
<div style ="background-color:";>
<div class="btn" style="background-color:; margin-top:5px; margin-left:15px;" >
<span class="btnfontcolor" style="background-color:;">
JavaScript Tutorial
</span>
</div>
<div class="btn" style="margin-top:10px;margin-left:15px;"" >
<span class="btnfontcolor">
JavaScript Refrence
</span>
</div>
</div>
</div>
<div style ="width:220px; height:180px; background-color:; margin-top:10px; float:left;margin-left:40px">
<div style ="float:left;">
<img src="image/2.png" />
</div>
<div style="background-color: " class="classh2">
<span> CSS</span>
</div>
<div style ="background-color:";>
<div class="btn" style="background-color:; margin-top:-5px; margin-left:10px;" >
<span class="btnfontcolor" style="background-color:;margin-left:0px;">
CSS Tutorial
</span>
</div>
<div class="btn" style="margin-top:10px; margin-left:10px;" >
<span class="btnfontcolor" style="margin-left:10px;">
CSS Refrence
</span>
</div>
</div>
</div>
<div style ="width:800px; height:50px; background-color:; margin-top:10px; float:left;">
</div>
<div style ="width:250px; height:180px; background-color:; margin-top:10px; float:left;">
<div style ="float:left;">
<img src="image/4.png" />
</div>
<div style="background-color: " class="classh2">
<span>SQL</span>
</div>
<div style ="background-color:";>
<div class="btn" style="background-color:; margin-top:-5px; margin-left:5px;" >
<span class="btnfontcolor" style="background-color:;">
SQL Tutorial
</span>
</div>
<div class="btn" style="margin-top:10px;margin-left:5px;" >
<span class="btnfontcolor">
SQL Refrence
</span>
</div>
</div>
</div>
<div style ="width:240px; height:200px; background-color:; margin-top:10px; float:left; margin-left:40px;">
<div style ="float:left;">
<img src="image/5.png" />
</div>
<div style="background-color: " class="classh2">
<span>PHP</span>
</div>
<div style ="background-color:";>
<div class="btn" style="background-color:; margin-top:-5px;margin-left:10px;" >
<span class="btnfontcolor" style="background-color:;">
PHP Tutorial
</span>
</div>
<div class="btn" style="margin-top:10px;margin-left:10px;" >
<span class="btnfontcolor">
PHP Refrence
</span>
</div>
</div>
</div>
<div style ="width:300px; height:200px; background-color:; margin-top:10px; float:right;">
<div style ="float:left;">
<img src="image/6.png" />
</div>
<div style="background-color: " class="classh2">
<span>Jquery</span>
</div>
<div style ="background-color:";>
<div class="btn" style="background-color:; margin-top:-5px;margin-left:10px;" >
<span class="btnfontcolor" style="background-color:;">
Jquery Tutorial
</span>
</div>
<div class="btn" style="margin-top:10px;margin-left:10px;" >
<span class="btnfontcolor">
Jquery Refrence
</span>
</div>
</div>
</div>
</div>
<div class ="gap">
</div>
<div class="box" style =" ">
<h2>Web Building Demos</h2>
<p class ="boxtext">
Learn to create websites on your own computer<br>
Learn the server basics in less than a day<br>
Learn to add databases to your website</p>
<div class ="boxbutton">
<a href ="#" style =""> PHP Demo</a>
</div>
<div class ="boxbuttonoverride" style ="">
<a href ="#" style =""> ASP Demo</a>
</div>
<div class ="boxbuttonoverride">
<a href ="#" style =""> .Net Demo</a>
</div>
</div>
<div class ="refrences">
<h1>
Refrences
</h1>
<ul>
<a href="#"> <li>
HTML/HTML5 Tags
</li></a>
<a href="#"> <li>
HTML Colors
</li></a>
<a href="#"> <li>
HTML Characters
</li></a>
<a href="#"> <li>
HTML Symbols</li>
<br />
<a href="#"> <li>
CSS 1,2,3
</li></a>
<a href="#"> <li>
CSS3 Support
</li></a>
<br /> <a href="#"> <li>
JavaScript </li>
<a href="#"> <li>
HTML DOM
</li></a>
<a href="#"> <li>
jQuery
</li></a>
<a href="#"> <li>
jQuery Mobile
</li></a>
<a href="#"> <li>
Google Maps
</li></a>
</ul>
</div>
</div>
</body>
</html>


CSS 
body
{
    background-color:#f1f1f1;
}


.container
{
 background-color:White;
 margin-top:150px;
 margin-left:50px;
 padding-left:10px;
 padding-top:40px;
 width:1140px;
 height:1200px;
   
}

.menu
{



}


.menu ul li a:before
{


content: "» ";
font-weight: bold;
color: #ff4800;



}
.menu ul li
{
   
    text-decoration:none;
    list-style-type:none;
    }

.images
{
   
    width:890px;
    height:500px;
     padding-left:10px;
     float:left;
     background-color:;
   
}
    .gap
    {
        width:920px; height:20px; background-color:; margin-top:10px; float:left;
       
        }
    .box
    {
        width:500px;
        height:200px;
        background-color:#f1f1f1;
        margin-top:10px;
        float:left;
        margin-left:10px;
    }
   
   
.box h2
{
font-size: 28px;
margin-top: 25px;
font-weight: normal;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans

Unicode", Geneva, Verdana, sans-serif;
text-align: center;
color: #555555;
}

.boxbutton , .boxbuttonoverride
{
text-align: center;
width: 120px;
border-radius: 6px;
height:40px;
font-size: 16px;


font-family: verdana,helvetica,arial,sans-serif;
float: left;
margin-left: 65px;
background-color: White;
border: 1px solid #e3e3e3;


}

.boxbuttonoverride
{
    margin-left:20px;
    }

.boxbutton a , .boxbuttonoverride a
{
text-decoration:none;
text-align:center;
color:#555555;

vertical-align:text-bottom;

}


.refrences
{

width :350px;
height:400px;
float:right;
background-color:;
margin-top:-25px;
}

.refrences h1
{
font-size: 32px;
height: 28px;
font-weight: normal;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans

Unicode", Geneva, Verdana, sans-serif;
color: #555555;
margin-left:20px;
}


.refrences a
{
    text-decoration:none;
    font-size: 14px;
color: #555555;
font-family: verdana,helvetica,arial,sans-serif;
line-height: 20px;
 
}

.refrences a:hover
{
   
  text-decoration:underline;
    }

.refrences ul
{

margin-left:-20px;
}

.refrences ul li
{
    list-style-type:none;
   
    }
.refrences ul li:before
{
content: "» ";
font-weight: bold;
color: #ff4800;

}





.boxtext
{
 font-family: verdana,helvetica,arial,sans-serif;
 text-align: center;
 font-size: 14px;
 color: #555555;  

}

h3
{
   font-size:17px;
   font-weight:normal;
   font-family:Lucida Bright;
   color:#555555;
   margin-left:20px;
   margin-bottom:-5px;
}
.classh1
{
   
    font-weight: normal;
    font-family  : "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida

Sans Unicode", Geneva, Verdana, sans-serif;
    color: #555555;
    font-size: 32px;
    margin  : 0px;
    float: left;
    padding-left: 10px;
    padding-top: 18px;
    height: 70px;
   
    }


.classh2
{
   
    font-weight: normal;
    font-family  : "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida

Sans Unicode", Geneva, Verdana, sans-serif;
    color: #555555;
    font-size: 32px;
    margin  : 0px;
   
    padding-left: 10px;
    padding-top: 18px;
    height: 92px;
   
    }

.btn
{

width:200px;
height:40px;
background-color:#f1f1f1;



}

.btnfontcolor
{
 color:#555555;
 margin-left:20px;
 margin-top:20px;
 font-size:16px;
 font-family: verdana,helvetica,arial,sans-serif;
 padding-top :10px;

 text-align:cen


// Code made by Jaspreet Singh

0 comments:

Post a Comment