Create a website about anything you choose. (This might be a good time to help o
ID: 2247037 • Letter: C
Question
Create a website about anything you choose. (This might be a good time to help out your local charity or your friend starting up a new business.) Your site must include:
At least 4 pages, showing good design
All the essential tags on each page
At least 3 semantic elements
A list
An image with height, width, and alt text
A functional navigation menu on all 4 pages
An external style sheet with at least 10 style rules for various parts of your site
A table with at least two columns and two rows
A form with at least 4 different input types (don't worry about the action)
Explanation / Answer
#whole {
margin: 0 auto; /* align center */
text-align: center;
position:relative;
width:1333px;
background: #DFE8F2;
background-image:url("../images/bg.gif");
/* height: 700px; */
height: 100%;
border-radius: 20px;
}
#feedback {
background-image:url("../images/bg3.gif");
}
button
{
background: #CC9900;
font-weight: bold;
color: #000000;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position:absolute;
left: 0;
color:FF0033;
text-decoration:underline;
}
#body{
margin-top: 50px;
width: 100%;
height: relative;}
#left {
float: left;
width: 300px;
/*width: inherit;*/
background: #372802;
height: 450px;
margin: 0px 2px 2px 2px;
border-radius: 10px;
padding: 10px;
margin-left: 20px;
text-align: left;
color: #FFFFFF;
}
#left a {
text-decoration: none;
color: #00FFFF;
background:#525200;
}
/*
#homeCenter img:hover {
height: 400px;
}*/
#right
{
color: #FFFFFF;
float: right;
width: 350px;
/*width:inherit;*/
margin-left: 12px;
margin-right: 25px;
border-left: 0px;
background:#372802;
height: 450px;
padding: 10px;
border-radius: 20px;
font-family:cambria;
text-align: left;
list-style-image: url('../images/sp.gif');
}
#right a {
text-decoration: none;
color: #FFFFFF;
background: #875C0F;
}
#homeCenter{
padding: 10px;
border-radius: 20px;
width: 563px;
background:#52051A;
float: left;
height: 450px;
}
#footer {
width: 100%;
height: 50px;
margin: 0 auto; /* align center */
text-align: center;
background:#855500;
border-radius: 20px;
text-decoration: bold;
font-size: 20px;
padding-top: 1px;
color:#FFFFFF;
}
#header{
float: top-left;
margin-right: 600px;
}
/*
#menu{
width: 800px;
margin: 0 auto;
}
#menu {
margin: 30px;
}
#menu li{
border: 1px solid #fff;
padding: 5px;
display: inline-block;
width: 116px;
text-align: center;
border-radius: 10px;
}
#menu ul{
list-style-type: none;
background: #555555;
padding: 4px;
margin: 2px 0px 2px 0px;
}
#menu li a{
color: #F2F2F2;
text-decoration: none;
} */
/*----------------------------start menu style--------------------------------------------*/
.menu{
position: absolute;
background:#855500;
border:1px solid #CCC;
font-size: 12px;
left: 150px;
top: 70px;
}
.menu ul{
background:#1E4797;
height:30px;
list-style:none;
margin:0;
padding:0;
margin-left:70px;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#855500;
color:#CCC;
display:block;
font-weight:bold;
line-height:35px;
margin:0px;
margin-left:0px;
padding:0px 30px;
text-align:center;
text-decoration:none;
font-size: 14px;
}
.menu li a:hover, .menu ul li:hover a{
background: #E1AA00;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#1E4797;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:#1E4797;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:13px;
font-style:normal;
margin:0px;
padding:0px 0px 0px 10px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#C09;
border:0px;
color:#ffffff;
text-decoration: none;
}
/*-------------------------------------end menu style-------------------------------------------------------------------------*/
/* .dropdown
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
*/
/*----------------------------start footer style--------------------------------------------*/
/*----------------------------end footer style--------------------------------------------*/
#whole {
height: auto;
width: 800px;
background: green;
}
td #mainMenu{
height: 30px;
vertical-align: bottom;
}
#mainMenu div
{
height: 30px;
margin-left: 200px;
}
ul ul {
display: inline-block;
}
}
td #centerBody{
}
td #left{
background: #fff;
width: 400px;
}
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
Form Validation
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.