Scribd
Upload
33 views24 pages

Assignment 1

The document outlines a portfolio website created by Prajwal Singh, an engineering student at MVJ College of Engineering, Bangalore. It includes multiple HTML pages such as Home, About Me, Education, Hobbies & Interests, and Contact, showcasing his personal information, educational journey, technical skills, and hobbies. The website is designed with internal CSS for styling and features navigation links for easy access to different sections.

Uploaded by

F TV
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views24 pages

Assignment 1

The document outlines a portfolio website created by Prajwal Singh, an engineering student at MVJ College of Engineering, Bangalore. It includes multiple HTML pages such as Home, About Me, Education, Hobbies & Interests, and Contact, showcasing his personal information, educational journey, technical skills, and hobbies. The website is designed with internal CSS for styling and features navigation links for easy access to different sections.

Uploaded by

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

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>&copy; 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>

Contact me at: [email protected]<br>

MVJ College of Engineering<br>

Bangalore, India

</address>

</section>
</main>

<footer>

<p>&copy; 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>&copy; 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>&copy; 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>&copy; 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;

You might also like