Scribd
Upload
28 views

The World Wide Web - PROJECT

The document provides code for a portfolio website, including HTML, CSS, and explanatory comments. The HTML defines sections for introduction, skills, projects, and contact. The CSS styles the page layout, typography, and individual sections. It aims to showcase a web developer's skills and projects through a responsive one-page portfolio site.

Uploaded by

Mary Jane Pagay
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
28 views

The World Wide Web - PROJECT

The document provides code for a portfolio website, including HTML, CSS, and explanatory comments. The HTML defines sections for introduction, skills, projects, and contact. The CSS styles the page layout, typography, and individual sections. It aims to showcase a web developer's skills and projects through a responsive one-page portfolio site.

Uploaded by

Mary Jane Pagay
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/ 2

Bato Institute of Science And Technology, Inc.

Dolho, Bato, Letyte

EMPOWERMENT TECHNOLOGIES
Name: ______________________________________________

Project : The World Wide Web <p>Email: [email protected]</p>


<p>LinkedIn: linkedin.com/in/yourname</p>
<!-- Add more contact information as needed
HTML (index.html):
-->
<!DOCTYPE html> </section>
<html lang="en">
<head> </body>
<meta charset="UTF-8"> </html>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
CSS (styles.css):
<link rel="stylesheet" href="styles.css">
body {
<title>Your Name - Portfolio</title>
font-family: 'Arial', sans-serif;
</head>
margin: 0;
<body>
padding: 0;
background-color: #f4f4f4;
<!-- Introduction Section -->
}
<section id="introduction">
<h1>Your Name</h1>
section {
<p>Web Developer | Aspiring Designer</p>
max-width: 800px;
</section>
margin: 0 auto;
padding: 20px;
<!-- Skills Section -->
background-color: #fff;
<section id="skills">
margin-bottom: 20px;
<h2>Skills</h2>
border-radius: 8px;
<ul>
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
<li>HTML5</li>
}
<li>CSS3</li>
<li>JavaScript</li>
h1, h2, h3 {
<!-- Add more skills as needed -->
color: #333;
</ul>
}
</section>

ul {
<!-- Projects Section -->
list-style-type: none;
<section id="projects">
padding: 0;
<h2>Projects</h2>
}
<div class="project">
<h3>Project 1</h3>
li {
<p>Description of Project 1.</p>
margin-bottom: 8px;
</div>
}
<div class="project">
<h3>Project 2</h3>
.project {
<p>Description of Project 2.</p>
margin-bottom: 20px;
</div>
}
<!-- Add more projects as needed -->
</section>
/* Add more styles as needed */

<!-- Contact Section -->


body {
<section id="contact">
font-family: 'Arial', sans-serif;
<h2>Contact</h2>
margin: 0;
Bato Institute of Science And Technology, Inc.
Dolho, Bato, Letyte

EMPOWERMENT TECHNOLOGIES
Name: ______________________________________________

padding: 0; }
background-color: #f4f4f4;
} /* Skills Section Styles */
#skills ul {
section { display: flex;
max-width: 800px; flex-wrap: wrap;
margin: 0 auto; }
padding: 20px;
background-color: #fff; #skills li {
margin-bottom: 20px; flex: 0 0 calc(33.33% - 10px);
border-radius: 8px; margin-right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); background-color: #007bff;
} color: #fff;
padding: 8px;
h1, h2, h3 { border-radius: 5px;
color: #333; margin-bottom: 10px;
} }

p{ /* Projects Section Styles */


color: #555; .project {
} background-color: #f0f0f0;
padding: 15px;
ul { border-radius: 5px;
list-style-type: none; }
padding: 0;
} /* Contact Section Styles */
#contact a {
li { color: #007bff;
margin-bottom: 8px; }
}
#contact a:hover {
.project { text-decoration: underline;
margin-bottom: 20px; }
}
/* Add more styles as needed */
/* Header Styles */
#introduction {
text-align: center;
}

h1 { Prepared by:
margin-bottom: 5px;
color: #007bff; /* Blue color, you can choose your Mary Jane Pagay – Cierva, LPT
own */ Instructor

You might also like