Un código de webleb

1316 codex

Abrir en el editor Video Publica tu código

Recomendado

16 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

21 October 2024

Juego de correspondencias de Halloween

2 October 2025

Fragmento de animación de carga de 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

Plantilla HTML para reproductor de juegos Flash Ruffle

Juego de correspondencias de Halloween

Fragmento de animación de carga de CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS