Un código de webleb

Abrir en el editor Publica tu código

Recomendado

3 July 2025

Desplazamiento Infinito de Etiquetas

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

Un código de webleb

Recomendado

Ruleta de decisiones

Un código de bachir123

Desplazamiento Infinito de Etiquetas

HTML

CSS

JS

Recomendado

Ruleta de decisiones

Un código de bachir123

Desplazamiento Infinito de Etiquetas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS