Job 6
AIM: - Creation of a Single Page Portfolio Website
HTML CODE -
1. Document Type Declaration (<!DOCTYPE html>):
- Specifies the document type and version of HTML being used (HTML5 in this case). html
<!DOCTYPE html>
2. HTML Start Tag (html):
- The root element that wraps around the entire HTML document. html
<html lang="en">
- The `lang` attribute is set to "en" (English) to declare the language of the document.
3. Head Section (head):
- Contains metadata about the document, such as character set, viewport settings, and the
document title.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
- The `charset` attribute defines the character encoding (UTF-8 in this case).
- The `viewport` meta tag ensures proper rendering on different devices.
- The `<title>` tag sets the title of the webpage.
- The `<link>` tag links an external stylesheet (`style.css`) for styling.
4. Body Section (body):
- Contains the content of the webpage.
html <body>
5. Container Div (div#container):
- A container that wraps all the content on the page.
html <div id="container">
6. Navigation Section (nav):
- Contains an unordered list (ul) representing navigation links.
html <nav> <ul> <!-- Navigation links --> </ul> </nav>
7. Header Section (header):
- Contains an image (`profile-pic`) and a paragraph with the author's name. html
<header> <!-- Author's photo and name -->
</header>
8. About Me Section (section#about):
- Provides information about the author. html
<section id="about"> <!-- About Me content --> </section>
9. Audio Section (section#audio):
- Embeds an audio clip with controls.
html <section id="audio"> <!-- Audio content --> </section>
10. Video Section (section#video):
- Embeds a video with controls.
html <section id="video"> <!-- Video content --> </section>
11. Photo Gallery Section (section#gallery):
- Displays a photo grid. html
<section id="gallery"> <!-- Photo Gallery content --> </section>
12. Projects Section (section#projects):
- Presents information about different projects with images and descriptions. html
<section id="projects"> <!-- Projects content --> </section>
13. Resume Section ():
- Provides a link to download the author's résumé. html
<section id="resume"> <!-- Résumé content --> </section>
14. Contact Section (section#contact):
- Displays contact information. html
<section id="contact"> <!-- Contact information --> </section>
15. Closing Tags:
- Closes the various HTML elements.
</footer>
</body>
</html>
16. Script Tag (script):
- Includes an external JavaScript file (`0.js`).
html <script src="./scripts/0.js"> </script>
Code: HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header-background">
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="header-content">
<img
src="https://fot.du.ac.in/userfiles/images/logos/fot/fot_small.png"
>
<h1>Faculty of Technology, Delhi University</h1>
<h4>Portfolio Website Job 6</h4>
<h4>Submitted to Dr. Deeptiranjan Samantaray
</h4>
<p></p>
</div>
</header>
<main>
<section id="about">
<h2>~ About Me ~</h2>
<img src="C:\Users\Rishabh\Desktop\Code\New folder\
Photo.jpg" class="profile-photo">
<p>Hello There! I am Rishabh Jain, currently studying
B.Tech in Electrical Engineering at Faculty of Technology, Delhi
University. I have been born and brought up in Delhi and completed
my high school from The Srijan School, Model Town, Delhi. I also
have done some online courses from codeninjas and younity for coding
aptitude and management respectively.
<p>I enthusiastically take part in events related to
tech and innovation. Some of my hobbies include swimming,
photography, coding and running.</p>
</section>
<section id="portfolio">
<h2>~ My Work ~</h2>
<table>
<tr>
<td><a
href="https://github.com/rj395/Project-1/tree/main"><img src="C:\
Users\Rishabh\Desktop\Code\New folder\1.jpeg" class="rounded-
corners"></a></td>
<td>
<h3>Magic 8 Ball</h3>
<p>The magic 8 ball project works like a real magic
8 ball. Can't decide upon an answer to a closed question, Ask the
magic 8 ball and It will decide for you! Made in C language. (Click
the Image to get the code)</p>
</td>
</tr>
<tr>
<td><a href="https://github.com/rj395/Project-
2"><img src="C:\Users\Rishabh\Desktop\Code\New folder\2.png"
class="rounded-corners"></a></td>
<td>
<h3>Simple Calculator</h3>
<p>Need help solving some maths calculations? a
simple calculator will help you right away. Made in C language.
(Click the Image to get the code)</p>
</td>
</tr>
</table>
<h2>Audio</h2>
<audio controls>
<source src= "c:\Users\Rishabh\Downloads\
file_example_MP3_1MG.mp3"
type="audio/mp3">
</audio>
<h2>My Résumé</h2>
<a href="./files/my_resume.pdf" download>Download My
Résumé</a>
<p>
<section id="video">
<h2>My Video</h2>
<video controls width="500">
<source src="c:\Users\Rishabh\Downloads\3209828-
uhd_3840_2160_25fps.mp4" type="video/mp4">
</video>
</p>
<h2>Photo Gallery</h2>
<div class="photo-grid">
<img src="C:\Users\Rishabh\Downloads\pexels-rachel-claire-
5490196.jpg" alt="Photo 1">
<img src="C:\Users\Rishabh\Downloads\pexels-thirdman-8485729.jpg"
alt="Photo 2">
<img src="C:\Users\Rishabh\Downloads\pexels-anete-lusina-
7256866.jpg" alt="Photo 3">
<img src="C:\Users\Rishabh\Downloads\pexels-mdsnmdsnmdsn-
1684880.jpg" alt="Photo 4">
<img src="C:\Users\Rishabh\Downloads\pexels-pixabay-276267.jpg"
alt="Photo 5">
</div>
</section>
<section id="contact">
<h2>~ Keep in Touch ~</h2>
<button class="btn btn-default td-btn outline white" ><a
href=https://www.instagram.com/certainlynotrishabh/ class="clor"
>Instagram</a></button>
<button class="btn btn-default td-btn outline white" ><a
href=https://twitter.com/Nolookyhere class="clor"
>Twitter</a></button>
<button class="btn btn-default td-btn outline white" ><a
href=mailto:[email protected] class="clor"
>Gmail</a></button>
<button class="btn btn-default td-btn outline white" ><a
href=https://wa.me/<9910459790> class="clor"
>Whatsapp</a></button>
</section>
</main>
<footer>
<p>Made By Rishabh Jain</p>
<p>Roll No.: 23DOEEBTEE000040</p>
</footer>
</body>
</html>
Code: CSS
:root {
--primary-color: #29a598;
--text-color: #394c4a;
--background-light: #ffffff;
--header-height: 100vh;
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 110%;
}
body {
margin: 0;
padding: 0;
font-family: 'Work Sans', Helvetica, sans-serif;
color: #394c4a;
line-height: 1.5;
overflow-x: hidden;
}
.header-background {
background: linear-gradient(rgba(255, 254, 253, 0.7), rgba(255,
254, 253, 0.9)),
url("https://i.pinimg.com/736x/78/99/86/7899868e862cdfced007e7669518
b11d.jpg") center center fixed;
background-size: cover;
text-align: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
padding: 15px 0;
}
nav ul {
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: white;
text-decoration: none;
font-family: 'Unica One', cursive;
font-size: 1.2rem;
}
.header-content img {
max-width: 250px;
border-radius: 0%;
}
.header-content h1, .header-content p {
margin: 0.5rem 0;
font-family: 'Unica One', cursive;
#about {
background-color: #ffffff;
padding-left: 40px;
padding-right: 40px;
margin: 40px;
border-radius: 0.5%;
text-align: center;
}
.profile-photo {
max-width: 40%;
height: auto;
border-radius: 50%;
}
#portfolio {
background-color: #0fbfbf;
padding: 15px;
border-radius: 0.5%;
text-align: center;
margin-bottom: 10px;
}
.Project{
width: 100%;
height: auto;
}
.rounded-corners{
border-radius: 30px;
}
#contact {
background-color: #ffbc4b;
padding: 15px;
border-radius: 0.5%;
text-align: center;
}
.td-btn {
padding: 12px 36px;
text-transform: uppercase;
transition: background-color 0.5s ease-in-out;
border-width: 10px;
background-color: #0fbfbf;
}
.clor{
color: black;
}
footer {
background-color: #f4f4f4;
text-align: center;
padding: 10px;
}
/* Additional Styles */
h2 {
color: #333;
font-family: 'Unica One', cursive;
font-size: 2.3rem;
}
a {
color: #29a598;
transition: color 0.2s ease-in-out;
}
a:hover {
color: #208479;
}
@media (max-width: 768px) {
nav ul li {
display: block;
margin: 10px 0;
}
.profile-photo {
width: 50%;
margin: 0 auto;
}
}
.photo-grid {
display: flex;
overflow-x: auto;
gap: 10px;
padding: 10px 0;
}
.photo-grid img {
flex: 0 0 auto;
width: auto;
height: 300px;
border: 1px solid #ddd;
}
.photo-grid::-webkit-scrollbar {
display: none;
}
.photo-grid {
-ms-overflow-style: none;
scrollbar-width: none;
}
