Un código de webleb

1000 codex

Abrir en el editor Publica tu código

Recomendado

19 July 2025

Fragmento HTML de animación de texto 3D

28 July 2025

Burbuja de mensaje HTML con diseño SVG

15 May 2025

Plantilla de sitio web de comercio electrónico HTML CSS

HTML

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

Recomendado

Fragmento HTML de animación de texto 3D

Burbuja de mensaje HTML con diseño SVG

Plantilla de sitio web de comercio electrónico HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS