Scribd
Upload
54 views20 pages

Cascading Style Sheet

This document contains CSS code to style various elements on web pages including the body, tables, links, inputs, and custom classes. It also includes HTML code for an index page, sign in page, and sign up page that reference the CSS styles. The pages include navigation menus, forms, and content areas for a job listings website.

Uploaded by

Hamid Mahmood
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
54 views20 pages

Cascading Style Sheet

This document contains CSS code to style various elements on web pages including the body, tables, links, inputs, and custom classes. It also includes HTML code for an index page, sign in page, and sign up page that reference the CSS styles. The pages include navigation menus, forms, and content areas for a job listings website.

Uploaded by

Hamid Mahmood
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Cascading Style Sheet

body {
background-color: gray;
min-height: 600px;
}

table {
padding-bottom: 10px;
width: 100%;
}

a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}

a:hover {
color: #F90;
}

input {
width:200px;
}

input[type="radio"] {
width:auto;
}
input[type="submit"] {
width:204px;
}

select{
width:205px;
}

/*************Classes*****************/
.parentDiv {
margin-left: 10%;
margin-right: 10%;
background-color: purple;
}

.nav {
list-style-type: none;
margin: 0;
padding: 0;
}

.nav li {
float: left;
display: inline;
padding-right: 10px;
}

.nav a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}

.nav a:hover {
color: #F90;
background-color: #FFF;
}

.sidenav {
list-style-type: none;
margin-top: 50px;
margin: 0;
padding: 0;
}

.sidenav li {
padding-top: 20px;
}

.sidenav a {
text-decoration: none;
background-color: white;
color: #00F;
padding: 8px 8px 8px 8px;
}

.sidenav a:hover {
color: #F90;
background-color: #FFF;
}

.formTable {
color: white;
}

.formTable td:first-child {
color: white;
max-width: 20%;
width:20%;
}

.formTable td:nth-child(2) {
color: white;
margin-left:30px;
float: left;
max-width: 80%;
width: 80%;
}

Index Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
aboutUs = function () {
alert("Hamid Mahmood \n\n MBAE-2012-147 \n\n +(92)-333-8181-428");
}
</script>

<title>Main Page :: Jobs4Students</title>
<link rel="stylesheet" type="text/css" href="Style/style.css">
</head>
<body>
<div class="parentDiv">
<table>
<tr>
<td>
<img alt="Logo" src="Images/logo.png" width="150" height="85" /></td>
<td colspan="3">
<ul class="nav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="sidenav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
<td colspan="2">
<table>
<tr>
<td>asd</td>
<td>asd</td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a style="float:right;" href="ContanctUs.html">Contact Us</a></td>
<td><a href="" onclick="aboutUs()">About Us</a></td>
</tr>
</table>
</div>
</body>
</html>

Sign In Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
aboutUs = function () {
alert("Hamid Mahmood \n\n MBAE-2012-147 \n\n +(92)-333-8181-428");
}
</script>

<title>Main Page :: Jobs4Students</title>
<link rel="stylesheet" type="text/css" href="Style/style.css">
</head>
<body>
<div class="parentDiv">
<table>
<tr>
<td>
<img alt="Logo" src="Images/logo.png" width="150" height="85" /></td>
<td colspan="3">
<ul class="nav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="Signup.html">Singup</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="sidenav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="Signup.html">Singup</a></li>
</ul>
</td>
<td colspan="2">
<form method="get" action="Index.html">
<table class="formTable">
<tr>
<td>Email</td>
<td>
<input name="email" type="email" required="required" /></td>
</tr>
<tr>
<td>Password</td>
<td>
<input name="password" type="password" required="required" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="SignIn" />
</td>
</tr>
</table>
</form>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a style="float: right;" href="ContanctUs.html">Contact Us</a></td>
<td><a href="" onclick="aboutUs()">About Us</a></td>
</tr>
</table>
</div>
</body>
</html>

Sign Up Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
aboutUs = function () {
alert("Hamid Mahmood \n\n MBAE-2012-147 \n\n +(92)-333-8181-428");
}
</script>

<title>Main Page :: Jobs4Students</title>
<link rel="stylesheet" type="text/css" href="Style/style.css">
</head>
<body>
<div class="parentDiv">
<table>
<tr>
<td>
<img alt="Logo" src="Images/logo.png" width="150" height="85" /></td>
<td colspan="3">
<ul class="nav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="sidenav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
<td colspan="2" id="mainContent">
<form method="get" action="SignIn.html">
<table class="formTable">
<tr>
<td>First Name</td>
<td>
<input name="fname" type="text" required="required" /></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input name="lname" type="text" required="required" /></td>
</tr>
<tr>
<td>Program</td>
<td>
<select name="program" required="required" >
<option value="-1">Please Select Program</option>
<option>BBA</option>
<option>MBAE</option>
</select>
</td>
</tr>
<tr>
<td>Semester</td>
<td>
<select name="semester" required="required" >
<option value="-1">Please Select Semester</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Fourth</option>
<option>Fifth</option>
<option>Sixth</option>
<option>Seventh</option>
<option>Eighth</option>
</select>
</td>

</tr>
<tr>
<td>Roll Number</td>
<td>
<input name="rollnumber" type="text" required="required" /></td>

</tr>
<tr>
<td>Gender</td>
<td>
<input name="gender" type="radio" title="Male" required="required" />Male
<input name="gender" type="radio" />Female
</td>
</tr>

<tr>
<td>Email</td>
<td>
<input name="email" type="email" required="required" /></td>
</tr>
<tr>
<td>Password</td>
<td>
<input name="password" type="password" required="required" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Create account" />
</td>
</tr>
</table>
</form>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a style="float: right;" href="ContanctUs.html">Contact Us</a></td>
<td><a href="" onclick="aboutUs()">About Us</a></td>
</tr>
</table>
</div>
</body>
</html>

Create CV Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
aboutUs = function () {
alert("Hamid Mahmood \n\n MBAE-2012-147 \n\n +(92)-333-8181-428");
}
</script>

<title>Main Page :: Jobs4Students</title>
<link rel="stylesheet" type="text/css" href="Style/style.css">
</head>
<body>
<div class="parentDiv">
<table>
<tr>
<td>
<img alt="Logo" src="Images/logo.png" width="150" height="85" /></td>
<td colspan="3">
<ul class="nav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="sidenav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
<td colspan="2">
<form method="get" action="SignIn.html">
<table class="formTable">
<tr>
<td>First Name</td>
<td>
<input name="fname" type="text" required="required" /></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input name="lname" type="text" required="required" /></td>
</tr>
<tr>
<td>Gender</td>
<td>
<input name="gender" type="radio" title="Male" required="required" />Male
<input name="gender" type="radio" />Female
</td>
</tr>
<tr>
<td>Qualification</td>
<td>
<select name="qualification" required="required" >
<option value="-1">Please Select Qualification</option>
<option>Matriculation</option>
<option>Intermediate</option>
<option>Graduate</option>
</select>
</td>
</tr>
<tr>
<td>Majors</td>
<td>
<input name="hobbies" type="text" required="required" /></td>
</tr><tr>
<td>Qualification</td>
<td>
<select name="2ndqualification" required="required" >
<option value="-1">Please Select Qualification</option>
<option>Intermediate</option>
<option>Graduate</option>
<option>Masters</option>
</select>
</td>
</tr>
<tr>
<td>Majors</td>
<td>
<input name="2ndhobbies" type="text" required="required" /></td>
</tr><tr>
<td>Qualification</td>
<td>
<select name="3rdqualification" required="required" >
<option value="-1">Please Select Qualification</option>
<option>Graduation</option>
<option>Masters</option>
<option>MS / M.Phil</option>
<option>PHD.</option>
</select>
</td>
</tr>
<tr>
<td>Majors</td>
<td>
<input name="3rdHobbies" type="text" required="required" /></td>
</tr>
<tr>
<td>Address</td>
<td>
<input name="address" type="text" required="required" /></td>
</tr>
<tr>
<td>City</td>
<td>
<input name="city" type="text" required="required" /></td>
</tr>
<tr>
<td>Country</td>
<td>
<input name="couontry" type="text" required="required" /></td>
</tr>
<tr>
<td>Hobbies</td>
<td>
<input name="hobbies" type="text" required="required" /></td>
</tr>
<tr>
<td>Email</td>
<td>
<input name="email" type="email" required="required" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Create CV" />
</td>
</tr>
</table>
</form>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a style="float:right;" href="ContanctUs.html">Contact Us</a></td>
<td><a href="" onclick="aboutUs()">About Us</a></td>
</tr>
</table>
</div>
</body>
</html>

JOBS Blogs Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
aboutUs = function () {
alert("Hamid Mahmood \n\n MBAE-2012-147 \n\n +(92)-333-8181-428");
}
</script>

<title>Main Page :: Jobs4Students</title>
<link rel="stylesheet" type="text/css" href="Style/style.css">
</head>
<body>
<div class="parentDiv">
<table>
<tr>
<td>
<img alt="Logo" src="Images/logo.png" width="150" height="85" /></td>
<td colspan="3">
<ul class="nav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="sidenav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
<td colspan="2">
<table>
<tr>
<td><img height="80" width="80" src="Images/jang2.jp
g" /></td>
<td>
Roznama Jang
<br />
<a href="http://jang.com.pk">Website URL</a>
</td>
</tr>
<tr>
<td><img height="80" width="80" src="Images/Dawn.png" /></td>
<td>
Dawn News
<br />
<a href="http://dawn.epaper.pk">Website URL</a>
</td>
</tr>
<tr>
<td><img height="80" width="80" src="Images/Naibaat.png" /></td>
<td>
Roznama Nai Baat
<br />
<a href="http://naibaat.com.pk/">Website URL</a>
</td>
</tr>
<tr>
<td><img height="80" width="80" src="Images/TheNation.png" /></td>
<td>
The Nation
<br />
<a href="http://www.nation.com.pk/">Website URL</a>
</td>
</tr>
<tr>
<td><img height="80" width="80" src="Images/Express.Gif" /></td>
<td>
Roznama Express
<br />
<a href="http://www.express.com.pk/epaper/index.aspx">Website URL</a>
</td>
</tr>
<tr>
<td><img height="80" width="80" src="Images/nawaiwaqt.png" /></td>
<td>
Roznama Nawaey Waqt
<br />
<a href="http://www.nawaiwaqt.com.pk">Website URL</a>
</td>
</tr>
<tr>
<td><img height="80" width="80" src="Images/Aaj.png" /></td>
<td>
Roznama AAJ
<br />
<a href="http://aaj.epapers.pk">Website URL</a>
</td>
</tr>
<tr>
<td><img height="80" width="80" src="Images/Duniya.jpg" /></td>
<td>
Roznama Duniya
<br />
<a href="http://e.dunya.com.pk/splash.php">Website URL</a>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a style="float:right;" href="ContanctUs.html">Contact Us</a></td>
<td><a href="" onclick="aboutUs()">About Us</a></td>
</tr>
</table>
</div>
</body>
</html>

Contact US
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
aboutUs = function () {
alert("Hamid Mahmood \n\n MBAE-2012-147 \n\n +(92)-333-8181-428");
}
</script>

<title>Main Page :: Jobs4Students</title>
<link rel="stylesheet" type="text/css" href="Style/style.css">
</head>
<body>
<div class="parentDiv">
<table>
<tr>
<td>
<img alt="Logo" src="Images/logo.png" width="150" height="85" /></td>
<td colspan="3">
<ul class="nav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="sidenav">
<li><a href="Index.html">Home</a></li>
<li><a href="JobsBlog.html">Jobs Blog</a></li>
<li><a href="CreateCV.html">Create CV</a></li>
<li><a href="ContanctUs.html">Contact US</a></li>
<li><a href="SignIn.html">SingIn</a></li>
</ul>
</td>
<td colspan="2">
<table>
<tr>
<td colspan="2">Contact Us</td>
</tr>
<tr>
<td>Main content</td>
<td>Main content column 2</td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a style="float:right;" href="ContanctUs.html">Contact Us</a></td>
<td><a href="" onclick="aboutUs()">About Us</a></td>
</tr>
</table>
</div>
</body>
</html>

You might also like