html code for the registration from - dev bhoomi file final.docx · web viewwhat is table? tables...
TRANSCRIPT
What is table?Tables are defined with the <table> tag.Tables are divided into table rows with the <tr> tag.Table rows are divided into table data with the <td> tag.A table row can also be divided into table headings with the <th> tag.
<!DOCTYPE html><html><body><table style="width:100%"> <tr> <td>SACHIN</td> <td>KUMAR</td> <td>50</td> </tr> <tr> <td>DIVYA</td> <td>PANWAR</td> <td>94</td> </tr> <tr> <td>RAVI</td> <td>KUMAR</td> <td>80</td> </tr></table></body></html>
An HTML Table with a Border AttributeIf you do not specify a border for the table, it will be displayed without borders.A border can be added using the border attribute:
<!DOCTYPE html><html><body><table border=”1” style="width:100%"> <tr> <td>SACHIN</td> <td>KUMAR</td> <td>50</td> </tr> <tr> <td>DIVYA</td> <td>PANWAR</td> <td>94</td> </tr> <tr> <td>RAVI</td> <td>KUMAR</td> <td>80</td> </tr></table></body></html>
An HTML Table with Collapsed BordersIf you want the borders to collapse into one border, add CSS border-collapse:
<!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black; border-collapse: collapse;}</style></head><body><table style="width:100%"> <tr> <td>SACHIN</td> <td>KUMAR</td> <td>50</td> </tr> <tr> <td>RAVI</td> <td>KUMAR</td> <td>94</td> </tr> <tr> <td>DIVYA</td> <td>PANWAR</td> <td>80</td> </tr></table></body></html>
An HTML Table with Cell PaddingCell padding specifies the space between the cell content and its borders.If you do not specify a padding, the table cells will be displayed without padding.To set the padding, use the CSS padding property:
<!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black; border-collapse: collapse;}th, td { padding: 15px;}</style></head><body><table style="width:100%"> <tr> <td>SACHIN</td> <td>KUMAR</td> <td>50</td> </tr> <tr> <td>RAVI</td> <td>KUMAR</td> <td>94</td> </tr> <tr> <td>DIVYA</td> <td>PANWAR</td> <td>80</td> </tr></table></body></html>
HTML Table Headings
Table headings are defined with the <th> tag.By default, all major browsers display table headings as bold and centered:<!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black; border-collapse: collapse;}th, td { padding: 5px;}</style></head><body><table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>SACHIN</td> <td>KUMAR</td> <td>50</td> </tr> <tr> <td>DIVYA</td> <td>PANWAR</td> <td>94</td> </tr> <tr> <td>RAVI</td> <td>KUMAR</td> <td>80</td> </tr></table></body></html>
An HTML Table with Border SpacingBorder spacing specifies the space between the cells.To set the border spacing for a table, use the CSS border-spacing property:
<!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black; padding: 5px;}table { border-spacing: 15px;}</style></head><body><table style="width:100%"> <tr> <td>SACHIN</td> <td>KUMAR</td> <td>50</td> </tr> <tr> <td>DIVYA</td> <td>PANWAR</td> <td>94</td> </tr> <tr> <td>RAVI</td> <td>KUMAR</td> <td>80</td> </tr></table></body></html>
Table Cells that Span Many ColumnsTo make a cell span more than one column, use the colspan attribute:
<!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black; border-collapse: collapse;}th, td { padding: 5px; text-align: left; }</style></head><body><h2>Cell that spans two columns:</h2><table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>SACHIN KUMAR</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table></body></html>
Table Cells that Span Many RowsTo make a cell span more than one row, use the rowspan attribute:
<!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black; border-collapse: collapse;}th, td { padding: 5px; text-align: left; }</style></head><body><h2>Cell that spans two rows:</h2><table style="width:100%"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr></table></body></html>
An HTML Table With a CaptionTo add a caption to a table, use the <caption> tag:
<!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black; border-collapse: collapse;}th, td { padding: 5px; text-align: left;}</style></head><body><table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>10000</td> </tr> <tr> <td>February</td> <td>5000</td> </tr></table></body></html>
Different Styles for Different TablesMost of the examples above use a style attribute (width="100%") to define the width of each table.This makes it easy to define different widths for different tables.
The styles in the <head> section, however, define a style for all tables in a page. To define a special style for a special table, add an id attribute to the table:
<!DOCTYPE html><html>
<head><style>table { width:100%;}table, th, td { border: 1px solid black; border-collapse: collapse;}th, td { padding: 5px; text-align: left;}table#t01 tr:nth-child(even) { background-color: #eee;}table#t01 tr:nth-child(odd) { background-color:#fff;}table#t01 th { background-color: black; color: white;}</style></head>
<body><table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>SACHIN</td> <td>KUMAR</td> <td>50</td> </tr> <tr> <td>DIVYA</td> <td>PANWAR</td> <td>94</td> </tr> <tr> <td>RAVI</td> <td>KUMAR</td> <td>80</td>
</tr></table>
<br>
<table id="t01"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>SACHIN</td> <td>KUMAR</td> <td>50</td> </tr> <tr> <td>DIVYA</td> <td>PANWAR</td> <td>94</td> </tr> <tr> <td>RAVI</td> <td>KUMAR</td> <td>80</td> </tr></table></body></html>
HTML <colgroup> Tag <!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black;}</style></head>
<body><table> <colgroup> <col span="2" style="background-color:GRAY"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr></table></body></html>
HTML <col> Tag <!DOCTYPE html><html><head><style>table, th, td { border: 1px solid black;}</style></head><body>
<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr></table>
</body></html>
HTML <thead> , <tbody> , <tfoot> Tag <!DOCTYPE html><html><head><style>thead {color:green;}tbody {color:blue;}tfoot {color:red;}
table, th, td { border: 1px solid black;}</style></head><body><table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody></table><p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to style these elements.</p></body></html>
HTML FormsHTML forms are used to pass data to a server.An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.The <form> tag is used to create an HTML form:<form>.input elements.</form>
Tag Description<form> Defines an HTML form for user input<input> Defines an input control<textarea> Defines a multiline input control (text area)<label> Defines a label for an <input> element<fieldset> Groups related elements in a form<legend> Defines a caption for a <fieldset> element<select> Defines a drop-down list<optgroup> Defines a group of related options in a drop-down list<option> Defines an option in a drop-down list<button> Defines a clickable button<datalist> Specifies a list of pre-defined options for input controls<keygen> Defines a key-pair generator field (for forms)<output> Defines the result of a calculation
LOGIN FORM DESIGNED WITH HTML AND CSS
LOGIN FORM HTML CODING <!DOCTYPE><html>
<head><title>LOGIN FORM</title><link href="login-box.css" rel="stylesheet" type="text/css" /></head><body>
<div style="padding: 100px 0 0 250px;"><div id="login-box"><H2>Login</H2>THIS IS SIMPLY MADE LOGIN FORM.<br /><br />
<div id="login-box-name" style="margin-top:20px;">Email:</div><div id="login-box-field" style="margin-top:20px;">
<input name="q" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div>
<div id="login-box-name">Password:</div><div id="login-box-field"><input name="q" type="password" class="form-login"
title="Password" value="" size="30" maxlength="2048" /></div><br /><span class="login-box-options"><input type="checkbox" name="1"
value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a></span>
<br /><br /><a href="#"><img src="images/login-btn.png" width="103" height="42"
style="margin-left:90px;" /></a></div>
</div></body></html>
LOGIN FORM CSS CODING#login-box {
width:333px;height: 352px;padding: 58px 76px 0 76px;color: #ebebeb;font: 12px Arial, Helvetica, sans-serif;background: url(images/login-box-backg.png) no-repeat left top;
}
#login-box img {border:none;
}
#login-box h2 {padding:0;margin:0;color: #ebebeb;font: bold 44px "Calibri", Arial;
}
#login-box-name {float: left;display:inline;width:80px;text-align: right;padding: 14px 10px 0 0;margin:0 0 7px 0;
}
#login-box-field {float: left;display:inline;width:230px;margin:0;margin:0 0 7px 0;
}
.form-login {width: 205px;padding: 10px 4px 6px 3px;border: 1px solid #0d2c52;background-color:#1e4f8a;font-size: 16px;color: #ebebeb;
}
.login-box-options {
clear:both;padding-left:87px;font-size: 11px;
}
.login-box-options a {color: #ebebeb;font-size: 11px;
}
Registration Form in HTML with CSS.
HTML CODE FOR THE REGISTRATION FROM<!DOCTYPE><html lang="en"> <head> <title>CSS Registration Form</title> <link rel="stylesheet" type="text/css" href="css/form.css"/> </head> <body> <form action="" class="register"> <h1>Registration</h1> <fieldset class="row1"> <legend>Account Details </legend> <p> <label>Email * </label> <input type="text"/> <label>Repeat email * </label> <input type="text"/> </p> <p> <label>Password* </label> <input type="text"/> <label>Repeat Password* </label> <input type="text"/> <label class="obinfo">* obligatory fields </label> </p> </fieldset> <fieldset class="row2"> <legend>Personal Details </legend> <p> <label>Name * </label> <input type="text" class="long"/> </p> <p> <label>Phone * </label> <input type="text" maxlength="10"/> </p> <p> <label class="optional">Street </label> <input type="text" class="long"/> </p>
<p> <label>City * </label> <input type="text" class="long"/> </p> <p> <label>Country * </label> <select> <option> </option> <option value="1">United States </option> </select> </p> <p> <label class="optional">Website </label> <input class="long" type="text" value="http://"/>
</p> </fieldset> <fieldset class="row3"> <legend>Further Information </legend> <p> <label>Gender *</label> <input type="radio" value="radio"/> <label class="gender">Male</label> <input type="radio" value="radio"/> <label class="gender">Female</label> </p> <p> <label>Birthdate * </label> <select class="date"> <option value="1">01 </option> <option value="2">02 </option> <option value="3">03 </option> <option value="4">04 </option> <option value="5">05 </option> <option value="6">06 </option> <option value="7">07 </option> <option value="8">08 </option> <option value="9">09
</option> <option value="10">10 </option> <option value="11">11 </option> <option value="12">12 </option> <option value="13">13 </option> <option value="14">14 </option> <option value="15">15 </option> <option value="16">16 </option> <option value="17">17 </option> <option value="18">18 </option> <option value="19">19 </option> <option value="20">20 </option> <option value="21">21 </option> <option value="22">22 </option> <option value="23">23 </option> <option value="24">24 </option> <option value="25">25 </option> <option value="26">26 </option> <option value="27">27 </option> <option value="28">28 </option> <option value="29">29 </option> <option value="30">30 </option> <option value="31">31 </option> </select> <select> <option value="1">January </option> <option value="2">February </option> <option value="3">March </option>
<option value="4">April </option> <option value="5">May </option> <option value="6">June </option> <option value="7">July </option> <option value="8">August </option> <option value="9">September </option> <option value="10">October </option> <option value="11">November </option> <option value="12">December </option> </select> <input class="year" type="text" size="4" maxlength="4"/>e.g 1976 </p> <p> <label>Nationality * </label> <select> <option value="0"> </option> <option value="1">INDIA </option> </select> </p> <p> <label>Children * </label> <input type="checkbox" value="" /> </p> <div class="infobox"><h4>Helpful Information</h4> <p>Here comes some explaining text. </p> </div> </fieldset> <fieldset class="row4"> <legend>Terms and Mailing </legend> <p class="agreement"> <input type="checkbox" value=""/> <label>* I accept the <a href="#">Terms and Conditions</a></label> </p> <p class="agreement"> <input type="checkbox" value=""/> <label>I want to receive personalized offers by your site</label> </p> <p class="agreement"> <input type="checkbox" value=""/>
<label>Allow partners to send me personalized offers and related services</label> </p> </fieldset> <div><button class="button">Register »</button></div> </form> </body></html>
CSS CODE FOR THE REGISTRATION FORM*/*Set's border, padding and margin to 0 for all values*/{ padding: 0; margin: 0; border: 0;}body, html { color: #373C40; font-family: Verdana,Arial, Helvetica, sans-serif; height: 100%; background-color: #f0f0f0; margin:10px;}body { font-size: 70%;}p { padding: 7px 0 7px 0; font-weight: 500; font-size: 10pt;}a { color: #656565; text-decoration:none;}a:hover{ color: #3B0707; text-decoration: none;}h1 { font-weight:200; color: #888888; font-size:16pt; background: transparent url(../img/h1.png) no-repeat center left; padding-left:33px; margin:7px 5px 8px 8px;}h4 { padding:1px; color: #ACACAC; font-size:9pt; font-weight:100; text-transform:uppercase;}form.register{ width:800px; margin: 20px auto 0px auto; height:530px; background-color:#fff; padding:5px;
-moz-border-radius:20px; -webkit-border-radius:20px;}form p{ font-size: 8pt; clear:both; margin: 0; color:gray; padding:4px;}form.register fieldset.row1{ width:770px; padding:5px; float:left; border-top:1px solid #F5F5F5; margin-bottom:15px;}form.register fieldset.row1 label{ width:140px; float: left; text-align: right; margin-right: 6px; margin-top:2px;}form.register fieldset.row2{ border-top:1px solid #F1F1F1; border-right:1px solid #F1F1F1; height:220px; padding:5px; float:left;}form.register fieldset.row3{ border-top:1px solid #F1F1F1; padding:5px; float:left; margin-bottom:15px; width:400px;}form.register fieldset.row4{ border-top:1px solid #F1F1F1; border-right:1px solid #F1F1F1; padding:5px; float:left; clear:both; width:500px;}form.register .infobox{ float:right; margin-top:20px;
border: 1px solid #F1F1F1; padding:5px; width:380px; height:98px; font-size:9px; background: #FDFEFA url(../img/bg_infobox.gif) repeat-x top left;}form.register legend{ color: #3B0707; padding:2px; margin-left: 14px; font-weight:bold; font-size: 14px; font-weight:100;}form.register label{ color:#444; width:98px; float: left; text-align: right; margin-right: 6px; margin-top:2px;}form.register label.optional{ float: left; text-align: right; margin-right: 6px; margin-top:2px; color: #A3A3A3;}form.register label.obinfo{ float:right; padding:3px; font-style:italic;}form.register input{ width: 140px; color: #505050; float: left; margin-right: 5px;}form.register input.long{ width: 247px; color: #505050;}form.register input.short{ width: 40px; color: #505050;}form.register input[type=radio]{ float:left;
width:15px;}form.register label.gender{ margin-top:-1px; margin-bottom:2px; width:34px; float:left; text-align:left; line-height:19px;}form.register input[type=text]{ border: 1px solid #A19999; height: 18px;}form.register input[type=password]{ border: 1px solid #A19999; height: 18px;}.button{ background: #3B0707 url(../img/overlay.png) repeat-x; padding: 8px 10px 8px; color: #fff; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); cursor: pointer; float:left; font-size:18px; margin:10px;}form.register input[type=text].year{ border: 1px solid #A19999; height: 18px; width:30px;}form.register input[type=checkbox] { width:14px; margin-top:4px;}form.register select{ border: 1px solid #A19999; width: 130px; float:left; margin-bottom:3px; color: #505050;
margin-right:5px;}form.register select.date{ width: 40px;}input:focus, select:focus{ background-color: #efffe0;}p.info{ font-size:7pt; color: gray;}p.agreement{ margin-left:15px;}p.agreement label{ width:390px; text-align:left; margin-top:3px;}
RESUME DESIGNED WITH HTML AND CSS.
RESUME HTML CODE<html lang="en"><head>
<link rel="stylesheet" type="text/css" href="resume.css"><title>Sachin Resume</title>
</head><body bgcolor="#333333">
<div id="big_wrapper"><div id="header">
<h2 id="text">Resume</h2></div>
<div id="nav"><center><img src="Sachin.jpg" alt="Sachin Kumar"
id="img"/></center><h4 id="sachin2">Sachin Kumar</h4><ul>
<hr><li><a href="#About"> About</a></li><hr><li><a href="#career"> Career Objective</a></li><hr><li><a href="#academic"> Academic
Qualification</a></li><hr><li><a href="#professional"> Professional
Qualification</a></li><hr><li><a href="#it_skills"> IT Skills</a></li><hr><li><a href="#Key"> Key Skills</a></li><hr><li><a href="#hobbies"> Hobbies</a></li><hr><li><a href="#interest"> Areas Of Interest</a></li><hr><li><a href="#personal"> Personal Details</a></li><hr><li><a href="#declaration"> Declaration</a></li><hr><li><a href="#contacts"> Contacts</a></li><hr>
</ul><div id="box">
<a href="http://www.facebook.com/NSD1419"><center id="text">Find me on Facebook<center></a>
</div><hr><div id="box">
<a href="https://twitter.com/sachinN61426"><center id="text">Follow me on Twitter<center></a>
</div><hr>
</div>
<div id="section""><h1 id="text"><a name="About"></a>About</h1>
<strong id="sachin"> Sachin Kumar</strong><p><b>ADDRESS:</b><br> <b>Vill-</b> Pather<br><b>Post-</b> Barthakayesth<br><b>Distt-</b> Saharanpur (U.P.) PIN 247231<br>
<b>Mob. No:</b> +917830699646<br><b>E mail-id:</b> <br><b> Skype-id:</b</p>
</div>
<div id="section""><h1 id="text"><a name="career"></a>Career Objective</h1>
<p>To be a leading professional in the field of Information
Technology and Computer Science so as to broaden my perspective and effectively exploit my potential. </p><p>I want to enhance my knowledge in technologies working under
experienced professionals.</p>
</div>
<div id="section""><h1 id="text"><a name="academic"></a>Academic
Qualification</h1><ul>
<li> <b>High School,</b> U.P. Board in 2011 with <b>73.16%.</b></li>
<li> <b>Intermediate,</b> U.P. Board in 2013 with <b>83.2 %.</b></li>
</ul></div>
<div id="section""><h1 id="text"><a name="professional"></a>Professional
Qualification</h1><p><img src="newch.png"
style="width:20px;height:20px;border:0"> <em>Appearing</em> <b>Bachelor of Science in Information Technology. </b>(B.Sc.IT)</p>
<p><em>From </em><b>Dev Bhoomi Institute of Management Studies</b>, Dehradun, UK</p>
</div>
<div id="section""><h1 id="text"><a name="it_skills"></a>IT Skills/Work Knowledge
On</h1><ul>
<li><b> WINDOWS:</b> XP, WIN 7, WIN 8</li><li><b> LANGUAGES:</b> C, C++</li><h3 color="red"> OTHER:</h3>
<li> BCC, Networking</li><li> <b>Hardware& Software
</b>Installation</li><li> <b>Graphic Design</b> on COREL
DRAW</li>
<li> Typing Speed <b>35-40 word per minute</b></li>
</ul></div>
<div id="section""><h1 id="text"><a name="Key"></a>Key Skills</h1>
<ul><li> Positive Attitude</li><li> Adaptive, diligent and pragmatic.</li><li> Scholarship holder at college level.</li><li> Good Listener </li><li> <b>Ability </b>to attempt work in given <b>time
limits</b></li></ul>
</div>
<div id="section""><h1 id="text"><a name="hobbies"></a>Hobbies</h1>
<ul><li> Playing chess</li><li> Computer Operating</li><li> Internet surfing</li>
</ul></div>
<div id="section""><h1 id="text"><a name="interest"></a>Areas of Interest</h1>
<ul><li><b>Software</b> Design</li><li><b>Web </b>Designing</li><li><b>Research Work </b>in the field of Computer
Science</li></ul>
</div>
<div id="section""><h1 id="text"><a name="personal"></a>Personal Details</h1>
<article><p><b>Name</b> <span class="tab">:</span><span
class="tab1">Sachin Kumar</span></p><p><b>Father's Name</b> <span
class="tab">:</span><span class="tab1">Mr. Surender Kumar</span></p><p><b>Permanent Address</b> <span
class="tab">:</span><span class="tab1">Vill. Pather, Post Barthakayesth, Distt-Saharanpur</span></p>
<p><b>Date of Birth</b> <span class="tab">:</span><span class="tab1">10/06/1995</span></p>
<p><b>Language Known</b> <span class="tab">:</span><span class="tab1">Hindi & English</span></p>
<p><b>Nationality</b> <span class="tab">:</span><span class="tab1">Indian</span></p>
<p><b>Sex</b> <span class="tab">:</span><span class="tab1">Male</span></p>
<p><b>Marital Status</b> <span class="tab">:</span><span class="tab1">Unmarried</span></p>
</article>
</div>
<div id="section""><h1 id="text"><a name="declaration"></a>Declaration</h1><p>I hereby declare that the above information is true to the
best of my knowledge.</p>
</div>
<div id="section""><h1 id="text"><a name="contacts"></a>Contacts</h1>
<center><h4>Contact Number : 7830699646</h4><a href="http://www.facebook.com/NSD1419"><img src="fbb.jpg" alt="Find me on Facebook"
style="width:60px;height:60px;border:0"></a><a href="https://twitter.com/sachinN61426"><img src="Twitter.jpg" alt="Follow me on Twitter"
style="width:60px;height:60px;border:0"></a></center>
</div>
<div id="footer">Copyright © <a
href="mailto:[email protected]">[email protected]</a></div>
</div></body></html>
RESUME CSS CODEh2{
font-family: "Comic sans MS";font-size: 2.5em; /* 40px/16=2.5em */
}p:first-letter {
color:black;font-weight:bold;font-size:25px;
}a{
color:white;text-decoration:none;
}
a:hover{color:white;text-decoration:underline;font-family:"Comic sans MS";}
p{font-family:"Calibri";margin:10px;padding-left:15px;
}
#text{text-shadow:rgb(110,110,110) 2px 2px 5px ;
}#sachin{
text-shadow:rgb(110,110,110) 2px 2px 5px ;color:#C21010;font-size:80px;font-family:"Wild Ride";margin:5px;
}#sachin2{
text-shadow:rgb(110,110,110) 2px 2px 5px ;color:#C21010;font-size:25px;font-family:"Comic sans MS";margin:5px;text-align:center;
}#img{ background-position: 50% 50%; background-repeat: no-repeat; border-radius: 50%;
border:2px solid black; -webkit-border-radius: 20%;
-moz-border-radius: 20%; width: 125px; height: 150px;}#header {
display:block; background-color:#1C76A0; color:white; text-align:center; padding:5px;}#nav { line-height:25px; background-color:#339966; height:2488px; width:220px; float:left; padding:5px;
color:white;margin:5px;
}ul { list-style-type:none; padding: 5px; margin: 5px;
font-family:"Calibri";}
ul li { background-image: url(check1.png); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px;
line-height:38px;}h1{
background-color:#FF006C;color:white;font-family: "Comic sans MS";font-size: 25px;padding:5px;margin-top:0px;margin-left:0px;margin-right:0px;width:738px;
}#section {
background-color:white; width:738px; float:left; padding:10px;
margin:5px;
padding-top:0px;padding-left:0px;
}#footer { background-color:#1C76A0; color:white; clear:both; text-align:center; padding:5px; }#big_wrapper{
border: 1px solid white;width:1000px;margin: 20px auto;
}div{
display:block;}
.tab{ position: absolute; left: 45em; }.tab1 { position: absolute; left: 50em; } article{
line-height:12px;}
#box{margin-left:55px;display:block;color:#ffffff;opacity:1;background:#2F4F4F;border-radius: 25%;border:2px solid #1ec7e6;
-webkit-border-radius: 10%; -moz-border-radius: 20%;
width:70px;height:70px;-webkit-transition:-webkit-transform 2s, opacity 2s, background 2s, width 2s, height 2s;
}#box:hover{
-webkit-transform:rotate(360deg);opacity: 1;background: #1ec7e6;width:120px;height:120px;
}
WEDSITE DESIGNED WITH HTML, CSS AND JQUARY.
