Un código de lebdev

Abrir en el editor Publica tu código

Recomendado

7 September 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Your Name | Portfolio</title>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet" />
</head>
<body>

<header class="hero">
    <div class="overlay"></div>
    <div class="hero-content">
      <h1>Hello, I'm <span>Your Name</span></h1>
      <p>Creative Developer & Designer</p>
      <a href="#portfolio" class="cta-btn">View My Work</a>
    </div>
  </header>

<section id="about" class="section">
    <div class="container">
      <h2>About Me</h2>
      <p>I design and build beautiful websites with passion and precision. My goal is to make digital experiences that are engaging and effective.</p>
    </div>
  </section>

<section id="portfolio" class="section">
    <div class="container">
      <h2>My Work</h2>
      <div class="grid">
        <div class="card"><img src="https://source.unsplash.com/600x400/?web" alt=""><div class="card-text">Project One</div></div>
        <div class="card"><img src="https://source.unsplash.com/601x400/?design" alt=""><div class="card-text">Project Two</div></div>
        <div class="card"><img src="https://source.unsplash.com/602x400/?code" alt=""><div class="card-text">Project Three</div></div>
      </div>
    </div>
  </section>

<section id="contact" class="section">
    <div class="container">
      <h2>Let's Work Together</h2>
      <p>Have a project in mind? Let's build something amazing.</p>
      <a href="mailto:your@email.com" class="cta-btn">Get in Touch</a>
    </div>
  </section>

<footer>
    <p>© 2025 Your Name. All rights reserved.</p>
  </footer>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #f9f9f9;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero {
  position: relative;
  height: 100vh;
  background: url('https://source.unsplash.com/1600x900/?technology,abstract') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.hero h1 span {
  color: #00c9a7;
}

.hero p {
  font-size: 1.3rem;
  margin-bottom: 20px;
}

.cta-btn {
  display: inline-block;
  padding: 12px 24px;
  background: #00c9a7;
  color: white;
  border-radius: 30px;
  font-weight: 600;
  transition: background 0.3s;
}

.cta-btn:hover {
  background: #00b197;
}

.section {
  padding: 80px 0;
  text-align: center;
}

.section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #222;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 40px;
}

.card {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  background: white;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.03);
}

.card img {
  width: 100%;
  display: block;
}

.card-text {
  padding: 15px;
  font-weight: 600;
  font-size: 1.1rem;
}

footer {
  text-align: center;
  padding: 20px 0;
  background: #222;
  color: #eee;
}

Un código de lebdev

Recomendado

Universo geocéntrico

Un código de alejandrokundrah

Un código de Metehan

HTML

CSS

JS

Recomendado

Universo geocéntrico

Un código de alejandrokundrah

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS