** start of undefined **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<a href="#welcome-section">Home</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
<!-- Welcome Section -->
<section id="welcome-section">
<h1>Welcome to My Portfolio</h1>
</section>
<!-- Projects Section -->
<section id="projects">
<div class="project-tile">
<h2>Project One</h2>
<p>Description of project one.</p>
<a href="https://example.com" target="_blank">Don't click, it does not
work lol</a>
</div>
<!-- Add more projects when i finish -->
</section>
<!-- Profile Link -->
<footer>
<a id="profile-link" href="https://github.com/yourprofile"
target="_blank">My GitHub</a>
</footer>
</body>
</html>
** end of undefined **
** start of undefined **
/* Reset some default styles */
body, h1, h2, p, a {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic styling */
body {
font-family: Arial, sans-serif;
color: #333;
}
nav {
background: #333;
color: #fff;
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 10px 20px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1000;
}
nav a {
color: #fff;
text-decoration: none;
transition: color 0.3s;
}
nav a:hover {
color: #f0f0f0;
}
/* Welcome Section */
#welcome-section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f4f4f4;
text-align: center;
}
#welcome-section h1 {
font-size: 2.5em;
animation: fadeIn 2s ease-in-out;
}
/* Projects Section */
#projects {
padding: 20px;
background: #fff;
}
.project-tile {
background: #e9e9e9;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.project-tile:hover {
transform: scale(1.05);
}
/* Footer */
footer {
background: #333;
color: #fff;
padding: 10px;
text-align: center;
}
#profile-link {
color: #fff;
text-decoration: none;
}
#profile-link:hover {
text-decoration: underline;
}
/* Media Query */
@media (max-width: 768px) {
nav {
flex-direction: column;
align-items: flex-start;
}
nav a {
margin-bottom: 10px;
}
#welcome-section h1 {
font-size: 1.8em;
}
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
** end of undefined **
