Scribd
Upload
26 views15 pages

Lab 1

Uploaded by

Maaz Sayyed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views15 pages

Lab 1

Uploaded by

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

WT LAB

ASSIGNMENT - 1
Name: Ayush Vidhale
TY IT/A
Batch - 3
Roll no.: 77
PRN No.: 12111398

Problem Statement:

Lab1: Design a web page to demonstrate the use of different HTML tags
and use of inline, internal and external CSS.

Part 1 : External CSS


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
</head>
<body>
<header>
<h1>Ayush Vidhale</h1>
<p>
Hello, I'm Ayush. I'm a full-stack developer with 3 years of
experience.
Creating interactive and dynamic web solutions.
</p>
</header>
<section>
<h2>About Me</h2>
<p>
🛠️Core tech stack: React, Next.js, Node.js, MongoDB. Proficient
in
TypeScript and Prisma. Eager to explore new technologies. 🎮 When
not
coding, I enjoy gaming, watching movies, and quality time with my
cat.
🐶 Curious learner interested in history, philosophy, and guitar.
🎸
</p>
</section>

<section>
<h2>Skills</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Python</li>
<li>React</li>
<li>NodeJs</li>
<li>MongoDB</li>
<li>NextJs</li>
</ul>
</section>

<section>
<h2>Projects</h2>
<table>
<tr>
<th>Project</th>
<th>Description</th>
<th>Technologies</th>
</tr>
<tr>
<td>Tic,Tac,Toe Game</td>
<td>tic, tac, toe game made using plain html, css and
JavaScript</td>
<td>HTML, CSS, JavaScript</td>
</tr>
<tr>
<td>Finding Ally</td>
<td>Collaborative platform to study together</td>
<td>React, Node.js, MongoDB</td>
</tr>
</table>
</section>

<section>
<h2>Studies</h2>
<p>
Pursuing B.Tech in Information Technology at VIT'25, Pune, India
(2021 -
2025)
</p>
</section>

<section>
<h2>Hobbies</h2>
<p>
Apart from coding, I enjoy reading, playing the guitar, and
exploring
new technologies.
</p>
</section>

<section>
<h2>Contact</h2>
<p>Email: [email protected]</p>
<p>
LinkedIn:
<a href="https://www.linkedin.com/in/ayushvidhale/"
target="_blank"
>LinkedIn Profile</a
>
</p>
<p>
GitHub:
<a href="https://github.com/ayushvidhale" target="_blank"
>GitHub Profile</a
>
</p>
</section>
</body>
</html>
CSS File CODE:

body {
font-family: Arial, sans-serif;
margin: 20px;
}

h1 {
color: #333;
}

h2 {
color: #555;
}

p {
color: #777;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
Part 2: Internal CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Ayush Vidhale - Portfolio</title>
<style>
body {
font-family: "Arial", sans-serif;
margin: 20px;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
color: #fff;
}

h2 {
color: #555;
margin-top: 20px;
}

p {
color: #777;
line-height: 1.6;
padding: 10px;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

th,
td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}

section {
background-color: #fff;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

ul li {
background-color: #3a6cb1;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

a {
color: #3498db;
text-decoration: none;
}

a:hover {
color: #555;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Ayush Vidhale</h1>
<p>
Hello, I'm Ayush. I'm a full-stack developer with 3 years of
experience.
Creating interactive and dynamic web solutions.
</p>
</header>

<section>
<h2>About Me</h2>
<p>
🛠️Core tech stack: React, Next.js, Node.js, MongoDB. Proficient
in
TypeScript and Prisma. Eager to explore new technologies. 🎮 When
not
coding, I enjoy gaming, watching movies, and quality time with my
cat.
🐶 Curious learner interested in history, philosophy, and guitar.
🎸
</p>
</section>

<section>
<h2>Skills</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Python</li>
<li>React</li>
<li>NodeJs</li>
<li>MongoDB</li>
<li>NextJs</li>
</ul>
</section>

<section>
<h2>Projects</h2>
<table>
<tr>
<th>Project</th>
<th>Description</th>
<th>Technologies</th>
</tr>
<tr>
<td>Tic,Tac,Toe Game</td>
<td>tic, tac, toe game made using plain html, css and
JavaScript</td>
<td>HTML, CSS, JavaScript</td>
</tr>
<tr>
<td>Finding Ally</td>
<td>Collaborative platform to study together</td>
<td>React, Node.js, MongoDB</td>
</tr>
</table>
</section>

<section>
<h2>Studies</h2>
<p>
Pursuing B.Tech in Information Technology at VIT'25, Pune, India
(2021 -
2025)
</p>
</section>

<section>
<h2>Hobbies</h2>
<p>
Apart from coding, I enjoy reading, playing the guitar, and
exploring
new technologies.
</p>
</section>

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

<footer>© 2022 Ayush. All rights reserved.</footer>


</body>
</html>
Part 3: Inline CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px">
<header>
<h1 style="color: #4caf50">Ayush Vidhale</h1>
<p style="color: #777">
Hello, I'm Ayush. I'm a full-stack developer with 3 years of
experience.
Creating interactive and dynamic web solutions.
</p>
</header>

<section>
<h2 style="color: #2196f3">About Me</h2>
<p>
🛠️Core tech stack:
<span style="color: #e91e63">React, Next.js, Node.js,
MongoDB.</span>
Proficient in
<span style="color: #ff9800">TypeScript and Prisma.</span> Eager
to
explore new technologies. 🎮 When not coding, I enjoy gaming,
watching
movies, and quality time with my cat. 🐶 Curious learner
interested in
history, philosophy, and guitar. 🎸
</p>
</section>

<section>
<h2 style="color: #673ab7">Skills</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Python</li>
<li>React</li>
<li>NodeJs</li>
<li>MongoDB</li>
<li>NextJs</li>
</ul>
</section>

<section>
<h2 style="color: #ffc107">Projects</h2>
<table style="width: 100%; border-collapse: collapse; margin-top:
20px">
<tr>
<th
style="
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
color: #009688;
"
>
Project
</th>
<th
style="
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
color: #009688;
"
>
Description
</th>
<th
style="
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
color: #009688;
"
>
Technologies
</th>
</tr>
<tr>
<td
style="
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
"
>
Tic, Tac, Toe Game
</td>
<td
style="
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
"
>
tic, tac, toe game made using plain html, css and JavaScript
</td>
<td
style="
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
"
>
HTML, CSS, JavaScript
</td>
</tr>
<tr>
<td
style="
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
"
>
Finding Ally
</td>
<td
style="
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
"
>
Collaborative platform to study together
</td>
<td
style="
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
"
>
React, Node.js, MongoDB
</td>
</tr>
</table>
</section>

<section>
<h2 style="color: #ff5722">Studies</h2>
<p>
Pursuing B.Tech in Information Technology at
<span style="color: #795548">VIT'25, Pune, India (2021 -
2025)</span>
</p>
</section>

<section>
<h2 style="color: #3f51b5">Hobbies</h2>
<p>
Apart from coding, I enjoy reading, playing the guitar, and
exploring
new technologies.
</p>
</section>

<section>
<h2 style="color: #607d8b">Contact</h2>
<p>Email: <span style="color:
#03a9f4">[email protected]</span></p>
<p>
LinkedIn:
<a
href="https://www.linkedin.com/in/ayushvidhale/"
target="_blank"
style="color: #2196f3"
>LinkedIn Profile</a
>
</p>
<p>
GitHub:
<a
href="https://github.com/ayushvidhale"
target="_blank"
style="color: #607d8b"
>GitHub Profile</a
>
</p>
</section>
</body>
</html>
----THE END --

You might also like