Un código de webleb

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

11 June 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="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;
}

Un código de webleb

Recomendado

Un código de alejandrokundrah

Un código de lebdev

sitio web moderno

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

Un código de lebdev

sitio web moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS