Un code par bachir123

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

28 March 2025

Cartes mobiles CodePen Home Outlined

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

Un code par bachir123

Recommandé

Cartes mobiles CodePen Home Outlined

Un code par toolify001

Un code de Mete

HTML

CSS

JS

Recommandé

Cartes mobiles CodePen Home Outlined

Un code par toolify001

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS