Web Code Test
Uploaded by
muhammadrafay2055Web Code Test
Uploaded by
muhammadrafay2055Home Page
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="mystyle.css">
<title>My Website - Home</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<div>
<ul>
<li><a href="loginform.html">Login</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Contact.html">Contact</a></li>
<li><a href="Table.html">Table</a></li>
</ul>
</div>
</body>
</html>
About Page
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="mystyle.css">
<title>My Website - About</title>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<div>
<ul>
<li><a href="Home.html"><-Go Back</a></li>
</ul>
</div>
</body>
</html>
Contact Page
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="mystyle.css">
<title>My Website - Contact</title>
</head>
<body>
<header>
<h1>Contact Us</h1>
</header>
<div>
<ul>
<li><a href="Home.html"><-Go Back</a></li>
</ul>
</div>
</body>
</html>
CSS CODE
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
div {
background-color: #0077cc;
color: #fff;
padding: 10px;
}
div ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div ul li {
display: inline;
margin-right: 10px;
}
div a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
div a:hover {
color: #004466;
}
TABLE
HTML/CSS CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<title>Result</title>
</head>
<body>
<h2>Results</h2>
<table>
<thead>
<tr>
<th>Student Name</th>
<th>CIT-303</th>
<th>CIT-333</th>
<th>CIT-324</th>
<th>GEN-311</th>
<th>MGM-331</th>
<th>PASS/FAIL</th>
</tr>
</thead>
<tbody>
<tr>
<td>TALHA</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>ABDUL AHAD</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>MOBEEN</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>SAMEER</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>PIXEL</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
LOGIN FORM
HTML/CSS CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
}
input[type="checkbox"] {
margin-bottom: 0;
}
button {
background-color: #0077cc;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #004466;
}
</style>
<title>Login Form</title>
</head>
<body>
<form>
<h2>Login</h2>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
<button type="submit">Login</button>
</form>
</body>
</html>
GROUP NAME/ROLL#
TALHA 2021-426
ABDUL AHAD 2021-443
MOBEEN 2021-448
SAMEER 2021-417
