implement all said
parent
25f7c19a02
commit
2b0113b25b
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
|
|
@ -0,0 +1,331 @@
|
|||
/* =========================================
|
||||
Obai Albeek – Portfolio Styles (Dark)
|
||||
Palette: Onyx + Jade | v2
|
||||
========================================= */
|
||||
|
||||
/* ---------- CSS Variables ---------- */
|
||||
:root{
|
||||
--bg: #0E1116; /* Onyx (Seitenhintergrund) */
|
||||
--surface: #101721; /* Dunkle Card/Fläche */
|
||||
--surface-2: #0B111A; /* noch dunklere Fläche */
|
||||
--text: #E6E9EF; /* Primärtext hell */
|
||||
--muted: #A8B0BF; /* Sekundärtext */
|
||||
--line: rgba(255,255,255,.08);
|
||||
|
||||
--accent: #12B3A4; /* Jade/Türkis */
|
||||
--accent-ink: #061014; /* Text auf Akzent (dunkel, angenehmer als weiß) */
|
||||
|
||||
--radius: 22px;
|
||||
--shadow: 0 16px 40px rgba(0,0,0,.55);
|
||||
--shadow-sm: 0 8px 24px rgba(0,0,0,.45);
|
||||
|
||||
--container: 1100px;
|
||||
--space-1: .25rem;
|
||||
--space-2: .5rem;
|
||||
--space-3: .75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-7: 2rem;
|
||||
--space-8: 2.5rem;
|
||||
--space-9: 3rem;
|
||||
}
|
||||
|
||||
/* ---------- Reset & Base ---------- */
|
||||
*,
|
||||
*::before,
|
||||
*::after{ box-sizing: border-box; }
|
||||
html, body{ height: 100%; scroll-behavior: smooth; }
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(900px 600px at 20% -10%, #121925 0%, transparent 55%),
|
||||
radial-gradient(1100px 700px at 110% -20%, #0F1721 0%, transparent 60%),
|
||||
var(--bg);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
:focus-visible{
|
||||
outline: 3px solid color-mix(in oklab, var(--accent), white 15%);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.container{
|
||||
max-width: var(--container);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-7);
|
||||
}
|
||||
|
||||
/* ---------- Sticky Topbar (Nav rechts, Name links) ---------- */
|
||||
.topbar{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
display: flex; /* NEU: Flex-Layout */
|
||||
align-items: center;
|
||||
justify-content: space-between;/* sorgt dafür, dass Nav ganz rechts sitzt */
|
||||
padding: var(--space-4) var(--space-7);
|
||||
backdrop-filter: saturate(1.05) blur(8px);
|
||||
background: color-mix(in oklab, var(--bg), black 20% / 65%);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* Brand / Name links */
|
||||
.topbar .brand{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.brand-mark{
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 12px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
font-weight: 800;
|
||||
letter-spacing: .5px;
|
||||
box-shadow: 0 8px 20px color-mix(in oklab, var(--accent), black 65%);
|
||||
}
|
||||
.brand-text{
|
||||
color: var(--text);
|
||||
font-weight: 800;
|
||||
font-size: 1.08rem; /* Name deutlicher sichtbar */
|
||||
letter-spacing: .2px;
|
||||
}
|
||||
|
||||
/* Nav ganz rechts */
|
||||
.nav{
|
||||
margin-left: auto; /* bleibt als Absicherung */
|
||||
display: flex;
|
||||
gap: .6rem;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-link{
|
||||
--pad-x: 1rem;
|
||||
display: inline-block;
|
||||
padding: .55rem var(--pad-x);
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
background: rgba(255,255,255,.03);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.nav-link:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255,255,255,.06);
|
||||
border-color: rgba(255,255,255,.12);
|
||||
}
|
||||
.nav-link.cta{
|
||||
background: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 10px 26px color-mix(in oklab, var(--accent), black 58%);
|
||||
}
|
||||
|
||||
/* ---------- Hero ---------- */
|
||||
.hero{ padding: clamp(3rem, 5vw, 5rem) var(--space-7); }
|
||||
|
||||
.hero-card{
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1.4fr;
|
||||
gap: var(--space-8);
|
||||
align-items: center;
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(180deg, var(--surface) 0%, color-mix(in oklab, var(--surface), black 8%) 100%);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: clamp(1.25rem, 3vw, 2rem);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.hero-media{ position: relative; min-height: 240px; }
|
||||
|
||||
.hero-photo{
|
||||
position: absolute;
|
||||
inset: auto 0 0 50%;
|
||||
transform: translate(-50%, 18%) scale(1.02);
|
||||
width: min(320px, 78%);
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
border: 10px solid var(--surface);
|
||||
/* dezentes Teal-Glow */
|
||||
box-shadow:
|
||||
0 0 0 10px color-mix(in oklab, var(--accent), transparent 85%),
|
||||
0 26px 60px color-mix(in oklab, var(--accent), black 70%);
|
||||
background: #111;
|
||||
}
|
||||
|
||||
/* Textblock */
|
||||
.kicker{ margin: 0 0 .25rem 0; color: var(--muted); letter-spacing: .4px; }
|
||||
.title{
|
||||
margin: 0 0 .35rem 0;
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
line-height: 1.15;
|
||||
color: var(--text);
|
||||
}
|
||||
.subtitle{ margin: 0 0 var(--space-7) 0; color: var(--muted); }
|
||||
|
||||
/* ---------- Buttons ---------- */
|
||||
.btn{
|
||||
--px: 1.1rem;
|
||||
display: inline-block;
|
||||
padding: .75rem var(--px);
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
border: 1px solid transparent;
|
||||
transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover{ transform: translateY(-1px); }
|
||||
|
||||
.btn.primary{
|
||||
background: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
box-shadow: 0 10px 26px color-mix(in oklab, var(--accent), black 58%);
|
||||
}
|
||||
.btn.ghost{
|
||||
background: rgba(255,255,255,.04);
|
||||
color: var(--text);
|
||||
border-color: var(--line);
|
||||
}
|
||||
.btn.small{
|
||||
padding: .55rem .9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---------- Social ---------- */
|
||||
.social{ display:flex; gap:.5rem; margin:0; padding:0; list-style:none; }
|
||||
.iconlink{
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 40px; height: 40px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255,255,255,.03);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.iconlink:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(255,255,255,.06);
|
||||
}
|
||||
|
||||
/* ---------- Sections ---------- */
|
||||
.section{ padding: clamp(2.5rem, 5vw, 4rem) 0; scroll-margin-top: 90px; }
|
||||
.section h2{ font-size: clamp(1.6rem, 3.4vw, 2rem); margin: 0 0 var(--space-5) 0; }
|
||||
|
||||
/* About */
|
||||
.about .highlights{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: .5rem;
|
||||
padding: 0; margin: var(--space-6) 0 0 0;
|
||||
list-style: "✓ ";
|
||||
}
|
||||
.about .highlights li{ padding-left: .4rem; color: var(--text); }
|
||||
|
||||
/* Skills */
|
||||
.skills .skill-grid{
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.skill{
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: calc(var(--radius) - 6px);
|
||||
padding: var(--space-7);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.skill h3{ margin: 0 0 .35rem 0; }
|
||||
.skill p{ color: var(--muted); margin: 0; }
|
||||
|
||||
/* Projects */
|
||||
.project-list{
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.project-card{
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: calc(var(--radius) - 6px);
|
||||
padding: var(--space-7);
|
||||
display: grid;
|
||||
gap: .9rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.project-card .meta{ color: var(--muted); margin: .25rem 0 0 0; }
|
||||
.project-actions{ display: flex; gap: .5rem; }
|
||||
|
||||
/* Kontakt */
|
||||
.contact .contact-form{
|
||||
margin-top: var(--space-6);
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.field{ display: grid; gap: .35rem; }
|
||||
.field:nth-child(3){ grid-column: 1 / -1; }
|
||||
label{ font-weight: 700; color: var(--text); }
|
||||
input, textarea{
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: .85rem 1rem;
|
||||
font: inherit;
|
||||
background: #0A0F16;
|
||||
color: var(--text);
|
||||
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
|
||||
}
|
||||
input::placeholder, textarea::placeholder{ color: #8A93A5; }
|
||||
input:focus, textarea:focus{
|
||||
border-color: color-mix(in oklab, var(--accent), white 15%);
|
||||
box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), black 75%);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer{
|
||||
border-top: 1px solid var(--line);
|
||||
background: #0A0F16;
|
||||
padding: var(--space-6) 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width: 1000px){
|
||||
.hero-card{
|
||||
grid-template-columns: 1fr;
|
||||
padding-top: clamp(2rem, 6vw, 3rem);
|
||||
}
|
||||
.hero-photo{
|
||||
position: static;
|
||||
display: block;
|
||||
margin: -3.5rem auto 0 auto;
|
||||
transform: none;
|
||||
width: 180px;
|
||||
}
|
||||
.skills .skill-grid{ grid-template-columns: repeat(2, 1fr); }
|
||||
.project-list{ grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px){
|
||||
.nav{ display: none; } /* optional: auf sehr klein ausblenden */
|
||||
.container{ padding-inline: var(--space-5); }
|
||||
.project-list, .skills .skill-grid{ grid-template-columns: 1fr; }
|
||||
.contact .contact-form{ grid-template-columns: 1fr; }
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Obai Albeek | Portfolio</title>
|
||||
<title>Obai Albek | Portfolio</title>
|
||||
<meta name="description" content="Portfolio von Obai Albeek - Informatik Student, Java Entwickler, Webentwicklung (HTML, CSS, JavaScript, PHP).">
|
||||
<meta name="keywords" content="Obai Albeek, Portfolio, Informatik, Java, Webentwicklung, HTML, CSS, JavaScript, PHP, Projekte">
|
||||
<meta name="author" content="Obai Albeek">
|
||||
|
|
@ -14,91 +14,179 @@
|
|||
<meta property="og:url" content="https://deine-portfolio-url.com">
|
||||
<meta property="og:type" content="website">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<h1>Obai Albek</h1>
|
||||
<ul>
|
||||
<li>Home</li>
|
||||
<li>About</li>
|
||||
<li>Projects</li>
|
||||
<li>Contacts</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header>
|
||||
<div class="home">
|
||||
<p>Hello <span>.</span> </p>
|
||||
<p>_________ <span>I'm Obai Albek</span> </p>
|
||||
<p>And I'm a <span>Software Developer</span></p>
|
||||
<div class="social">
|
||||
<span class="facebook"></span>
|
||||
<span class="linkedin"></span>
|
||||
<span class="github"></span>
|
||||
<span class="instergramm"></span>
|
||||
</div>
|
||||
<div class="cv">
|
||||
<a href="#">Download my CV</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Sticky Topbar -->
|
||||
<header class="topbar" role="banner">
|
||||
<a class="brand" href="#home" aria-label="Start">
|
||||
<span class="brand-mark">OA</span><span class="brand-text">Obai Albeek</span>
|
||||
</a>
|
||||
|
||||
<main>
|
||||
<div class="about">
|
||||
<div class="skills">
|
||||
<p>Skills & journy</p>
|
||||
</div>
|
||||
<div class="aboutMe">
|
||||
<p>
|
||||
Hey there! I'm Obai Albeek, a computer science student based in Mannheim, Germany.
|
||||
I specialize in software development with a strong focus on <span>Java </span> and<span>object-oriented programming</span> , but I also enjoy working with <span>C, C++, Go, and JavaScript</span>.
|
||||
In addition, I have experience in <span>web development</span> using <span>HTML, CSS, JavaScript, PHP, and SQL</span>, and I like building both frontend and backend projects.
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a class="nav-link" href="#about">Über mich</a>
|
||||
<a class="nav-link" href="#skills">Skills</a>
|
||||
<a class="nav-link" href="#projects">Projekte</a>
|
||||
<a class="nav-link cta" href="#contact">Kontakt</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
I'm always curious to learn new technologies and apply them to real-world problems.
|
||||
My goal is to combine clean code with creative solutions to design applications that are both useful and user-friendly.
|
||||
</p>
|
||||
</div>
|
||||
<div class="programming">
|
||||
<p>Programminglangauge</p>
|
||||
<ul>
|
||||
<li>Java</li>
|
||||
<li>C++</li>
|
||||
<li>GO</li>
|
||||
<li>Haskel</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="webDeveloping">
|
||||
<p>Web Developing</p>
|
||||
<ul>
|
||||
<li>HTML5</li>
|
||||
<li>CSS3</li>
|
||||
<li>JavaScript</li>
|
||||
<li>React</li>
|
||||
<li>PHP</li>
|
||||
<li>JSON/XML</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="database">
|
||||
<p>Database</p>
|
||||
<ul>
|
||||
<li>SQL(MySQL/MariaDB)</li>
|
||||
<li>JPA/Hibernate</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tools">
|
||||
<p>Tools & DevOps</p>
|
||||
<ul>
|
||||
<li>Git</li>
|
||||
<li>Github</li>
|
||||
<li>Docker</li>
|
||||
<li>Linux</li>
|
||||
<li>Windows</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Hero Section (Card + Overlap Image) -->
|
||||
<main id="home" class="hero" role="main">
|
||||
<div class="hero-card" aria-labelledby="intro-title">
|
||||
<div class="hero-media">
|
||||
<!-- Bild-Link absichtlich leer lassen -->
|
||||
<img class="hero-photo" src="../assets/myPhoto.jpeg" alt="Porträt von Obai Albeek">
|
||||
</div>
|
||||
|
||||
<div class="hero-copy">
|
||||
<p class="kicker">Hallo, ich bin</p>
|
||||
<h1 id="intro-title" class="title">Obai Albek</h1>
|
||||
<p class="subtitle">
|
||||
Informatik-Student & Java-Entwickler · Web (HTML, CSS, JavaScript, PHP, JQuery, React)
|
||||
</p>
|
||||
|
||||
<div class="actions">
|
||||
<a class="btn primary" href="#projects">Mein Lebenslauf</a>
|
||||
<a class="btn ghost" href="#contact">Mit mir zusammenarbeiten</a>
|
||||
</div>
|
||||
|
||||
<ul class="social" aria-label="Social Links">
|
||||
<li><a class="iconlink" href="#" aria-label="E-Mail">@
|
||||
</a></li>
|
||||
<li><a class="iconlink" href="#" aria-label="GitHub">
|
||||
<span aria-hidden="true">GH</span>
|
||||
</a></li>
|
||||
<li><a class="iconlink" href="#" aria-label="LinkedIn">
|
||||
<span aria-hidden="true">in</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="section about">
|
||||
<div class="container">
|
||||
<h2>Über mich</h2>
|
||||
<p>
|
||||
Ich studiere Informatik an der TH Mannheim und baue saubere,
|
||||
wartbare Software. In Java fühle ich mich wie zu Hause
|
||||
(OOP, Collections, Streams). Im Web arbeite ich gern full-stack
|
||||
mit HTML/CSS/JS und PHP (+SQL).
|
||||
</p>
|
||||
<ul class="highlights">
|
||||
<li>Fokus: Java-Backend & Web-Apps</li>
|
||||
<li>Interesse: Datenstrukturen & Algorithmen mit Visualisierungen</li>
|
||||
<li>Team-Prozesse: Scrum, saubere Git-Workflows, Tests</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<section id="skills" class="section skills" aria-labelledby="skills-title">
|
||||
<div class="container">
|
||||
<h2 id="skills-title">Skills</h2>
|
||||
<div class="skill-grid">
|
||||
<article class="skill">
|
||||
<h3>Java</h3>
|
||||
<p>OOP, Streams, Collections, JDBC/JPA, Testing</p>
|
||||
</article>
|
||||
<article class="skill">
|
||||
<h3>Web</h3>
|
||||
<p>HTML5, CSS3, JavaScript (DOM, JSON), PHP, SQL</p>
|
||||
</article>
|
||||
<article class="skill">
|
||||
<h3>Tools</h3>
|
||||
<p>Git, Linux/Terminal, Docker-Grundlagen, Figma</p>
|
||||
</article>
|
||||
<article class="skill">
|
||||
<h3>Konzepte</h3>
|
||||
<p>REST, MVC, Architektur-Basics (Facade/Domain/Controller)</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Section -->
|
||||
<section id="projects" class="section projects" aria-labelledby="projects-title">
|
||||
<div class="container">
|
||||
<h2 id="projects-title">Ausgewählte Projekte</h2>
|
||||
|
||||
<div class="project-list">
|
||||
<article class="project-card">
|
||||
<div class="project-meta">
|
||||
<h3>Bibliotheksverwaltung (Java)</h3>
|
||||
<p class="meta">OOP · JDBC/JPA · MVC</p>
|
||||
</div>
|
||||
<p>Ausleihe/Retouren, Gebührenlogik, Admin-Zahlungen, Katalog.</p>
|
||||
<div class="project-actions">
|
||||
<a class="btn small" href="#" target="_blank" rel="noopener">Code</a>
|
||||
<a class="btn small ghost" href="#" target="_blank" rel="noopener">Demo</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="project-card">
|
||||
<div class="project-meta">
|
||||
<h3>Parking-Garage System (Java)</h3>
|
||||
<p class="meta">CLI · Gebühren · Nummernschilder</p>
|
||||
</div>
|
||||
<p>Simulation von Ein/Ausfahrt, Zeitstempel, E-Auto-Rabatt.</p>
|
||||
<div class="project-actions">
|
||||
<a class="btn small" href="#" target="_blank" rel="noopener">Code</a>
|
||||
<a class="btn small ghost" href="#" target="_blank" rel="noopener">Demo</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="project-card">
|
||||
<div class="project-meta">
|
||||
<h3>Learning-Website (Full-Stack)</h3>
|
||||
<p class="meta">HTML/CSS/JS · PHP · MySQL</p>
|
||||
</div>
|
||||
<p>Login, Kurse, Quiz, responsives Design, barrierearm.</p>
|
||||
<div class="project-actions">
|
||||
<a class="btn small" href="#" target="_blank" rel="noopener">Code</a>
|
||||
<a class="btn small ghost" href="#" target="_blank" rel="noopener">Live</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="section contact" aria-labelledby="contact-title">
|
||||
<div class="container">
|
||||
<h2 id="contact-title">Kontakt</h2>
|
||||
<p>Schreib mir deine Nachricht</p>
|
||||
|
||||
<form class="contact-form" action="#" method="post">
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="name" type="text" autocomplete="name" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email">E-Mail</label>
|
||||
<input id="email" name="email" type="email" autocomplete="email" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="msg">Nachricht</label>
|
||||
<textarea id="msg" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<button class="btn primary" type="submit">Nachricht senden</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer" role="contentinfo">
|
||||
<div class="container">
|
||||
<p>© <span id="year"></span> Obai Albeek · Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
<script>
|
||||
// kleines JS: Jahr automatisch
|
||||
document.getElementById('year').textContent = new Date().getFullYear();
|
||||
</script>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue