HTML Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Portfolio Webseite von LuHau</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#about">Über mich</a></li>
<li><a href="#services">Kontakt</a></li>
<li><a href="#contact">Soziale Medien</a></li>
</ul>
</nav>
<section id="about" class="about">
<h2>Über Mich</h2>
<p>Ich bin ein leidenschaftlicher Entwickler/Programmierer, der moderne Webseiten und Anwendungen erstellt. Meine Skills umfassen HTML, CSS, JavaScript und mehr Webseiten.</p>
</section>
<section id="projects" class="projects">
<h2>Projekte</h2>
<div class="project-item">
<h3>Entwicklung einer Webeite</h3>
<p>Ich programmiere Webseiten mit HTML CSS und JavaScript.</p>
</div>
<div class="project-item">
<h3>Ich kann jedem eine Webseite programmieren</h3>
<p>Ich kann jedem eine Webseite programmiert braucht allerdings Zeit aber dafür wird die Webseite gut aussehen.</p>
</div>
</section>
<section id="support" class="support">
<h2>Unterstütze mich</h2>
<a href="https://buymeacoffee.com/luhauuu" target="_blank" class="support-button">
☕ Unterstütze mich auf Buy Me a Coffee
</a>
</section>
<section id="support-spotify" class="support-spotify">
<h2>Unterstütze mich</h2>
<a href="https://open.spotify.com/show/6ENq8OIb36bEE3gaetaQ4p" target="_blank" class="support-button">
☕ Unterstütze mich auf Spotify
</a>
</section>
<section id="support-wordpress" class="support-wordpress">
<h2>Unterstütze mich</h2>
<a href="https://weltnachrichtennn.wordpress.com/" target="_blank" class="support-button">
☕ Unterstütze mich auf Wordpress
</a>
</section>
<section id="contact" class="contact">
<h2>Kontakt</h2>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>
<label for="message">Nachricht:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Senden</button>
</form>
</section>
<footer class="footer">
<p>© 2025 Portfolio von LuHaus. Alle Rechte vorbehalten.</p>
</footer>
<h1 id="hone">Test</h1>
<h1 id="pone">Test</h1>
<script src="app.js"></script>
</body>
</html>
CSS Code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1.6;
}
#hone {
color: red;
font-size: 15px;
}
#pone {
color: blue;
font-size: 15px;
}
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.navbar ul {
display: flex;
flex-direction: row;
align-items: flex-start;
list-style: none;
padding: 0;
margin: 0;
}
.navbar ul li {
margin-right: 10px;
}
.navbar ul li a {
text-decoration: none;
color: inherit;
font-size: 12px;
}
@media (max-width: 765px) {
.navbar ul {
flex-direction: column;
align-items: center;
}
.project-item {
padding: 10px;
font-size: 0.9em;
}
form input, form textarea, form button {
font-size: 0.9em;
}
}
.navbar ul li {
margin-right: 10px;
}
.navbar ul li a {
text-decoration: none;
color: inherit;
font-size: 12px;
}
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
align-items: center;
}
.project-item {
padding: 10px;
font-size: 0.9em;
}
form input, form textarea, form button {
font-size: 0.9em;
}
}
header {
background-color: blue;
color: white;
padding: 1em 0;
}
section {
padding: 20px;
margin: 20px 0;
}
.about, .projects, .contact {
max-width: 800px;
margin: auto;
}
.project-item {
background-color: red;
padding: 15px;
border: 1px solid black;
margin: 10px 0;
border-radius: 5px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
.support {
text-align: center;
padding: 20px;
margin: 20px 0;
background-color: blue;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.support h2 {
margin-bottom: 15px;
color: yellow;
font-size: 24px;
}
.support-button {
display: inline-block;
background-color: green;
color: white;
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.support-button:hover {
background-color: red;
transform: translateY(-2px);
}
.support-button:active {
background-color: yellow;
transform: translateY(0);
}
.support-spotify {
text-align: center;
padding: 20px;
margin: 20px 0;
background-color: blue;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.support-spotify h2 {
margin-bottom: 15px;
color: yellow;
font-size: 24px;
}
.support-spotify-button {
display: inline-block;
background-color: green;
color: white;
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.support-spotify-button:hover {
background-color: red;
transform: translateY(-2px);
}
.support-spotify-button:active {
background-color: yellow;
transform: translateY(0);
}
.support-wordpress {
text-align: center;
padding: 20px;
margin: 20px 0;
background-color: blue;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.support-wordpress h2 {
margin-bottom: 15px;
color: yellow;
font-size: 24px;
}
.support-wordpress-button {
display: inline-block;
background-color: green;
color: white;
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.support-wordpress-button:hover {
background-color: red;
transform: translateY(-2px);
}
.support-wordpress-button:active {
background-color: yellow;
transform: translateY(0);
}
form input, form textarea, form button {
padding: 10px;
font-size: 1em;
}
footer {
text-align: center;
padding: 10px;
background-color: blue;
color: white;
}
JavaScript Code
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Danke für deine Nachricht .');
});