Scribd
Upload
23 views

Assessment 1 Webdev

The document appears to be an assessment submission for a web programming lab. It includes code for an HTML portfolio page with sections about the student, projects, and contact information, as well as CSS code to style the page. It provides the student's name, registration number, and lab details.

Uploaded by

prathampalgandhi10
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Assessment 1 Webdev

The document appears to be an assessment submission for a web programming lab. It includes code for an HTML portfolio page with sections about the student, projects, and contact information, as well as CSS code to style the page. It provides the student's name, registration number, and lab details.

Uploaded by

prathampalgandhi10
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Assessment 1

Web Programming Lab

Name: Pratham Pal Gandhi

Reg No.: 22BCE0635

Lab Slot: L13+L14+L27+L28

Task -1

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>

1
</head>
<body bgcolor="#ECDC80">
<font color="#333">
<header align="center">
<font color="#333">
<h1>Pratham Gandhi</h1>
</font>
<font color="#333">
<p>Web Developer</p>
</font>
</header>

<section align="center">
<h2>About Me</h2>
<p>
Welcome to my portfolio! I am a passionate web developer with a strong foundation in HTML, CSS and
JavaScript. I am also proficient in IOS development using Swift.
</p>
<break>
</break>
</section>

<section>
<table align="center" border="2" bordercolor="black" width="700">
<th colspan="2" style="border: #333;border-radius: 25px;">CV</th>
<tr>
<td>
Education
</td>
<td>
VIT University Vellore
</td>
</tr>
<tr>
<td>
Branch
</td>
<td>
CSE Core
</td>

2
</tr>
<tr>
<td>
CGPA
</td>
<td>
8.7
</td>
</tr>
<tr>
<td>
Skills
</td>
<td>IOS development using Swift, Web development using HTML5 and CSS</td>
</tr>
</table>
</section>

<section align="center">
<h2>My Projects</h2>

<div class="project" style="margin-bottom: 20px;">


<h3>Project 1</h3>
<p>Description of project 1</p>
<a href="#">View Project</a>
</div>

<div class="project" style="margin-bottom: 20px;">


<h3>Project 2</h3>
<p>Description of project 2</p>
<a href="#">View Project</a>
</div>

</section>
<section align="center">
<h2>Contact</h2>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/yourusername" target="_blank">LinkedIn Profile</a></p>
<p>GitHub: <a href="https://github.com/yourusername" target="_blank">GitHub Profile</a></p>
</section>

3
<section>
<img src="" height="240" width="240">
</section>
<footer>
<font color="white">
<p>&copy; 2024 Pratham Gandhi. All rights reserved.</p>
</font>
</footer>
</body>
</html>

Task-2

4
5
Code:

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="head">
<h1>My Portfolio</h1>
<div class = "buttons">
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>

6
</div>

<section id="about">
<div class="container">
<h2 align = "center">About Me</h2>
<p>Hey there! My name is Pratham Gandhi and welcome to my portfolio! I am a web developer
passionate about creating engaging and user-friendly websites. I am in my second year of Btech and have a
keen interest in creating webpages and implementing new ideas.</p>
</div>
</section>

<section id="projects">
<div class="container">
<h2>Projects</h2>
<div class="project">
<h3>Project 1</h3>
<p>Description of Project 1.</p>
<a href="#">View Project</a>
</div>
<div class="project">
<h3>Project 2</h3>
<p>Description of Project 2.</p>
<a href="#">View Project</a>
</div>
</div>
</section>

<section id="contact">
<div class="container">
<h2>Contact</h2>
<p>You can reach me at:</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>

<p>LinkedIn: <a href="https://www.linkedin.com/in/yourlinkedinprofile/" target="_blank">LinkedIn


Profile</a></p>
</div>
</section>

<footer>

7
<div class="foot">
<p>&copy; 2024 My Portfolio</p>
</div>
</footer>
</body>
</html>

CSS:
.head {
padding: 2rem;
background-color:#967E76 ;
color: #333;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-family: 'Times New Roman', Times, serif;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color:#EEE3CB;
font-size: xx-large;
}
html{
scroll-behavior: smooth;
}

.container {
height: 70vh;
width: 100vw;
max-width: 960px;

8
margin: 0 auto;
padding: 0 20px;
background-color: #B7C4CF;
}

header {
background-color:#967E76 ;
color: #333;
padding: 20px 0;
}

header h1 {
margin: 0;
font-size: 32px;
}

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

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}

section {
padding: 40px 0;
}

section h2 {
color: #333;
}

9
.project {
margin-bottom: 20px;
}

footer {
background-color: #967E76;
color: #333;
text-align: center;
padding: 10px 0;
}

footer p {
margin: 0;
font-size: 14px;
}

10

You might also like