Scribd
Upload
2 views25 pages

Amarado (Source Code)

The document consists of multiple HTML files for a personal portfolio website, including sections for Home, About, Services, Portfolio, Contact, and Collaboration. Each page features a similar layout with a navigation menu, overlay effects, and responsive design elements. The styles are consistent across pages, utilizing CSS for layout and aesthetics, while images are included to enhance visual appeal.

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 views25 pages

Amarado (Source Code)

The document consists of multiple HTML files for a personal portfolio website, including sections for Home, About, Services, Portfolio, Contact, and Collaboration. Each page features a similar layout with a navigation menu, overlay effects, and responsive design elements. The styles are consistent across pages, utilizing CSS for layout and aesthetics, while images are included to enhance visual appeal.

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
You are on page 1/ 25

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;

/*background-image: url('zem.jpg');*/

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="zem.jpg" alt="">


<div class="highlight"></div>

<nav class="nav">

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="aboutme.html">About</a></li>

<li><a href="service.html">Service</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</div>

</div>

</body>

</html>

Aboutme.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;

/*background-image: url('zem.jpg');*/

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="about me.jpg" alt="">

<div class="highlight"></div>

<nav class="nav">

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="aboutme.html">About</a></li>

<li><a href="service.html">Service</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</div>
</div>

</body>

</html>

service.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: url('your-image-path.jpg') 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="services.jpg" alt="">

<div class="overlay"></div>

<div class="highlight"></div>

<nav class="nav">

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="aboutme.html">About</a></li>

<li><a href="service.html">Service</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</div>

</div>

</body>

</html>

Portfolio.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: #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('your-image-path.jpg') 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="port1.png" alt="">

<img src="port2.png" alt="">

<img src="port3.png" alt="">

<img src="port4.png" alt="">

<div class="overlay"></div>

<div class="highlight"></div>

<nav class="nav">

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="aboutme.html">About</a></li>

<li><a href="service.html">Service</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</div>

</div>

</div>

</body>

</html>

Contact.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: #212121;

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('your-image-path.jpg') 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;

.btn-contact {

padding: 10px 20px;

border: 2px solid white;

text-decoration: none;

color: white;

text-transform: uppercase;

font-size: 1rem;

margin-top: 20px;

display: inline-block;

}*/

*{

margin: 0;

padding: 0;

box-sizing: border-box;
}

body {

font-family: 'Arial', sans-serif;

background-image: url('collab.jpg'); /* Replace with your image path */

background-size: cover; /* Ensures the image covers the whole background */

background-position: center; /* Centers the background image */

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="collab.html" class="btn-contact">Get in Touch</a>

</div>

<div class="overlay"></div>

<div class="highlight"></div>

<nav class="nav">

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="aboutme.html">About</a></li>

<li><a href="service.html">Service</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</div>

</div>

</body>

</html>

Collab.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;

/*background-image: url('zem.jpg');*/

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="info.jpg" alt="">

<div class="highlight"></div>

<nav class="nav">

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="aboutme.html">About</a></li>
<li><a href="service.html">Service</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</div>

</div>

</body>

</html>

You might also like