Um código por bachir123

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

3 June 2025

Um Código por alejandrokundrah

28 March 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;
}

Um código por bachir123

Recomendado

Um Código por alejandrokundrah

Um código por mcdonge13

Um Código por PNL

HTML

CSS

JS

Recomendado

Um Código por alejandrokundrah

Um código por mcdonge13

Um Código por PNL

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS