Q1)Develop a web application for higher
educational institutions – college/university using HTML and CSS (apply inline,
internal and external
styles - Use style properties for background, text effects, positioning, link).
<!DOCTYPE html>
<html>
<head>
<title>RESUME</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
h1, h2 {
color: #333;
a{
color: #2a6496;
text-decoration: none;
a:hover {
text-decoration: underline;
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
background-color: #fff;
th {
background-color: #f2f2f2;
input[type="text"], textarea {
width: 100%;
padding: 8px;
margin: 5px 0;
box-sizing: border-box;
input[type="submit"], input[type="reset"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
cursor: pointer;
font-size: 16px;
input[type="submit"]:hover, input[type="reset"]:hover {
background-color: #45a049;
</style>
</head>
<body>
<center>
<h1><b><ins><a href="#">RESUME</a></ins></b></h1>
</center>
<hr>
<h2><i><ins><a href="#">EDUCATION</a></ins></i></h2>
<ul>
<li>
<table>
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Duration</th>
</tr>
<tr>
<td><input type="text" placeholder="Enter degree" name="degree"></td>
<td><input type="text" placeholder="Enter institution" name="institution"></td>
<td><input type="text" placeholder="Enter duration" name="duration"></td>
</tr>
</table>
</li>
</ul>
<h2><i><ins><a href="#">DEPARTMENT</a></ins></i></h2>
<ul>
<li>
<table>
<tr>
<th>Department</th>
</tr>
<tr>
<td><input type="text" placeholder="Enter department" name="department"></td>
</tr>
</table>
</li>
</ul>
<h2><i><ins><a href="#">INTERNSHIP EXPERIENCED</a></ins></i></h2>
<ul>
<li>
<table>
<tr>
<th>Internship</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" placeholder="Enter internship" name="internship"></td>
<td><textarea id="message" name="description" rows="4" required></textarea></td>
</tr>
</table>
</li>
</ul>
<center>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</center>
</body>
</html>
Q2) Develop a website with suitable CSS layouts.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Portfolio</title>
<style>
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: Arial, sans-serif;
color: #444;
line-height: 1.6;
background-color: #f0f0f0;
}
header {
background-color: #0073e6;
color: #fff;
padding: 20px;
text-align: center;
header h1 {
margin-bottom: 10px;
nav {
margin: 15px 0;
text-align: center;
nav a {
color: #fff;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
nav a:hover {
text-decoration: underline;
.container {
width: 80%;
margin: auto;
padding: 20px;
section {
padding: 30px;
margin: 20px 0;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
h2 {
color: #0073e6;
margin-bottom: 10px;
footer {
background-color: #0073e6;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
</style>
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About Me</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<div class="container">
<!-- Home Section -->
<section id="home">
<h2>Home</h2>
<p>Welcome to my personal portfolio! Here you will find information about my skills, projects,
and experience.</p>
</section>
<!-- About Section -->
<section id="about">
<h2>About Me</h2>
<p>I am a passionate developer with a keen interest in web development and software
engineering. My goal is to create innovative and efficient solutions.</p>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>Projects</h2>
<p>Explore some of the projects I have worked on. Each project showcases my skills and
dedication to delivering high-quality work.</p>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contact</h2>
<p>Feel free to get in touch with me for collaborations or any inquiries. I am always open to new
opportunities!</p>
<p>Email: contact@myportfolio.com | Phone: (123) 456-7890</p>
</section>
</div>
<footer>
<p>© 2024 My Portfolio. All Rights Reserved.</p>
</footer>
</body>
</html>
Q3)Design a web page using HTML and CSS.
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em 0;
main {
padding: 20px;
h2 {
color: #4CAF50;
section {
margin: 20px 0;
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em 0;
position: fixed;
bottom: 0;
width: 100%;
</style>
</head>
<body>
<header>
<h1>Welcome to My Simple Web Page</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hello! I'm learning web development and this is my simple webpage.</p>
</section>
<section>
<h2>My Interests</h2>
<p>I enjoy coding, reading, and hiking in my free time.</p>
</section>
</main>
<footer>
<p>© 2024 My Simple Web Page. All rights reserved.</p>
</footer>
</body>
</html>
