Ein Code von bachir123

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

31 May 2025

<!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="styles.css">
  <script defer src="script.js"></script>
</head>
<body>
  <header>
    <div class="container">
      <h1>John Doe</h1>
      <p>Front-end Developer | JavaScript Enthusiast</p>
      <button id="theme-toggle">Toggle Dark Mode</button>
    </div>
  </header>

<section class="about">
    <div class="container">
      <h2>About Me</h2>
      <p>I'm a passionate front-end developer specializing in modern web technologies, including React, Vue, and TypeScript.</p>
    </div>
  </section>

<section class="skills">
    <div class="container">
      <h2>Skills</h2>
      <ul>
        <li>HTML, CSS, JavaScript</li>
        <li>React, Vue, Svelte</li>
        <li>TypeScript, Tailwind CSS</li>
        <li>API Integration, Firebase</li>
      </ul>
    </div>
  </section>

<section class="projects">
    <div class="container">
      <h2>Projects</h2>
      <div class="project-card">
        <h3>Portfolio Website</h3>
        <p>A personal website showcasing my work and blog.</p>
      </div>
      <div class="project-card">
        <h3>E-commerce App</h3>
        <p>A React-based online store with Stripe integration.</p>
      </div>
    </div>
  </section>

<section class="contact">
    <div class="container">
      <h2>Contact Me</h2>
      <p>Email: johndoe@example.com</p>
      <div class="social-links">
        <a href="#" target="_blank">GitHub</a>
        <a href="#" target="_blank">LinkedIn</a>
      </div>
    </div>
  </section>

</body>
</html>

CSS

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: #333;
  transition: background 0.3s, color 0.3s;
}

.container {
  width: 80%;
  margin: auto;
  text-align: center;
}

/* Header */
header {
  background: #0073e6;
  color: white;
  padding: 2rem 0;
}

header h1 {
  margin: 0;
}

#theme-toggle {
  background: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

/* Sections */
section {
  padding: 3rem 0;
}

.skills ul {
  list-style: none;
  padding: 0;
}

.skills li {
  display: inline-block;
  background: #0073e6;
  color: white;
  padding: 10px 15px;
  margin: 5px;
  border-radius: 5px;
}

.project-card {
  background: white;
  padding: 20px;
  margin: 10px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact .social-links a {
  margin: 0 10px;
  text-decoration: none;
  color: #0073e6;
}

/* Dark Mode */
.dark-mode {
  background: #333;
  color: white;
}

.dark-mode .project-card {
  background: #444;
}

.dark-mode #theme-toggle {
  background: #444;
  color: white;
}

Ein Code von bachir123

Empfohlen

Ein Code von alejandrokundrah

Ein Code von Mr. Duck

Ein Code von Mikey

HTML

CSS

JS

Empfohlen

Ein Code von alejandrokundrah

Ein Code von Mr. Duck

Ein Code von Mikey

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS