Name: Prajwal Singh
USN: 1MJ22IS077
Class: ISE-6B
Full Stack Assignment 1
Published Github Website:
https://iprajwalsingh7.github.io/full-stack-assignment1-2-/
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prajwal Singh - Portfolio</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Internal CSS */
.nav-links {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.nav-links li {
margin: 0 15px;
.profile-section {
text-align: center;
margin: 40px 0;
</style>
</head>
<body>
<header>
<h1>Prajwal Singh</h1>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="projects.html">Hobbies & Interests</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="profile-section">
<h2>Engineering Student</h2>
<p>Welcome to my portfolio website!</p>
</section>
<section>
<h2>About Me</h2>
<p>I am an engineering student at MVJ College of Engineering, Bangalore. I enjoy
learning new technologies, reading books, and watching movies and shows in my free
time.</p>
<a href="about.html">Read more about me</a>
</section>
</main>
<footer>
<p>© 2025 Prajwal Singh | Basic Portfolio Website</p>
</footer>
</body>
</html>
About.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - Prajwal Singh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>About Me</h1>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="projects.html">Hobbies & Interests</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Who am I?</h2>
<p style="color: #333; font-size: 18px;">My name is <strong>Prajwal
Singh</strong>. I am currently pursuing my <em>bachelor's degree in
Engineering</em> from MVJ College of Engineering, Bangalore.</p>
<h3>Personal Information</h3>
<p>I was born and raised in <mark>Varanasi</mark>, where I completed my
schooling at St Mary's Convent School.</p>
<h3>My Interests</h3>
<p>As a <sub>student</sub> of <sup>engineering</sup>, I am passionate about
technology and innovation.</p>
<blockquote>
"Learning never exhausts the mind." - Leonardo da Vinci
</blockquote>
<p>I believe in <u>continuous learning</u> and <i>exploring new ideas</i>.</p>
<h3>Technical Skills</h3>
<p><b>Programming Languages:</b> Learning HTML, CSS, JavaScript, and other
engineering subjects.</p>
<h3>Hobbies</h3>
<p>In my spare time, I enjoy:</p>
<p><small>Reading books</small> - Fiction, technical books, and
biographies</p>
<p><small>Watching movies and shows</small> - Various genres including sci-fi
and documentaries</p>
<hr>
<address>
MVJ College of Engineering<br>
Bangalore, India
</address>
</section>
</main>
<footer>
<p>© 2025 Prajwal Singh | Basic Portfolio Website</p>
</footer>
</body>
</html>
Education.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Education - Prajwal Singh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Education</h1>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="projects.html">Hobbies & Interests</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>My Educational Journey</h2>
<h3>Ordered List - Educational Timeline</h3>
<ol>
<li>Matriculation from St Mary's Convent School, Varanasi</li>
<li>Intermediate from St Mary's Convent School, Varanasi</li>
<li>Bachelor's in Engineering from MVJ College of Engineering, Bangalore
(Current)</li>
</ol>
<h3>Unordered List - Subjects I'm Studying</h3>
<ul>
<li>Computer Science Fundamentals</li>
<li>Data Structures and Algorithms</li>
<li>Web Development
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Database Management</li>
<li>Engineering Mathematics</li>
</ul>
<h3>Nested List - Skills Development</h3>
<ul>
<li>Technical Skills
<ol>
<li>Programming
<ul>
<li>Frontend Development</li>
<li>Backend Development</li>
</ul>
</li>
<li>Problem Solving</li>
<li>Data Analysis</li>
</ol>
</li>
<li>Soft Skills
<ol>
<li>Communication</li>
<li>Teamwork</li>
<li>Time Management</li>
</ol>
</li>
</ul>
<h3>Definition List - Academic Terms</h3>
<dl>
<dt>B.E.</dt>
<dd>Bachelor of Engineering - A four-year undergraduate degree program in the
field of engineering.</dd>
<dt>CGPA</dt>
<dd>Cumulative Grade Point Average - A measure of a student's academic
achievement.</dd>
<dt>Semester</dt>
<dd>An academic term that typically lasts for six months.</dd>
<dt>Project</dt>
<dd>A practical application of theoretical knowledge to solve a particular
problem.</dd>
</dl>
</section>
</main>
<footer>
<p>© 2025 Prajwal Singh | Basic Portfolio Website</p>
</footer>
</body>
</html>
Projects.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hobbies & Interests - Prajwal Singh</title>
<link rel="stylesheet" href="styles.css">
<style>
table {
border-collapse: collapse;
width: 90%;
margin: 20px auto;
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
th {
background-color: #f2f2f2;
.rating {
font-weight: bold;
color: # 9800;
.genre {
font-style: italic;
color: #555;
</style>
</head>
<body>
<header>
<h1>My Hobbies & Interests</h1>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="projects.html">Hobbies & Interests</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>My Favorite Movies & Shows</h2>
<table>
<caption>Favorite Movies</caption>
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Year</th>
<th>Director</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Lorem Ipsum Dolor</td>
<td rowspan="2" class="genre">Sci-Fi</td>
<td rowspan="2">2019</td>
<td>John Doemann</td>
<td rowspan="2" class="rating">4.8/5</td>
</tr>
<tr>
<td>Special E ects by Sit Amet Studio</td>
</tr>
<tr>
<td colspan="5" style="text-align: center;"><strong>Classic
Films</strong></td>
</tr>
<tr>
<td>Consectetur Adipiscing</td>
<td class="genre">Drama</td>
<td colspan="2">1994</td>
<td class="rating">4.5/5</td>
</tr>
<tr>
<td rowspan="3">Elit Sed Do</td>
<td>Action</td>
<td rowspan="3">2001</td>
<td rowspan="3">Jane Smithson</td>
<td rowspan="3" class="rating">4.7/5</td>
</tr>
<tr>
<td>Adventure</td>
</tr>
<tr>
<td>Fantasy</td>
</tr>
<tr>
<td colspan="2">Tempor Incididunt</td>
<td colspan="2">2015</td>
<td class="rating">4.2/5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Total Movies in Collection: 42</td>
</tr>
</tfoot>
</table>
<h3>Reading List</h3>
<table>
<thead>
<tr>
<th>Book Title</th>
<th>Author</th>
<th>Genre</th>
<th colspan="2">Reading Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Excepteur Sint Occaecat</td>
<td>Marcus Aurelius Lorem</td>
<td>Philosophy</td>
<td colspan="2" style="background-color: #ddd;">Completed</td>
</tr>
<tr>
<td>Cupidatat Non Proident</td>
<td>Seneca Ipsum</td>
<td>Self-Help</td>
<td colspan="2" style="background-color: #ddd;">Currently Reading</td>
</tr>
<tr>
<td rowspan="2">Sunt In Culpa</td>
<td rowspan="2">Emily Doloret</td>
<td>Fiction</td>
<td rowspan="2" colspan="2">On Wishlist</td>
</tr>
<tr>
<td>Mystery</td>
</tr>
<tr>
<td>Qui O icia Deserunt</td>
<td colspan="2">John Mollit Anim</td>
<td colspan="2" style="background-color: #ddd;">Started</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>© 2025 Prajwal Singh | Basic Portfolio Website</p>
</footer>
</body>
</html>
Contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Prajwal Singh</title>
<link rel="stylesheet" href="styles.css">
<style>
.form-group {
margin-bottom: 15px;
label {
display: block;
margin-bottom: 5px;
input, textarea, select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
button:hover {
background-color: #45a049;
</style>
</head>
<body>
<header>
<h1>Contact Me</h1>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="projects.html">Hobbies & Interests</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Get in Touch</h2>
<p>Feel free to contact me if you have any questions or want to collaborate on a
project.</p>
<form id="contactForm" action="#" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<select id="subject" name="subject">
<option value="general">General Inquiry</option>
<option value="project">Project Collaboration</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label>Preferred Contact Method:</label>
<input type="radio" id="contactEmail" name="contactMethod" value="email"
checked>
<label for="contactEmail">Email</label>
<input type="radio" id="contactPhone" name="contactMethod"
value="phone">
<label for="contactPhone">Phone</label>
</div>
<div class="form-group">
<label>Interests (select all that apply):</label>
<input type="checkbox" id="webDev" name="interests" value="webDev">
<label for="webDev">Web Development</label>
<input type="checkbox" id="mobileDev" name="interests"
value="mobileDev">
<label for="mobileDev">Mobile Development</label>
<input type="checkbox" id="dataScience" name="interests"
value="dataScience">
<label for="dataScience">Data Science</label>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<div class="form-group">
<label for="date">Preferred Date for Meeting:</label>
<input type="date" id="date" name="date">
</div>
<div class="form-group">
<label for="time">Preferred Time:</label>
<input type="time" id="time" name="time">
</div>
<div class="form-group">
<label for="file">Upload Resume (if applicable):</label>
<input type="file" id="file" name="file">
</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</section>
</main>
<footer>
<p>© 2025 Prajwal Singh | Basic Portfolio Website</p>
<script>
document.getElementById('contactForm').addEventListener('submit',
function(event) {
event.preventDefault();
alert('Form submitted! (This is just a demo - no data is actually sent)');
});
</script>
</footer>
</body>
</html>
Style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
body {
line-height: 1.6;
color: #333;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
h1, h2, h3 {
margin-bottom: 15px;
p{
margin-bottom: 10px;
a{
color: #0066cc;
text-decoration: none;
a:hover {
text-decoration: underline;
.nav-links {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin: 15px 0;
.nav-links li {
margin: 0 15px;
section {
margin-bottom: 30px;
footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
font-size: 0.9em;
@media (max-width: 600px) {
.nav-links {
flex-direction: column;
align-items: center;
}
.nav-links li {
margin: 5px 0;
