Scribd
Upload
2 views12 pages

Personal Portfolio Website Design

The document contains the HTML code for a personal portfolio website with multiple pages including Home, About, Service, Portfolio, and Contact. Each page features a consistent layout with a navigation menu, an overlay, and sections for images and text. The design utilizes CSS for styling and responsive layout, ensuring a visually appealing presentation across different devices.

Uploaded by

Denver Martin
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
2 views12 pages

Personal Portfolio Website Design

The document contains the HTML code for a personal portfolio website with multiple pages including Home, About, Service, Portfolio, and Contact. Each page features a consistent layout with a navigation menu, an overlay, and sections for images and text. The design utilizes CSS for styling and responsive layout, ensuring a visually appealing presentation across different devices.

Uploaded by

Denver Martin
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

home.

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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #000;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;

}
.container {
width: 80%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.text-section {
position: absolute;
bottom: 20%;
left: 10%;
}
.text-section h1 {
font-size: 5rem;
font-weight: bold;
line-height: 1;
}
.text-section p {
font-size: 1.2rem;
margin-top: 10px;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
opacity: 0.8;
}
.highlight {
position: absolute;
width: 100px;
height: 200px;
top: 20%;
left: 55%;
opacity: 0.3;
}
.nav {
position: absolute;
top: 20px;
left: 20px;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul li {
margin: 0 10px;
}
.nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}
</style>
</head>
<body>

<div class="container">
<div class="overlay"></div>
<img src="[Link]" alt="">
<div class="highlight"></div>
<nav class="nav">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Service</a></li>
<li><a href="[Link]">Portfolio</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
[Link]

<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #000;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;

}
.container {
width: 80%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.text-section {
position: absolute;
bottom: 20%;
left: 10%;
}
.text-section h1 {
font-size: 5rem;
font-weight: bold;
line-height: 1;
}
.text-section p {
font-size: 1.2rem;
margin-top: 10px;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
opacity: 0.8;
}
.highlight {
position: absolute;
width: 100px;
height: 200px;
top: 20%;
left: 55%;
opacity: 0.3;
}
.nav {
position: absolute;
top: 20px;
left: 20px;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul li {
margin: 0 10px;
}
.nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}
</style>
</head>
<body>

<div class="container">
<div class="overlay"></div>
<img src="[Link]" alt="">

<div class="highlight"></div>
<nav class="nav">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Service</a></li>
<li><a href="[Link]">Portfolio</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
[Link]

<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #000;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 80%;
height: 100vh;
position: relative;

display: flex;
justify-content: center;
align-items: center;
}
.text-section {
position: absolute;
bottom: 20%;
left: 10%;
}
.text-section h1 {
font-size: 5rem;
font-weight: bold;
line-height: 1;
}
.text-section p {
font-size: 1.2rem;
margin-top: 10px;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: url('[Link]') center center no-repeat;
background-size: cover;
opacity: 0.8;
}
.highlight {
position: absolute;
width: 100px;
height: 200px;
top: 20%;
left: 55%;
opacity: 0.3;
}
.nav {
position: absolute;
top: 20px;
left: 20px;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul li {
margin: 0 10px;
}
.nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}
</style>
</head>
<body>
<div class="container">
<img src="[Link]" alt="">
<div class="overlay"></div>
<div class="highlight"></div>
<nav class="nav">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Service</a></li>
<li><a href="[Link]">Portfolio</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
[Link]

<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #212121;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 80%;
height: 100vh;
position: relative;

display: flex;
justify-content: center;
align-items: center;
}
.text-section {
position: absolute;
bottom: 20%;
left: 10%;
}
.text-section h1 {
font-size: 5rem;
font-weight: bold;
line-height: 1;
}
.text-section p {
font-size: 1.2rem;
margin-top: 10px;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: url('[Link]') center center no-repeat;
background-size: cover;
opacity: 0.8;
}
.highlight {
position: absolute;
width: 100px;
height: 200px;
top: 20%;
left: 55%;
opacity: 0.3;
}
.nav {
position: absolute;
top: 20px;
left: 20px;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul li {
margin: 0 10px;
}
.nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}
.image-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 5px;
margin-top: 5px;
}
.image-container img {
width: 500px;
height: 400px;
object-fit: cover;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<div class="image-container">
<img src="[Link]" alt="">
<img src="[Link]" alt="">
<img src="[Link]" alt="">
<img src="[Link]" alt="">

<div class="overlay"></div>
<div class="highlight"></div>
<nav class="nav">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Service</a></li>
<li><a href="[Link]">Portfolio</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
[Link]

<!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>
<style>

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-image: url('[Link]');
background-size: cover;
background-position: center;
color: white;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
width: 80%;
height: 100vh;
position: relative;

display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-size: 4rem;
font-weight: bold;
margin-bottom: 20px;
}
p{
font-size: 1.2rem;
margin-bottom: 20px;
}
.nav {
position: absolute;
top: 20px;
left: 20px;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul li {
margin: 0 10px;
}
.nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}
.btn-contact {
padding: 10px 20px;
border: 2px solid white;
text-decoration: none;
color: white;
text-transform: uppercase;
font-size: 1rem;
margin-top: 200px;
display: inline-block;
}

</style>
</head>
<body>
<div class="container">
<div class="text-section">
<a href="[Link]" class="btn-contact">Get in Touch</a>
</div>
<div class="overlay"></div>
<div class="highlight"></div>
<nav class="nav">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Service</a></li>
<li><a href="[Link]">Portfolio</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
[Link]

<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #000;

color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;

}
.container {
width: 80%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.text-section {
position: absolute;
bottom: 20%;
left: 10%;
}
.text-section h1 {
font-size: 5rem;
font-weight: bold;
line-height: 1;
}
.text-section p {
font-size: 1.2rem;
margin-top: 10px;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
opacity: 0.8;
}
.highlight {
position: absolute;
width: 100px;
height: 200px;
top: 20%;
left: 55%;
opacity: 0.3;
}
.nav {
position: absolute;
top: 20px;
left: 20px;
}
.nav ul {
display: flex;
list-style: none;
}
.nav ul li {
margin: 0 10px;
}
.nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}
</style>
</head>
<body>

<div class="container">
<div class="overlay"></div>
<img src="[Link]" alt="">
<div class="highlight"></div>
<nav class="nav">
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Service</a></li>
<li><a href="[Link]">Portfolio</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>

You might also like