Un code par bachir123

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 January 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="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;
}

Un code par bachir123

Recommandé

Code CSS pour cartes animées

Un code par slowcode552

un site Web de plateforme

HTML

CSS

JS

Recommandé

Code CSS pour cartes animées

Un code par slowcode552

un site Web de plateforme

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS