Ein Code von webleb

Im Editor öffnen Veröffentlichen Sie Ihren Code Brauchen Sie eine Website?

Empfohlen

16 September 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Developer Portfolio</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <div class="container">
      <h1>John Doe</h1>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

<section class="hero">
    <div class="container">
      <h2>Hello, I'm John — Web Developer</h2>
      <p>I build modern and responsive websites.</p>
    </div>
  </section>

<section id="about" class="section">
    <div class="container">
      <h2>About Me</h2>
      <p>I’m a passionate web developer with experience in HTML, CSS, JavaScript, and modern frameworks. I enjoy turning complex problems into simple, beautiful solutions.</p>
    </div>
  </section>

<section id="projects" class="section">
    <div class="container">
      <h2>Projects</h2>
      <div class="projects">
        <div class="project">
          <h3>Portfolio Website</h3>
          <p>A personal portfolio to showcase my work.</p>
        </div>
        <div class="project">
          <h3>Weather App</h3>
          <p>Built with JavaScript using OpenWeather API.</p>
        </div>
      </div>
    </div>
  </section>

<section id="contact" class="section">
    <div class="container">
      <h2>Contact</h2>
      <form>
        <input type="text" placeholder="Your Name" required />
        <input type="email" placeholder="Your Email" required />
        <textarea placeholder="Your Message" required>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
}

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

header {
  background: #222;
  color: #fff;
  padding: 1rem 0;
}

header h1 {
  display: inline-block;
  margin-right: 2rem;
}

nav ul {
  list-style: none;
  display: inline-block;
}

nav ul li {
  display: inline;
  margin-left: 1rem;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

.hero {
  background: #007acc;
  color: #fff;
  padding: 4rem 0;
  text-align: center;
}

.section {
  padding: 3rem 0;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.project {
  background: #fff;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

form {
  display: flex;
  flex-direction: column;
}

form input,
form textarea {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

form button {
  padding: 0.75rem;
  background: #007acc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

form button:hover {
  background: #005fa3;
}

footer {
  text-align: center;
  padding: 1rem 0;
  background: #222;
  color: white;
}

Ein Code von webleb

Empfohlen

Eine Skyline bauen

Ein Code von Mete

Ein Code von Landingpage1

HTML

CSS

JS

Empfohlen

Eine Skyline bauen

Ein Code von Mete

Ein Code von Landingpage1

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS